(續(xù)jQuery基礎(chǔ)(2))

四、動(dòng)畫篇

第1章 動(dòng)畫基礎(chǔ)隱藏和顯示

（1）隱藏元素的hide方法

讓頁(yè)面上的元素不可見，一般可以通過設(shè)置css的display為none屬性。但是通過css直接修改是靜態(tài)的布局，如果在代碼執(zhí)行的時(shí)候，一般是通過js控制元素的style屬性，這里jQuery提供了一個(gè)快捷的方法.hide()來達(dá)到這個(gè)效果
$elem.hide()

提供參數(shù)：

.hide( options )
當(dāng)提供hide方法一個(gè)參數(shù)時(shí)，.hide()就會(huì)成為一個(gè)動(dòng)畫方法。.hide()方法將會(huì)匹配元素的寬度，高度，以及不透明度，同時(shí)進(jìn)行動(dòng)畫操作

快捷參數(shù)：

.hide("fast / slow")
這是一個(gè)動(dòng)畫設(shè)置的快捷方式，'fast' 和 'slow' 分別代表200和600毫秒的延時(shí)，就是元素會(huì)執(zhí)行200/600毫秒的動(dòng)畫后再隱藏

注意：

jQuery在做hide操作的時(shí)候，是會(huì)保存本身的元素的原始屬性值，再之后通過對(duì)應(yīng)的方法還原的時(shí)候還是初始值。比如一個(gè)元素的display屬性值為inline，那么隱藏再顯示時(shí)，這個(gè)元素將再次顯示inline。一旦透明度 達(dá)到0，display樣式屬性將被設(shè)置為none，這個(gè)元素將不再在頁(yè)面中影響布局

        <h4>測(cè)試</h4>
        <div id="a2">hide動(dòng)畫操作</div>
        <button>hide帶動(dòng)畫</button>
        <script type="text/javascript">
        //點(diǎn)擊buttom2 執(zhí)行動(dòng)畫隱藏
        $("button:last").click(function() {
            $("#a2").hide({
                duration: 3000,
                complete: function() {
                    alert('執(zhí)行3000ms動(dòng)畫完畢')
                }
            })
        });
        </script>

（2）顯示元素的show方法

css中有display:none屬性，同時(shí)也有display:block，所以jQuery同樣提供了與hide相反的show方法

方法的使用幾乎與hide是一致的，hide是讓元素顯示到隱藏，show則是相反，讓元素從隱藏到顯示

看一段代碼：使用上一致，結(jié)果相反
$('elem').hide(3000).show(3000)
讓元素執(zhí)行3秒的隱藏動(dòng)畫，然后執(zhí)行3秒的顯示動(dòng)畫。

show與hide方法是非常常用的，但是一般很少會(huì)基于這2個(gè)屬性執(zhí)行動(dòng)畫，大多情況下還是直接操作元素的顯示與隱藏為主

注意事項(xiàng)：

• show與hide方法是修改的display屬性，通過是visibility屬性布局需要通過css方法單獨(dú)設(shè)置
• 如果使用!important在你的樣式中，比如display: none !important，如果你希望.show()方法正常工作，必須使用.css('display', 'block !important')重寫樣式
• 如果讓show與hide成為一個(gè)動(dòng)畫，那么默認(rèn)執(zhí)行動(dòng)畫會(huì)改變?cè)氐母叨龋叨?，透明?/li>

（3）顯示與隱藏切換toggle方法

show與hide是一對(duì)互斥的方法。需要對(duì)元素進(jìn)行顯示隱藏的互斥切換，通常情況是需要先判斷元素的display狀態(tài)，然后調(diào)用其對(duì)應(yīng)的處理方法。比如顯示的元素，那么就要調(diào)用hide，反之亦然。 對(duì)于這樣的操作行為，jQuery提供了一個(gè)便捷方法toggle用于切換顯示或隱藏匹配元素

1）基本的操作：toggle();

