第一章 認識jQuery

jQuery 能做什么

1. 取得文檔中的元素

$('div.content').find('p');

2. 修改頁面的外觀

CSS雖然為影響文檔呈現的方式提供了一種強大的手段，但當所有瀏覽器不完全支持相同的標準時， 單純使用CSS就會顯得力不從心。 jQuery可以彌補這一不足，它提供了跨瀏覽器的標準解決方案。而且，即使在頁面已經呈現之后，jQuery仍然能夠改變文檔中某個部分的類或者個別的樣式屬性。

$('ul > li:first').addClass('active');

3. 改變文檔的內容

可以改變文本、插入或翻轉圖像、列表重新排序，甚至對HTML文檔的整個結構都能重寫和擴充.

$('#container').append('<a href="more.html">more</a>');

4. 相應用戶的交互操作

jQuery提供了截獲形形色色的頁面事件（比如用戶單擊某個鏈接）的適當方式，而不需要使用事件處理程序拆散HTML代碼。此外，它的事件處理API也消除了經常困擾Web開發人員瀏覽器的不一致性。

$('button.show-details').click(function(){
    $('div.details').show();
});

5. 為頁面添加動態效果

jQuery中內置的一批淡入、擦除之類的效果，以及制作新效果的工具包，為此提供了便利。

$('div:details').slideDown();

6. Ajax

無需刷新頁面從服務器獲取信息。

$('div.details').load('more.html #content');

7. 簡化常見的JavaScript任務。

jQuery也改進了對基本的JavaScript數據結構的操作（例如迭代和數組操作等） 。

$.each(obj, function(key, value) {
    total += value;
});

jQuery 的優勢

1. 利用CSS的優勢。

通過將查找頁面元素的機制構建于CSS選擇符之上， jQuery繼承了簡明清晰地表達文檔結構的方式。

2. 支持擴展

為了避免特性蠕變（feature creep），jQuery將特殊情況下使用的工具歸入插件當中。

3. 抽象瀏覽器不一致性

每種瀏覽器對頒布的標準都有自己的一套不太一致的實現方案，但jQuery添加一個抽象層來標準化常見的任務，從而有效地減少了代碼量，同時，也極大地簡化了這些任務。

4. 總是面向集合

當我們指示jQuery『找到帶有 collapsible 類的全部元素，然后隱藏它們』時，不需要循環遍歷每一個返回的元素。相反，.hide()之類的方法被設計成自動操作對象集合，而不是單獨的對象。利用這種稱作隱式迭代（implicit iteration）的技術，就可以拋棄那些臃腫的循環結構，從而大幅地減少代碼量。

5. 將多重操作集于一行

將多重操作集于一行。為了避免過度使用臨時變量或不必要的代碼重復，jQuery在其多數方法中采用了一種稱作連綴（chaining） 的編程模式。這種模式意味著基于一個對象進行的多數操作的結果，都會返回這個對象自身，以便為該對象應用下一次操作。

使用jQuery

• jQuery不需要安裝，要使用它只需該文件的一個副本，該副本可以放在外部站點上，也可以放在自己的服務器上。由于JavaScript是一種解釋型語言，所以不必擔心編譯和構建。什么時候需要使用jQuery，只要在HTML文檔中使用 <script> 元素把它導入進來即可。
• jQuery官方網站（http://jquery.com/）。
• 很多公司都通過自己的CDN（Content Delivery Networks，內容分發網絡）來托管其庫文件，讓開發人員能更方便地使用它。托管在CDN上的文件由于分布式和緩存的原因有速度優勢
• jQuery從2.0版開始不再支持IE6、IE7和IE8。

an example

$(document).ready(function(){
    $('div.poem-stanza').addClass('highlight');
});
.highlight {
background-color: #ccc;
border: 1px solid #888;
font-style: italic;
margin: 0.5em 0;
padding: 0.5em;
}

$(document).ready()為我們提供了很好的跨瀏覽器解決方案，涉及如下功能：

• 盡可能使用瀏覽器原生的DOM就緒實現，并以window.onload事件處理程序作為后備；
• 可以多次調用$(document).ready()并按照調用它們的順序執行；
• 即便是在瀏覽器事件發生之后把函數傳給$(document).ready()，這些函數也會執行；
• 異步處理事件的預定，必要時腳本可以延遲執行；
• 通過重復檢查一個幾乎與DOM同時可用的方法，在較早版本的瀏覽器中模擬DOM就緒事件。

第二章 樣式篇

jQuery 和 DOM 對象的轉化

