jQuery培訓(xùn)課程第一課時(shí)ppt課件

1、jQuery 根底教程配套課件 V1.0 內(nèi)容簡(jiǎn)介jQuery的原理一jQuery對(duì)象和DOM對(duì)象二jQuery選擇器三三jQuery的原理jQuery的歷史jQuery是由美國(guó)人 John Resig 創(chuàng)建，它是輕量級(jí)js庫(kù)這是其他的js庫(kù)所不及的。 2005年8月22日，John Resig提出Behaviour框架的三種改良建議支持層級(jí)選擇符、支持事件綁定、消除冗余關(guān)鍵字2006年1月14日jQuery正式發(fā)布2006年1月25日，首個(gè)jQuery插件發(fā)布2006年2月26日，jQuery AJAX插件發(fā)布jQuery是一種新的JavaScript庫(kù)。 jQuery是繼prototype

2、只需又一個(gè)優(yōu)秀的js框架其目的是：WRITE LESS, DO MORE,(寫更少的代碼，做更多的事情。)jQuery的原理jQuery是為了改動(dòng)javascript的編碼方式而設(shè)計(jì)的，它把面向?qū)ο笏枷氚l(fā)揚(yáng)的淋漓盡致它那么它是如何實(shí)現(xiàn)它的聲明的呢?這里,用以下的一段簡(jiǎn)短的運(yùn)用流程:查找(創(chuàng)建)jQuery對(duì)象:$(selector);調(diào)用jQuery對(duì)象的方法完成我們需求完成的任務(wù):$(selector).doOurWork();jQuery就是以這種可以說是最簡(jiǎn)單的編碼邏輯來改動(dòng)js編碼方式的.這兩個(gè)步驟是jQuery的編碼邏輯中心,要實(shí)現(xiàn)這種簡(jiǎn)約編碼方式,創(chuàng)建jQuery對(duì)象這一環(huán)節(jié)至關(guān)重

3、要.因此,jQuery的dom元素查找才干相當(dāng)強(qiáng)悍。*jQuery() = $()jQuery的優(yōu)勢(shì) 輕量級(jí) Lightweight強(qiáng)大的選擇器 出色的DOM操作封裝 可靠的事件處置機(jī)制 出色的閱讀器兼容性完善的AJAX鏈?zhǔn)讲僮鞣绞叫袨閷雍蜆?gòu)造層分別豐富的插件支持和完善的文檔原理：寫得少, 做得多JavaScript框架簡(jiǎn)介隨著JavaScript、CSS、Ajax等技術(shù)的不斷提高，越來越多的開發(fā)者將一個(gè)又一個(gè)豐富多彩的程序功能進(jìn)展封裝，供其他人可以調(diào)用這些封裝好的程序組件框架當(dāng)前流行的 JavaScript 庫(kù)有: jQuery的運(yùn)用下載：jquery提供了最新的jQuery框架下載。通常只

4、需下載最小的jQuery包Minified即可。目前最新的版本jquery-2.0.3.min.js文件只需81.6 KB *歷史版本：jQuery 1.0、jQuery 1.1、jQuery 1.1.3、jQuery 1.2、jQuery 1.2.6 、 jQuery 1.3 、 jQuery 1.3.2 、 jQuery 1.4、 jQuery1.5 、 jQuery 1.6 、 jQuery 1.7 、 jQuery 1.7.1 、 jQuery 1.7.2jQuery 1.10.2、jQuery 2.0.3援用：將jQuery框架文件導(dǎo)入后，就可以運(yùn)用jQuery的選擇器和各種函數(shù)功能