這是最基本的操作，處理元素顯示或者隱藏，因?yàn)椴粠?shù)，所以沒有動(dòng)畫。通過改變CSS的display屬性，匹配的元素將被立即顯示或隱藏，沒有動(dòng)畫。

• 如果元素是最初顯示，它會(huì)被隱藏
• 如果隱藏的，它會(huì)顯示出來

//toggle方法就是show與hide的相互切換的一個(gè)快捷方法，
if ( display === true ) {
  $( "elem" ).show();
} else if ( display === false ) {
  $( "elem" ).hide();
}

display屬性將被儲(chǔ)存并且需要的時(shí)候可以恢復(fù)。如果一個(gè)元素的display值為inline，然后是隱藏和顯示，這個(gè)元素將再次顯示inline

2）提供參數(shù)：$(selector).toggle(speed,callback,switch)

提供了時(shí)間、還有動(dòng)畫結(jié)束的回調(diào)。在參數(shù)對(duì)應(yīng)的時(shí)間內(nèi)，元素會(huì)發(fā)生顯示/隱藏的改變，在改變的過程中會(huì)把元素的高、寬、不透明度進(jìn)行一系列動(dòng)畫效果。
switch 可選。布爾值。規(guī)定 toggle 是否隱藏或顯示所有被選元素。
true - 顯示所有元素
false - 隱藏所有元素
如果設(shè)置此參數(shù)，則無(wú)法使用 speed 和 callback 參數(shù)。

第2章 上卷下拉效果

（1）下拉動(dòng)畫slideDown

對(duì)于隱藏的元素，在將其顯示出來的過程中，可以對(duì)其進(jìn)行一些變化的動(dòng)畫效果。之前學(xué)過了show方法，show方法在顯示的過程中也可以有動(dòng)畫，但是.show()方法將會(huì)匹配元素的寬度，高度，以及不透明度，同時(shí)進(jìn)行動(dòng)畫操作。這里將要學(xué)習(xí)一個(gè)新的顯示方法slideDown方法

1）.slideDown()：用滑動(dòng)動(dòng)畫顯示一個(gè)匹配元素

.slideDown()方法將改變匹配元素的高度，會(huì)導(dǎo)致匹配元素的下面部分下滑。

常見的操作，提供一個(gè)動(dòng)畫時(shí)間，用于知道動(dòng)畫是什么時(shí)候結(jié)束；然后傳遞一個(gè)回調(diào)，用于執(zhí)行動(dòng)畫完成后需要的操作。

.slideDown( [duration ] [, complete ] )
持續(xù)時(shí)間（duration）是以毫秒為單位的，數(shù)值越大，動(dòng)畫越慢，不是越快。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時(shí)。如果提供任何其他字符串，或者這個(gè)duration參數(shù)被省略，那么默認(rèn)使用400 毫秒的延時(shí)。

具體使用：

        $("button:last").click(function() {
            $("#a2").slideDown(3000,function(){
                alert('動(dòng)畫執(zhí)行結(jié)束')
            })
        });

2）注意事項(xiàng)：

• 下拉動(dòng)畫是從無(wú)到有，所以一開始元素是需要先隱藏起來的，可以設(shè)置display:none
• 如果提供回調(diào)函數(shù)參數(shù)，callback會(huì)在動(dòng)畫完成的時(shí)候調(diào)用。將不同的動(dòng)畫串聯(lián)在一起按順序排列執(zhí)行是非常有用的。這個(gè)回調(diào)函數(shù)不設(shè)置任何參數(shù)，但是 this會(huì)設(shè)成將要執(zhí)行動(dòng)畫的那個(gè)DOM元素，如果多個(gè)元素一起做動(dòng)畫效果，那么要非常注意，回調(diào)函數(shù)會(huì)在每一個(gè)元素執(zhí)行完動(dòng)畫后都執(zhí)行一次，而不是這組動(dòng)畫整體執(zhí)行完后才執(zhí)行一次

（2）上卷動(dòng)畫slideUp

