jQuery選擇器有哪些技巧

jQuery選擇器是用于在HTML文檔中選取元素的一種強大工具。以下是一些使用jQuery選擇器的技巧：

基本選擇器

1. 標簽選擇器：

   $('p'); // 選擇所有<p>元素
   

2. ID選擇器：

   $('#myId'); // 選擇ID為myId的元素
   

3. 類選擇器：

   $('.myClass'); // 選擇所有class為myClass的元素
   

4. 通配符選擇器：

   $('*'); // 選擇所有元素
   

5. 組合選擇器：

   $('div, p'); // 選擇所有<div>和<p>元素
   

層次選擇器

1. 后代選擇器：

   $('div p'); // 選擇所有在<div>內的<p>元素
   

2. 子代選擇器：

   $('div > p'); // 選擇所有直接在<div>下的<p>元素
   

3. 相鄰兄弟選擇器：

   $('h1 + p'); // 選擇緊跟在<h1>后的第一個<p>元素
   

4. 通用兄弟選擇器：

   $('h1 ~ p'); // 選擇在<h1>之后的所有<p>元素
   

過濾選擇器

1. :first：

   $('li:first'); // 選擇第一個<li>元素
   

2. :last：

   $('li:last'); // 選擇最后一個<li>元素
   

3. :eq(index)：

   $('li:eq(2)'); // 選擇索引為2的<li>元素（索引從0開始）
   

4. :contains(text)：

   $('p:contains("Hello")'); // 選擇包含文本"Hello"的<p>元素
   

5. :has(selector)：

   $('div:has(p)'); // 選擇包含<p>元素的<div>元素
   

6. :not(selector)：

   $('p:not(.myClass)'); // 選擇不包含class為myClass的<p>元素
   

7. :hidden 和 :visible：

   $('input:hidden'); // 選擇所有隱藏的<input>元素
   $('input:visible'); // 選擇所有可見的<input>元素
   

8. :checked、:selected 和 :disabled：

   $('input:checked'); // 選擇所有選中的<input>元素
   $('option:selected'); // 選擇所有選中的<option>元素
   $('button:disabled'); // 選擇所有禁用的<button>元素
   

屬性選擇器

1. [attribute]：

   $('input[name="username"]'); // 選擇name屬性為"username"的<input>元素
   

2. [attribute=value]：

   $('input[name="username"][type="text"]'); // 選擇name屬性為"username"且type屬性為"text"的<input>元素
   

3. [attribute!=value]：

   $('input[name!="username"]'); // 選擇name屬性不為"username"的<input>元素
   

4. [attribute^=value]：

   $('input[name^="user"]'); // 選擇name屬性以"user"開頭的<input>元素
   

5. [attribute$=value]：

   $('input[name$="er"]'); // 選擇name屬性以"er"結尾的<input>元素
   

6. [attribute=value]*：

   $('input[name*="man"]'); // 選擇name屬性包含"man"的<input>元素
   

表單選擇器

1. :input：

   $(':input'); // 選擇所有表單輸入元素
   

2. :text、:password、:radio、:checkbox、:submit、:reset、:button、:file：

   $('input:text'); // 選擇所有文本輸入框
   

3. :enabled、:disabled、:checked、:selected：

   $('input:enabled'); // 選擇所有啟用的輸入框
   $('input:disabled'); // 選擇所有禁用的輸入框
   

其他有用的技巧

• 鏈式調用：可以在一個jQuery對象上連續調用多個方法。

  $('#myId').addClass('highlight').slideDown();
  

• 上下文選擇器：可以在選擇器中指定一個上下文，限制搜索范圍。

  $('.myClass', '#myParentId'); // 在#myParentId內查找.myClass元素
  

• 偽類選擇器：可以使用CSS偽類來進一步篩選元素。

  $('a:hover'); // 選擇鼠標懸停時的<a>元素
  

• 自定義選擇器：可以通過$.expr[':']添加自定義選擇器。

  $.expr[':']['custom'] = function(elem, index, match) {
      return $(elem).data('custom') === match[3];
  };
  $('div:custom("value")'); // 使用自定義選擇器
  

通過熟練掌握這些技巧，你可以更高效地使用jQuery選擇器來操作DOM元素。