jquery 常用选择器介绍及用法

一，基本介绍

jQuery 选择器用于查找 DOM 元素，基于元素的 id、类、类型、属性、属性值等选择。以下是常用的 jQuery 选择器及其用法：

1. 基本选择器

   • $("#id")：选择ID为id的元素。
   • $(".class")：选择类为class的所有元素。
   • $("element")：选择所有element元素。
   • $("*")：选择文档中的所有元素。
   • $("#id, .class, element")：组合选择器，选择多个不同的元素。

2. 层级选择器

   • $("ancestor descendant")：选择ancestor元素的所有descendant后代元素。
   • $("parent > child")：选择parent元素的直接child子元素。
   • $("prev + next")：选择紧接在prev元素后面的next元素。
   • $("prev ~ siblings")：选择prev元素后面的所有siblings兄弟元素。

3. 属性选择器

   • $("element[attr]")：选择所有带有属性attr的element元素。
   • $("element[attr='value']")：选择属性attr值为value的element元素。
   • $("element[attr*='value']")：选择属性attr值包含value的element元素。
   • $("element[attr^='value']")：选择属性attr值以value开头的element元素。
   • $("element[attr$='value']")：选择属性attr值以value结尾的element元素。

4. 表单选择器

   • :input：选择所有<input>、<textarea>、<select>和<button>元素。
   • :text：选择所有单行文本框。
   • :password：选择所有密码框。
   • :radio：选择所有单选按钮。
   • :checkbox：选择所有复选框。
   • :submit：选择所有提交按钮。
   • :reset：选择所有重置按钮。
   • :button：选择所有按钮。
   • :file：选择所有文件域。

5. 过滤选择器

   • :first：选择第一个匹配的元素。
   • :last：选择最后一个匹配的元素。
   • :not(selector)：选择与selector不匹配的所有元素。
   • :even：选择索引为偶数的元素，从0开始计数。
   • :odd：选择索引为奇数的元素，从0开始计数。
   • :eq(index)：选择索引等于index的元素。
   • :gt(index)：选择索引大于index的元素。
   • :lt(index)：选择索引小于index的元素。
   • :header：选择所有标题元素，如<h1>、<h2>等。
   • :animated：选择所有正在执行动画的元素。

6. 内容选择器

   • :contains(text)：选择包含指定文本text的元素。
   • :empty：选择没有任何子元素（包括文本节点）的元素。
   • :has(selector)：选择含有选择器匹配元素的元素。
   • :parent：选择有子元素（包括文本节点）的元素。

7. 可见性选择器

   • :hidden：选择所有隐藏的元素。
   • :visible：选择所有可见的元素。

这些选择器可以单独使用，也可以组合使用，以实现更复杂的选择逻辑。例如，$("#myForm :input[type='text']:disabled")会选择ID为myForm的表单内所有禁用的文本输入框。

二，实例

以下是一些具体的例子，展示了如何使用不同的 jQuery 选择器：

1. 基本选择器

   • 选择ID为myDiv的元素：

     $("#myDiv");
     

   • 选择类为myClass的所有元素：

     $(".myClass");
     

   • 选择所有<p>元素：

     $("p");
     

   • 选择所有元素：

     $("*");
     

   • 选择ID为myDiv的元素和类为myClass的所有元素：

     $("#myDiv, .myClass");
     

2. 层级选择器

   • 选择<div>内的所有<p>元素：

     $("div p");
     

   • 选择<div>的直接子<p>元素：

     $("div > p");
     

   • 选择紧接在<div>后面的<p>元素：

     $("div + p");
     

   • 选择<div>后面的所有<p>兄弟元素：

     $("div ~ p");
     

3. 属性选择器

   • 选择所有带有data-src属性的<img>元素：

     $("img[data-src]");
     

   • 选择属性data-src值为example.jpg的<img>元素：

     $("img[data-src='example.jpg']");
     

   • 选择属性data-src值包含example的<img>元素：

     $("img[data-src*='example']");
     

   • 选择属性data-src值以example开头的<img>元素：

     $("img[data-src^='example']");
     

   • 选择属性data-src值以.jpg结尾的<img>元素：

     $("img[data-src$='.jpg']");
     

4. 表单选择器

   • 选择所有文本输入框：

     $(":text");
     

   • 选择所有密码框：

     $(":password");
     

   • 选择所有单选按钮：

     $(":radio");
     

   • 选择所有复选框：

     $(":checkbox");
     

   • 选择所有提交按钮：

     $(":submit");
     

5. 过滤选择器

   • 选择第一个<p>元素：

     $("p:first");
     

   • 选择最后一个<p>元素：

     $("p:last");
     

   • 选择索引为偶数的<tr>元素：

     $("tr:even");
     

   • 选择索引为奇数的<tr>元素：

     $("tr:odd");
     

   • 选择索引等于3的<tr>元素：

     $("tr:eq(3)");
     

   • 选择索引大于3的<tr>元素：

     $("tr:gt(3)");
     

   • 选择索引小于3的<tr>元素：

     $("tr:lt(3)");
     

6. 内容选择器

   • 选择包含文本“Hello”的<p>元素：

     $("p:contains('Hello')");
     

   • 选择没有任何子元素的<div>元素：

     $("div:empty");
     

   • 选择含有<span>元素的<div>元素：

     $("div:has(span)");
     

   • 选择有子元素的<div>元素：

     $("div:parent");
     

7. 可见性选择器

   • 选择所有隐藏的<input>元素：

     $(":hidden");
     

   • 选择所有可见的<input>元素：

     $(":visible");