對(duì)于顯示的元素，在將其隱藏的過程中，可以對(duì)其進(jìn)行一些變化的動(dòng)畫效果。之前學(xué)過了hide方法，hide方法在顯示的過程中也可以有動(dòng)畫，但是.hide()方法將為匹配元素的寬度，高度，以及不透明度，同時(shí)進(jìn)行動(dòng)畫操作。這里將要學(xué)習(xí)一個(gè)新的顯示方法slideUp方法

1）最簡(jiǎn)單的使用：不帶參數(shù)

$("elem").slideUp();
這個(gè)使用的含義就是：找到元素的高度，然后采用一個(gè)上卷動(dòng)畫讓元素一直到隱藏，當(dāng)高度為0的時(shí)候，也就是不可見時(shí)，修改元素display 樣式屬性被設(shè)置為none。這樣就能確保這個(gè)元素不會(huì)影響頁(yè)面布局了

2）帶參數(shù)：

.slideUp( [duration ] [, easing ] [, complete ] )
可以提供一個(gè)時(shí)間，然后可以使用一種過渡使用的緩動(dòng)函數(shù)，jQuery默認(rèn)就2種，可以通過下載插件支持。最后一個(gè)動(dòng)畫結(jié)束的回調(diào)方法。

因?yàn)閯?dòng)畫是異步的，所以要在動(dòng)畫之后執(zhí)行某些操作就必須要寫到回調(diào)函數(shù)里面，這里要特別注意

（3）上卷下拉切換slideToggle

slideDown與slideUp是一對(duì)相反的方法。需要對(duì)元素進(jìn)行上下拉卷效果的切換，jQuery提供了一個(gè)便捷方法slideToggle用滑動(dòng)動(dòng)畫顯示或隱藏一個(gè)匹配元素

1）基本的操作：slideToggle();

這是最基本的操作，獲取元素的高度，使這個(gè)元素的高度發(fā)生改變，從而讓元素里的內(nèi)容往下或往上滑。

2）提供參數(shù)：.slideToggle( [duration ] ,[ complete ] )

同樣的提供了時(shí)間、還有動(dòng)畫結(jié)束的回調(diào)。在參數(shù)對(duì)應(yīng)的時(shí)間內(nèi)，元素會(huì)完成動(dòng)畫，然后觸發(fā)回調(diào)函數(shù)

同時(shí)也提供了時(shí)間的快速定義，字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時(shí)

slideToggle("fast") 
slideToggle("slow") 

3）注意：

• display屬性值保存在jQuery的數(shù)據(jù)緩存中，所以display以后可以恢復(fù)到其初始值
• 當(dāng)一個(gè)隱藏動(dòng)畫后，高度值達(dá)到0的時(shí)候，display 樣式屬性被設(shè)置為none，以確保該元素不再影響頁(yè)面布局

第3章 淡入淡出效果

（1）淡出動(dòng)畫fadeOut

讓元素在頁(yè)面不可見，常用的辦法就是通過設(shè)置樣式的display:none。除此之外還可以用一些類似的辦法可以達(dá)到這個(gè)目的。這里要提一個(gè)透明度的方法，設(shè)置元素透明度為0，可以讓元素不可見，透明度的參數(shù)是0~1之間的值，通過改變這個(gè)值可以讓元素有一個(gè)透明度的效果。常見的淡入淡出動(dòng)畫正是這樣的原理。

1）fadeOut()函數(shù)用于隱藏所有匹配的元素，并帶有淡出的過渡動(dòng)畫效果

所謂"淡出"隱藏，元素是隱藏狀態(tài)不對(duì)其作任何改變，元素是可見的，則將其隱藏。
.fadeOut( [duration ], [ complete ] )
通過不透明度的變化來實(shí)現(xiàn)所有匹配元素的淡出效果，并在動(dòng)畫完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。這個(gè)動(dòng)畫只調(diào)整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會(huì)發(fā)生變化。

