关于 jQuery 选择器

浏览数：21 / 时间：2015年06月09日

此文仅为自己记忆 jQuery 选择器的使用

1. 基本选择器

1 $("#a")            // 获取 id 为 a 的元素
2 $(".a")             // 获取 class 为 a 的元素
3 $("div")           // 获取元素名为 <div> 的所有元素
4 $("*")             // 获取所有元素
5 $("div, #a")    // 获取元素名为<div>的所有元素和 id 为 a 的元素

View Code

2. 层次选择器

1 $("div a")            // 获取所有 div 内的所有 a 元素
2 $("div > a")        // 获取所有 div 内的所有子 a 元素
3 $(" .class + div") // 获取 class 为 class 的下一个 div 同辈元素
4 $("#id ~ div")     // 获取 id 为 id 的元素后面所有 div 同辈元素

View Code

3. 过滤选择器

 1 $("div:first")            // 获取第一个 div 元素
 2 $("div:last")            // 获取最后一个 div 元素
 3 $("div:not(.one)")    // 获取 class 不为 one 的 div 元素
 4 $("div:even")           // 获取 索引值 为偶数的 div 元素
 5 $("div:odd")             // 获取 索引值 为奇数的 div 元素
 6 $("div:eq(3)")          // 获取 索引值 等于 3 的 div 元素
 7 $("div:gt(3)")           // 获取 索引值 大于 3 的 div 元素
 8 $("div:lt(3)")            // 获取 索引值 小于 3 的 div 元素
 9 $(":header")            // 获取 所有的标题元素，如<h1>,<h2>,<h3>...这些元素
10 $(":animated")         // 获取当前正在执行动画的元素
11 $(":focus")               // 获取当前获取焦点的元素

View Code

4. 内容过滤选择器

1 $("div:contains(di)")                // 获取含有文本 “di" 的 div 元素
2 $("div:empty")                        // 获取不包含子元素（包括文本）的 div 元素
3 $("div:has(‘.mini‘)")                 // 获取含有 class 为 mini 元素的 div 元素
4 $("div:parent")                        // 获取含有子元素（包含文本）的 div 元素

View Code

5. 可见性过滤选择器

1 $("div:visible")                    // 获取所有可见的 div 元素
2 $("div:hidden")                   // 获取隐藏的 div 元素

View Code

6. 属性过滤选择器

1 $("div[title]")                // 获取含有属性 title 的 div 元素
2 $("div[title=test]")        // 获取属性 title 值等于 test 的 div 元素
3 $("div[title!=test]")       // 获取属性 title 值不等于 test 的 div 元素
4 $("div[title^=te]")         // 获取属性 title 值以"te"开始的 div 元素
5 $("div[title$=est]")        // 获取属性 title 值以"est"结束的 div 元素
6 $("div[title*=es]")         // 获取属性 title 值含有"es" 的 div 元素
7 $("div[id][title*=es]")    // 获取含有属性 id，并且属性 title 含有"es"的 div 元素

View Code

1 $(‘div[title^="en"]‘)                // 获取属性 title 值以“en”开始的 div 元素
2 $(‘div[title*="en"]‘)                // 获取属性 title 值含有“en" 的 div 元素
3 $(‘div[title|="en"]‘)                 // 获取属性 title 等于en或以en为前缀（该字符串后跟一个连接符‘-’）的 div 元素
4 $(‘div[title~="uk"]‘)                // 获取属性 title 用空格分隔的值中包含字符 uk 的 div 元素

View Code

7. 子元素过滤选择器

$("div.one :nth-child(2)")        　　// 获取每个class为one的div父元素下的第2个子元素
$("div.one :first-child")            // 获取每个class为one的div父元素下的第1个子元素
$("div.one :last-child")             // 获取每个class为one的div父元素下的最后一个子元素
$("div.one :only-child")             // 获取每个class为one的div父元素下只有一个子元素的元素

8. 表单对象属性过滤选择器

// 改变表单内可用 <input> 元素的值
$("#form1 input:enabled").val("这里变化！");

// 改变表单内不可用<input>元素的值
$("#form1 input:disabled").val("这里变化！");

// 获取多选框中的个数
$("input:checked").length;

// 获取下拉框选中的内容
$("select :selected").text();