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：

    <div class="demo demo1"></div>
    <div class="demo demo2"></div>
    <div class="demo demo3"></div>
复制代码

    var $Demo = $('.demo');
  
    // 获取第一个demo
    var firstDemo =$Demo.get(0);
    console.log(firstDemo); // 执行结果：输出<div class="demo demo1"></div>
  
    // 参数为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：

    <div class="demo demo1"></div>
    <div class="demo demo2"></div>
    <div class="demo demo3"></div>
复制代码

    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：

    <div class="wrapper">
        <div class="demo demo1"></div>
        <span class="demo demo2"></span>
        <p class="demo demo3"></p>
    </div>
复制代码

    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));
};
复制代码