字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時(shí)。如果提供任何其他字符串，或者這個(gè)duration參數(shù)被省略，那么默認(rèn)使用400毫秒的延時(shí)

（2）淡入動(dòng)畫fadeIn

fadeOut是淡出效果，相反的還有淡入效果fadeIn,方法使用上兩者都是一致的，只是結(jié)果相反

.fadeIn( [duration ], [ complete ] )

• duration：指定過渡動(dòng)畫運(yùn)行多長(zhǎng)時(shí)間(毫秒數(shù))，默認(rèn)值為400。該參數(shù)也可以為字符串"fast"(=200)或"slow"(=600)。
• 元素顯示完畢后需要執(zhí)行的函數(shù)。函數(shù)內(nèi)的this指向當(dāng)前DOM元素。
  fadeIn()函數(shù)用于顯示所有匹配的元素，并帶有淡入的過渡動(dòng)畫效果。

注意：

• 淡入的動(dòng)畫原理：操作元素的不透明度從0%逐漸增加到100%
• 如果元素本身是可見的，不對(duì)其作任何改變。如果元素是隱藏的，則使其可見

（3）淡入淡出切換fadeToggle

fadeToggle()函數(shù)用于切換所有匹配的元素，并帶有淡入/淡出的過渡動(dòng)畫效果。之前也學(xué)過toggle、slideToggle 也是類似的處理方式

fadeToggle切換fadeOut與fadeIn效果，所謂"切換"，即如果元素當(dāng)前是可見的，則將其隱藏(淡出)；如果元素當(dāng)前是隱藏的，則使其顯示(淡入)。

常用語(yǔ)法：.fadeToggle( [duration ] ,[ complete ] )

可選的 duration 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。 可選的 callback 參數(shù)是 fadeToggle完成后所執(zhí)行的函數(shù)名稱。

fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進(jìn)行切換。如果元素已淡出，則 fadeToggle() 會(huì)向元素添加淡入效果。如果元素已淡入，則 fadeToggle() 會(huì)向元素添加淡出效果。

（4）淡入效果fadeTo

淡入淡出fadeIn與fadeOut都是修改元素樣式的opacity屬性，但是他們都有個(gè)共同的特點(diǎn)，變化的區(qū)間要么是0，要么是1

fadeIn：淡入效果，內(nèi)容顯示，opacity是0到1
fadeOut：淡出效果，內(nèi)容隱藏，opacity是1到0
如果要讓元素保持動(dòng)畫效果，執(zhí)行opacity = 0.5的效果時(shí)，要如何處理？

如果不考慮CSS3，我們用JS實(shí)現(xiàn)的話，基本就是通過定時(shí)器，在設(shè)定的時(shí)間內(nèi)一點(diǎn)點(diǎn)的修改opacity的值，最終為0.5，原理雖說簡(jiǎn)單，但是總不如一鍵設(shè)置這么舒服，jQuery提供了fadeTo方法，可以讓改變透明度一步到位

語(yǔ)法：.fadeTo( duration, opacity ,callback)
必需的 duration參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度（值介于 0 與 1 之間）?？蛇x的 callback 參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱。

（5）toggle與slideToggle以及fadeToggle的比較

操作元素的顯示和隱藏可以有幾種方法。例如：

• 改變樣式display為none
• 設(shè)置位置高度為0
• 設(shè)置透明度為0

都能達(dá)到這個(gè)目的，并且針對(duì)這樣的處理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此之外，還引入了toggle、sildeToggle以及fadeToggle切換方法

toggle、sildeToggle以及fadeToggle的區(qū)別：

• toggle：切換顯示與隱藏效果。動(dòng)態(tài)效果為從右至左，橫向動(dòng)作。通過display來判斷切換所有匹配元素的可見性
• sildeToggle：切換上下拉卷滾效果。動(dòng)態(tài)效果從下至上，豎向動(dòng)作。通過高度變化來切換所有匹配元素的可見性
• fadeToggle：切換淡入淡出效果。通過透明度變化來切換所有匹配元素的可見性

