1、目錄jQuery 框架1目錄2一、復(fù)習(xí)上次課的內(nèi)容3二、序與迭代82.1 eq()方法82.2 index()方法92.3 each()92.4 size()方法和 length 屬性112.5 get()方法11三、動畫相關(guān)方法123.1 內(nèi)置 show()、hide()、toggle()方法123.2 slideDown()、slideUp()、slideToggle()方法錯誤!未定義書簽。3.3 fadeIn()、fadeOut()、fadeTo()、fadeToggle()方法錯誤!未定義書簽。3.4 stop()錯誤!未定義書簽。3.5 finish()錯誤!未定義書簽。3.6 d

2、elay()錯誤!未定義書簽。3.7 is(:animated)錯誤!未定義書簽。四、節(jié)點關(guān)系錯誤!未定義書簽。4.1原生 JS 中 nodeType 屬性錯誤!未定義書簽。4.2原生 JS 中的節(jié)點關(guān)系-childNodes錯誤!未定義書簽。4.3原生 JS 中的節(jié)點關(guān)系-parentNode錯誤!未定義書簽。4.4 previousSibling、nextSibling錯誤!未定義書簽。一、復(fù)習(xí)上次課的內(nèi)容$函數(shù)一定要加引號，只有沒有引號。$(“#box”)是 jQuery 對象，而不是 JS 原生對象。加0就能轉(zhuǎn)為原生對象這里補充一點，jQuery 選擇的如果是很多元素，那么0轉(zhuǎn)化的是一

3、個元素。1、2、3$函數(shù)和 jQuery 是同名函數(shù)，選擇器和篩選器選擇器 css2.1 支持，也支持部分 css3 的選擇器。篩選器，寫在引號里面，用:當(dāng)做篩選的功能符。1$(div:)2$(div:last)1jQuery(#box);$(#box)0.styackgroundColor = red;$(#box)1.styackgroundColor = red;$(#box)2.styackgroundColor = red;1$(#box)0.styackgroundColor = red;1$(this)2$()3$(window)1$(#box).css(background-c

4、olor,red);先解決大家一個疑惑：工作的時候用原生 JavaScript 寫效果，還是 jQuery？這是一個偽命題，原生 JS 開發(fā)效果，也會用一些簡化編程。關(guān)心的上層業(yè)務(wù)，而不是底層的一些茍且（比如瀏覽器兼容、獲得計算樣式啥的）。所以，你會發(fā)現(xiàn)，即使用原生 JS 寫效果，也編寫了 putedStyle()、animate()函數(shù)，已經(jīng)相當(dāng)于把 JS 的純底層的復(fù)雜性“”掉了。所以公司如果因為各種理由不用 jQuery（比如覺得 jQuery 尺寸大，影響頁面速度），那么一定也會使用 JS，或者其他類似 jQuery的東西。你會發(fā)現(xiàn) jQuery 沒有為簡化業(yè)務(wù)，輪播圖該寫邏輯還是寫邏

5、輯，只不過一些事情方便了。所以，趕緊好好學(xué)習(xí) jQuery，好好學(xué)習(xí)原生，好好學(xué)習(xí)邏輯，好好學(xué)習(xí)具體業(yè)務(wù)。特別的 eq 能單獨提煉為方法：1$(div).eq(3).css(background,red);3$(div:eq(0)4$(div:lt(4)5$(div:gt(3)$(div:odd)$(div:even)css()方法css 函數(shù)用來、設(shè)置元素的 css 樣式。可以計算后的樣式的。的時候一個參數(shù)，就是 k設(shè)置的時候：可以用 JSON 來簡化：特別的，可以有+=寫法：animate()方法對象打點調(diào)用 animate 方法，就能讓這個對象運動：你要記住這個事情，background

6、-color 是不能漸變的。頁面上如果想要使用 background-color 的過渡效果，慢慢從紅色變?yōu)樗{(lán)色，必須使用 css3。jQuery 中提供了非常牛逼的動畫隊列功能，相同元素的 animate()方累積1$(div).animate(width:600,1000);$(div:odd).animate(json,1000,function()$(this).css(background-color,red)3);1$(this).css(width,+=10px);var json = background-color : red,3width : 40,4height : 60

7、567$(div:odd).css(json);1$(div:eq(2).css(background-color,red);2$(div:eq(2).css(width,40px);3$(div:eq(2).css(height,60);1$(div:eq(5).css(width)不同元素的動畫是同時進行的：此時沒有 on 的1$(div:even).click(function()2$(this).animate(width:600,2000);3);1$(div:eq(0).animate(width:600,1000);2$(div:eq(1).animate(height:600,

8、1000);2$(div).animate(height:200,1000);有一個高度來看 jQuery，就是你一定要悟出來一個事兒：jQuery 中所有的東西，都是批量的。并且不用寫 for 循環(huán)語句：憑什么它這么牛逼。$()函數(shù)返回的是一組元素，每個方法比如 css 方法內(nèi)部都有 for 循環(huán)迭代。說白了，不是沒有 for 循環(huán)只不過for 循環(huán)隱藏到 css()方法里面了、隱藏到 animate()方法里面了、隱藏到了 click()方法里了。1$(div).css(background,red);/設(shè)置樣式是批量的2$(div).animate(width:300,4000); /設(shè)

9、置動畫是批量的3$(div).click(function();/設(shè)置事件是批量的二、序與迭代2.1 eq()方法來看下面的結(jié)構(gòu)，兩個 div 中各自有 4 個p，讓其中一個 p 變紅：現(xiàn)在想選擇 box2 里面的 1 號下標(biāo)的 p：$()函數(shù)將返回一個對象隊列，用 eq 來精確選擇這個序列中的某個元素。到底 eq 幾是這個元素呢？仰賴$()的序列是什么。1$(.box2 p).eq(1)2$(p).eq(5)3$(.teshu).eq(3)4$(.box2 .teshu).eq(1)125紅1011122.2 index()方法返回這個元素在親兄弟中的排名，無視選擇器怎么選。$(this).

10、index()是一個很常見的寫法，表示觸發(fā)這個事件的元素，在自己親兄弟中的排名：對應(yīng)：點擊 box1 里面的 p，讓對應(yīng)的 box2 里面的 p 變紅：最后強調(diào)一下，是 index()方法，而不是屬性！2.3 each()each()表示遍歷節(jié)點，也叫作迭代符合條件的節(jié)點。each()語句就好比派出一個偵察兵，挨家挨戶去敲門，敲開門之后做什么事情，寫在 function()里面，這里面的$(this)表示敲開門的這家。1$(p).each(function(i)2$(this).animate(width:50 * i,1000);3);/事件要給 box1 中的所有 p，$(.box1 p)

11、.click(function()/有變化的是 box2 中對應(yīng)的 p$(.box2 p).eq($(this).index().css(background-color,red);5);$(.teshu).click(function()alert($(this).index();3)$(“p”)選擇了頁面上的所有的 p，現(xiàn)在想分別為這個 p 設(shè)置不同的動畫終點。那么 each 語句就很好用，會依次遍歷所有的 p，$(this)表示你現(xiàn)在正在遍歷的 p。2.4 size()方法和 length 屬性jQuery 對象中元素的個數(shù)。前面$()的元素頁面上一共有幾個，length、size()返

12、回的都是同一個數(shù)值，就是個數(shù)。2.5 get()方法get()方法和 eq()方法基本一致，都仰賴$()的序列。eq()返回的是 jQuery 對象，而 get()返回的是原生 JS 對象。jQuery 對象后面要跟著 jQuery 方法，原生對象后面要跟著原生屬性、方法：等價于：等價于：1$(p).eq(2)0.innerHTML = ;1$(p).get(2).innerHTML = ;1$(p).eq(2).html();1$(p).length2$(p).size()三、動畫相關(guān)方法昨天學(xué)習(xí)了 animate()方法，很好用，繼續(xù)深入學(xué)習(xí)的動畫相關(guān)方法。3.1 內(nèi)置 show()、hide()、toggle()方法show()顯示、hide()隱藏、toggle()切換特別的，如果 show()、hide()、toggle()里面有數(shù)值，將變?yōu)閯赢嫞捍藭r display:none;的元素，將從左上角展開。動畫機理：這個 display:none;的元素會變?yōu)轱@示的，然后瞬間將寬度、高度、opacity 設(shè)為 0，然后展開。甚至可以加回調(diào)函數(shù)：原來如此！語法就是表示這個參數(shù)可選。1$(d