jQuery是一個類數組對象，而DOM對象就是一個單獨的DOM元素。

jQuery對象轉化為DOM

1. 利用數組下標的方式讀取到jQuery中的DOM對象。

var $div = $('div') //jQuery對象
var div = $div[0] //轉化成DOM對象
div.style.color = 'red' //操作dom對象的屬性

注意：數組的索引是從0開始的，也就是第一個元素下標是0

2. 通過jQuery自帶的get()方法

var $div = $('div') //jQuery對象
var div = $div.get(0) //通過get方法，轉化成DOM對象
div.style.color = 'red' //操作dom對象的屬性

DOM 對象轉換為 jQuery

如果傳遞給$(DOM)函數的參數是一個DOM對象，jQuery方法會把這個DOM對象給包裝成一個新的jQuery對象

var div = document.getElementsByTagName('div'); //dom對象
var $div = $(div); //jQuery對象
var $first = $div.first(); //找到第一個div元素
$first.css('color', 'red'); //給第一個元素設置顏色

jQuery 選擇器

1. 基本選擇器

選 擇 符| CSS |jQuery |說 明
標簽名| P {name='a'}| $('p') |取得文檔中 name=a 所有的段落
ID| #some-id {} |$('#some-id') |取得文檔中ID為 some-id 的一個元素
類 | .some-class {} |$('.some-class')| 取得文檔中類為 some-class 的所有元素
全選擇器| $( "*" )||取得所有元素

2. 層次選擇器

選擇器 | 描述
$("parent > child") | 子選擇器，所有制定 parent 元素中指定的 child 的直接子元素
$("ancestor descendant") | 祖先的所有后代元素，包括孩子、孫子等
$("prev + next") | 選擇所有緊接在 prev元素之后的 next 元素。 
$("prev ~ siblings") |  prev 元素之后的所有兄弟元素。具有相同的父元素，并匹配過濾  siblings 選擇器

$('#selected-plays > li').addClass('horizontal');

子元素選擇符:>

$('#selected-plays > li').addClass('horizontal');

查找ID為selected-plays的元素（#selected-plays）的子元素（>）中所有的列表項（li）,注意只是兒子元素。

$('#selected-plays li:not(.horizontal)').addClass('sub-level');

ID為selected-plays的元素（#selected-plays）的后代元素。沒有horizontal類（:not(.horizontal)）。

3. 基本篩選選擇器

選擇器 | 描述

4. 內容選擇器

選擇器|描述
$(":contains(text)")|選擇所有包含制定文本的元素
$(":parent")|選擇所有含有子元素或者文本的元素
$(":empty")|選擇所有沒有子元素的元素(包含文本節點)
$(":has(selector)")|選擇元素中至少包含制定選擇器的元素

5. 可見性選擇器

選擇器|描述
$(":visible")|選擇所有現實的元素
$(":hiddden")|選擇所有隱藏的元素

:hidden選擇器，不僅僅包含樣式是display="none"的元素，還包括隱藏表單、visibility等等

隱藏元素的幾種方法:

1. CSS display的值是none。
2. type="hidden"的表單元素。
3. 寬度和高度都顯式設置為0。
4. 一個祖先元素是隱藏的，該元素是不會在頁面上顯示
5. CSS visibility的值是hidden
6. CSS opacity的指是0

6. 屬性選擇器

屬性選擇器讓你可以基于屬性來定位一個元素。

屬性選擇符使用通配符語法：

• 以~表示值在字符串的開始
• 以$表示值在字符串的結尾
• 以*表示匹配的值可以出現在字符串中的任意位置
• 以!表示對值取反

eg

//查找所有div中，有屬性p2的div元素
$('div[p2]').css("border", "3px groove blue");
//查找所有div中，有屬性name中的值只包含一個連字符“-”的div元素
$('div[name|="-"]').css("border", "3px groove #00FF00");
//查找所有div中，有屬性name中的值包含一個連字符“空”和“a”的div元素
$('div[name~="a"]').css("border", "3px groove #668B8B"); 
//查找所有div中，屬性name的值是用imooc開頭的
 $('div[name^=imooc]').css("border", "3px groove red"); 
 //查找所有div中，屬性name的值是用imooc結尾的
 $('div[name$=imooc]').css("border", "3px groove blue"); 
  //查找所有div中，有屬性name中的值包含一個test字符串的div元素