注釋：隱藏的元素不影響頁(yè)面的布局

第4章 自定義動(dòng)畫

（1）jQuery中動(dòng)畫animate

有些復(fù)雜的動(dòng)畫通過之前學(xué)到的幾個(gè)動(dòng)畫函數(shù)是不能夠?qū)崿F(xiàn)，這時(shí)候就需要強(qiáng)大的animate方法了

操作一個(gè)元素執(zhí)行3秒的淡入動(dòng)畫，對(duì)比一下2組動(dòng)畫設(shè)置的區(qū)別

$(elem).fadeOut(3000)  
$(elem).animate({   
    opacity:0
},3000)

顯而易見，animate方法更加靈活了，可以精確的控制樣式屬性從而執(zhí)行動(dòng)畫

語(yǔ)法：

.animate( properties ,[ duration ], [ easing ], [ complete ] )
.animate( properties, options )

.animate()方法允許我們?cè)谌我獾臄?shù)值的CSS屬性上創(chuàng)建動(dòng)畫。2種語(yǔ)法使用，幾乎差不多了，唯一必要的屬性就是一組CSS屬性鍵值對(duì)。這組屬性和用于設(shè)置.css()方法的屬性鍵值對(duì)類似，除了屬性范圍做了更多限制。第二個(gè)參數(shù)可以單獨(dú)傳遞多個(gè)實(shí)參也可以合并成一個(gè)對(duì)象傳遞

參數(shù)分解：

1）properties

一個(gè)或多個(gè)css屬性的鍵值對(duì)所構(gòu)成的Object對(duì)象。要特別注意所有用于動(dòng)畫的屬性必須是數(shù)字的，除非另有說明；這些屬性如果不是數(shù)字的將不能使用基本的jQuery功能。比如常見的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等這些都是能產(chǎn)生動(dòng)畫效果的。background-color很明顯不可以，因?yàn)閰?shù)是red或者GBG這樣的值，非常用插件，否則正常情況下是不能只用動(dòng)畫效果的。注意，CSS 樣式使用 DOM 名稱（比如 "fontSize"）來設(shè)置，而非 CSS 名稱（比如 "font-size"）。

特別注意單位，屬性值的單位像素（px）,除非另有說明。單位em 和 %需要指定使用

.animate({
    left: 50, 
    width: '50px'   
    opacity: 'show',  
    fontSize: "10em",
}, 500);

除了定義數(shù)值，每個(gè)屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式允許定制隱藏和顯示動(dòng)畫，用來控制元素的顯示或隱藏

.animate({
    width: "toggle"
});

如果提供一個(gè)以+= 或 -=開始的值，那么目標(biāo)值就是以這個(gè)屬性的當(dāng)前值加上或者減去給定的數(shù)字來計(jì)算的

.animate({ 
    left: '+=50px'
}, "slow");

2）duration時(shí)間

動(dòng)畫執(zhí)行的時(shí)間，持續(xù)時(shí)間是以毫秒為單位的；值越大表示動(dòng)畫執(zhí)行的越慢，不是越快。還可以提供'fast' 和 'slow'字符串，分別表示持續(xù)時(shí)間為200 和 600毫秒。

3）easing動(dòng)畫運(yùn)動(dòng)的算法

jQuery庫(kù)中默認(rèn)調(diào)用 swing。如果需要其他的動(dòng)畫算法，請(qǐng)查找相關(guān)的插件

4）complete回調(diào)

動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，這個(gè)可以保證當(dāng)前動(dòng)畫確定完成后發(fā)會(huì)觸發(fā)

5）options參數(shù)

animate在執(zhí)行動(dòng)畫中，如果需要觀察動(dòng)畫的一些執(zhí)行情況，或者在動(dòng)畫進(jìn)行中的某一時(shí)刻進(jìn)行一些其他處理，我們可以通過animate提供的第二種設(shè)置語(yǔ)法，傳遞一個(gè)對(duì)象參數(shù)，可以拿到動(dòng)畫執(zhí)行狀態(tài)一些通知
.animate( properties, options )

