|
jQuery中10個非常有用的遍歷函數(shù)
使用jQuery，可以很容易的選擇HTML元素。但有些時候，在HTML結(jié)構(gòu)較為復(fù)雜時，提煉我們選擇的元素就是一件麻煩的事情。在這篇教程中，我們將探討十種方法去精煉和擴展我們將要操作的集合。
HTML
首先，讓我們看看下圖所示的簡單的頁面，通過這個教程我們將選擇這些元素。
- div.container是包裹元素；
- div.photo、div.title、div.rating是div.container的直接子級；
- 每個div.star是div.rating的子級；
- 當(dāng)div.satr的class為“on”時，它是一個完整的star。
為什么要遍歷？
“為什么我們要進一步提煉一系列元素，難道是jQuery選擇語法不夠強大？”
好，讓我們從示例開始。在上面提到的網(wǎng)頁中，當(dāng)一個star被點擊時，我們需要給它以及左邊的每個star添加class“on”。與此同時，我們要改變所有star父元素的背景顏色，因此，我們的代碼如下：
$('.star').click(function(){
$(this).addClass('on');
// 如何選取當(dāng)前對象的父元素?
// 如何獲得當(dāng)前star左側(cè)所有的star?
});
在第二行，我們得到了我們點擊的當(dāng)前對象。但是，如何得到stars的父級？即div.rating。但是，在一個頁面中，有很多div.rating。哪一個是我們想要的？如何獲得“this”左邊所有的star？
可喜的是，jQuery允許我們基于這些基層關(guān)系，在現(xiàn)存集合的基礎(chǔ)上獲得新的元素集合。而這些正是遍歷函數(shù)發(fā)揮作用的地方。
1、children
這個函數(shù)得到一組元素的直接子級。
在很多情況下會很方便，看看下面這張圖：
- 開始的時候容器中的star全部被選擇；
- 給children()傳遞一個選擇表達(dá)式將選擇結(jié)果縮小至選中的star；
- 如果chilidren()每接受任何參數(shù)，將返回所有直接子級；
- 不返回孫級元素。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 下一頁 jQuery中10個非常有用的遍歷函數(shù) [2]
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 jQuery中10個非常有用的遍歷函數(shù) [1]
第 2 頁 
