jQuery选择器

参考：jQuery权威指南
jQuery初步
jQuery选择器
jQuery操作dom
jQuery操作dom事件
jQuery插件
jQuery操作Ajax
jQuery动画与特效
jQuery实现导航栏
jQuery实现点击式选项卡
jQuery实现select三级联动

1、基本选择器分类

选择器	功能	返回值
#ID	查找匹配ID的元素	单个元素
element	查找匹配元素名的所有元素	元素集合
.class	查询匹配的class元素	元素集合
*	匹配所有元素	元素集合
selector1,selectorN	将每一个选择器匹配到的元素合并后一起返回	元素集合

1.2、测试基本选择器

1
2
3
4
5
6
7
8
9
10
11
12
$( function (){
    //查找id="divOne"的元素
    $( "#divOne" ).css( "background" , "red" );
    //查找class="clsOne"的元素
    $( ".clsOne" ).css( "background" , "red" );
    //查找class="clsOne" 和class="clsFrame"的两个元素
    $( ".clsFrame .clsOne" ).css( "background" , "red" ); //两个class一起写不起作用，待验证
    //查找每个div下的span元素
    $( "div span" ).css( "background" , "red" );
    //查找id="divOne"元素，和span元素
    $( "#divOne,span" ).css( "background" , "red" );
});

2、层次选择器分类

选择器	功能	返回值
ancestor descendant	根据祖先元素匹配所有后代元素	元素集合
parent > child	根据父元素匹配所有子元素	元素集合
prev + next	匹配所有紧邻在prev后的next元素，也就是.next()方法	元素集合
prev ~ siblings	匹配prev元素后的所有siblings元素，也就是.nextAll()方法	元素集合

2.1、测试层次选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$( function (){
    //查找form的下的所有input元素，跟form同级的将不会获取到
    $( "form input" );

    //查找form的下的所有子级div元素：form是父元素，div是子元素，如果div下还有div将不会获取到
    $( "form > div" );

    //查找所有紧跟着label后面的input元素，如果input没有紧跟着label后面将不会获取到
    $( "label + input" ); //这个+号的可以用next方法代替，如下：
    $( "label" ).next( "input" );

    //查找所有跟form同级的input元素，如果是form里面的input将不会获取到
    $( "form ~ input" ); //这个~可以用siblings方法代替。如下：
    $( "form" ).siblings( "input" ); //跟上面是一样的效果

});

3、常用选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
$( function (){
    //一、基本过滤
    $( "li:first" ); //获取li中第一个元素
    $( "li" ).first(); //跟li:first同样的效果
    $( "li:last" ); //获取li中最后一个元素
    $( "li" ).last();
    //获取去除给定元素的所有元素
    $( "input:not(.checked)" ); //获取所有未选中的input
    //获取所有索引值为偶数的元素，从 0 开始计数
    $( "li:even" ).css( "background" , "red" ); //将所有偶数行的li背景色设为红色
    //获取所有索引值为奇数的元素，从 0 开始计数
    $( "li:odd" ).css( "background" , "green" ); //将所有奇数行的li背景色设为红色
    //获取给定索引值的元素
    $( "li:eq(1)" ); //获取li索引为1的元素，也就是第二个
    $( "li:gt(2)" ); //获取大于给定索引值的元素
    $( "li:lt(5)" ); //获取小于给定索引值的元素


    //二、内容过滤
    $( "div:contains('abc')" ); //查找所有div中包含abc的元素
    $( "div:empty" ); //查找所有没有子元素的div，或者div中内容为空的div
    $( "div:has(span)" ); //查找所有子元素中有span元素的div元素
    $( "div:parent" ); //查找有子元素的div元素，或者div内容不为空的div元素


    //三、可见性过滤
    $( "input:hidden" ); //查找所有隐藏的或者type="hidden"的input元素
    $( "input:visible" ); //查找所有显示的input元素


    //四、属性过滤选择器
    $( "div[id]" ); //查找包含id属性div元素，不用确定id的值。例如：<div id="aa"></div>
    $( "div[id='aa']" ); //查找包含id="aa"属性div元素，例如：<div id="aa"></div>
    $( "input[name!='username']" ); //查找所有name不等于username的input元素
    $( "input[name^='a']" ); //查找所有name的值以a开头的input元素
    $( "input[name$='a']" ); //查找所有name的值以a结尾的input元素
    $( "input[name*='a']" ); //查找所有name的值中包含a的input元素
    $( "input[id][name$='man']" ); //查找所有存在id属性，并且name是以man结尾的input元素


    //五、子元素过滤选择器
    $( "ul li:nth-child(2)" ); //查找所有ul中每个ul的第2个li元素
    $( "ul li:first-child" ); //查找每个ul中的第一个li元素
    $( "ul li:last-child" ); //查找每个ul中的最后一个li元素
    $( "ul li:only-child" ); //查找只有一个li元素的ul元素


    //六、表单对象属性过滤
    $( "input:enabled" ); //查找所有可用的input元素，也就是没有 disabled="disabled" 的元素
    $( "input:disabled" ); //查找所有不可用的元素，就是有disabled="disabled"属性 的元素
    $( "input:checked" ); //查找所有选中的checkbox元素
    $( "select option:selected" ); //查找所有选中的option元素

    //七、使用jQuery表单过滤选择器获取元素
    $( "#form1 :input" ); //获取form1中所有input元素：input textarea select
    $( "#form1 :text" ); //获取form1中所有text元素
    $( "#form1 :password" ); //获取form1中所有密码框
    $( "#form1 :radio" ); //获取form1中所有单选按钮
    $( "#form1 :checkbox" ); //获取form1中所有复选框
    $( "#form1 :image" ); //获取form1中所有图像按钮
    $( "#form1 :reset" ); //获取form1中所有重置按钮
    $( "#form1 :button" ); //获取form1中所有按钮
    $( "#form1 :submit" ); //获取form1中所有提交按钮
    $( "#form1 :file" ); //获取form1中所有file元素
    $( "#form1 :hidden" ); //获取form1中所有type="hidden"的元素

});

来自为知笔记(Wiz)