Jquery的这套选择符是比较帅气的,借用了XPath2.0和CSS1-3中的语法,并且兼容了多个浏览器,让原本非常复杂的DOM,一下子变得简单起来了,手中最新的版本是1.2.2b,下面的所有例子,也是根据此版本提供的例子。
测试HTML代码:
< div id = " first " > I am first </ div >
< div id = " second " class = " red " > I am second </ div >
< div id = " third " style = " display:none " > I am third </ div >
</ div >
< p class = " red " > I am forth </ p >
< h4 ></ h4 >
基础:
#id:根据对象的id属性获取对象。
//显示I am first
element:匹配某一HTML标签的所有对象
//显示4
.class:根据对象的class属性获取对象
//显示2
*:获取所有的对象
//显示HTML中对象的和,但是不同的浏览器,结果会有所不同
selector1, selector2, selectorN:获取多个选择符的合集,不剔出重复项。
//显示4
层级选择符:
ancestor descendant:这个选择符就是空格,表示先找到第一个选择符的所有对象,然后在他的子孙节点中找到所有符合第二个选择符的对象。
//显示I am second
parent > child:这个选择符就是大于号,表示先找到第一个选择符的所有对象,然后在他的子节点(不能是孙节点)中找到所有符合第二个选择符的对象。
//显示I am second
prev + next:这个选择符就是加号,表示先找到第一个选择符的所有对象,然后找和他同级的紧跟着的下一个节点同时符合第二个选择符的对象。
//显示I am forth
prev ~ siblings:这个选择符就是~号,表示先找到第一个选择符的所有对象,然后找和他同级的以后所有节点里面同时符合第二个选择符的对象。
//显示I am third
基础过滤符:
:first:匹配多个对象中的第一个对象
:last:匹配多个对象中的最后一个对象
//显示I am second
alert ( $ ( ' div:last ' ) . html ()) ;
//显示I am third
:not(selector):匹配去除了not后面选择符中内容的项
//显示I am forth
:even:匹配所有对象中的第偶数个
:odd:匹配所有对象中的第奇数个
//显示2
alert ( $ ( ' div:odd ' ) . length ) ;
//显示2
:eq(index):匹配某一下表的单独某元素
//显示I am second
:gt(index):匹配大于某一下标的所有元素
:lt(index):匹配小于某一下标的所有元素
//显示2
alert ( $ ( ' div:lt(2) ' ) . length ) ;
//显示2
:header:匹配所有的header元素,例如h1,h2,h3,h4,h5,h6
//显示1
:animated:匹配所有有动画效果的元素
{
$ ( " #second " ) . slideToggle ( " slow " , animateIt ) ;
}
animateIt () ;
alert ( $ ( ' :animated ' ) . html ()) ;
//显示I am second
文本过滤符:
:contains(text):匹配内部拥有该文本元素的对象,包含间接有用的情况
//显示2
:empty:匹配所有没有子元素的对象
//显示1
:has(selector):匹配所有至少含有一个子选择符的对象
//显示father
:parent:匹配所有的父对象,父对象包含那些只含有文本的对象
//显示4
可见性过滤符:
:hidden:匹配所有隐藏对象,或者input中的hidden类型
:visible:匹配所有可见的对象
//显示1
alert ( $ ( ' div:visible ' ) . length ) ;
//显示3
属性过滤符:
[attribute]:匹配拥有某一属性的所有对象
[attribute=value]:匹配拥有某一属性和值的对象
[attribute!=value]:匹配拥有某一属性,且不是某一值的对象
[attribute^=value]:匹配拥有某一属性,且以某一值开头的对象
[attribute$=value]:匹配拥有某一属性,且以某一值结尾的对象
[attribute*=value]:匹配拥有某一属性,且包含某一值的对象
//显示I am second
alert ( $ ( ' div[class=red] ' ) . html ()) ;
//显示I am second
alert ( $ ( ' div[id!=father] ' ) . length ) ;
//显示3
alert ( $ ( ' div[id^=f] ' ) . length ) ;
//显示2
alert ( $ ( ' div[id$=d] ' ) . length ) ;
//显示2
alert ( $ ( ' div[id*=ir] ' ) . length ) ;
//显示2
[selector1][selector2][selectorN]:匹配同时符合多个属性选择符的对象
//显示I am second
子过滤符:
:nth-child(index/even/odd/equation):匹配子元素中的某一下标/偶数/奇数/等式的对象,:eq(index)只能匹配某单一对象的子元素特征,而这个方法可以匹配多个对象的某一子元素共同特征
//显示I am first
alert ( $ ( ' #father div:nth-child(even) ' ) . length ) ;
//显示1
alert ( $ ( ' #father div:nth-child(odd) ' ) . length ) ;
//显示2
alert ( $ ( ' #father div:nth-child(3n) ' ) . length ) ;
//显示1,其实是每3个一匹配
:first-child:匹配第一个子元素
:last-child:匹配最后一个子元素
这两个匹配符也可以对多个父对象的所有子元素进行匹配操作
//显示I am first
alert ( $ ( ' #father div:last-child ' ) . html ()) ;
//显示I am third
:only-child:如果一个父元素只有一个子元素,就匹配这个子元素
//显示0
---表单对象属性过滤选择器:主要对所选择的表单元素进行过滤
1、:enabled 用法: $(”input:enabled”) 返回值 集合元素
说明: 匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦.
2、:disabled 用法: $(”input:disabled”) 返回值 集合元素
说明: 匹配所有不可用元素.与上面的那个是相对应的.
3、:checked 用法: $(”input:checked”) 返回值 集合元素
说明: 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option).这话说起来有些绕口.
4、:selected 用法: $(”select option:selected”) 返回值 集合元素
说明: 匹配所有选中的option元素.
---表单选择器:
1、:input 用法: $(”:input”) ; 返回值 集合元素
说明:匹配所有 input, textarea, select 和 button 元素
2、:text 用法: $(”:text”) ; 返回值 集合元素
说明: 匹配所有的单行文本框.
3、:password 用法: $(”:password”) ; 返回值 集合元素
说明: 匹配所有密码框.
4、:radio 用法: $(”:radio”) ; 返回值 集合元素
说明: 匹配所有单选按钮.
5、:checkbox 用法: $(”:checkbox”) ; 返回值 集合元素
说明: 匹配所有复选框
6、:submit 用法: $(”:submit”) ; 返回值 集合元素
说明: 匹配所有提交按钮.
7、:image 用法: $(”:image”) 返回值 集合元素
说明: 匹配所有图像域.
8、:reset 用法: $(”:reset”) ; 返回值 集合元素
说明: 匹配所有重置按钮.
9、:button 用法: $(”:button”) ; 返回值 集合元素
说明: 匹配所有按钮.这个包括直接写的元素button.
10、:file 用法: $(”:file”) ; 返回值 集合元素
说明: 匹配所有文件域.
11、:hidden 用法: $(”input:hidden”) ; 返回值 集合元素
说明: 匹配所有不可见元素,或者type为hidden的元素.这个选择器就不仅限于表单了,
除了匹配input中的hidden外,那些style为hidden的也会被匹配.
注意: 要选取input中为hidden值的方法就是上面例子的用法,
但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的,