jQuery选择器详解编程语言

1、基本选择器

名称 返回值 说明
#myid jQuery对象 匹配一个id为myid的元素
element jQuery对象 数组 匹配所有的element元素
.myclass jQuery对象 数组 匹配所有的class为myclass的元素
* jQuery对象 数组 匹配文档中所有的元素，包括html、head、body/
selector1…selectorN jQuery对象 数组 匹配所有满足selector1、selector2或selectorN的元素

2、层次选择器

名称 返回值 说明
elemenParent elementChild jQuery对象 数组 匹配elementParent下的所有子元素elementChild。如：
$( div p )选择所有div下的p元素
elemenParent elementChild jQuery对象 数组 匹配elementParent下的子元素elementChild。如：
$( div p )选择所有上级元素为div的p元素
prev+next jQuery对象 数组 匹配prev统计之后紧邻的元素next
prev~siblings jQuery对象 数组 匹配prev同级之后所有平级的元素siblings

3、基本滤镜选择器

例如:
名称 返回值 说明
:first jQuery对象 匹配第一个元素
:empty jQuery对象 数组 匹配所有没有子元素(包括文本内容)的元素
都是以冒号开始的
详细划分起来，可以分为
位置滤镜选择器：:first、:last、:even、:odd、:eq(index)、:gt(index)以及:lt(index)
隐藏显示滤镜选择器：:empty、:parent、:hidden以及:visible
内容限制过滤选择器：:contains(text)、:has(selector)、:not(selector)、:header以及:animated
调用方式： $( div.test:contains( Lorem ) ).addClass( green );

3、子元素滤镜选择器

主要有四种形式：
名称 返回值 说明
E:nth-child(index/even/odd/equation) jQuery对象 数组 匹配所有E在其父元素下满足(index/even/odd/equation)条件的集合
注：下表从1开始，括号中各个选项中一次只能选择一个，equation是一个表达式
E: first-child jQuery对象 数组 如匹配所有E在其父元素下是第一个子元素的集合
E: last-child jQuery对象 数组 如匹配所有E在其父元素下是最后一个子元素的集合
E: only-child jQuery对象 数组 如匹配所有E是其父元素的唯一子元素的集合
调用方式： $( ul li:first-child ).addClass( green );
4、表单滤镜选择器
略

5、属性滤镜选择器

名称 返回值 说明
[attribute] jQuery对象 数组 匹配拥有attribute属性的元素
[attribute=value] jQuery对象 数组 匹配属性attribute为value的元素
[attribute!=value] jQuery对象 数组 匹配属性attribute不为value的元素
[attribute^=value] jQuery对象 数组 匹配属性attribute的值以value开始的元素
[attribute$=value] jQuery对象 数组 匹配属性attribute的值以value结尾的元素
[attribute*=value] jQuery对象 数组 匹配属性attribute的值包含value的元素

调用方式：$( input[class] ).addClass( red );
还有使用效果叠加的方式：
$( input[class][name=firstname] ).addClass( green );

原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/16479.html