5、了。 第一個(gè)jQuery程序 $(document).ready(function() alert(Hello World!););引入jQuery等待DOM文檔載入后執(zhí)行類似于window.onload彈出一個(gè)對(duì)話框jQuery對(duì)象與DOM對(duì)象jQuery 對(duì)象jQuery 對(duì)象就是經(jīng)過 jQuery 包裝 DOM 對(duì)象后產(chǎn)生的對(duì)象jQuery 對(duì)象是 jQuery 獨(dú)有的. 假設(shè)一個(gè)對(duì)象是 jQuery 對(duì)象, 那么它就可以運(yùn)用 jQuery 里的方法: $(“#tab).html();jQuery 對(duì)象無法運(yùn)用 DOM 對(duì)象的任何方法, 同樣 DOM 對(duì)象也不能運(yùn)用 jQuery 里的任

6、何方法建議商定：假設(shè)獲取的是 jQuery 對(duì)象, 那么要在變量前面加上 $. var $variable = jQuery 對(duì)象var variable = DOM 對(duì)象jQuery 對(duì)象轉(zhuǎn)成 DOM 對(duì)象jQuery 對(duì)象不能運(yùn)用 DOM 中的方法, 但假設(shè) jQuery 沒有封裝想要的方法, 不得不運(yùn)用 DOM方法的時(shí)候, 有如下兩種處置方法:jQuery 對(duì)象是一個(gè)數(shù)組對(duì)象, 可以經(jīng)過 index 的方法得到對(duì)應(yīng)的 DOM對(duì)象$(#msg)0 運(yùn)用 jQuery 中的 get(index) 方法得到相應(yīng)的 DOM 對(duì)象$(#msg).get(0)jQuery() = $()DOM 對(duì)象

7、轉(zhuǎn)成 jQuery 對(duì)象對(duì)于一個(gè) DOM 對(duì)象, 只需求用 $() 把 DOM 對(duì)象包裝起來(jQuery 對(duì)象就是經(jīng)過 jQuery 包裝 DOM 對(duì)象后產(chǎn)生的對(duì)象), 就可以獲得一個(gè) jQuery 對(duì)象. 例如：$(document.getElementById(“msg)$(“#msg)轉(zhuǎn)換后就可以運(yùn)用 jQuery 中的方法了jQuery對(duì)象與dom對(duì)象的轉(zhuǎn)換舉例以下幾種寫法都是正確的：$(#msg).html();$(#msg)0.innerHTML;$(#msg).eq(0)0.innerHTML;$(#msg).get(0).innerHTML;如：$(#msg)0，$(div)

8、.eq(1)0，$(div).get()1，$(td)5這些都是dom對(duì)象，可以運(yùn)用dom中的方法，但不能再運(yùn)用jQuery的方法 jQuery的選擇器jQuery 選擇器選擇器是 jQuery 的根基, 在 jQuery 中, 對(duì)事件處置, 遍歷 DOM 和 Ajax 操作都依賴于選擇器jQuery 選擇器的優(yōu)點(diǎn):簡(jiǎn)約的寫法完善的事件處置機(jī)制根本選擇器根本選擇器是 jQuery 中最常用的選擇器, 也是最簡(jiǎn)單的選擇器, 它經(jīng)過元素 id, class 和標(biāo)志名來查找 DOM 元素根本選擇器例如改動(dòng) id 為 one 的元素的背風(fēng)光為 紅色$(#one).css(backgroundColor

9、,red);改動(dòng)元素名為 的一切元素的背風(fēng)光為 # bbffaa，字體顏色為紅色$(p).css(color:red,backgroundColor:#bbffaa);改動(dòng)第一個(gè)元素的背風(fēng)光為紅色$(p).eq(0).css(backgroundColor,red);改動(dòng)一切元素和 id 為 one 的元素的背風(fēng)光為 # bbffaa$(h1,#one).css(backgroundColor,#bbffaa);層次選擇器假設(shè)想經(jīng)過 DOM 元素之間的層次關(guān)系來獲取特定元素, 例如后代元素, 子元素, 相鄰元素, 兄弟元素等, 那么需求運(yùn)用層次選擇器留意: (“prev div) 選擇器只能選

10、擇 “# prev 元素后面的同輩元素; 而 jQuery 中的方法 siblings() 與前后位置無關(guān), 只需是同輩節(jié)點(diǎn)就可以選取層次選擇器例如改動(dòng) 內(nèi)一切 的背風(fēng)光為 # bbffaa$(“body div)改動(dòng) 內(nèi)子 的背風(fēng)光為 # bbffaa$(“bodydiv)改動(dòng) id 為 one 的下一個(gè) 的背風(fēng)光為 # bbffaa$(#one+div)改動(dòng) id 為 two 的元素后面的一切兄弟的元素的背風(fēng)光為 # bbffaa$(#twodiv)改動(dòng) id 為 two 的元素一切 兄弟元素的背風(fēng)光為 # bbffaa $(#two). siblings(p) 過濾選擇器過濾選擇器主要是

11、經(jīng)過特定的過濾規(guī)那么來挑選出所需的 DOM 元素, 該選擇器都以 “: 開頭按照不同的過濾規(guī)那么, 過濾選擇器又可分為根本過濾, 內(nèi)容過濾, 可見性過濾, 屬性過濾, 子元素過濾和表單對(duì)象屬性過濾選擇器.根本過濾選擇器根本過濾選擇器例如改動(dòng)第一個(gè) div 元素的背風(fēng)光為 # bbffaa$(div:first)改動(dòng)id不為 one 的一切p元素的背風(fēng)光為 # bbffaa$(p:not(#one)改動(dòng)索引值為偶數(shù)的 tr元素的背風(fēng)光為 # bbffaa$(“tr:even)改動(dòng)索引值為大于 3 且為奇數(shù)的 p元素的背風(fēng)光為 # bbffaa$(“p:gt(3):odd)改動(dòng)一切的標(biāo)題元素的背風(fēng)

12、光為 # bbffaa$(:header)改動(dòng)當(dāng)前正在執(zhí)行動(dòng)畫的一切元素的背風(fēng)光為 # bbffaa$(:animated)內(nèi)容過濾選擇器內(nèi)容過濾選擇器的過濾規(guī)那么主要表達(dá)在它所包含的子元素和文本內(nèi)容上內(nèi)容過濾選擇器例如改動(dòng)含有文本 di 的 p元素的背風(fēng)光為 # bbffaa$(p:cotains(di)改動(dòng)不包含子元素(或者文本元素) 的 div 空元素的背風(fēng)光為 # bbffaa$(p:empty)改動(dòng)含有 class 為 mini 元素的 p元素的背風(fēng)光為 # bbffaa$(p:has(.mini)改動(dòng)含有子元素(或者文本元素)的div元素的背風(fēng)光為 # bbffaa $(p:par

13、ent)可見性過濾選擇器可見性過濾選擇器是根據(jù)元素的可見和不可見形狀來選擇相應(yīng)的元素可見選擇器 :hidden 不僅包含款式屬性 display 為 none 的元素, 也包含文本隱藏域 ()和 visible:hidden 之類的元素可見性過濾選擇器例如改動(dòng)一切可見的div元素的背風(fēng)光為 # bbffaa$(“div:visible).css(background-color,#bbffaa);選取一切不可見的元素, 利用 jQuery 中的 show() 方法將它們顯示出來, 并設(shè)置其背風(fēng)光為 # bbffaa選取一切的文本隱藏域, 并打印它們的值怎樣顯示？屬性過濾選擇器屬性過濾選擇器的過

14、濾規(guī)那么是經(jīng)過元素的屬性來獲取相應(yīng)的元素屬性過濾選擇器例如選取以下元素,改動(dòng)其背風(fēng)光為 # bbffaa含有屬性title 的div元素 $(divtitle)屬性title值等于test的div元素 $(“divtitle=text)屬性title值不等于test的div元素(沒有屬性title的也將被選中).屬性title值 以te開場(chǎng) 的div元素.屬性title值 以est終了 的div元素.屬性title值 含有es的div元素.選取有屬性id的div元素，然后在結(jié)果中選取屬性title值含有“es的 div 元素.怎樣顯示？子元素過濾選擇器nth-child() 選擇器詳解如下：n

15、th-child(even/odd): 能選取每個(gè)父元素下的索引值為偶(奇)數(shù)的元素nth-child(2): 能選取每個(gè)父元素下的索引值為 2 的元素nth-child(3n): 能選取每個(gè)父元素下的索引值是 3 的倍數(shù) 的元素nth-child(3n + 1): 能選取每個(gè)父元素下的索引值是 3n + 1的元素子元素過濾選擇器例如選取以下元素,改動(dòng)其背風(fēng)光為 # bbffaa每個(gè)class為one的div父元素下的第2個(gè)子元素.每個(gè)class為one的div父元素下的第一個(gè)子元素每個(gè)class為one的div父元素下的最后一個(gè)子元素假設(shè)class為one的div父元素下的僅僅只需一個(gè)子元素

16、，那么選中這個(gè)子元素$(“divclass=one:only-child)表單對(duì)象屬性過濾選擇器此選擇器主要對(duì)所選擇的表單元素進(jìn)展過濾表單對(duì)象屬性過濾選擇器例如利用 jQuery 對(duì)象的 val() 方法改動(dòng)表單內(nèi)可用 元素的值$(“input:enabled).val(Hello World);利用 jQuery 對(duì)象的 val() 方法改動(dòng)表單內(nèi)不可用 元素的值利用 jQuery 對(duì)象的 length 屬性獲取多項(xiàng)選擇框選中的個(gè)數(shù)利用 jQuery 對(duì)象的 text() 方法獲取下拉框選中的內(nèi)容表單項(xiàng)選擇擇器此選擇器主要對(duì)所選擇的表單元素進(jìn)展過濾練習(xí)1. 給網(wǎng)頁中一切的 元素且元素內(nèi)容中包

17、含“段落字樣添加 onclick 事件2. 給一個(gè)特定的表格隔行變色，并且添加全選、全不選功能3. 對(duì)多項(xiàng)選擇框進(jìn)展操作, 輸出選中的多項(xiàng)選擇框的個(gè)數(shù)jQuery中對(duì)DOM操作jQuery 中的 DOM 操作DOM(Document Object Model文檔對(duì)象模型)：一種與閱讀器, 平臺(tái), 言語無關(guān)的接口, 運(yùn)用該接口可以輕松地訪問頁面中一切的規(guī)范組件DOM 操作的分類:DOM Core: DOM Core 并不專屬于 JavaScript, 任何一種支持 DOM 的程序設(shè)計(jì)言語都可以運(yùn)用它. 它的用途并非僅限于處置網(wǎng)頁, 也可以用來處置任何一種是用標(biāo)志言語編寫出來的文檔, 例如: XM

18、LHTML DOM: 運(yùn)用 JavaScript 和 DOM 為 HTML 文件編寫腳本時(shí),有許多專屬于 HTML-DOM 的屬性CSS-DOM:針對(duì)于 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用于獲取和設(shè)置 style 對(duì)象的各種屬性查找節(jié)點(diǎn)查找節(jié)點(diǎn): 查找元素節(jié)點(diǎn): 經(jīng)過 jQuery 選擇器完成.查找屬性節(jié)點(diǎn): 查找到所需求的元素之后, 可以調(diào)用 jQuery 對(duì)象的 attr() 方法來獲取它的各種屬性值創(chuàng)建節(jié)點(diǎn)創(chuàng)建節(jié)點(diǎn): 運(yùn)用 jQuery 的工廠函數(shù) $(): $(html); 會(huì)根據(jù)傳入的 html 標(biāo)志字符串創(chuàng)建一個(gè) DOM 對(duì)象, 并把這個(gè) DOM

19、 對(duì)象包裝成一個(gè) jQuery 對(duì)象前往.留意: 動(dòng)態(tài)創(chuàng)建的新元素節(jié)點(diǎn)不會(huì)被自動(dòng)添加到文檔中, 而是需求運(yùn)用其他方法將其插入到文檔中; 當(dāng)創(chuàng)建單個(gè)元素時(shí), 需留意閉合標(biāo)簽和運(yùn)用規(guī)范的 XHTML 格式. 例如創(chuàng)建一個(gè)元素, 可以運(yùn)用 $(“) 或 $(“), 但不能運(yùn)用 $(“) 或 $(“)創(chuàng)建文本節(jié)點(diǎn)就是在創(chuàng)建元素節(jié)點(diǎn)時(shí)直接把文本內(nèi)容寫出來; 創(chuàng)建屬性節(jié)點(diǎn)也是在創(chuàng)建元素節(jié)點(diǎn)時(shí)一同創(chuàng)建插入節(jié)點(diǎn)(1)動(dòng)態(tài)創(chuàng)建了 HTML 元素之后, 還需求將新創(chuàng)建的節(jié)點(diǎn)插入到文檔中, 即成為文檔中某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)插入節(jié)點(diǎn)(2)以上方法不但能將新創(chuàng)建的 DOM 元素插入到文檔中, 也能對(duì)原有的 DOM 元素進(jìn)展

20、挪動(dòng).創(chuàng)建節(jié)點(diǎn)和插入節(jié)點(diǎn)例如var newP =$(武廣高速鐵路即將通車！);newP.insertAfter(“#chapter); /將創(chuàng)建的newP元素插入到ID為#chapter的元素之后 或者newP.appendTo(“body); /插入到body元素里 刪除節(jié)點(diǎn)remove(): 從 DOM 中刪除一切匹配的元素, 傳入的參數(shù)用于根據(jù) jQuery 表達(dá)式來挑選元素. 當(dāng)某個(gè)節(jié)點(diǎn)用 remove() 方法刪除后, 該節(jié)點(diǎn)所包含的一切后代節(jié)點(diǎn)將被同時(shí)刪除. 這個(gè)方法的前往值是一個(gè)指向已被刪除的節(jié)點(diǎn)的援用.empty(): 清空節(jié)點(diǎn) 清空元素中的一切后代節(jié)點(diǎn)(不包含屬性節(jié)點(diǎn)).復(fù)制

21、節(jié)點(diǎn)clone(): 克隆匹配的 DOM 元素, 前往值為克隆后的副本. 但此時(shí)復(fù)制的新節(jié)點(diǎn)不具有任何行為.clone(true): 復(fù)制元素的同時(shí)也復(fù)制元素中的的事件 交換節(jié)點(diǎn)replaceWith(): 將一切匹配的元素都交換為指定的 HTML 或 DOM 元素replaceAll(): 顛倒了的 replaceWith() 方法.留意: 假設(shè)在交換之前, 曾經(jīng)在元素上綁定了事件, 交換后原先綁定的事件會(huì)與原先的元素一同消逝包裹節(jié)點(diǎn)wrap(): 將指定節(jié)點(diǎn)用其他標(biāo)志包裹起來. 該方法對(duì)于需求在文檔中插入額外的構(gòu)造化標(biāo)志非常有用, 而且不會(huì)破壞原始文檔的語義.wrapAll(): 將一切匹

22、配的元素用一個(gè)元素來包裹. 而 wrap() 方法是將一切的元素進(jìn)展單獨(dú)包裹.wrapInner(): 將每一個(gè)匹配的元素的子內(nèi)容(包括文本節(jié)點(diǎn))用其他構(gòu)造化標(biāo)志包裹起來屬性操作attr(): 獲取html屬性和設(shè)置屬性當(dāng)為該方法傳送一個(gè)參數(shù)時(shí), 即為某元素的獲取指定屬性當(dāng)為該方法傳送兩個(gè)參數(shù)時(shí), 即為某元素設(shè)置指定屬性的值jQuery 中有很多方法都是一個(gè)函數(shù)實(shí)現(xiàn)獲取和設(shè)置. 如: attr(), html(), text(), val(), height(), width(), css() 等.removeAttr(): 刪除指定元素的指定屬性款式操作獲取 class 和設(shè)置 class

23、: class 是元素的一個(gè)屬性, 所以獲取 class 和設(shè)置 class 都可以運(yùn)用 attr() 方法來完成.追加款式: addClass() 移除款式: removeClass() - 從匹配的元素中刪除全部或指定的 class切換款式: toggleClass() - 控制款式上的反復(fù)切換.假設(shè)類名存在那么刪除它, 假設(shè)類名不存在那么添加它.判別能否含有某個(gè)款式: hasClass() - 判別元素中能否含有某個(gè) class, 假設(shè)有, 那么前往 true; 否那么前往 false設(shè)置和獲取 HTML, 文本和值讀取和設(shè)置某個(gè)元素中的 HTML 內(nèi)容: html() . 該方法可以用

24、于 XHTML, 但不能用于 XML 文檔讀取和設(shè)置某個(gè)元素中的文本內(nèi)容: text(). 該方法既可以用于 XHTML 也可以用于 XML 文檔.讀取和設(shè)置某個(gè)元素中的值: val() - 該方法類似 JavaScript 中的 value 屬性. 對(duì)于文本框, 下拉列表框, 單項(xiàng)選擇框該方法可前往元素的值(多項(xiàng)選擇框只能前往第一個(gè)值).假設(shè)為多項(xiàng)選擇下拉列表框, 那么前往一個(gè)包含一切選擇值的數(shù)組val() 方法的兩個(gè)練習(xí)獲得焦點(diǎn)沒輸入值輸入值提示：可以借助表單元素的 defaultValue 屬性提示：js 中數(shù)組的表示方法“1, “2常用的遍歷節(jié)點(diǎn)方法獲得匹配元素的一切子元素組成的集合:

25、 children(). 該方法只思索子元素而不思索任何后代元素.獲得匹配元素后面緊鄰的同輩元素的集合(但集合中只需一個(gè)元素): next()獲得匹配元素前面緊鄰的同輩元素的集合(但集合中只需一個(gè)元素): prev()獲得匹配元素前后一切的同輩元素: siblings()CSS-DOM 操作獲取和設(shè)置元素的款式屬性: css()獲取和設(shè)置元素透明度: opacity 屬性獲取和設(shè)置元素高度, 寬度: height(), width(). 在設(shè)置值時(shí), 假設(shè)只傳送數(shù)字, 那么默許單位是 px. 如需求運(yùn)用其他單位那么需傳送一個(gè)字符串, 例如 $(“p:first).height(“2em);獲取

26、元素在當(dāng)前視窗中的相對(duì)位移: offset(). 其前往對(duì)象包含了兩個(gè)屬性: top, left. 該方法只對(duì)可見元素有效jQuery 中的事件 - 加載 DOM 在頁面加載終了后, 閱讀器會(huì)經(jīng)過 JavaScript 為 DOM 元素添加事件. 在常規(guī)的 JavaScript 代碼中, 通常運(yùn)用 window.onload 方法, 在 jQuery 中運(yùn)用$(document).ready() 方法.事件綁定點(diǎn)擊提示： 運(yùn)用 jQuery 的 is() 方法判別元素能否可見對(duì)匹配的元素進(jìn)展特定的事件綁定: bind()實(shí)例合成事件hover(): 模擬光標(biāo)懸停時(shí)間. 當(dāng)光標(biāo)挪動(dòng)到元素上時(shí), 會(huì)觸發(fā)指定的第一個(gè)函數(shù), 當(dāng)光標(biāo)移出這個(gè)元素時(shí), 會(huì)觸發(fā)指定的第二個(gè)函數(shù).toggle(): 用于模擬鼠標(biāo)延續(xù)單擊事件. 第一次單擊元素, 觸發(fā)指定的第一個(gè)函數(shù), 當(dāng)再一次單擊同一個(gè)元素時(shí), 那么觸發(fā)指定的第二個(gè)函數(shù), 假設(shè)有更多個(gè)函數(shù), 那么依次觸發(fā), 直到最后一個(gè).toggle() 的另一個(gè)作用: 切換元素的可見形狀.移除事件移除某按鈕上的一切 click 事件: $(“btn).unbind(“click)移除某按鈕上的一切事件: $(“btn).unbind();one(): 該方法可以為元素綁定處置函數(shù). 當(dāng)處置函數(shù)觸發(fā)一