jQuery 如何獲取元素

window.jQuery = function(selector) {
  const elements = document.querySelectorAll(selector);
  return {
    addClass(className) {
      for (let i = 0; i < elements.length; i++) {
        elements[i].classList.add(className);
      }
      return this;
    }
  }
}

jQuery(選擇器)用於獲取對應的元素

• 但它卻不返回這些元素
• 相反，它返回一個物件，稱為jQuery構造出來的物件(簡稱jQuery物件)
• 這個物件可以操作對應的元素

jQuery(.test) 返回 當前的JQuery物件
jQuery(.test).addClass('yy') 操作：給所有.test元素加上class：yy
                             返回：this===jQuery(.test) ----當前的JQuery物件
jQuery(.test).addClass('yy').addClass('bb') 操作：給所有.test元素加上class：bb
                                            返回：this===jQuery(.test).addClass('yy') ----當前的JQuery物件
 

jQuery是一個不需要加new的建構函式

• jQuery()能構造一個物件，而且不用加new
• jQuery不是常規意義上的建構函式，這是因為jQuery用了一些技巧(目前沒必要知道)

window.$ = window.jQuery以後用$()就行
用$開頭的名字給JQuery物件命名！const $div=jQuery(.test)易於和普通DOM標籤區分！

jQuery 的鏈式操作是怎樣的

window.jQuery = function(selectorOrArray) {
  let elements;
  if (typeof selectorOrArray === "string") {
    elements = document.querySelectorAll(selectorOrArray);
  } else if (selectorOrArray instanceof Array) {
    elements = selectorOrArray;
  }
  return {
    oldApi: selectorOrArray.oldApi, //給JQuery物件加一個屬性，值為selectorOrArray的oldApi屬性
    find(selector) {
      let array = [];
      for (let i = 0; i < elements.length; i++) {
        array = array.concat(
          Array.from(elements[i].querySelectorAll(selector))
        );
      }
      array.oldApi = this; //先把當前的jQuery物件放到即將要成為新的elements的陣列中去，成為一個oldApi屬性
      return jQuery(array); //在返回 新建的 陣列的jQuery物件
    },
    end() {
      return this.oldApi;
    }, //this為陣列的JQuery物件了，他有個oldApi屬性，屬性值為selectorOrArray（也就是陣列）的屬性oldApi
    addClass(className) {
      for (let i = 0; i < elements.length; i++) {
        elements[i].classList.add(className);
      }
      return this;
    }
  }
}
//返回
api1=jQuery('.test')
api2=jQuery('.test').find('.children')
api2.end()//返回this的oldApi。
          //this===api2===當前的JQuery物件。
          //oldApi:selectorOrArray.oldApi=array.oldApi=(當時的this)=（當時的JQuery物件api2）
 

jQuery 常用API

建立

window.jQuery = function () {  
    console.log('我是jQuery')

1. 查

jQuery('#xxx)返回值並不是元素，而是一個api物件
jQuery(" #xxx').find('.red')查詢#xxx裡的.red元素
jQuery('#xxx').parent()獲取爸爸
jQuery('#xxx").children()獲取兒子
jQuery(' #xxx' ).siblings()獲取兄弟
jQuery(' #xxx ).index() 獲取排行老幾(從0開始)
jQuery(" #xxx' ).next()獲取弟弟
jQuery(' #xxx ).prev()獲取哥哥
jQuery(.red').each(fn)遍歷並對每個元素執行fn
jQuery('#xxx).get(index)獲取elements的下標為index的元素

2. 增

$('<div><span> 1</span></div> ).appendTo(...)把這串HTML加入...中
$('body')獲取document.body
$('body').append(div>l</div>) 新增小兒子
$('body ).append('<div>1</div>)更方便
$(' body ).prepend(div或$div)新增大兒子
$('#test').after(div或$div)添個弟弟
$('#test').before(div或$div)添個哥哥

3. 刪

$div.remove()
$div.empty()刪子元素

4. 改

$div.text(?)讀寫文字內容
$div.html(?)讀寫HTML內容
$div.attr('title',?)讀寫屬性
$div.css({color: 'red'})讀寫style // $div.style更好
$div.addClass('blue') / removeClass / hasClass
$div.on('click', fn)
$div.off('click, fn)

使用原型優化程式碼，節約記憶體：原始碼

window.$=window.jQuery = function(selectorOrArrayOrtemplat) {  //jQuery太長，用$代替
  let elements;
  if (typeof selectorOrArray === "string") {
    elements = document.querySelectorAll(selectorOrArray);
  } else if (selectorOrArray instanceof Array) {
    elements = selectorOrArray;
  }
  //加入共有屬性
  const api = Object.create(jQuery.prototype); //建立個名為api的物件，這個物件的__proto__為jQuery.prototype
                                               //相當於const api = {__proto__:jQuery.prototype}
  //加入自身屬性
  /*小白寫法
  api.elements = elements;
  api.oldApi = selectorOrArray.oldApi;
  */
  //大師寫法：Object.assign()表示把後面這些屬性一個一個的加入api物件
  Object.assign(api, {
    elements = elements,
    oldApi = selectorOrArray.oldApi
  })
  return api;
};
jQuery.fn = jQuery.prototype = {  //prototype太長，用fn代替
  //共有屬性
  constructor: jQuery, //必須得要，這是規定
  oldApi: selectorOrArray.oldApi,
  jquery: true,
  get(index){
      return this.elements[index];
  }
  find(selector) {},
  end() {},
  addClass(className) {},
  each(fn) {},
  parent() {},
  children() {},
  siblings() {},
  index() {},
  next() {},
  prev() {}
};

設計模式

不用new的建構函式，這個模式沒有專門的名字
$(支援多種引數)，這個模式叫做過載(一個函式支援的引數多種多樣)
用閉包隱藏細節，這個模式沒有專門的名字（生成一個變數一個函式去讀這個變數）
$div.text()即可讀也可寫，getter / setter
$.fn``是$.prototype的別名，這叫別名
jQuery針對不同瀏覽器使用不同程式碼，這叫介面卡模式

參考：

阮一峰
jQuery API 中文文件