jQuery原理-原型方法

jQuery原型上的属性

• jquery：jQuery版本号

  jquery: "1.124.0"
  

• selector：实例默认的选择器取值

  selector: ""
  

• length： 实例默认的长度

  length: 0
  

• push：给实例添加新元素

  push: [].push
  

• sort：对实例中的元素进行排序

   sort: [].sort
  

• splice：按照指定下标指定数量删除元素，也可以替换删除的元素

  splice: [].splice
  

push sort splice push为例:

1. [].push找到数组的push方法
2. 对象调用push方法，那么this就会指向jQuery对象
3. 相当于 [].push.apply(this);

jQuery原型上的方法

• toArray：把实例转换为数组返回

toArray: function () {
    return [].slice.call(this);
}

• get： 获取指定下标的元素，获取的是原生DOM

get: function (num) {
    // 没有传递参数 get方法如果不传递参数, 相当于调用toArray()
    if(arguments.length === 0){
        //
        return this.toArray();
    }
    // 传递的是正数
    else if(num >= 0){
        return this[num];
    }
    // 传递的是负数
    else{
        return this[this.length + num];
    }
},

• eq：获取指定下标的元素，获取的是jQuery类型的实例对象

eq: function (num) {
    // 没有传递参数
    if(arguments.length === 0){
        //返回一个空的jQuery对象
        return new xqQuery();
    }else{
        return xqQuery(this.get(num));
    }
},

• first：获取实例中的第一个元素，是jQuery类型的实例对象

first: function () {
    return this.eq(0);
}

• last：获取实例中的最后一个元素，是jQuery类型的实例对象

last: function () {
    return this.eq(-1);
}

• each：遍历实例，把遍历到的数据传给回调使用

  工具方法

  each: function (obj, fn) {
      //obj -> 遍历对象 fn -> 回调函数
      // 1.判断是否是数组
      if(xqQuery.isArray(obj)){
          for(let i = 0; i < obj.length; i++){ 
              let res = fn.call(obj[i], i, obj[i]);
              if(res === true){
                  continue;
              }else if(res === false){
                  break;
              }
          }
      }
      // 2.判断是否是对象
      else if(xqQuery.isObject(obj)){
          for(let key in obj){
              let res = fn.call(obj[key], key, obj[key]);
              if(res === true){
                  continue;
              }else if(res === false){
                  break;
              }
          }
      }
      return obj;
  }
  

  对象方法

  each: function (fn) {
  	return xqQuery.each(this, fn);
  }
  

• map

  遍历实例，把遍历到的数据传给回调使用，然后把回调的返回值收集起来组成一个新的数组返回

  map方法和each方法的区别

  1. each静态方法默认的返回值就是，遍历谁就返回谁
  2. map静态方法默认的返回值是一个空数组
  3. each静态方法不支持在回调函数中对遍历的数组进行处理
  4. map静态方法可以在回调函数中通过return对遍历的数组进行处理，然后生成一个新的数组返回

map: function (obj, fn) {
    let res = [];
    // 1.判断是否是数组
    if(xqQuery.isArray(obj)){
        for(let i = 0; i < obj.length; i++){
            let temp = fn(obj[i], i);
            if(temp){
                res.push(temp);
            }
        }
    }
    // 2.判断是否是对象
    else if(xqQuery.isObject(obj)){
        for(let key in obj){
            let temp =fn(obj[key], key);
            if(temp){
                res.push(temp);
            }
        }
    }
    return res;
}