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));
};
複製代碼