jquery常用选择器

一、基本选择器

1. id选择器，如选择id为btn的元素

$("#btn")

2.class选择器，如选择class为light的元素

$(".class")

3.标签选择器，如选择名字为input的所有元素

$(“input”)

5.选择所有元素

$("*")

6.其他选择器，如选择标签名为span和id为one的所有元素

$(“span,#one”)

二、层次选择器

1.选择body中所有的div元素

$(“body div”)

2.选择body中子元素是div的元素

$(“body > div”)

3.选择id为one的下一个div元素(紧邻的下一个)

$("#one + div")

4.选择id为one的元素后面的所有div元素

$("#one ~ div")

5.选择id为one的元素所有div兄弟元素

$("#one").siblings(“div”)

6.选择id为one的下一个span元素

$("#one").nextAll(“span:first”)

7.选择id为one的元素前边所有的div兄弟

$("#one").prevAll(“div”)

三、基本过滤选择器

1.选择第一个div元素

$(“div:first”)

2.选择最后一个div元素

$(“div:last”)

3.选择class不为one的所有div元素

$(“div:not(.one)”)

4.选择索引值为偶数的div元素

$(“div:even”)

5.选择索引值为奇数的div元素

$(“div:odd”)

6.选择索引值为大于3的div元素

$(“div:gt(3)”)

7.选择索引值为等于3的div元素

$(“div:eq(3)”)

8.选择索引值为小于3的div元素

$(“div:lt(3)”)

9.选择所有的标题元素

$(":header")

10.选择当前正在执行动画的所有元素

$(":animated")

四、内容过滤选择器

1.选择含有文本‘di’的div元素

$(“div:contains(‘di’)”)

2.选择不包含子元素(或者文本元素)的div空元素

$(“div:empty”)

3.选择含有class为one元素的div元素

$(“div:has(.one)”)

4.选择含有子元素(或者文本元素)的div元素

$(“div:parent”)

五、可见性过滤选择器

1.选择所有可见的div元素

$(“div:visible”)

2.选择所有不可见的div元素

$(“div:hidden”)

3.选择所有不可见的input元素

$(“input:hidden”)

六、属性过滤选择器

1.选择含有属性title的div元素

$(“div[title]”)

2.选择属性title值等于‘test’的div元素

$(“div[title=‘test’]”)

3.选择属性值不等于‘test’的div元素(没有属性title的也将被选中)

$(“div[title!=‘test’]”)

4.选择属性title值以‘te’开始的div元素

$(“div[title^=‘te’]”)

5.选择属性title值以’est’结束的div元素

$("div[title$=‘est’]")

6.选择属性title值含有‘es’的div元素

$(“div[title*=‘es’]”)

7.组合属性选择器，首先选取有属性id的div元素，然后在结果中选取属性title值含有‘es’的div元素

$(“div[id][title*=‘es’]”)

8.选取含有title属性值，且title属性值不等于test的div元素

$(“div[title][title!=‘test’]”)

七、子元素过滤选择器

1.选取每个class为one的div父元素下的第2个子元素

$(".one :nth-child(2)")

2.选取每个class为one的div父元素下的第一个子元素

$(".one :first-child")

3.选取每个class为one的div父元素下的最后一个子元素

$(".one :last:child")

4.如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素

$(".one :only-child")

八、表单元素过滤选择器

1.对表单内可用input赋值

$(":text:enabled").val(“hello”)

2.对表单内不可用input赋值

$(":text:disabled").val(“world”)

3.获取多选框选中的个数

$(":checkbox[name=‘sel’]:checked").length

4.获取多选框选中的内容

$(":checkbox[name=‘sel’]:checked").each(function(){

alert(this.value);

})

5.获取下拉框选中的内容

// 实际被选择的不是select，所以要加空格；each内部的this是一个DOM对象，而不是jQuery对象

$(“select :selected”).each(function(){

alert(this.value)

})

九、表单选择器

$(":input")

$(":text")
————————————————
版权声明：本文为CSDN博主「JamesZYW」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zhanyouwen/article/details/51585519