02j常見方法010jq01課堂筆記

1、jQuery 框架第 1 頁 共 16頁目錄jQuery 框架1目錄2一、傳統(tǒng)輪播和呼吸輪播復(fù)習(xí)31.1傳統(tǒng)輪播31.2三位置傳統(tǒng)輪播圖31.3呼吸輪播（交叉淡入淡出輪播）5二、異形滾動錯誤!未定義書簽。三、jQuery 框架63.1 JavaScript 編程比較惡心的地方63.2 jQuery 就是的集合63.3 簡介7四、jQuery 整體感知84.1選擇問題輕松解決84.2樣式問題輕松解決84.3動畫的問題輕松解決104.4批量添加、節(jié)點關(guān)系10五、$()函數(shù)115.1 jQuery 對象不是原生 JS 對象115.2引號問題115.3支持的選擇器125.4篩選器12六、CSS 函數(shù)1

2、3七、animate 函數(shù)14. 15八、第 2 頁 共 16頁先不直接jQuery，先把之前遺留的問題講了一、傳統(tǒng)輪播和呼吸輪播復(fù)習(xí)1.1 傳統(tǒng)輪播是一個 a，但是我們不希望點擊之后有任何默認(rèn)的事情，默認(rèn)事情通常是刷新當(dāng)前頁：最最關(guān)鍵的就是右按鈕、左按鈕的策略：右按鈕，處理最后一張的時候，先拉后瞬移：左按鈕，處理第一張的時候，先瞬移后拉動：1.2 三位置傳統(tǒng)輪播圖頁面效果，隨著人們的認(rèn)識深入，就產(chǎn)生的原理。傳統(tǒng)輪播的“火車法”的問題是，小圓點點擊的時候，拉動的圖片，跳躍性大。比如現(xiàn)在是 0 號圖，點擊 3 號小圓點，就會看見 1 號、2 號，停留在 3 號圖。不是平滑過渡。第 3 頁 共 1

3、6頁1 leftBtn.onclick = function()2 idx -;3 if(idx < 0 )4 idx = 4;5 m_unit.style.left = -560 * 5 + "px"67animate(m_unit, .,500)81 rightBtn.onclick = function()2 idx +;3 animate(m_unit, ,500,function()4 if(idx > 4)5 idx = 0;6 m_unit.style.left = “0px”;78)91<a href="javascript:;&

4、quot; class="leftBtn" id="leftBtn"></a>三位置傳統(tǒng)輪播圖，特點是，所有的 li 不是火車，而是都絕對。他們的 left 值只有三種可能：-560 0 560第 4 頁 共 16頁1.3 呼吸輪播（交叉淡入淡出輪播）摞在一起，不管點擊哪個按鈕，老圖淡出，新圖淡入。點擊小圓點，老圖淡出，新圖淡入。我們講一個 bug，就是元素 opacity:0 了，也能夠被點擊。解決辦法就是，頁面上有且又有一個 li 的 display:block；一定要牢記：呼吸輪播動畫的起點是 display:block； 動畫的

5、終點是 display:none;但是 JS 是沒法過渡 display 屬性的，所以我們就往中間加上了 opacity第 5 頁 共 16頁當(dāng)點擊右按鈕的時候：當(dāng)前這個圖片執(zhí)行 opacity10 的動畫，動畫結(jié)束之后，讓這個元素 display:none;新圖片執(zhí)行 opacity01 的動畫，動畫開始之前，瞬間讓新圖片 display:block;然后再動畫三、jQuery 框架3.1 JavaScript 編程比較不爽的地方不爽 1：選擇元素麻煩，全線兼容的方法只有 getElementById()和 getElementsByTagName()兩個。其他的方法是不爽的東西，能用“”來

6、解決，事實上我們已經(jīng)造了兩個：fetchComputedStyle、animate。能不能把所有組合起來，成為一個框架呢？jQuery 就是這樣的一個東西。3.2 jQuery 就是的集合jQuery 是 DOM 編程領(lǐng)域的霸主，極大的簡化了原生 JavaScript 的 DOM 編程。jQuery 中含有豐富的，完美解決了選擇元素難、樣式難、動畫難、批量操作難等各種兼容問題，讓工程師只需要思考業(yè)務(wù)，而不必思考細(xì)枝末節(jié)的兼容問題。John ResigjQuery 的第一創(chuàng)始人第 6 頁 共 16頁不都兼容的。getElementsByClassName()通過類名選擇元素，IE9 開始兼容。不

7、爽 2：樣式操作麻煩，得到原生樣式，需要我們造fetchComputedStyle()不爽 3：動畫麻煩，需要我們造animate();不爽 4：批量麻煩，大量出現(xiàn)的 for 循環(huán)語句；排他操作麻煩不爽 5：HTML 節(jié)點操作麻煩3.3 簡介官網(wǎng)：寫更少的代碼，做的事情的自我：簡單翻譯：jQuery 是一個快速、小型的、特性很多的 JS 庫，它把很多事兒都變得簡單。jQuery 是的。的、開源jQuery 有兩條版本線：1.X、2.X。jQuery2.X 和 1.X 的功能完全一致，API 完全一致，但是 2.X 不兼容 IE6、7、8。的時候有兩個選擇：第 7 頁 共 16頁jQuery 2

8、.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8.jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal andmanipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across

9、a multitudeof browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of peoplewrite JavaScript.四、jQuery 整體感知4.1 選擇問題輕松解決$()函數(shù)就是 jQuery 的函數(shù)，query 就是選擇的意思，也就是說 jQuery 的招牌功能就是選擇元素：語法：選擇的就是所有符合條件的元素，而不是一個。$可以用 jQuery 來代替，$和 jQuery 是同一個函數(shù)：一輩子就和 document.ge

