JQuery 之 Selector

-

序言:
自从jQuery面世以来,它以其快速.简洁.能够很轻易地处理HTML文档.控制事.给页面添加动画和Ajax效果等打动着所有关注它的人的心!

正文:
关于Selector: 将每一个选择器匹配到的元素合并后一起返回,你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内.
常见Selector示例:

a) even和odd       
     even: 匹配所有索引值为偶数的元素,从0开始计数.
     odd:  匹配所有索引值为奇数的元素,从0开始计数.
     JQuery语法: $('[tag]:even/odd').
     示例:
     对table下tr隔行显示不同的效果,首先定义2个样式:     

1  .odd { backrgound-color : #7d9edb ; color : Black ; }
2  .even { background-color : #000 ; color : White }

     然后在HTML中加入测试用的Table:

 1  <table>
 2      <tr>
 3          <td>Welcome,guys</td>
 4          <td>Admin</td>
 5      </tr>
 6      <tr>
 7          <td>Welcome,guys</td>
 8          <td>Admin</td>
 9      </tr>
10      <tr>
11          <td>Welcome,guys</td>
12          <td>Admin</td>
13      </tr>
14      <tr>
15          <td>Welcome,guys</td>
16          <td>Admin</td>
17      </tr>
18      <tr>
19          <td>Welcome,guys</td>
20          <td>Admin</td>
21      </tr>
22      <tr>
23          <td>Welcome,guys</td>
24          <td>Admin</td>
25      </tr>
26  </table>

     编写以下Js脚本来为table着色:

$( " document " ).ready( function () {
    $( ' tr:even ' ).addClass( ' even ' );
    $( ' tr:odd ' ).addClass( ' old ' );
})

     这样我们就为偶数行的tr附加even样式,奇数行的附加old样式.效果如下:     

     

b) nth-child

     匹配其父元素下的第N个子或奇偶元素.
     JQuery语法:$([tag]:nth-child(index/even/odd/equation))
     
c) parent > child

     匹配parent标签下,标签为child的所有子元素.

     示例:
     $('body>div')将返回document.body下的所有div标签.

 

d) 正则表达式与XPath

     XPath风格可以使我们更加方便快捷的使用此Selector.
     示例:

     为页面添加5个Anchor:     

1  < a  href ="dl.pdf" > Download PDF </ a >< br  />
2  < a  href ="dl.doc" > Download Word </ a >< br  />
3  < a  href ="dl.txt" > Download Txt </ a >< br  />
4  < a  href ="http://www.ajaxplaza.net" > Ajaxplaza.net </ a >< br  />
5  < a  href ="mailto:[email protected]" > Error! </ a >< br  />

     为其定制不同的样式:     

1  .anchor  {  padding-left : 20px ; height : 20px ; line-height : 20px ; display : block ;   }
2  .email  {  background : url(images/email.png) no-repeat 2px center ;   }
3  .txt  {  background : url(images/text.png) no-repeat 2px center ;   }
4  .doc  {  background : url(images/word.png) no-repeat 2px center ;   }
5  .pdf  {  background : url(images/pdf.png) no-repeat 2px center ;   }
6  .www  {  background : url(images/www.png) no-repeat 2px center ;   }  

     接下来就使用正则匹配Anchor并为其附加样式:     

1  $( ' a ' ).addClass( ' anchor ' );
2  $( ' a[href$=pdf] ' ).addClass( ' pdf ' );
3  $( ' a[href$=txt] ' ).addClass( ' txt ' );
4  $( ' a[href$=doc] ' ).addClass( ' doc ' );
5  $( ' a[href*=.net] ' ).addClass( ' www ' );
6  $( ' a[href^=mailto] ' ).addClass( ' email ' );

     可以看到效果如下:

e) 更多层级选择符
    prev+next: 匹配第一个选择符的所有对象,然后找到和他同级的紧跟着的下一个节点同时符合第二个选择符的对象.
    prev+siblings: 匹配第一个选择符的所有对象,然后找和他同级的以后所有节点里面同时符合第二个选择符的对象.