您的位置：360文档中心› jQuery选择器种类

jQuery选择器种类

合集下载
相关主题
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

jQuery选择器种类

由于经常使用jQuery，但是其中的很多选择器又不太能够熟练记牢使用，所以趁着上周有人分享，我再仔细的把jQuery的选择器过一遍，争取一次拿下，以后做到运用自如。jQuery选择器主要来分可以分为三种：（1）基本选择器（2）层次选择器（3）过滤选择器(4) 表单选择器

1、基本选择器

基本选择器主要就是比较常见和常用的集中，是必须要掌握的。

#ID id选择器返回一个对象$("#div")

.class类选择器返回集合$(".content")

Element 标签选择器返回集合$("input")

* 匹配所有元素返回集合$("*")

selector1,selector2,selector3,....合并每个选择器匹配的元素，返回集合$("#div,.class,input")

2、层次选择器（主要是选择层次下面的元素）

$("E F") 选择E元素中的所有F后代元素(注意：是子孙元素) 返回集合

$("P>C") 选择P元素下的C子元素（注意：是子元素）返回集合

$("P+N") 选择P元素后的相邻元素（即下一个兄弟元素），和$("P").next("N")方法执行效果相同

$("P~S") 选择P元素之后的所有S兄弟元素，和$("P").nextAll("S")方法执行效果相同，另pre()方法和next()方法相对。preAll()和nextAll()相对。

注意siblings()方法和nextAll()方法的区别：siblings()是所有前后的兄弟元素，nextAll()是所有后面的兄弟元素

第三和第四个选择器常常用后面的写法代替

3、过滤选择器（主要是按照后面的过滤条件取出前面的元素）

通过特定的过滤规则筛选DOM元素

格式::过滤规则(以冒号作为过滤条件)

分类：基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象过滤器

(1)基本过滤器

:first 选取第一个元素，$("div:first")

:last 选择最后一个元素，$("div:last")

:not(selector) 除了和选择器匹配元素之外的所有元素，$("input:not(.mytext)")

:even 索引是偶数的所有元素，$("tr:even")

:odd 索引是奇数的所有元素，$("tr:odd")

:eq(index),:gt(index),lt(index) 分别选择索引等于，大于和小于index的元素

:header 选择所有的标题元素，$(":header")如h1,h2,h3...

:animated 选择当前执行动画的元素，$("div:animated")

(2)内容选择器

:contains(text) 文本内容为text的元素，$("div:contains('Hello')")

:empty 不包含子元素和文本内容的空元素

:has(selector) 包含有匹配选择器的元素为子元素的元素，$("div:has(p)")

:parent 选择包含的子元素或者文本内容的元素

(3)可见性过滤器

:hidden 选择不可见的元素，$("div:hidden")

:visible 选择可见的元素，$("input:visible")

在可见性选择器中，需要注意选择器:hidden，它不仅包括样式属性display为"none"的元素，也包括文本隐藏域()和visibility:hidden之类的元素。

.show(3000) .hide(1000

(4)属性过滤器

通过元素的属性或者属性值选择元素

[attri] 选择拥有此属性的元素，$("div[id]")

[attri=value] 选择属性的值等于value的元素

[attri！=value] 属性的值不等于value的元素

[attri^=value] 属性的值以value开头的元素

[attri$=value] 属性的值以value结尾的元素

[attri*=value] 属性的值中含有value的元素

[selector1][selector2]…合并多个属性过滤器的结果

(5)子元素过滤器(是选择子类元素的)

:first-child 选择每个父元素的第一个子元素，$("ul li:first-child")

:last-child 选择每个父元素的最后一个子元素

:only-child 选择是父元素的唯一子元素

:nth-child(even) 选择每个父元素中索引是偶数的子元素

:nth-child(odd) 选择每个父元素中索引是奇数的子元素

:nth-child(index) 选择每个父元素中索引等于index的子元素，index有倍数形式，如3n,表示所有3的倍数，n=0,1,2…

(6)表单对象属性过滤选择器

:enabled 选择所有可用的表单元素，$("#form1 :enabled")

:disabled

:checked 选择所有被选中的单选按钮和复选框元素

:selected 选择所有下拉列表中被选中的选项元素

4、表单选择器

:input 选择所有表单元素，包括