10、tElmentById()無緣了，拜拜了你內(nèi)！jQuery 選擇的元素，所有瀏覽器兼容！4.2 樣式問題輕松解決得到樣式（得到計算后的樣式）：通過$()函數(shù)選擇出來的東西，都是 jQuery 對象，所有的 jQuery 對象，都可以繼續(xù)打點調(diào)用 css 函數(shù)，css函數(shù)已經(jīng)封裝了計算后的樣式。設(shè)置樣式：語法第 8 頁 共 16頁1$(“選擇器”).css(JSON);1$(".box").css(2"width":700,3"height" : 300,4"opacity" : 0.45);1$(".bo

11、x").css("width");1jQuery("#box ul li.haha span").css("background-color","red");1$(“選擇器”)1$("#box ul li.haha span").css("background-color","red");第 9 頁 共 16頁4.3 動畫的問題輕松解決jQuery 內(nèi)部含有一個運動框架，比我們上課寫的牛逼十萬倍！4.4 批量添加、節(jié)點關(guān)系所有的 li 都有了：s

12、iblings()表示兄弟節(jié)點。第 10 頁 共 16頁1 $(".circles ol li").mouseenter(function()2 /變紅，的兄弟恢復(fù)為橙色$(this).css("background-color","red").siblings().css("background-color","orange");3);1$(".box").animate("left":900,4000,function()2alert("運動

13、完成");3);五、$()函數(shù)5.1 jQuery 對象不是原生 JS 對象$()函數(shù)，是招牌功能，能夠根據(jù) CSS 選擇元素。比如：選擇頁面上 id 為 box 的盒子。注意，選擇出來的東西，是一個類數(shù)組對象，是 jQuery的語法：的對象，這個 jQuery 對象后面不能跟著原生 JS因為.style.backgroundColor 是原生 JS 語法，$()原則的對象是 jQuery 對象，不能跟著原生。所以，如果想把 jQuery 對象，轉(zhuǎn)為原生 JS 對象，要加0就行了：$等價于 jQuery5.2 引號問題注意引號不能丟！在 jQuery 世界中，只有三個東西不能加引號，

14、其他必須加引號：上述的三個東西，不能有引號，干嗎用的，后面說。第 11 頁 共 16頁1 $(this)2 $(document)3 $(window)1$("選擇器")1 jQuery("#box")2 等價于3$("#box")1$("#box")0.style.backgroundColor = "red"1$("#box").style.backgroundColor = "red"1$("#box")5.3 支持的選擇器jQu

15、ery 支持所有 CSS2.1 的選擇器：也支持部分 CSS3 的選擇器，我們 CSS3 的選擇器在 CSS3 課程，所以也不講了。5.4 篩選器這些都是關(guān)于序號的：特別的，eq 可以單獨提煉為方法，可以連續(xù)打點：等價于提煉出來的好處是，可以用變量第 12 頁 共 16頁1var a = 3;2$("p").eq(a).animate("width":400,1000);1$("p:eq(3)").animate("width":400,1000);1$("p").eq(3).animate(&

16、quot;width":400,1000);1 $("p")所有的 p2 $("p:first")第一個 p3 $("p:last")最后一個 p4$("p:eq(3)")下標(biāo)為 3 的p5$("p:lt(3)")下標(biāo)小于 3 的 p6$("p:gt(3)")下標(biāo)大于 3 的 p7 $("p:odd")下標(biāo)是奇數(shù)的 p8 $("p:even")下標(biāo)是偶數(shù)的 p1$("p")2$(".box&quo

17、t;)3$("#box")4 $("#box ul li")5 $("li.special")6$("ol , ul")7$("*")六、CSS 函數(shù)css 函數(shù)可以讀樣式，可以設(shè)樣式。讀樣式，可以計算后樣式，寫一個參數(shù)，是不是駝峰，無所謂，但是必須加引號：設(shè)置樣式，設(shè)置樣式，有兩種語法，如果你只想設(shè)置一個樣式，逗號隔開 k 和 v：如果想設(shè)置很多樣式，就寫 JSON:所有的數(shù)值，不需要：當(dāng)然，你也可以這樣，不厭其煩的用逗號：特別的，還支持+=寫法：第 13 頁 共 16頁1$("p:

18、eq(5)").css("width","+=20px");1$("p:lt(4)").css("width",20);2$("p:lt(4)").css("height",20);3$("p:lt(4)").css("backgroundColor","red");1$("p:lt(4)").css(2"width" : 20,3 "height"

19、; : 20,4 "backgroundColor" : "red"5)1$("p:odd").css(JSON);1$("p:odd").css("backgroundColor","blue");1 $("p:first").css("background-color");2 $("p:first").css("backgroundColor");七、animate 函數(shù)動畫我們驕傲的告訴大家，我們封裝的 animate 語法基本和 jQuery 一樣，只不過 jQuery 是對象打點：有沒有緩沖呢，有，jQuery 需要插件來完成，我們?nèi)蘸笳f。jQuery 默認(rèn)不是勻速，是 easeInOut和我們封裝的框架不一樣，jQuery 默認(rèn)有一個處理機(jī)制，叫做動畫排隊。當(dāng)一個元素接收到了兩個 animate 命令之后，后面的 animate 會排隊：先 2000 毫秒橫著跑，然后 2000 毫秒豎著跑。動畫總時長 4000