jquery selector 基础

 

Jquery的这套选择符是比较帅气的，借用了XPath2.0和CSS1-3中的语法，并且兼容了多个浏览器，让原本非常复杂的DOM，一下子变得简单起来了，手中最新的版本是1.2.2b，下面的所有例子，也是根据此版本提供的例子。

测试HTML代码：

< div id = " father " >
   < 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属性获取对象。

alert ( $ ( ' #first ' ) . html ()) ;
//显示I am first

element：匹配某一HTML标签的所有对象

alert ( $ ( ' div ' ) . length ) ;
//显示4

.class：根据对象的class属性获取对象

alert ( $ ( ' .red ' ) . length ) ;
//显示2

*：获取所有的对象

alert ( $ ( ' * ' ) . length ) ;
//显示HTML中对象的和，但是不同的浏览器，结果会有所不同

selector1, selector2, selectorN：获取多个选择符的合集，不剔出重复项。

alert ( $ ( ' .red,#second,p ' ) . length ) ;
//显示4

层级选择符：

ancestor descendant：这个选择符就是空格，表示先找到第一个选择符的所有对象，然后在他的子孙节点中找到所有符合第二个选择符的对象。

alert ( $ ( ' #father .red ' ) . html ()) ;
//显示I am second

parent > child：这个选择符就是大于号，表示先找到第一个选择符的所有对象，然后在他的子节点（不能是孙节点）中找到所有符合第二个选择符的对象。

alert ( $ ( ' #father > .red ' ) . html ()) ;
//显示I am second

prev + next：这个选择符就是加号，表示先找到第一个选择符的所有对象，然后找和他同级的紧跟着的下一个节点同时符合第二个选择符的对象。

alert ( $ ( ' #father + .red ' ) . html ()) ;
//显示I am forth

prev ~ siblings：这个选择符就是~号，表示先找到第一个选择符的所有对象，然后找和他同级的以后所有节点里面同时符合第二个选择符的对象。

alert ( $ ( ' #first ~ #third ' ) . html ()) ;
//显示I am third

基础过滤符：

:first：匹配多个对象中的第一个对象
:last：匹配多个对象中的最后一个对象

alert ( $ ( ' .red:first ' ) . html ()) ;
//显示I am second
alert ( $ ( ' div:last ' ) . html ()) ;
//显示I am third

:not(selector)：匹配去除了not后面选择符中内容的项

alert ( $ ( ' .red:not(#second) ' ) . html ()) ;
//显示I am forth

:even：匹配所有对象中的第偶数个
:odd：匹配所有对象中的第奇数个

alert ( $ ( ' div:even ' ) . length ) ;
//显示2
alert ( $ ( ' div:odd ' ) . length ) ;
//显示2

:eq(index)：匹配某一下表的单独某元素

alert ( $ ( ' div:eq(2) ' ) . html ()) ;
//显示I am second

:gt(index)：匹配大于某一下标的所有元素
:lt(index)：匹配小于某一下标的所有元素

alert ( $ ( ' div:gt(1) ' ) . length ) ;
//显示2
alert ( $ ( ' div:lt(2) ' ) . length ) ;
//显示2

:header：匹配所有的header元素，例如h1,h2,h3,h4,h5,h6

alert ( $ ( ' :header ' ) . length ) ;
//显示1

:animated：匹配所有有动画效果的元素

function animateIt ()
{
   $ ( " #second " ) . slideToggle ( " slow " , animateIt ) ;
}
animateIt () ;
alert ( $ ( ' :animated ' ) . html ()) ;
//显示I am second

文本过滤符：

:contains(text)：匹配内部拥有该文本元素的对象，包含间接有用的情况

alert ( $ ( ' div:contains("first") ' ) . length ) ;
//显示2

:empty：匹配所有没有子元素的对象

alert ( $ ( ' :header:empty ' ) . length ) ;
//显示1

:has(selector)：匹配所有至少含有一个子选择符的对象

alert ( $ ( ' div:has("#third") ' ) . attr ( ' id ' )) ;
//显示father

:parent：匹配所有的父对象，父对象包含那些只含有文本的对象

alert ( $ ( ' div:parent ' ) . length ) ;
//显示4

可见性过滤符：

:hidden：匹配所有隐藏对象，或者input中的hidden类型
:visible：匹配所有可见的对象

alert ( $ ( ' div:hidden ' ) . length ) ;
//显示1
alert ( $ ( ' div:visible ' ) . length ) ;
//显示3

属性过滤符：

[attribute]：匹配拥有某一属性的所有对象
[attribute=value]：匹配拥有某一属性和值的对象
[attribute!=value]：匹配拥有某一属性，且不是某一值的对象
[attribute^=value]：匹配拥有某一属性，且以某一值开头的对象
[attribute$=value]：匹配拥有某一属性，且以某一值结尾的对象
[attribute*=value]：匹配拥有某一属性，且包含某一值的对象

alert ( $ ( ' div[class] ' ) . html ()) ;
//显示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]：匹配同时符合多个属性选择符的对象

alert ( $ ( ' div[id=second][class^=r] ' ) . length ) ;
//显示I am second

子过滤符：

:nth-child(index/even/odd/equation)：匹配子元素中的某一下标/偶数/奇数/等式的对象，:eq(index)只能匹配某单一对象的子元素特征，而这个方法可以匹配多个对象的某一子元素共同特征

alert ( $ ( ' #father div:nth-child(1) ' ) . html ()) ;
//显示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：匹配最后一个子元素
这两个匹配符也可以对多个父对象的所有子元素进行匹配操作

alert ( $ ( ' #father div:first-child ' ) . html ()) ;
//显示I am first
alert ( $ ( ' #father div:last-child ' ) . html ()) ;
//显示I am third

:only-child：如果一个父元素只有一个子元素，就匹配这个子元素

alert ( $ ( ' div:only-child ' ) . length ) ;
//显示0

This entry was posted