• duration - 設(shè)置動(dòng)畫執(zhí)行的時(shí)間
• easing - 規(guī)定要使用的 easing 函數(shù)，過渡使用哪種緩動(dòng)函數(shù)
• step：規(guī)定每個(gè)動(dòng)畫的每一步完成之后要執(zhí)行的函數(shù)
• progress：每一次動(dòng)畫調(diào)用的時(shí)候會(huì)執(zhí)行這個(gè)回調(diào)，就是一個(gè)進(jìn)度的概念
• complete：動(dòng)畫完成回調(diào)

其中最關(guān)鍵的一點(diǎn)就是：
如果多個(gè)元素執(zhí)行動(dòng)畫，回調(diào)將在每個(gè)匹配的元素上執(zhí)行一次，不是作為整個(gè)動(dòng)畫執(zhí)行一次

<script type="text/javascript">
    $("#exec").click(function() {
        var v = $("#animation").val();
        var $aaron = $("#aaron");
        if (v == "1") {
            //觀察每一次動(dòng)畫的改變
            $aaron.animate({
                height: '50'
            }, {
                duration :2000,
                //每一個(gè)動(dòng)畫都會(huì)調(diào)用
                step: function(now, fx) {
                   $aaron.text('高度的改變值:'+now)
                }
            })
        } else if (v == "2") {
            //觀察每一次進(jìn)度的變化
            $aaron.animate({
                height: '50'
            }, {
                duration :2000,
                //每一步動(dòng)畫完成后調(diào)用的一個(gè)函數(shù)，
                //無(wú)論動(dòng)畫屬性有多少，每個(gè)動(dòng)畫元素都執(zhí)行單獨(dú)的函數(shù)
                progress: function(now, fx) {
                   $aaron.text('進(jìn)度:'+arguments[1] +now)
                }
            })
        } 
    });
    </script>

（2）jQuery中停止動(dòng)畫stop

動(dòng)畫在執(zhí)行過程中是允許被暫停的，如果同一元素調(diào)用多個(gè)動(dòng)畫方法，尚未被執(zhí)行的動(dòng)畫被放置在元素的效果隊(duì)列中。這些動(dòng)畫不會(huì)開始，直到前面的動(dòng)畫完成。

語(yǔ)法：$(selector).stop(stopAll,goToEnd)

簡(jiǎn)單來說可以有這3種情況：

• .stop();如果同一元素調(diào)用多個(gè)動(dòng)畫方法， 會(huì)停止當(dāng)前動(dòng)畫，執(zhí)行之后的動(dòng)畫效果。
• .stop(true); 停止所有動(dòng)畫。
• .stop(true,true); 立即完成當(dāng)前動(dòng)畫后停止所有動(dòng)畫，該元素上的 CSS 屬性會(huì)被立刻修改成當(dāng)前動(dòng)畫的目標(biāo)值

簡(jiǎn)單的說：參考下面代碼、

$("#aaron").animate({//第一個(gè)動(dòng)畫
    height: 300
}, 5000)
$("#aaron").animate({//第二個(gè)動(dòng)畫
    width: 300
}, 5000)
$("#aaron").animate({//第三個(gè)動(dòng)畫
    opacity: 0.6
}, 2000)

在第一個(gè)動(dòng)畫進(jìn)行時(shí)執(zhí)行下面操作：

• stop()：只會(huì)停止第一個(gè)動(dòng)畫，第二個(gè)第三個(gè)動(dòng)畫繼續(xù)
• stop(true)：停止第一個(gè)、第二個(gè)和第三個(gè)動(dòng)畫
• stop(true ture)：直接跳到第一個(gè)動(dòng)畫的最終狀態(tài)并停止動(dòng)畫，

第5章 jQuery核心

（1）each方法的應(yīng)用

