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元素。