技術標籤：jquery on方法原理

jQuery 學習小結

相較於原生 JS，jQuery 通過 API 介面寫更少的程式碼，做更多的事情。雖然這個元老級別的技術庫的使用率已經漸漸在減少了，不過了解其原理和用法還是很有用的。

jQuery 之選擇元素

let div = document.querySelector('#div')
let $div = $('#div');
console.log('div:')
console.log(div)
console.log('$div:')
console.log($div)

假設頁面有一個id='div'的元素，div是一個 DOM 物件，而$div

jQuery 返回的不是被選擇 DOM 元素，而是返回一個 jQuery 物件，這個物件的原型中有許多封裝好的函式（如on、has等），使用者可以通過所提供的 API 介面呼叫。

jQuery 之過濾器

jQuery 提供的過濾器介面可以篩選出符合條件的 DOM 元素並對其進行封裝。

<ul>
  <li id="item1">list item 1</li>
  <li id="item2">list item 2</li>
  <ul>
    <li>list item 2-a</li>
    <li>list item 2-b</li>
  </ul>
  <li id="item3">list item 3</li>
  <li id="item4">list item 4</li>
  <li id="item5">list item 5</li>
  <li id="item6">list item 6</li>
</ul>
 

假設有如上 html 片段

$("li").filter(":even"); // 選擇索引為奇數的li元素
$("li").has("ul"); // 選擇包含ul元素的li元素
$("li").first(); // 選擇第一個li元素

jQuery 之元素增刪改查

仍以上面 html 片段為例

$("#item1").after($("<span>span</span>")); // 插入
$("#item2").after($("#item3")); // 移動
$("#item4").remove(); // 刪除
$("#item5").replaceWith("<div>div</div>"); // 修改
$("#item6").addClass("haha"); // 新增類
$("#item2").$("li").first().css("color", "red"); // 設定樣式
 

得到的結果

<ul>
  <li id="item1">list item 1</li>
  <span>span</span>
  <li id="item3">list item 3</li>
  <li id="item2">list item 2</li>
  <ul>
    <li>list item 2-a</li>
    <li>list item 2-b</li>
  </ul>
  <div>div</div>
  <li id="item6" class="haha">list item 6</li>
</ul>

更多 API 檢視文件

jQuery 之鏈式操作

呼叫 jQuery 物件方法後返回的又是一個 jQuery 物件從而可以繼續對這個返回後的物件進行操作。 如上例子$('#item2').$('li').first().css('color', 'red');

jQuery 之取值與賦值

jQuery 函式的引數可以決定操作或讀或寫。

$("#item1").html(); // 取值。list item 1
$("#item3".html("ayaya")); // 賦值。<li id="item3">ayaya</li>