jQuery中有個(gè)很重要的核心方法each，大部分jQuery方法在內(nèi)部都會(huì)調(diào)用each，其主要的原因的就是jQuery的實(shí)例是一個(gè)元素合集

如：$('div').css(...)
找到所有的div，并且都設(shè)置樣式，css只是一個(gè)方法，所以內(nèi)部會(huì)調(diào)用each處理這個(gè)div的合集，給每個(gè)div都設(shè)置style屬性

jQuery的大部分方法都是針元素合集的操作，所以jQuery會(huì)提供$(selector).each()來遍歷jQuery對(duì)象

.each只是處理jQuery對(duì)象的方法，jQuery還提供了一個(gè)通用的jQuery.each方法，用來處理對(duì)象和數(shù)組的遍歷

語(yǔ)法

jQuery.each(array, callback )
jQuery.each( object, callback )

第一個(gè)參數(shù)傳遞的就是一個(gè)對(duì)象或者數(shù)組，第二個(gè)是回調(diào)函數(shù)

each就是for循環(huán)方法的一個(gè)包裝，內(nèi)部就是通過for遍歷數(shù)組與對(duì)象，通過回調(diào)函數(shù)返回內(nèi)部迭代的一些參數(shù)，第一個(gè)參數(shù)是當(dāng)前迭代成員在對(duì)象或數(shù)組中的索引值(從0開始計(jì)數(shù))，第二個(gè)參數(shù)是當(dāng)前迭代成員。

jQuery.each()函數(shù)還會(huì)根據(jù)每次調(diào)用函數(shù)callback的返回值來決定后續(xù)動(dòng)作。如果返回值為false，則停止循環(huán)(相當(dāng)于普通循環(huán)中的break)；如果返回其他任何值，均表示繼續(xù)執(zhí)行下一個(gè)循環(huán)。

$.each(["Aaron", "慕課網(wǎng)"], function(index, value) {
    return false; //停止迭代
});

jQuery方法可以很方便的遍歷一個(gè)數(shù)據(jù)，不需要考慮這個(gè)數(shù)據(jù)是對(duì)象還是數(shù)組

 // 遍歷數(shù)組元素
$.each(['Aaron', '慕課網(wǎng)'], function(i, item) {
     $aaron.append("索引=" + i + "; 元素=" + item);
});

結(jié)果：索引=0; 元素=Aaron索引=1; 元素=慕課網(wǎng)

 // 遍歷對(duì)象屬性
$.each({
   name: "張三",
   age: 18
}, function(property, value) {
     $aaron.append("屬性名=" + property + "; 屬性值=" + value);
});

結(jié)果：屬性名=name; 屬性值=張三屬性名=age; 屬性值=18

（2）查找數(shù)組中的索引inArray

在PHP有in_array()判斷某個(gè)元素是否存在數(shù)組中，JavaScript卻沒有，但是jQuery封裝了inArray()函數(shù)判斷元素是否存在數(shù)組中。注意了：在ECMAScript5已經(jīng)有數(shù)據(jù)的indexOf方法支持了，但是jQuery保持了版本向下兼容，所以封裝了一個(gè)inArray方法

jQuery.inArray()函數(shù)用于在數(shù)組中搜索指定的值，并返回其索引值。如果數(shù)組中不存在該值，則返回 -1。

語(yǔ)法：

jQuery.inArray( value, array ,[ fromIndex ] )
用法非常簡(jiǎn)單，傳遞一個(gè)檢測(cè)的目標(biāo)值，然后傳遞原始的數(shù)組，可以通過fromIndex規(guī)定查找的起始值，默認(rèn)數(shù)組是0開始

例如：在數(shù)組中查找值是5的索引
$.inArray(5,[1,2,3,4,5,6,7]) //返回對(duì)應(yīng)的索引：4

注意：

如果要判斷數(shù)組中是否存在指定值，你需要通過該函數(shù)的返回值不等于(或大于)-1來進(jìn)行判斷

