排列三字谜

jQuery中10個非常有用的遍歷函數

2010-08-28 10:56:04來源:西部e網作者:

使用jQuery,可以 很容易的選擇HTML元素。但有些時候,在HTML結構較為復雜時,提煉我們選擇的元素就是一件麻煩的事情。在這篇教程中,我們將探討十種方 法去精煉和擴展我們將要操作的集合。

HTML

首先,讓我們看看下圖所示的簡單的頁面,通過這個教程我們將選擇這些元素。

div.container是包裹元素;

div.photo、div.title、div.rating是div.container的直接子級;

每個div.star是div.rating的子級;

當div.satr的class為“on”時, 它是一個完整的star。

\

為什么要遍歷?

“為什么我們要進一步提煉一系 列元素,難道是jQuery選擇語法不夠 強大?”

好,讓我們從示例開始。在上面提到的網頁中,當一個star被 點擊時,我們需要給它以及左邊的每個star添加class“on”。與此同時,我們要改變所有star父元素的背景顏色,因此,我們的代碼如下:

$('.star').click(function(){

         $(this).addClass('on');

//       如何選取當前對象的 父元素?

//       如何獲得當前star左側所有的star?

});

在第二行,我們得到了我們點擊的當前對象。但是,如 何得到stars的父級?即div.rating。但是,在一個頁面中,有很多div.rating。哪一個是我們想要的?如何獲得“this”左邊所有的star?

可喜的是,jQuery允 許我們基于這些基層關系,在現存集合的基礎上獲得新的元素集合。而這些正是遍歷函數發揮作用的地方。

1、children

這個函數得到一組元素的直接子級。

在很多情況下會很方便,看看下面這張圖:

開始的時候容器中的star全部被選擇;

給children()傳遞一個選擇表 達式將選擇結果縮小至選中的star;

如果chilidren()每接受任何 參數,將返回所有直接子級;

不返回孫級元素。

\

2、filter

這個函數通過傳遞的選擇表達式從一個集合中過濾元素。任何不匹配這個表達式的元素將從選擇的集合中移除。

下面的這個例子直截了當。從 5個star中過濾出class為“on”的star。

\

3、not

與filter恰恰相 反,not()從集合中移除匹配的元素。

看下面這個例子。偶數列的star從 選擇集合中移除,留下的是奇數行的star。

\

“ 注意:'Even'和'odd'選擇器是從0開始的,從0開 始計數,不是從1。”

4、add

如果我們想在集合中增加一些元素怎么辦?add()函 數正是做這件事的。

同樣簡單明了,photo盒 子被添加到集合中。

\

5、slice

有時候,我們需要根據元素在集合的位置獲取集合的子集。sliece()正是做這個的。

第一個參數是從零開始的第一個元素的位置,它包含在返回的片段中;

第二個參數是從零開始的第一個元素的索引。不包含在返回的片段中。如果省略,將延伸至集合的末尾;

所以,slice(0,2)將選取前兩 個star。

\

6、parent

parent()函數選取一系列元素的直接父級。

正如下圖所示,第一個star的 直接父級被選中。非常方便,應當指出,它僅僅返回直接父級,為什么很奇特?因為沒有祖父元素或祖先元素被選中。

\

7、parents

這是復數形式,parents()選 擇集合的所有祖先元素。我的意思是所有祖先元素包括直接父級到“body”和“html”元素。所以最好通過傳遞表達式縮小選擇結果。

通過給parents()傳 遞.container參數,div.container將被選中,它實際上第一個star的祖父。

\

8、siblings

這個函數選擇一組元素的所有兄弟姐妹,傳遞一個表達式可以篩選結果。

看看這個例子:

誰是第一個star的兄弟節點?其它的四個,對 不?

如圖所示,“odd”的節點被選中。索 引是從零開始的,看看下面star的紅色數字。

\

9、prev & prevAll

prev()函數選擇前一個兄弟節點。prevAll()選擇一個元素集合前面所有的兄弟節點。
如 果你正在構建一個星級部件,這將相當方便。第三個star前面的兄弟節 點被選中。

\

10、next & nextAll

這些函數與prev和prevAll工作方式相同,不過它選擇的是下一個兄弟姐妹。

\

結論

最后,讓我們來看看如何利用這些函數來解決現實世界中令我們頭痛的問題。

 

$('.star').click(function(){

         $(this).addClass('on');

//       如何取得當前對象的 父級?

         $(this).parent().addClass('rated');

//       如何獲得當前對象左 側的star?

         $(this).prevAll().addClass('on');

         $(this).nextAll().removeClass('on');

});

這就是這篇教程中早期提到的問題,對嗎?在這幾行代碼中我們使用了這幾個遍歷函數。

在第5行,看看parent()函數,啊哈,真簡單。

在第8行和9行,prevAll()和nextAll().選擇填充的star和 空的star。

現在,遍歷函數是做么的方便。當在一起使用時,它們將更加強大。也就是說,一個函數的輸出是另一個函數的輸 入,它們是鏈式的。

關鍵詞:jQuery

贊助商鏈接:

排列三字谜 金宝博188比分 房卡麻将代理平台 股票配资网站·首选配资658 3d试机号近100 李嘉诚的理财小故事 江西微乐麻将下载安装 秒速时时彩 世界杯猜比分网站 竞彩篮球大小分 微乐龙江麻将官方版 上证指数每日行情分析 呼和浩特一条龙包做吹 安徽时时彩 cba比分188 11选5河北 日本女优写真集