$('div[name*="test"]').css("border", "3px groove #00FF00"); 
//查找所有div中，有屬性testattr中的值沒有包含"true"的div
$('div[name!="true"]').css("border", "3px groove #668B8B");
// input屬性中name包含2的按鈕相應alert事件
$('input[name*="2"]').click(function(){
    alert('success');
});
// 組合使用： href 屬性即以 http 開頭且任意位置包含 henry的所有鏈接添加一個 henrylink 類
$('a[href^="http"][href*="henry"]').addClass('henrylink');

7. 子元素選擇器

• :first只匹配一個單獨的元素，但是:first-child選擇器可以匹配多個：即為每個父級元素匹配第一個子元素。這相當于:nth-child(1)
• :last只匹配一個單獨的元素， :last-child 選擇器可以匹配多個元素：即，為每個父級元素匹配最后一個子元素
• 如果子元素只有一個的話，:first-child與:last-child是同一個
• :only-child匹配某個元素是父元素中唯一的子元素，就是說當前子元素是父元素中唯一的元素，則匹配
• jQuery實現:nth-child(n)是嚴格來自CSS規范，所以n值是“索引”，也就是說，從1開始計數，:nth-child(index)從1開始的，而eq(index)是從0開始的
  nth-child(n) 與 :nth-last-child(n) 的區別前者是從前往后計算，后者從后往前計算

8. 表單元素選擇器

9. 表單對象屬性選擇器

• 選擇器適用于復選框和單選框，對于下拉框元素, 使用:selected 選擇器
• 在某些瀏覽器中，選擇器:checked可能會錯誤選取到<option>元素，所以保險起見換用選擇器input:checked，確保只會選取<input>元素

每隔一行為表格添加樣式

odd：偶數行
even：奇數行

$('tr:even').addClass('alt');

注意：當一個頁面上存在另外一個表格的時候，第二個表格的樣式就會錯位。

改為$('tr:nth-child(odd)').addClass('alt');
注意：這次用的odd

基于表達你的選擇符

:input：輸入字段、文本區、選擇列表和按鈕元素
:button：按鈕元素或type屬性值為button的輸入元素
:enabled：啟用的表單元素
:disabled：禁用的表單元素
:checked：勾選的單選按鈕或復選框
:selected：選擇的選項元素

// 可以選擇所有選中的單選按鈕（而不是復選框）
 $('input[type="radio"]:checked') ;

特殊選擇器this

this是JavaScript中的關鍵字，指的是當前的上下文對象，簡單的說就是方法/屬性的所有者

下面例子中，imooc是一個對象，擁有name屬性與getName方法,在getName中this指向了所屬的對象imooc

var imooc = { 
    name:"慕課網", 
    getName:function(){
         //this,就是imooc對象 
    return this.name;
     }
  }
imooc.getName(); //慕課網

同樣的在DOM中this就是指向了這個html元素對象，因為this就是DOM元素本身的一個引用假如給頁面一個P元素綁定一個事件:

p.addEventListener('click',function(){ 
    //this === p 
    //以下兩者的修改都是等價的 
    this.style.color = "red"; 
    p.style.color = "red"; }
,false);

通過addEventListener綁定的事件回調中，this指向的是當前的dom對象，所以再次修改這樣對象的樣式，只需要通過this獲取到引用即可

this.style.color = "red"

但是這樣的操作其實還是很不方便的，這里面就要涉及一大堆的樣式兼容，如果通過jQuery處理就會簡單多了，我們只需要把this加工成jQuery對象換成jQuery的做法：

$('p').click(function(){
         //把p元素轉化成jQuery的對象 
         var $this= $(this);
        $this.css('color','red') 
})

通過把$()方法傳入當前的元素對象的引用this，把這個this加工成jQuery對象，我們就可以用jQuery提供的快捷方法直接處理樣式了

總體：

this，表示當前的上下文對象是一個html對象，可以調用html對象所擁有的屬性和方法。
$(this),代表的上下文對象是一個jquery的上下文對象，可以調用jQuery的方法和屬性值。

jQuery 的屬性與樣式

1. .attr()與.removeAttr()

操作特性的DOM方法主要有3個，getAttribute方法、setAttribute方法和removeAttribute方法。
在jQuery中用attr()與removeAttr()

• attr(傳入屬性名)：獲取屬性的值
• attr(屬性名, 屬性值)：設置屬性的值
• attr(屬性名,函數值)：設置屬性的函數值
• attr(attributes)：給指定元素設置多個屬性值，即：{屬性名一: “屬性值一” , 屬性名二: “屬性值二” , … … }
• .removeAttr( attributeName ) : 為匹配的元素集合中的每個元素中移除一個屬性（attribute）

