jquery selector

jquery选择器的优势：

(1) 代码更简单；

(2) 完善的检测机制。

 

根据所获取页面中元素的不同，可以将jquery选择器分为：

基本选择器、

层次选择器、

过滤选择器、

表单选择器。

 

其中，过滤选择器又可分为：

简单过滤选择器、

内容过滤选择器、

可见性过滤选择器、

属性过滤选择器、

子元素过滤选择器、

表单对象属性过滤器。

 

一、基本选择器

基本选择器是jquery中使用最频繁的选择器，它由元素id、class、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找。

#id：根据给定的id匹配一个元素，返回单个元素；

element：根据给定的元素名匹配所有元素，返回元素集合；

.class：根据给定的类匹配元素，返回元素集合；

*：匹配所有元素，返回元素集合；

selector1，selector2：将每一个选择器匹配到的元素合并后一起返回，返回元素集合。

 

二、层次选择器

层次选择器通过dom元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素。

ancestor descedant：根据祖先元素匹配所有的后代元素，返回元素集合；

parent>child：根据父元素匹配所有的子元素，返回元素集合；

prev+next：匹配所有紧接在prev元素后的相邻元素，返回元素集合；

prev~siblings：匹配prev元素之后的所有兄弟元素，返回元素集合；

注意：ancestor descedant与parent>child所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外，prev+next可以使用.next()代替，而prev~siblings可以使用nextAll()代替。

siblings()方法与选择器prev~slblings区别在于，前者获取全部的相邻元素，不分前后，而后者仅获取标记后面全面相邻元素，不能获取前面部分。

 

三、过滤选择器

1、简单过滤选择器

first()或:first，获取第一个元素；

last()或:last，获取最后一个元素；

:not(selector)，获取除给定选择器外的所有元素；

:even，获取所有索引值为偶数的元素，索引号从0开始； 

:odd，获取所有索引值为奇数的元素，索引号从0开始；

:eq(index)，获取指定索引值的元素，索引号从0开始；

:gt(index)，获取所有大于给定索引值的元素，索引号从0开始；

:lt(index)，获取所有小于给定索引值的元素，索引号从0开始；

:header，获取所有标题类型的元素，如h1、h2.....；

:animated，获取正在执行动画效果的元素。

2、内容过滤选择器

:contains(text)，获取包含给定文本的元素；

:empty，获取所有不包含子元素或者文本的空元素；

:has(selector)，获取含有选择器所匹配的元素的元素；

:parent，获取含有子元素或者文本的元素；

注意：在:contains(text)内容过滤选择器中，如果是查找字母，则有大小写的区别。

3、可见性过滤选择器

:hidden，获取所有不可见元素，或者type为hidden的元素；

:visible，获取所有的可见元素；

注意  :hideen选择器所选择的不仅包括样式为display:none所有元素，而且还包括属性type='hidden'和样式为visiblity:hidden的所有元素。

4、属性过滤选择器

[attr]，获取包含给定属性的元素；

[attr=value]，获取等于给定的属性是某个特定值的元素；

[attr!=value]，获取不等于给定的属性是某个特定值的元素；

[attr^=value]，获取给定的属性是以某些值开始的元素；

[attr$=value]，获取给定的属性是以某些值结尾的元素；

[attr*=value]，获取给定的属性是以包含某些值的元素；

[selectro1][selector2][selectorn]，获取满足多个条件的复合属性的元素；

5、子元素过滤选择器

:nth-child(eq | even | odd | index)，获取每个父元素下的特定位置元素，索引号从1开始；

:first-child，获取每个父元素下的第一个子元素；

:last-child，获取每个父元素下的最后一个子元素；

:only-child，获取每个父元素下的仅有一个子元素；

6、表单对象属性过滤器

:enabled，获取表单中所有属性为可用的元素；

:disabled，获取表单中所有属性为不可用的元素；

:checked，获取表单中所有被选中的元素；

:selected，获取表单中所有被选中option的元素；

 

四、表单选择器

:input，获取所有input、textarea、select；

:text，获取所有单行文本框；

:password，获取所有密码框；

:radio，获取所有单选按钮；

:checkbox，获取所有复选框；

:submit，获取所有提交按钮；

:image，获取所有图像域 ；

:reset，获取所有重置按钮；

:button，获取所有按钮；

:file，获取所有文件域；

转载于:https://www.cnblogs.com/pengjielee/p/jquery-selector.html