（3）去空格神器trim方法

頁(yè)面中，通過input可以獲取用戶的輸入值，例如常見的登錄信息的提交處理。用戶的輸入不一定是標(biāo)準(zhǔn)的，輸入一段密碼：' 1123456 "，注意了： 密碼的前后會(huì)留空，這可能是用戶的無(wú)心的行為，但是密碼確實(shí)又沒錯(cuò)，針對(duì)這樣的行為，開發(fā)者應(yīng)該要判斷輸入值的前后是否有空白符、換行符、制表符這樣明顯的無(wú)意義的輸入值。
jQuery.trim()函數(shù)用于去除字符串兩端的空白字符
這個(gè)函數(shù)很簡(jiǎn)單，沒有多余的參數(shù)用法

需要注意：

移除字符串開始和結(jié)尾處的所有換行符，空格(包括連續(xù)的空格)和制表符（tab）
如果這些空白字符在字符串中間時(shí)，它們將被保留，不會(huì)被移除

 alert("值的長(zhǎng)度：" + $("#results1").val().length)
 alert("值的長(zhǎng)度：" + $.trim($("#results2").val()).length)

（4）DOM元素的獲取get方法

jQuery是一個(gè)合集對(duì)象，如果需要單獨(dú)操作合集中的的某一個(gè)元素，可以通過.get()方法獲取到

以下有3個(gè)a元素結(jié)構(gòu)：

<a>1</a>
<a>2</a>
<a>3</a>

通過jQuery獲取所有的a元素合集$("a")，如果想進(jìn)一步在合集中找到第二2個(gè)dom元素單獨(dú)處理，可以通過get方法
語(yǔ)法：.get( [index ] )

注意：

1. get方法是獲取的dom對(duì)象，也就是通過document.getElementById獲取的對(duì)象
2. get方法是從0開始索引

所以第二個(gè)a元素的查找：$(a).get(1)

負(fù)索引值參數(shù)

get方法還可以從后往前索引，傳遞一個(gè)負(fù)索引值，注意的負(fù)值的索引起始值是-1
同樣是找到第二元素，可以傳遞$(a).get(-2)

（5）DOM元素的獲取index方法

get方法是通過已知的索引在合集中找到對(duì)應(yīng)的元素。如果反過來，已知元素如何在合集中找到對(duì)應(yīng)的索引呢？
.index()方法，從匹配的元素中搜索給定元素的索引值，從0開始計(jì)數(shù)。

語(yǔ)法：參數(shù)接受一個(gè)jQuery或者dom對(duì)象作為查找的條件

.index()
.index( selector )
.index( element )

• 如果不傳遞任何參數(shù)給 .index() 方法，則返回值就是jQuery對(duì)象中第一個(gè)元素相對(duì)于它同輩元素的位置
• 如果在一組元素上調(diào)用 .index() ，并且參數(shù)是一個(gè)DOM元素或jQuery對(duì)象， .index() 返回值就是傳入的元素相對(duì)于原先集合的位置
• 如果參數(shù)是一個(gè)選擇器， .index() 返回值就是原先元素相對(duì)于選擇器匹配元素的位置。如果找不到匹配的元素，則 .index() 返回 -1

簡(jiǎn)單來說：

<ul>
    <a></a>
    <li id="test1">1</li>
    <li id="test2">2</li>
    <li id="test3">3</li>
</ul>

$("li").index() 沒有傳遞參數(shù)，反正的結(jié)果是1，它的意思是返回同輩的排列循序，第一個(gè)li之前有a元素,同輩元素是a開始為0，所以li的開始索引是1

如果要快速找到第二個(gè)li在列表中的索引,可以通過如下2種方式處理

$("li").index(document.getElementById("test2")) //結(jié)果：1
$("li").index($("#test2"))  //結(jié)果:1

來源：慕課網(wǎng)_jQuery基礎(chǔ)(四)—?jiǎng)赢嬈?/a>