2. html()和.text()

.html()方法

獲取集合中第一個匹配元素的HTML內容 或 設置每一個匹配元素的html內容。

• .html() 不傳入值，就是獲取集合中第一個匹配元素的HTML內容
• .html( htmlString ) 設置每一個匹配元素的html內容
• .html( function(index, oldhtml) ) 用來返回設置HTML內容的一個函數

注意:.html()方法內部使用的是DOM的innerHTML屬性來處理的，所以在設置與獲取上需要注意的一個最重要的問題，這個操作是針對整個HTML內容（不僅僅只是文本內容）

.test()方法

得到匹配元素集合中每個元素的文本內容結合，包括他們的后代，或設置匹配元素集合中每個元素的文本內容為指定的文本內容。

• .text() 得到匹配元素集合中每個元素的合并文本，包括他們的后代。
• .text( textString ) 用于設置匹配元素內容的文本。
• .text( function(index, text) )用來返回設置文本內容的一個函數

注意:.text()結果返回一個字符串，包含所有匹配元素的合并文本。

3. .val()方法

jQuery的.val()方法主要是用于處理表單元素的值，比如 input, select 和 textarea。

• val()無參數，獲取匹配的元素集合中第一個元素的當前值
• .val( value )，設置匹配的元素集合中每個元素的值
• .val( function ) ，一個用來返回設置值的函數

.html(),.text()和.val()的差異總結：

1 .html(),.text(),.val()三種方法都是用來讀取選定元素的內容；只不過.html()是用來讀取元素的html內容（包括html標簽）。.text()用來讀取元素的純文本內容，包括其后代元素。.val()是用來讀取表單元素的"value"值。其中.html()和.text()方法不能使用在表單元素上,而.val()只能使用在表單元素上；另外.html()方法使用在多個元素上時，只讀取第一個元素；.val()方法和.html()相同，如果其應用在多個元素上時，只能讀取第一個表單元素的"value"值，但是.text()和他們不一樣，如果.text()應用在多個元素上時，將會讀取所有選中元素的文本內容。

2 .html(htmlString),.text(textString)和.val(value)三種方法都是用來替換選中元素的內容，如果三個方法同時運用在多個元素上時，那么將會替換所有選中元素的內容。

3 .html(),.text(),.val()都可以使用回調函數的返回值來動態的改變多個元素的內容。

4. .addClass() 和 .removeClass() 方法

1 .addClass() 通過動態改變類名（class），可以讓其修改元素呈現出不同的效果。

• .addClass( className ) : 為每個匹配元素所要增加的一個或多個樣式名
• .addClass( function(index, currentClass) ): 這個函數返回一個或更多用空格隔開的要增加的樣式名

注意:.addClass()方法不會刪除原來樣式類名。它只是添加一個樣式類名到元素上。

2 .removeClass() 從匹配的元素中刪除全部或者指定的class。

• removeClass( [className ] )：每個匹配元素移除的一個或多個用空格隔開的樣式名
• .removeClass( function(index, class) )： 一個函數，返回一個或多個將要被移除的樣式名

5. .toggleClass() 方法

在匹配的元素集合中的每個元素上添加或刪除一個或多個樣式類,取決于這個樣式類是否存在或值切換屬性。即：如果存在（不存在）就刪除（添加）一個類。

• .toggleClass( className )：在匹配的元素集合中的每個元素上用來切換的一個或多個（用空格隔開）樣式類名
• .toggleClass( className, switch )：一個布爾值，用于判斷樣式是否應該被添加或移除
• .toggleClass( [switch ] )：一個用來判斷樣式類添加還是移除的 布爾值
• .toggleClass( function(index, class, switch) [, switch ] )：用來返回在匹配的元素集合中的每個元素上用來切換的樣式類名的一個函數。接收元素的索引位置和元素舊的樣式類作為參數。

6. .css()

通過JavaScript獲取dom元素上的style屬性，我們可以動態的給元素賦予樣式屬性。
獲取：

1. .css( propertyName )：獲取匹配元素集合中的第一個元素的樣式屬性的計算值
   2..css( propertyNames )：傳遞一組數組，返回一個對象結果

設置：

1. .css(propertyName, value )：設置CSS
2. .css( propertyName, function )：可以傳入一個回調函數，返回取到對應的值進行處理
3. .css( properties )：可以傳一個對象，同時設置多個樣式

7. 元素的數據存儲

jQuery提供的存儲接口

