jQuery 第二章
簡介：探索一些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]，也就是說，可以在選擇符后面直接使用方括號。
?
轉載于:https://www.cnblogs.com/jw123/archive/2011/01/17/1937607.html
總結
以上是生活随笔為你收集整理的jQuery 第二章的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一些很特别的J2ME开源项目
- 下一篇： 微软Windows Azure Plat