jQuery的静态方法

2020-01-28  本文已影响0人  David_Rao
  1. 什么是静态方法
  2. jQuery常用静态方法
  • each()
  • map()
  • trim()、isArray()、isFunction()、isWindow()
  • holdReady

1. 什么是静态方法?

// 1. 定义一个类
function Class() {
}
// 2. 通过类名直接添加的方法就是静态方法
Class.staticMethod = function() {
    alert("staticMethod");
};
// 3. 静态方法通过类名直接调用
Class.staticMethod();

与实例方法的区别

// 实例方法的添加
Class.prototype.instanceMethod = function() {
    alert("instanceMethod");
}
// 实例方法需要通过类的实例,即对象,来调用
var obj = new Class();
obj.instanceMethod();

2. jQuery常用静态方法

2.1 each()

2.1.1 原生js中的foreach()

  1. 回调函数第一个参数:遍历到的键值对中的值(元素)
  2. 回调函数第二个参数:遍历到的键值对中的键(索引)
  3. foreach()只能遍历数组,不能遍历伪数组
var arr = [1, 3, 5, 7, 9];
arr.forEach(function(value, index) {
    console.log(index, value);
})

2.1.2 jQuery中的each()

  1. 回调函数第一个参数:遍历到的键值对中的键(索引)
  2. 回调函数第二个参数:遍历到的键值对中的值(元素)
  3. each()既可以遍历真数组,也能遍历伪数组
// 真数组
var arr = [1, 3, 5, 7, 9];
// 伪数组
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
$.each(arr, function (index, value) {
    console.log(index, value);
});
$.each(obj, function (index, value) {
    console.log(index, value);
});

2.2 map()

2.2.1 原生js中的map()

  1. 回调函数第一个参数:当前遍历到的元素
  2. 回调函数第二个参数:当前遍历到的索引
  3. 回调函数第三个参数:当前被遍历的数组
  4. 不能遍历伪数组
var arr = [1, 3, 5, 7, 9];
arr.map(function (value, index, array) {
    console.log(index, value, array);
});

2.2.2 jQuery中的map()

  1. 第一个参数: 要遍历的数组(伪数组)
  2. 第二个参数:回调函数
  3. 回调函数第一个参数:值(元素)
  4. 回调函数第二个参数:键(索引)
  5. 可以遍历伪数组
// 真数组
var arr = [1, 3, 5, 7, 9];
// 伪数组
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
$.map(arr, function (value, index) {
    console.log(index, value);
});
$.map(obj, function (value, index) {
    console.log(index, value);
});

2.2.3 each()和map()的区别

  1. each默认返回值:遍历谁就返回谁
  2. map默认返回值:空数组
  3. map可以通过return,自定义返回值,而each不能
var res1 = $.each(obj, function (index, value) {
    console.log(index, value);
});
var res2 = $.map(obj, function (value, index)  {
    console.log(index, value);
})

console.log(res1);  // [1, 3, 5, 7, 9]
console.log(res2);  // []

var res3 = $.map(obj, function (value, index)  {
    console.log(index, value);
    return value * 3;
})

console.log(res3);  // [3, 9, 15, 21, 27]

2.3 trim()、isArray()、isFunction、isWindow()

  1. trim() 去除字符串两端的空格
  2. isArray() 判断传入的对象是否为数组对象
  3. isFunction() 判断传入的对象是否为window对象
  4. isWindow() 判断传入的对象是否为window对象
var str = "     hello world     ";
console.log($.trim(str));  //hello world
// 数组对象
var arr = [1, 3, 5, 7, 9];
// 函数对象
var fn = function() {};
// window对象
var w = window;

console.log($.isArray(arr));   // true
console.log($.isFunction(fn));  // true
console.log($.isWindow(w));  // true
  1. 可以验证,jQuery对象本质是一个匿名函数
console.log($.isFunction(jQuery));  // true

2.4 holdReady

  1. $.holdReady(true) 暂停所有ready函数
  2. $.holdReady(false) 开启所有ready函数
<script>
    $.holdReady(true)  // true暂停所有ready函数
    $(document).ready(function () {
        alert("ready");
    })
</script>
<script>
    var btn = document.getElementsByTagName("button")[0];
    btn.onclick = function () {
        $.holdReady(false)  // false开启所有ready函数
    }
</script>
上一篇下一篇

猜你喜欢

热点阅读