jQuery.data( element, key, value ) //靜態接口,存數據 
jQuery.data( element, key ) //靜態接口,取數據 
.data( key, value ) //實例接口,存數據 
.data( key ) //實例接口,存數據

2個方法在使用上存取都是通一個接口，傳遞元素，鍵值數據。在jQuery的官方文檔中，建議用.data()方法來代替。

我們把DOM可以看作一個對象，那么我們往對象上是可以存在基本類型，引用類型的數據的，但是這里會引發一個問題，可能會存在循環引用的內存泄漏風險

通過jQuery提供的數據接口，就很好的處理了這個問題了，我們不需要關心它底層是如何實現，只需要按照對應的data方法使用就行了

同樣的也提供2個對應的刪除接口，使用上與data方法其實是一致的，只不過是一個是增加一個是刪除罷了

jQuery.removeData( element [, name ] ) 
.removeData( [name ] )

第三章 DOM篇

1. DOM節點的創建

一些原生的方法

• 創建元素：document.createElement
• 設置屬性：setAttribute
• 添加文本：innerHTML
• 加入文檔：appendChild

jQuery節點創建與屬性的處理

$("html結構")

2. DOM節點的插入

內部插入

• append(content): 向每個匹配的元素內部追加內容。前面是被插入的對象，后面是要在對象內插入的元素內容
• appendTo: 前面是要插入的元素內容，而后面是被插入的對象。
• prepend: 向每個匹配的元素內部前置內容
• prependTo: 把所有匹配的元素前置到另一個制定的集合中。

外部插入

• .after(content): 在匹配中的每個元素后面插入參數所制定的內容，作為其兄弟節點。內容作為參數。
• .before(content): 根據參數設定，在匹配元素的前面插入內容。內容作為參數。
• insertBefore: 在目標元素前面插入集合中每個匹配的元素。內容在前面。
• insertAfter: 在目標元素后面插入集合中每個匹配的元素。內容在前面。

注意點：
after向元素的后邊添加html代碼，如果元素后面有元素了，那將后面的元素后移，然后將html代碼插入
before向元素的前邊添加html代碼，如果元素前面有元素了，那將前面的元素前移，然后將html代碼插

3. DOM節點的刪除

empty()

移除 指定元素中的所有子節點。

<div class="hello"><p>Hello World</p></div>

// 如果我們通過empty方法移除里面div的所有元素，它只是清空內部的html代碼，但是標記仍然留在DOM中
// 通過empty處理
$('.hello').empty()

結果：

<p>慕課網</p>被移除
<div class="hello"></div>保留

remove

將元素內部及自身一塊移除。

// 下面兩個相同，刪除包含3的p元素
$("p").remove(":contains('3')");
$("p").filter(":contains('3')").remove();

detach()

從當前頁面中移除該元素，但保留這個元素的內存模型對象。

<p>P元素1，默認給綁定一個點擊事件</p>
<p>P元素2，默認給綁定一個點擊事件</p>
<button id="bt1">點擊刪除 p 元素</button>
<button id="bt2">點擊移動 p 元素</button>

$('p').click(function(e) {
        alert(e.target.innerHTML)
    })
    var p;
    $("#bt1").click(function() {
        if (!$("p").length) return; //去重
        //通過detach方法刪除元素
        //只是頁面不可見，但是這個節點還是保存在內存中
        //數據與事件都不會丟失
        p = $("p").detach()
    });

    $("#bt2").click(function() {
        //把p元素在添加到頁面中
        //事件還是存在
        $("body").append(p);
    });

3. jQuery 的復制和替換

clone()

• $("div").clone() : 只克隆結構，事件丟失
• $("div").clone(true) : 結構、事件、數據都克隆
  clone()方法時，在將它插入到文檔之前，我們可以修改克隆后的元素或者元素內容

$(".aaron1").on('click', function() {
    $(".left").append( $(this).clone().css('color','red') )
})

replaceWith()和replaceAll() 和 replaceAll()

功能相同，主要是目標和源的位置區別。

$("p:eq(1)").replaceWith('<a style="color:red">替換第二段的內容</a>')
$('<a style="color:red">替換第二段的內容</a>').replaceAll('p:eq(1)')

DOM包裹的方法

.wrap( wrappingElement )：在集合中匹配的每個元素周圍包裹一個HTML結構
unwrap(): 將匹配元素集合的父級元素刪除，保留自身（和兄弟元素，如果存在）在原來的位置。

// 給p元素增加一個div包裹
$('p').wrap('<div></div>')

