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,获取所有文件域;
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。