jQuery中的选择器

文章共882个字 读完大约需要3分钟

基本选择器

1
2
3
4
5
6
7
8
9
10
// 选择所有的元素
$('*');
// id选择器
$('#id');
// 类名选择器
$('.class');
// 元素名称选择器
$('div');
// 并集选择器
$('div,#id');

层级选择器

1
2
3
4
5
6
7
8
// 选择body内的所有div元素.
$('body div');
// 在body内的选择元素名是div 的子元素.
$('body > div');
//选择所有紧跟着class为one元素后的div元素.
$('.one + div');
//选择id为two的元素后面的所有div兄弟元素.
$('#two ~ div');

基本过滤选择器

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
//选择第一个div元素.
$('div:first');
//选择最后一个div元素
$('div:last');

//选择class不为one的 所有div元素.
$('div:not(.one)');

//选择索引值为偶数的div元素.
$('div:even');
//选择索引值为奇数的div元素.
$('div:odd');
//选择索引等于3的元素.
$('div.eq(3)');
//选择索引大于3的元素.
$('div:gt(3)');
//选择索引小于3的元素.
$('div:lt(3)');

//选择所有的标题元素.比如h1, h2, h3等等...
$(':header');
//选择当前正在执行动画的所有元素.
$(':animated');
//选择当前获取焦点的所有元素.
$(':focus')

内容过滤选择器

1
2
3
4
5
6
7
8
//选取含有文本"di"的div元素.
$('div:contains(di)');
//选取不包含子元素(或者文本元素)的div空元素.
$('div:empty');
//选取含有子元素(或者文本元素)的div元素.
$('div:parent');
//选取含有class为mini元素的div元素.
$('div:has(.mini)');

可见性过滤选择器

1
2
3
4
//选取不可见(包括隐藏和display='none')的div的元素
$('div:hidden');
//选取所有可见的div元素
$('div:visible');

属性选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//选取含有属性title的div元素.
$('div[title]');
//选取属性title值等于test的div元素.
$('div[title=test]');
//选取属性title值不等于test的div元素.
$('div[title!=test]');
//选取属性title值以te开始的div元素.
$('div[title^=te]');
//选取属性title值以est结束的div元素.
$('div[title$=est]');
//选取属性title值含有es的div元素.
$('div[title*=es]');
//选取属性title等于en或以en为前缀(该字符串后跟一个连字符'-')的元素
$('div[title | ="en"]');
//选取属性title用空格分隔的值中包含字符uk的元素.
$('div[title~="uk"]');
//组合属性选择器,首先选取有属性id的div元素,然后在结果中选取属性title值含有es的元素.
$("div[id][title*=es]")

子元素过滤选择器

1
2
3
4
5
6
7
8
//选取每个父元素下的第2个子元素
$('div.one :nth-child(2)');
//选取每个父元素下的第一个子元素
$('div.one :first-child');
//选取每个父元素下的最后一个子元素
$('div.one :last-child');
//如果父元素下的仅仅只有一个子元素,那么选中这个子元素.
$('div.one :only-child');

表单选择器 | 表单对象属性过滤选择器

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
//匹配type='text'的元素.
$("#form :text");
//匹配type='password'的元素.
$("#form :password");
//匹配type='radio'的元素.
$("#form :radio");
//匹配type='chckbox'的元素.
$("#form :checkbox");

//匹配type='submit'的元素.
$("#form :submit");
//匹配type='image'的元素.
$("#form :image");
//匹配type='reset'的元素.
$("#form :reset");
//选中按钮(包括input type='button'和 button元素)
$("#form :button");
//匹配type='file'的元素.
$("#form :file");
//<input type="hidden" />和<div style="display:none">test</div>都可以匹配.
$("#form :hidden");

//匹配select的元素.
$("#form select");
//匹配textarea的元素.
$("#form textarea");
//匹配input的元素.
$("#form input");
//匹配所有input, textarea, select 和 button 元素
$("#form :input");

1
2
3
4
5
6
7
8
//对表单内可用input 赋值操作.
$("#form input:enabled");
//对表单内不可用input 赋值操作.
$("#form input:disabled");
//使用:checked选择器,来操作多选框.
$(":checkbox");
//使用:selected选择器,来操作下拉列表.
$("select :selected")

推荐文章

-->