最后的結構，p元素增加了一個父div的結構
<div>
    <p>p元素</p>
</div>

// 也可以通過函數回調的方法
 $(".aaron2").on('click', function() {
    //找到所有p元素，刪除父容器div
    $('a').unwrap(function() {
        return '<div></div>';
    })
})

wrapAll():給集合中匹配的元素增加一個外面包裹HTML結構

<p>p元素</p>
<p>p元素</p>
給所有p元素增加一個div包裹
$('p').wrapAll('<div></div>')
最后的結構，2個P元素都增加了一個父div的結構
<div>
    <p>p元素</p>
    <p>p元素</p>
</div>

.wrapInner( wrappingElement )：給集合中匹配的元素的內部，增加包裹的HTML結構

<p>p元素</p>
<p>p元素</p>
給所有p元素增加一個div包裹
$('p').wrapInner('<div></div>')
最后的結構，匹配的p元素的內部元素被div給包裹了
<p>
    <div>p元素</div>
</p>
<p>
    <div>p元素</div>
</p>

4. jQuery 遍歷

children方法

children(selector): 返回匹配元素集合中每個元素的所有子元素（僅兒子輩，這里可以理解為就是父親-兒子的關系）

// 找到所有class=div的元素 ，找到其對應的子元素ul，然后篩選出最后一個，給邊寬加上顏色。
$('.div').children(':last').css('border', '3px solid blue')

find()方法

find(): 快速查找DOM樹中的這些元素的后代元素(所有后代關系)
注意:

• find是遍歷當前元素集合中每個元素的后代。只要符合，不管是兒子輩，孫子輩都可以。
• .find() 必需參數。如果需要實現對所有后代元素的取回，可以傳遞通配選擇器 *。
• find只在后代中遍歷，不包括自己。
• 選擇器 context 是由.find() 方法實現的；因此，$('.item-ii').find('li') 等價于 $('li', '.item-ii')(找到類名為item-ii的標簽下的li標簽)。

 $("li:last",".left").css("border","1px solid blue");     
// 等價于
$(".left").find("li:last").css("border","1px solid blue");  

parent()和parents()方法

parent(): 查找合集里面的每一個元素的父元素（這里可以理解為就是父親-兒子的關系）
parents(): 查找合集里面的每一個元素的所有祖輩元素

 $('.item-a').parent(':last').css('border', '1px solid blue')
 //找到當前元素的所有祖輩元素,篩選出class="first-div"的元素
//并且附上一個邊
$('.item-b').parents('.first-div').css('border', '2px solid blue')

closest()方法

closest(): 從元素本身開始，在DOM 樹上逐級向上級元素匹配，并返回最先匹配的祖先元素

$('.item-1').closest('.level-2').css('border','1px solid red');

parents()和.closest()的不同

• 起始位置不同：.closest開始于當前元素，.parents開始于父元素
• 遍歷的目標不同：.closest要找到指定的目標，.parents遍歷到文檔根元素，closest向上查找，直到找到一個匹配的就停止查找，parents一直查找到根元素，并將匹配的元素加入集合
• 結果不同：.closest返回的是包含零個或一個元素的jquery對象，parents返回的是包含零個或一個或多個元素的jquery對象

next()方法

next(): 快速查找指定元素集合中每一個元素緊鄰的后面同輩元素的元素集合

//找到所有class=item-3的li
//然后篩選出第一個li，加上藍色的邊
$('.item-2').next(':first').css('border', '1px solid blue')

prev()方法

prev:查找指定元素集合中每一個元素緊鄰的前面同輩元素的元素集合

siblings()方法

siblings: 快速查找指定元素集合中每一個元素的同輩元素

add()方法

add: 創建一個新的jQuery對象 ，元素添加到匹配的元素集合中
.add()的參數可以幾乎接受任何的$()，包括一個jQuery選擇器表達式，DOM元素，或HTML片段引用。
$('li').add('p'):遍歷出li集合，再把p元素加到集合中。

each()方法

each是一個for循環的包裝迭代器
each通過回調的方式處理，并且會有2個固定的實參，索引與元素
each回調方法中的this指向當前迭代的dom元素

// 開始迭代li，循環2次
$("li").each(function(index, element) {
     index 索引 0,1
     element是對應的li節點 li,li
     this 指向的是li
})

$("button:last").click(function() {
    //遍歷所有的li
    //修改偶數li內的字體顏色
    $("li").each(function(index, element) {
        if (index % 2) {
            $(this).css('color','blue')
        }
    })
})