jQuery 中的顯式遍歷(explicitly iterate)與隱式遍歷(implicit iteration)

jQuery 中的顯式遍歷(explicitly iterate)與隱式遍歷(implicit iteration)

在 jQuery 中，咱們把 $() 叫作核心函數。

若是經過核心函數找到的元素不止一個，那麼在添加事件（或添加類）的時候，jQuery 會遍歷全部找到的元素，給全部找到的元素添加事件（或類）。這就叫作「隱式遍歷」。

舉一個用隱式遍歷添加事件的例子：

html:

<ul>
    <li>我是第1個li</li>
    <li>我是第2個li</li>
    <li>我是第3個li</li>
</ul>

js:

$("ul>li").click(function () {
   console.log($(this).html());
});

這樣就給全部的 li 都添加了一個 click 事件。

再舉一個用隱式遍歷添加類的例子：

html：

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

js：

$( "li" ).addClass( "bar" );

仍是這個功能，我使用一個顯式遍歷的方法 .each()方法 來寫一下。

$( "li" ).each(function() {
  $( this ).addClass( "foo" );
});

這個例子應該就比較明確了，都是遍歷選出來的一堆元素，在顯式遍歷中，每遍歷到一個元素，我都得指定一下給該元素添加哪一個類，顯然這樣寫比較囉嗦；而隱式遍歷就方便不少，要批量把核心函數找出來的全部元素都添加同一個事件（或一個類），推薦使用隱式遍歷的寫法。

下面我再舉一個用顯式遍從來寫的例子：
（HTML 部分的代碼和上面同樣）

$( "li" ).each(function( index ) {
  console.log( index + ": " + $( this ).text() );
});

.each()方法就是典型的顯式遍歷：首先我用選擇器選中了全部的 li 元素，造成了一個 jQuery 對象，這個對象是長這樣的（是一個僞數組）：

[ { 0：li } , { 1：li } ]

每一個元素還有本身的一大堆屬性……

（太多了，只截取一部分）

跑題了，回到 .each() 方法。當遍歷到第一個 li 元素的時候，就打印第一條信息；遍歷到第二個 li 的時候，再打印第二條信息。

再回顧一下剛纔那一段代碼：

$( "li" ).each(function( index ) {
  console.log( index + ": " + $( this ).text() );
});

index 是一個形參，表示當前輪到的那個元素的下標。既然是形參，不用 index，用 i 也行。

那麼問題來了：爲何這個 function 裏寫一個參數，這個參數就表明下標了呢？
答案是：
.each() 方法的 function，它有2個參數。.each 方法的寫法是這樣的：

$(selector).each(function( index , element ){
    //do something
})

function 的第一個參數是整數的下標，第二個參數用於：返回當前讀取到的那個元素，好比剛纔的代碼，element 就是返回每一個 li。因此仍是剛纔的代碼，咱們也能夠這樣寫：

$( "li" ).each(function( i,element ) {
    console.log($(element));
    console.log( i + ": " + $(element).text() );
});

有時候咱們不寫 element，只是由於使用 this 關鍵詞能夠替代 element。this 等於 element，一樣，$(this)和$(element)是同樣的。使用$()選擇器選中 this 或者 element 元素以後，咱們就可使用 jQuery 提供的 api，很方便的操做他們，好比，使用 text（）方法讀取元素的文本內容，或者使用 css（）方法修改樣式，等等。

總結一下，本文一開始說明了什麼是顯式遍歷，什麼是隱式遍歷以及兩者的區別，而後提到了一個顯式遍歷方法 .each() 的具體用法。