jQuery API之get、eq、find的使用和实现

get

• 参数：
  • index：元素索引
• 作用：
  1. 将jQ对象转换为DOM对象，并获取该DOM对象
• 说明：
  1. index为空、null，undfined，返回所有选中DOM对象
  2. index为正整数，返回从左至右索引index的DOM对象
  3. idnex为负整数，返回从右至左索引index的DOM对象
• code：

var $Demo = $('.demo');
// 获取第一个demo
var firstDemo =$Demo.get(0);
console.log(firstDemo); // 执行结果：输出

// 参数为null
var allDemo = $Demo.get(null);
console.log(allDemo); // 执行结果：输出[div.demo.demo1, div.demo.demo2, div.demo.demo3]

eq

• 参数：
  • index：元素索引
• 作用：
  1. 获取索引值对应的jQ对象
• 说明：
  1. 当参数为null, false时，获取索引为0的jQ对象
  2. index为正整数，返回从左至右索引index的jQ对象
  3. idnex为负整数，返回从右至左索引index的jQ对象
• code：

var $Demo = $('.demo');
// 获取第一个demo
var firstDemo =$Demo.eq(0);
console.log(firstDemo); // 执行结果：输出[div.demo.demo1, (忽略)prevObject: jQuery.fn.init(3)]
var allDemo = $Demo.eq(null);
console.log(allDemo); // 执行结果：输出[div.demo.demo1, (忽略)prevObject: jQuery.fn.init(3)]

find

• 参数：
  • selector字符串
• 作用：
  1. 在已有值的基础上，获取符合selector条件的jQ对象
• code：

var $Wrapper = $('.wrapper');
// 获取wrapper内类名为demo，并且为p标签的jQ对象
var $PDemo = $Wrapper.find('p.demo');
console.log($PDemo); // 执行结果：输出[p.demo.demo3, (忽略)prevObject: jQuery.fn.init(1)]

实现原理

get：

jQuery.prototype.myGet = function (num) {
    return num == null ? Array.prototype.slice.call(this) : (num >= 0 ? this[num] : this[num + this.length]);
};

eq：

jQuery.prototype.pushStack = function (dom) {
    dom.prevObject = this;
    return dom;
};

jQuery.prototype.myEq = function (num) {
    var dom == null ? null : (num >= 0 ? this[num] : this[num + this.length]);
    // this.pushStack为dom添加prevObject属性，值为作用域中的this，
    // 方便.end的链式调用
    // jQuery为jQ的构造函数，返回jQ对象
    return this.pushStack(jQuery(dom));
};