简介：探索一些CSS和XPath选择符，以及JQuery独有的自定义选择符。介绍JQuery的DOM便历方法

1。DOM

jQuery 最强大的方面之一就是它能够简化DOM遍历任务。

2。工厂函数$()

放到圆括号中的任何元素都将自动执行循环遍历，并且会被保存到一个JQuery对象中。

标签名：$(‘p’)会取得文档中所有在段落。

ID：$(‘#some-id’)会取得文档中具有对应的some-id ID的一个元素。

类：$（‘.some-class’）会取得文档中带亦some-class 类的所有元素。

提示：美元符号$只不过是对标识符jQuery的一种简写方式。如果冲突可将$替换JQuery

3。当在JQuery代码中使用$(document).ready()结构时，位于其中的所有代码都会在DOM加载后立即执行。

例1：$(document).ready(function(){

$(‘#selectedplays>li’).addClass(’horizontal’);  /*查找ID为 selected-plays 的元素（#selected-plays）的

子元素（>）中所有的列表项（li）*/

});

>：将horizontal类只添加到位于顶级的项中。

例2：$(document).ready(function(){

$('#selectedplays>li').addClass('horizontal');

$('#selectedplaysli:not(.horizontal)').addClass('sublevel');  /*没有horizontal类(not(.horizontal))*/

})

4。在涉及属性选择符（attribute selector）时，jQuery使用了XPath中的惯例来标识属性，即将属性前置一个@符号并放在一对方括号中。

例如，要选择所有带title属性的链接，可以使用下面的代码：

$('a[@title]')

此外，方括号在XPath语法中还有另外一种用途，即在不带前置@符号的情况下，可以用来指定包含在另一个元素的元素。

例如，取得包含一个ol元素的所有div元素：$('div[ol]')

5。属性选择符允许以类似正则表达式的语法来标识字符串的开始（^）和结尾（$）。而且，也可以使用星号（*）表示字符串的任意位置。

例如：以不同的文本颜色来显示不同类型的链接。

（1）首先要在样式表中定义如下样式：

a.mailto{

color:#f00;

}

a.pdflink{

color:#090;

}

a.mysite{

textdecoration:none;

borderbottom:1px dotted  #00f;

}

(2)然后，可以使用jQuery 为符合条件的链接添加3个类：mailto、pdflink、mysite。

要取得所有电子邮件链接，需要构造一个选择符，用来寻找所有带href属性（[@href]）且以mailto开头（^="mailto:"）的锚元素（a）。结果如下所示：

$(document).ready(function(){

$('a[@href^="mailto:"]').addClass('mailto');

});

要取得所有指向PDF文件的链接，需要使用美元符号（$）而不是脱字符号(^)，来取得所有带href属性并以.pdf结尾的链接，相应的代码如下所示：

$（document）.ready(function(){

$('a[@href^="mailto:"]').addClass('mailto');

$('a[@href$=".pdf"]').addClass('pdflink');

})

(3)最后，要 取得所有内部链接，即到mysite.com中其他页面的链接，则需要使用星号：

$(document).ready(function(){

$('a[@href^="mailto:"]').addClass('mailto');

$('a[@href$=".pdf"]').addClass('pdflink');

$('a[@href*="mysite.com"]').addClass('mysite');

});

6。自定义选择符，选择符以一个冒号（：）开头。

例如：我们想要从匹配的带有horizontal类的div集合中，选择第2个项，那么应该使用下面的代码：

$('div.horizontal:eq(1)')

注意：因为JavaScript数组采用从0开始的编号方式，所以eq(1)取得的是集合中的第2个元素。

而CSS则是从1开始的，因此CSS选择符$('div:nth-child(1)')取得的是作为其父元素第1个子元素的所有div.

自定义选择符 :odd和:even。

例如：通过这两个选择符为表格添加基本的条纹样式。

<table>

<tr>

<td>As You Like It </td>

<td>Comedy</td>

</tr>

<tr>

<td>All's Well that Ends Well </td>

<td>Comedy</td>

</tr>

<tr>

<td>Hamlet</td>

<td>Tragedy</td>

</tr>

<td>Macheth</td>

<td>Tragedy</td>

<tr>

<td>Romeo and Juliet</td>

<td>Tragedy</td>

</tr>

<tr>

<td>Henry IV,Part I</td>

<td>History</td>

</tr>

<tr>

<td>Henry V</td>

<td>History</td>

</tr>

</table>

我们可以向样式表中添加两个类，一个用于为奇数行添加样式，另一个用于为偶数行添加样式：

odd{

backgroundcolor:#ffc;

}

.even{

backgroundcolor:#cef;

}

最后，编写jQuery代码，将这两个类添加到表格行（<tr>标签）中:

$(document).ready(function(){
 $("tr:odd").addClass("odd"); 
 $("tr:even").addClass("even");
});突出显示可用 :contains()选择符,如：.hightlight{font-weight:bold;color:#f00;}

<script>
 $(document).ready(function(){
 $("tr:odd").addClass("odd"); 
 $("tr:even").addClass("even");
 $('td:contains("Henry")').addClass("hightlight");
});
</script>

7。.get()方法

例如：如果想知道带有id="my-element"属性的元素的标签名，应该使用如下代码：

var myTag=$('#myelement').get(0).tagName; 或者简写为$('#my-element')[0]，也就是说，可以在选择符后面直接使用方括号。