基于新信息技術的jQuery開發(fā)基礎教程PPT全套完整教學課件

單元1我的第一個jQuery程序單元2jQuery選擇器單元3操作DOM元素單元4jQuery中的事件單元5jQuery中的動畫單元6jQuery中的Ajax單元7jQuery?UI基礎單元8jQuery?UI常用組件單元9jQuery?UI鍵鼠交互CONTENTS目

錄單元1我的第一個jQuery程序任務1搭建并測試jQuery開發(fā)環(huán)境1.1jQuery簡介1.2jQuery的優(yōu)勢1.3jQuery運行環(huán)境單元總結(jié)

1.1jQuery簡介

對于客戶端Web開發(fā)來說，JavaScript框架已經(jīng)成為非常有用的必備組件，而jQuery是一個優(yōu)秀的輕量級JavaScript庫。jQuery是由JohnResig于2006年1月創(chuàng)建的開源項目，堪稱動態(tài)Web應用程序領域的編程利器，它能幫助Web開發(fā)者利用更少的代碼完成更多的工作，從而有效減少錯誤數(shù)量。

jQuery將JavaScript編程量精簡為寥寥數(shù)行代碼，使JavaScript變得更直觀，更富魅力。jQuery還能夠為一個或同時為多個元素設置樣式，使得通過JavaScript操縱CSS變得分外輕松。

另外，jQuery創(chuàng)建了與W3C標準非常類似的跨瀏覽器事件API，并添加了一些原創(chuàng)的、非常有用的擴展，在很大程度上消除了IE瀏覽器和W3C標準在事件API中的不一致性，即解決了IE瀏覽器和其他瀏覽器之間的JavaScript代碼不兼容問題。

1.2jQuery的優(yōu)勢

jQuery具有以下優(yōu)勢：(1)?輕量級。jQuery運行庫非常輕巧，只需要在頁面中引用運行庫?.js文件就能使用，而運行庫.js文件的大小不到30?KB。

(2)?強大的選擇器。

jQuery允許開發(fā)者使用從CSS1到CSS3幾乎所有的選擇器，以及jQuery獨創(chuàng)的高級而復雜的選擇器。另外，還可以加入插件使其支持XPath選擇器，開發(fā)者甚至可以編寫屬于自己的選擇器。由于jQuery支持選擇器這一特性，因此有一定CSS經(jīng)驗的開發(fā)人員可以很容易地切入到jQuery的學習中來。

(3)?出色的DOM操作封裝。

jQuery封裝了大量常用的DOM操作，使開發(fā)者在編寫DOM操作相關程序的時候得心應手。利用jQuery能夠輕松地完成各種原本非常復雜的操作，讓JavaScript新手也能寫出出色的程序。

(4)?可靠的事件處理機制。

jQuery的事件處理機制吸收了JavaScript專家DeanEdwards編寫的事件處理函數(shù)的精華，使得jQuery在處理事件綁定的時候相當可靠。在預留退路(gracefuldegradation)、循序漸進以及非入侵式(Unobtrusive)編程思想方面，jQuery也做得非常不錯。

(5)?完善的Ajax。

jQuery將所有的Ajax操作封裝到一個函數(shù)$.ajax()里，使得開發(fā)者處理Ajax的時候能夠?qū)Ｐ奶幚順I(yè)務邏輯而無須關心復雜的瀏覽器兼容性和XMLHttpRequest對象的創(chuàng)建與使用問題。

(6)?不污染頂級變量。

jQuery只建立一個名為jQuery的對象，其所有的函數(shù)方法都在這個對象之下。其別名$也可以隨時交出控制權，絕對不會污染其他的對象。該特性使jQuery可以與其他JavaScript庫共存，在項目中放心地引用而不需要考慮后期可能的沖突。

(7)?出色的瀏覽器兼容性。

作為一個流行的JavaScript庫，瀏覽器的兼容性是必須具備的條件之一。jQuery能夠在IE6.0+、FF2+、Safari2.0+和Opera9.0+下正常運行。同時，jQuery修復了一些瀏覽器之間的差異，使開發(fā)者不必在開展項目前建立瀏覽器兼容庫。

(8)?鏈式操作方式。

jQuery中最有特色的莫過于它的鏈式操作方式，即對發(fā)生在同一個jQuery對象上的一組動作，可以直接連寫而無須重復獲取對象。這一特點使jQuery的代碼無比優(yōu)雅與簡潔。

比如下面的代碼，JavaScript的功能為找到所有CSS類名(class='highlight')為highlight的tr元素，將類名修改為normal，代碼行為為去掉表格行的高亮背景：

lettr=document.getElementsByTagName('tr');

letlen=tr.length;

for(leti=0;i<len;i++){

if(tr[i].class==='highlight'){

tr[i].class='normal';

}

}

代碼數(shù)量雖然不是很多，但實現(xiàn)了所需要的功能。如果采用jQuery來實現(xiàn)，則可以更加簡捷，只需一行代碼：

$('tr.highlight').removeClass('highlight').addClass('normal');

上面的代碼采用鏈式操作方式完成了三個動作，執(zhí)行的順序是從左往右，依次完成操作：

?找到class='highlight'的所有tr元素；

?移除所有找到的元素的class中的highlight值(一個元素可能有多個class值)；

?為所有找到的元素添加新的class值normal。

(9)?隱式迭代。

上面的代碼中，當用jQuery找到所有class='highlight'的tr元素后，無須循環(huán)遍歷每一個返回的元素。相反，jQuery里的方法都被設計成自動操作對象集合，而不是單獨的對象，這使得大量的循環(huán)結(jié)構變得不再必要，從而大幅地減少了代碼量。

(10)?行為層與結(jié)構層的分離。

開發(fā)者可以使用jQuery選擇器選中元素，然后直接給元素添加事件。這種將行為層與結(jié)構層完全分離的思想，可以使jQuery開發(fā)人員和HTML或其他頁面開發(fā)人員各司其職，擺脫過去開發(fā)沖突或個人單干的開發(fā)模式。同時，后期維護也非常方便，不需要在HTML代碼中尋找某些函數(shù)和重復修改HTML代碼。

(11)?豐富的插件支持。

jQuery的易擴展性，吸引了來自全球的開發(fā)者來編寫jQuery的擴展插件。目前已經(jīng)有超過幾百種的官方插件支持，而且還不斷有新插件面世。

(12)?完善的文檔。

jQuery的文檔非常豐富，現(xiàn)階段多為英文文檔，中文文檔相對較少。很多熱愛jQuery的團隊都在努力完善jQuery的中文文檔，例如jQuery的中文API，圖靈教育翻譯的《Learning?jQuery》等。

(13)?開源。

jQuery是一個開源的產(chǎn)品，任何人都可以自由地使用并提出改進意見。

1.3jQuery運行環(huán)境

1.?jQuery版本目前，jQuery共有三個版本，在jQuery官網(wǎng)可以查看，分別以1.X、2.X、3.X為代號，如目前最新的jQuery版本為3.5.1。各版本之間的對比如表1-1所示。

jQuery從1.X版本發(fā)展至現(xiàn)在的3.X版本，經(jīng)歷的版本數(shù)量不少于60個，每個版本下載時可以選擇compressed(壓縮)和uncompressed(未壓縮)兩種類型，如表1-2所示。

2.?jQuery庫文件下載

本書選擇的jQuery運行庫版本為1.X的最終版本1.12.4。我們可以到jQuery官網(wǎng)進行下載，或直接輸入官網(wǎng)提供的下載地址進行下載。以下為從jQuery官網(wǎng)下載jQuery1.12.4運行庫的詳細步驟。

(1)?打開jQuery官網(wǎng)，點擊右上方“DownloadjQuery”按鈕進入下載頁面，如圖1-1所示。圖1-1jQuery庫文件下載步驟一

(2)?在下載頁面中，首先看到的是jQuery最新版本(3.5.1)的下載鏈接，如圖1-2所示。圖1-2jQuery庫文件下載步驟二

(3)?將頁面拖動到最下方，可以看到PastReleases(過去版本)，點擊“jQueryCDN”超鏈接，進入過去版本CDN頁面，如圖1-3所示。

(4)?在過去版本CDN頁面中，可以看到“SeeallversionsofjQueryCore”(查看jQuery內(nèi)核所有版本)鏈接，點擊后可進入查看所有版本頁面，如圖1-4所示。圖1-3jQuery庫文件下載步驟三圖1-4jQuery庫文件下載步驟四

(5)?在查看所有版本頁面中，找到目標版本“jQuery?Core1.12.4”，此處提供了兩種下載類型，uncompressed為未壓縮版，minified為壓縮版(即compressed精簡版)，如圖1-5所示。圖1-5jQuery庫文件下載步驟五

(6)?點擊“uncompressed”超鏈接，可以打開官方提供的CDN，直接點擊右側(cè)的“復制”按鈕將CDN代碼復制到HTML頁面中進行引用。如果想要下載該版本jQuery庫文件，則選擇并復制src值的內(nèi)容，粘貼到瀏覽器地址欄中打開，如圖1-6所示。圖1-6jQuery庫文件下載步驟六

(7)?復制圖1-6中src值的內(nèi)容，粘貼到瀏覽器地址欄中，或者在瀏覽器地址欄中輸入src值的內(nèi)容，打開后可以查看jQuery1.12.4版本的源代碼，如圖1-7所示。圖1-7jQuery庫文件下載步驟七

(8)?在本地創(chuàng)建一個.js文件，命名為“jquery-1.12.4.js”，使用記事本打開文件，并將以上頁面中的內(nèi)容復制到文件中保存即可，如圖1-8所示。圖1-8jQuery庫文件下載步驟八

3.?jQueryCDN

如果不想在本地下載jQuery運行庫文件，可以在CDN(內(nèi)容分發(fā)網(wǎng)絡)中引用。通過遍布全球的服務器托管的jQuery運行庫，CDN可以提供性能優(yōu)勢。如果網(wǎng)頁的訪問者已經(jīng)從同一個CDN下載了一份jQuery的副本，那么無須重新下載，可以免去下載jQuery庫文件的時間。以使用最廣泛的1.11.3壓縮版本為例，可以通過以下代碼引用jQuery庫文件：

4.?jQuery版本選擇

jQuery版本從1.X至3.X，并不是版本越高越好，而應根據(jù)實際需求進行選擇。

如果搭建的是電腦端Web網(wǎng)站，建議使用jQuery1.9～jQuery1.11版本，因為這些版本支持IE8——在當下電腦端兼容IE8還是有必要的。同時，這些版本的API與更高版本的基本一致，且針對低版本的不足之處進行了修復。目前很多知名網(wǎng)站選用的jQuery版本也集中在jQuery1.9～jQuery1.11，如百度、CSDN、騰訊課堂、慕課網(wǎng)等。

如果搭建的是移動端Web網(wǎng)站，則需要選擇jQuery3.X版本，只有在jQuery3.X版本中才加入了移動端的一些功能，低版本對移動端的支持不夠優(yōu)秀。

另外，不推薦的版本有jQuery1.7以下的版本及jQuery2.X版本。jQuery1.7以下的版本與之后jQuery版本的API相差比較大，且性能不高；而jQuery2.X版本存在的周期較短，完全能被jQuery3.X版本替代。

1.?獲取運行庫

根據(jù)相關知識中“jQuery庫文件下載”的描述，下載jQuery1.12.4運行庫，并將其保存為“jquery-1.12.4.js”，或者在頁面中引用百度提供的jQuery1.11.3運行庫CDN：

<scriptsrc="/jquery/1.11.3/jquery.min.js"></script>

2.?創(chuàng)建項目

在開發(fā)工具中創(chuàng)建一個新的項目，命名為“jQueryProject”，后面的內(nèi)容中將其簡稱為項目。

3.?將jQuery運行庫引入項目

在項目下創(chuàng)建一個文件夾，命名為“js”，將之前準備好的jquery-1.12.4.js文件放入js文件夾中，目錄結(jié)構如圖1-9所示。圖1-9引用jQuery庫文件

4.?在頁面中引入jQuery

在項目中創(chuàng)建一個頁面，在頁面代碼的<head>元素中引入js文件后，就能使用jQuery了，代碼如下：

5.?編寫我的第一個jQuery程序

引入jQuery運行庫后，可在下方編寫jQuery代碼，代碼如下：

如果jQuery運行庫文件路徑正確，則顯示如圖1-10所示頁面。圖1-10jQuery加載成功頁面

如果jQuery運行庫文件路徑錯誤，則顯示如圖1-11所示頁面，瀏覽器會報出以下錯誤信息：“$isnotdefined”($沒有被定義)。圖1-11jQuery加載失敗頁面

6.?jQuery代碼說明

上面的代碼，在頁面中放入一個h1元素，在頁面中顯示“jQuery加載失?。　??？稍贘avaScript代碼中使用if語句判斷jQuery元素是否存在。如果jQuery元素存在，則證明jQuery運行庫加載成功，使用jQuery獲取頁面中的h1元素，將元素內(nèi)容修改為“jQuery加載成功！”；如果jQuery元素不存在，則JavaScript會報錯，不會執(zhí)行下面的代碼，頁面上顯示“jQuery加載失??！”。

1)?$(document).ready()

在jQuery庫中，可以通過本身自帶的方法獲取頁面DOM元素的對象叫作jQuery對象。上面的jQuery代碼中，“$”(美元符號)是jQuery對象的簡寫形式，$(document)等價于jQuery(document)，作用是在頁面中找到document元素，ready()方法表示得到的元素加載完成后執(zhí)行里面的方法。

上面代碼的作用類似于原生JavaScript中的方法：

過它們之間還是有一些區(qū)別的，兩種方法的對比如表1-3所示。

2)?$('h1').text()

$('h1')使用jQuery對象自帶的方法選擇頁面中的h1元素，參數(shù)“h1”是選擇器，下一單元中會詳細討論。

text()方法用于設置所獲取元素的內(nèi)容，相當于給DOM元素的value屬性賦值。

單?元?總?結(jié)

當使用原生JavaScript編寫客戶端應用程序代碼時，某些任務會非常復雜和繁重，jQuery提供了一套簡便的解決方案，可以替代JavaScript，從而更輕松地完成這些編程任務，有時甚至可以將很多行JavaScript代碼精簡為一兩行jQuery代碼。

本單元首先介紹了什么是jQuery及jQuery的優(yōu)勢，然后詳細介紹了jQuery運行庫的版本和各版本之間的區(qū)別，方便讀者選擇適合的運行庫。本單元還介紹了如何下載運行庫、如何加載運行庫以及如何開始使用jQuery。

單元2jQuery選擇器任務2根據(jù)需求精準獲取并設置元素2.1什么是選擇器2.2CSS選擇器2.3jQuery選擇器的優(yōu)勢2.4jQuery選擇器詳細介紹單元總結(jié)

2.1什么是選擇器

在jQuery選擇器API中，CSS選擇器的概念同樣適用于DOM，也就是說，我們使用jQuery獲取指定元素時，可以使用CSS選擇器作為$(selector)方法的參數(shù)來獲取對應元素。比如下面的HTML代碼中，頁面上有5個段落：<!DOCTYPEhtml>

如果要選擇第三個段落，修改段落中的內(nèi)容，可以使用CSS偽類選擇器進行選擇，CSS代碼如下：

同樣，使用jQuery需要選擇第三個段落，也可以使用CSS偽類選擇器，JavaScript代碼如下：

以上HTML代碼、CSS代碼、JavaScript代碼綜合運行后，頁面的效果如圖2-1所示。圖2-1頁面運行效果圖

2.2CSS選擇器

了解了jQuery選擇器和CSS選擇器之間的聯(lián)系后，我們先來回顧一下CSS選擇器。我們在表2-1中列出了一些常用的選擇器，更多選擇器請參考W3C官方中文幫助文檔：/cssref/css_selectors.ASP。

2.3jQuery選擇器的優(yōu)勢jQuery選擇器具有如下優(yōu)勢：

(1)?寫法簡潔。$()函數(shù)在很多JavaScript類庫中都被作為一個選擇器函數(shù)來使用，在jQuery中也不例外。其中，$("#ID")用來代替document.getElementById()函數(shù)，即通過ID獲取元素；$("tagName")用來代替document.getElementsByTagName()函數(shù)，即通過標簽名獲取HTML元素，其他選擇器的寫法大家可以自行進行對比。

(2)?支持從CSS1到CSS3的選擇器。

jQuery選擇器支持CSS1、CSS2的全部和CSS3的部分選擇器，同時它也有少量獨有的選擇器，因此對擁有一定CSS基礎的開發(fā)人員來說，學習jQuery選擇器是件非常容易的事；而對于沒有接觸過CSS技術的開發(fā)人員來說，在學習jQuery選擇器的同時也可以掌握CSS選擇器的基本規(guī)則。

(3)?完備的處理機制。

使用jQuery選擇器不僅比使用傳統(tǒng)的getElementById()和getElementsByTagName()函數(shù)簡潔得多，而且還能避免某些錯誤。比如使用getElementById()獲取某個元素時，如果該元素不存在，則瀏覽器會報錯。

如上面的JavaScript代碼，如果頁面中沒有id="myid"的元素，則代碼會報錯，下面的JavaScript代碼則不會執(zhí)行，此時應將代碼修改為：

但如果頁面中需要如此操作的元素很多，每個元素都進行一次判斷無疑會給開發(fā)人員造成大量的工作負擔。而jQuery中這方面的問題處理起來就簡單多了，jQuery獲取元素時，即使頁面中不存在獲取的元素也不會報錯。如下面的代碼，功能和上面的原生JavaScript代碼效果一樣，但簡短很多，而且不用擔心元素不存在而報錯問題。

需要注意的是，$(selector)方法獲取的永遠是對象，即使網(wǎng)頁上沒有該元素。因此當要用jQuery檢查某個元素在網(wǎng)頁上是否存在時，不能使用以下代碼：

jQuery中的選擇器完全繼承了CSS的風格。利用jQuery選擇器，可以非常便捷和快速地找出特定的DOM元素，然后為它們添加相應的行為，而無須擔心瀏覽器是否支持該選擇器。學會使用選擇器是學習jQuery的基礎，jQuery的行為規(guī)則都必須在獲取到元素后才能生效。

2.4jQuery選擇器詳細介紹

1.?選擇元素元素選擇器是根據(jù)元素名來選擇元素的。語法如下：

$('element')或者

jQuery('element')

在不進行另外設置的情況下，$(美元符號)等價于jQuery對象，此后不再另行說明。

如圖2-2所示，HTML代碼中存在3個div元素和4個p元素，使用jQuery元素選擇器選擇其中的div元素，并打印出所選元素個數(shù)，jQuery代碼如下：

顯示結(jié)果如圖2-2所示。圖2-2選擇div結(jié)果頁面

當然，我們也可以使用通配符(*)選取頁面中所有的元素，比如下面的代碼，它選擇到的元素個數(shù)為11個。

2.?根據(jù)id選擇

id選擇器是根據(jù)id來選擇元素，使用井號(#)作為前綴。語法如下：

$('#id')

如圖2-3所示，HTML代碼中存在3個div元素和4個p元素，使用jQueryid選擇器選擇其中的id為div3的元素，并修改其文本內(nèi)容，jQuery代碼如下：

$('#div3').text('我找到并修改了id為div3的div中的內(nèi)容');

顯示結(jié)果如圖2-3所示。圖2-3選擇id修改文本內(nèi)容結(jié)果頁面

3.?根據(jù)class選擇

class選擇器是根據(jù)class來選擇元素，使用點號(.)作為前綴。語法如下：

$('.id')

如圖2-4所示，HTML代碼中存在3個div元素和4個p元素，使用jQueryclass選擇器選擇其中的class為p2的元素，并修改其文本內(nèi)容，jQuery代碼如下：

$('.p2').text('我找到并修改了class為p2的p中的內(nèi)容');

顯示結(jié)果如圖2-4所示。圖2-4選擇class修改文本內(nèi)容結(jié)果頁面

4.?使用選擇器組合精確選擇元素

除了前面的三種單獨選擇器外，我們還可以使用單獨選擇器進行組合，達到精確選擇元素的目的。如選擇內(nèi)部元素的方法是使用空格(space)鍵連接兩個選擇器，可以選擇第一個選擇器選中的元素中的所有第二個選擇器選中的元素。語法如下：

$('selector1selector2')

如圖2-5所示，選擇器選擇的是id為“div1”的元素中的所有p元素。而id為“div2”的元素中的p元素則不會被選擇。

更多的選擇器組合大家可以參考CSS中的組合選擇器，此處不再贅述。圖2-5使用組合選擇器修改文本背景顏色結(jié)果頁面

5.?根據(jù)屬性選擇元素

jQuery還可以根據(jù)元素的屬性，以各種非常靈活的方式來選擇元素。常用的屬性選擇器語法如下。

與某個字符串精確匹配：

當然，屬性選擇器還可以跟其他選擇器搭配使用，效果會更好。如下面的代碼，將會選擇所有div元素中，id以“user”開頭的元素，最終輸出結(jié)果為3：

表2-2總結(jié)了不同種類的屬性選擇器。

6.?根據(jù)位置選擇元素

jQuery還可以根據(jù)元素相對于其他元素的位置來選擇元素，或者根據(jù)元素在文檔中的層次關系來選擇元素。比如選擇匹配集合中的第一個、最后一個、第n個元素，或者選擇位置為奇數(shù)或偶數(shù)的元素等等。具體語法如下。

如圖2-6所示，頁面中有一個8×4的表格，要實現(xiàn)隔行變色效果只需要一行jQuery代碼即可實現(xiàn)。圖2-6組合選擇器修改文本背景顏色結(jié)果頁面

7.?過濾選擇器

請注意，上面的選擇器全都以冒號(:)開始，類似于CSS中的偽類，這種選擇器稱為過濾選擇器，因為它們的功能是對基本選擇器進行過濾。相比于CSS中的偽類，jQuery添加了更多的過濾器，它們的使用方法與前面的例子類似，具體見表2-3～表2-7。

8.?自定義選擇器

jQuery允許開發(fā)人員對選擇器進行擴展，根據(jù)項目需求，可能內(nèi)置的選擇器沒有最合適的，此時開發(fā)人員就可以自己編寫選擇器。

要創(chuàng)建自定義選擇器，必須擴展jQuery對象，下面的代碼示例創(chuàng)建了一個用戶自定義選擇器，選擇具有紅色背景的元素：

單?元?總?結(jié)

原生JavaScript提供的元素查找功能只有六種：

?document.getElementById("id")

?document.getElementsByName("name")

?document.getElementsByClassName("className")

?document.getElementsByTagName("tagName")

?document.querySelector("selector")

?document.querySelectorAll("selector")

其中querySelector()和querySelectorAll()是在JavaScript新版本中模仿jQuery而新增的，它們使用起來較靈活，而其他幾種使用起來局限性都比較大，jQuery選擇器與它們相比有明顯的優(yōu)勢。

當使用原生JavaScript編寫客戶端應用程序代碼時，某些任務將會非常復雜和繁重，jQuery提供了一套簡便的解決方案，可以替代JavaScript，從而更輕松地完成這些編程任務，有時甚至可以將很多行JavaScript代碼精簡為一兩行jQuery代碼。

本單元首先介紹了什么是jQuery選擇器及jQuery選擇器的優(yōu)勢，然后詳細介紹了jQuery選擇器的種類和使用方法。后期的jQuery使用中，選擇器是最基本的工具，如果不能靈活地使用這些選擇器，將會嚴重影響開發(fā)效率，甚至無法完成某些特定功能。單元3操作DOM元素任務3制作頁面導航欄3.1DOM操作的分類3.2jQuery中的DOM操作單元總結(jié)

3.1DOM操作的分類

一般來說，DOM操作分為三個方面：?DOMCore：核心DOM操作；?HTML-DOM：HTMLDOM操作；

?CSS-DOM：CSSDOM操作。

1.?DOMCore

DOMCore并不專屬于JavaScript，任何一種支持DOM的程序設計語言都可以使用它。它的用途并非僅限于處理網(wǎng)頁，也可以用來處理任何一種使用標記語言編寫出來的文檔，例如XML。

JavaScript中的getElmentById()、getElementsByTagName()、getAttribute()、setAttribute()等方法，都是DOMCore的組成部分。

2.?HTML-DOM

在使用JavaScript為HTML文檔編寫腳本時，有許多專屬于HTML的DOM屬性，這些屬性提供了更簡單明了的方式來描述各種HTML元素的屬性。比如document對象的forms屬性、element對象的src屬性等。

在實際應用過程中我們可以發(fā)現(xiàn)，獲取某些對象、屬性，既可以使用DOMCore來實現(xiàn)，也可以使用HTML-DOM來實現(xiàn)。相比較而言，HTML-DOM的代碼通常比較簡短。

3.?CSS-DOM

CSS-DOM是針對CSS的操作。在JavaScript中，CSS-DOM的主要作用是獲取和設置style對象的各種屬性。通過改變style對象的屬性，可以改變元素的樣式，使網(wǎng)頁呈現(xiàn)出各種不同的效果。如element.style.color就能設置元素的文本顏色。

3.2jQuery中的DOM操作

3.2.1查找節(jié)點查找節(jié)點是一個重要的DOM操作，可以通過上一單元介紹的選擇器來完成。此處不再贅述，有問題的同學可以返回上一單元仔細閱讀相關內(nèi)容。

3.2.2創(chuàng)建節(jié)點

在DOM操作中，常常需要動態(tài)地創(chuàng)建HTML內(nèi)容，使頁面呈現(xiàn)給用戶的內(nèi)容發(fā)生變化，達到人機交互的目的。

要在頁面中添加一個新的元素，需要兩個步驟：創(chuàng)建元素和將創(chuàng)建的元素添加到DOM樹上。

1.?創(chuàng)建元素

jQuery創(chuàng)建元素可以使用工廠函數(shù)“$()”來完成，語法如下：

$('html')

此方法通過傳入一個完整的HTML元素的字符串作為參數(shù)，創(chuàng)建一個DOM對象，并將這個DOM對象包裝成一個jQuery對象進行返回。

2.?將元素添加到DOM樹上

與JavaScript類似，要將元素添加到DOM樹上，可以使用父元素的append()方法將元素添加到父元素子元素列表的末尾。更多的添加節(jié)點方法將在3.2.3小節(jié)中進行介紹。

如圖3-1所示的代碼中，頁面上的列表中本來只有兩個超鏈接，我們通過jQuery創(chuàng)建了超鏈接“頁面3”，并添加到列表中。圖3-1創(chuàng)建元素節(jié)點

(1)?使用工廠函數(shù)“$()”創(chuàng)建元素時，參數(shù)應該是一個完整的HTML元素字符串，與JavaScript的createElement()方法有本質(zhì)的區(qū)別，兩者不要混淆。

(2)?創(chuàng)建元素時要閉合標簽和使用標準的XHTML格式。比如創(chuàng)建一個p元素，可以寫成：$('<p/>')或者$('<p></p>')，但不能只寫開始標簽或大寫元素名：$('<p>')、$('<P/>')。

3.2.3插入節(jié)點

將新建的節(jié)點插入到DOM樹指定位置的方法并非只有一種，在jQuery中還提供了其他幾種插入節(jié)點的方法，我們可以根據(jù)實際需求靈活進行選擇。方法歸納如表3-1表示。

這些插入節(jié)點的方法不僅能將新創(chuàng)建的DOM元素插入到DOM樹中，也能對原有的DOM元素進行移動。比如圖3-2的HTML代碼中，梨本來是在喜歡的水果(列表1)中，通過jQuery代碼，先找到like列表中的第二個子元素(“梨”)，再將找到的元素添加到unlike列表中的末尾，此時頁面實際的顯示效果是梨在不喜歡的水果(列表2)中。圖3-2插入節(jié)點方法移動DOM元素

3.2.4刪除節(jié)點

如果需要刪除DOM樹中的元素，可以使用jQuery提供的刪除節(jié)點方法。刪除節(jié)點方法有兩種：remove()和empty()。

1.?remove()方法

此方法的作用是從DOM樹中刪除所有匹配元素，傳入的參數(shù)用于根據(jù)jQuery表達式來篩選元素。語法如下：

$(selector).remove([selector])

此方法的返回值是一個指向已被刪除的節(jié)點的引用，因此在后續(xù)的代碼中還可以再使用這些元素。圖3-3的代碼重現(xiàn)了圖3-2代碼中的效果，不過做了兩步操作：先刪除喜歡的水果(列表1)中的梨，并將操作的DOM元素保存在變量中，再將梨添加到不喜歡的水果(列表2)中。圖3-3先刪除再添加DOM元素

另外，remove()方法也可以通過傳遞參數(shù)來選擇性的刪除元素，為實現(xiàn)上面的功能，我們可以先找到喜歡的水果(列表1)中的所有l(wèi)i，再在找到的結(jié)果中篩選class為pear的元素進行刪除。代碼如圖3-4所示。圖3-4刪除DOM元素

2.?empty()方法

嚴格來講，empty()方法并不是刪除節(jié)點，而是清空匹配元素的所有后代節(jié)點(內(nèi)部元素)。語法如下：

$(selector).empty()

3.2.5復制節(jié)點

在項目中，有時候需要復制節(jié)點，可以使用clone()方法來完成。語法如下：

$(selector).clone()

如圖3-5所示的代碼，找到并復制梨添加到列表中的第一項。圖3-5復制DOM元素

圖3-5代碼中的兩行jQuery代碼，可以靈活地使用插入節(jié)點的方法使用一行代碼達到目的：

$('.pear').clone().prependTo('ul');

使用$('.pear').clone()復制找到的元素，再使用prependTo添加到ul第一項。

3.2.6替換節(jié)點

jQuery提供的替換節(jié)點的方法有兩個：replaceWith()和replaceAll()。

1.?replaceWith()方法

此方法的作用是將所有匹配到的元素都替換成指定的HTML或DOM元素。語法如下：

$('selector').replaceWith('html')

2.?replaceAll()方法

此方法是replaceWith()方法的反向操作，語法如下：

$('html').replaceAll(selector)

3.2.7包裹節(jié)點

如果需要將某個節(jié)點用其他標簽包裹起來，可以使用jQuery提供的wrap()方法，此方法對于需要在文檔中插入額外的結(jié)構化標記非常有用，因為它不會破壞原始文檔的語義。

wrap()方法的作用是將所有匹配的元素用標簽包裹，語法如下：

$('selector').wrap('html')

wrap()方法還有其他兩個擴展方法：wrapAll()和wrapInner()。

1.?wrapAll()方法

此方法會將所有匹配的元素用一個元素包裹起來，它和wrap()方法的區(qū)別是單獨包裹和打包包裹。語法如下：

$('selector').wrapAll('html')

2.?wrapInner()方法

此方法將每一個匹配的元素的子內(nèi)容(包括文本節(jié)點)用其他結(jié)構化的標記包裹起來。語法如下：

$('selector').wrapInner('html')

3.2.8屬性操作

在jQuery中，用attr()方法來獲取和設置元素屬性，用removeAttr()方法來刪除元素屬性。

1.?attr()方法

attr()方法用于獲取或設置元素的屬性，根據(jù)參數(shù)個數(shù)的不同，方法的作用也不同。語法如下：

$('selector').attr('attrName',['string'])

此方法有兩個參數(shù)：

?第一個參數(shù)：必選，元素的屬性名。

?第二個參數(shù)：可選，屬性對應的值。

如果要獲取元素的屬性值，則只傳入一個參數(shù)，參數(shù)是要獲取的屬性名。

如果要設置元素的屬性，則需要傳入兩個參數(shù)，第一個參數(shù)是要設置的屬性名，第二個參數(shù)是需要設置的屬性的值。

attr()方法既能獲取元素的屬性也能設置元素的屬性，jQuery中有很多與attr()類似的方法，類似的還有text()、val()、css()等。

另外，attr()方法還可以同時設置多個樣式屬性。將需要設置的樣式屬性作為一個對象傳入方法即可。

如圖3-6所示的代碼，使用attr()方法直接給table元素添加border、rules、width、height四個屬性。圖3-6使用attr()方法同時設置多個屬性

2.?removeAttr()方法

removeAttr()方法用于刪除結(jié)果集的指定屬性。語法如下：

$('selector').removeAttr('attrName')

3.2.9樣式操作

1.?獲取和設置樣式

在HTML中，決定元素的樣式的屬性主要有兩個：class和style。因此，可以使用attr()方法來獲取和設置元素的樣式：

$('selector').attr('class')?//獲取class名

$('selector').attr('class','className')//設置新的樣式

2.?追加樣式

上面的方法是將原來的class替換成新的class來達到改變樣式的目的，但是有時候我們需要在原來的基礎上追加新的class，此時可以使用jQuery提供的addClass()方法來追加樣式。語法如下：

$('selector').addClass('className')

在CSS中有以下兩條規(guī)定：

?如果給一個元素添加了多個class值，那么就相當于合并了它們的樣式。

?如果有不同的class設定了同一個樣式屬性，則后者覆蓋前者。

在追加樣式時，追加的樣式會在原來的樣式后面，因此如果屬性值重復，則追加的樣式會覆蓋原來的樣式。

3.?移除樣式

與addClass()方法相反，要刪除class屬性中的某個值，可以使用removeClass()方法來完成。此方法的作用是從匹配的元素中刪除全部或者指定的class值。語法如下：

$('selector').removeClass(['className'])

此方法含有一個可選參數(shù)，當不傳入?yún)?shù)時，會將class的值全部刪除；當傳入指定的參數(shù)時，則會刪除指定的class值。

4.?切換樣式

有時候我們需要某個元素在樣式上重復切換，可以使用jQuery提供的toggleClass()方法。此方法主要是控制行為上的重復切換，如果類名存在則刪除它；如果類名不存在則添加它。語法如下：

$('selector').toggleClass('className')

5.?判斷是否含有某個樣式

判斷元素是否含有某個樣式，可以使用hasClass()方法。如果有則返回true，如果沒有則返回false。此方法一般用于判斷。語法如下：

if($(selector).hasClass('className')){

//DoSomeThing

}else{

//DoSomeThing

}

3.2.10設置和獲取HTML、文本和值

1.?html()方法

此方法類似于JavaScript中的innerHTML屬性，可以用來獲取或者設置元素中的HTML內(nèi)容。語法如下：

$('selector').html()?//獲取元素中的HTML代碼

$('selector').html('html')//設置元素中的HTML代碼

2.?text()方法

此方法類似于JavaScript中的innerText屬性，可以用來獲取或者設置元素中的文本內(nèi)容。語法如下：

$('selector').text()//獲取元素中的文本

$('selector').text('text')//設置元素中的文本

3.?val()方法

此方法類似于JavaScript中的value屬性，可以用來設置和獲取元素的值。無論元素是文本框、下拉列表還是單選框，它都可以返回元素的值。如果元素為多選，則返回一個包含所有選擇的值的數(shù)組。語法如下：

$('selector').val()?//獲取元素的值

$('selector').val('value')??//設置元素的值

3.2.11遍歷節(jié)點

1.?children()方法

此方法用于取得匹配元素的子元素集合。語法如下：

$('selector').children()

此方法的返回值是一個number值，返回的是子元素的個數(shù)，不包含后代元素。比如圖3-7所示的DOM樹，使用children()方法獲取子元素時，html、head、body元素獲取到的是2個；meta、title、div、li元素獲取到的是0個；ul元素獲取到的是3個。圖3-7DOM樹結(jié)構

2.?next()方法

此方法用于取得匹配元素后面緊鄰的同輩元素。語法如下：

$('selector').next()

比如圖3-7所示的DOM樹，使用next()方法獲取元素，div元素獲取到的后面緊鄰元素是ul元素。

3.?prev()方法

與前面的方法類似，此方法用于取得匹配元素前面緊鄰的同輩元素。語法如下：

$('selector').prev()

4.?siblings()方法

與前面的方法類似，此方法用于取得匹配元素前后所有的同輩元素。語法如下：

$('selector').siblings()

5.?find()方法

如果想快速查找DOM樹中的某個元素的后代元素，可以用find()方法，這也是使用頻率很高的方法。這里要注意children與find方法的區(qū)別，children是父子關系查找，find是后代關系(包含父子關系)查找。語法如下：

$('selector').find(selector)

與其他的樹遍歷方法不同，選擇器表達式對于find()方法是必需的。如果我們需要實現(xiàn)對所有后代元素的取回，可以傳遞通配選擇器“*”。

6.?parent()方法

此方法用于取得匹配元素的父元素。語法如下：

$('selector').parent(['selector'])

因為jQuery是合集對象，所以通過parent()方法是匹配合集中每一個元素的父元素，這時候可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳入一個選擇器的表達式。

7.?parents()方法

此方法用于取得匹配元素的所有上級元素。類似find()方法與children()方法的區(qū)別，parents()方法會往上一直查找到根元素(html元素)。語法如下：

$('selector').parents(['selector'])

在查找過程中可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳入一個選擇器的表達式。

8.?closest()方法

此方法接受一個匹配元素的選擇器字符串，從匹配元素本身開始，在DOM樹上逐級向上級元素匹配，并返回最先匹配的祖先元素。語法如下：

$('selector').closest('selector')

與find()方法不同，closest()方法開始于當前元素，找到一個匹配的元素就停止查找，因此closest()方法返回的是包含零個或一個元素的jQuery對象。

3.2.12CSS-DOM操作

1.?css()方法

jQuery可以直接利用css()方法獲取和設置元素的樣式屬性，使用方法與attr()方法類似。語法如下：

$('selector').css('styleName',['value'])

當傳入一個參數(shù)時，此方法的作用是獲取匹配元素的指定樣式的值；當傳入兩個參數(shù)時，此方法的作用是設置匹配元素的指定樣式。

無論css屬性是外部CSS導入(文件內(nèi)嵌、外部樣式)還是直接寫在style屬性中(內(nèi)聯(lián)樣式)，都可以使用css()方法進行操作。如以下代碼：

但是使用css()方法設置樣式時，樣式會直接拼接到元素的style屬性(內(nèi)聯(lián)樣式)中。如上面的代碼，將font-size屬性的值修改為50px后：

<script>

$('p').css('font-size','50px');

</script>

元素將變?yōu)椋?/p>

<pstyle="color:red;font-size:50px;">示例段落</p>

與attr方法一樣，css()方法也可以通過傳入一個對象作為參數(shù)同時設置多個樣式屬性。如下面的代碼，可以同時設置p元素的font-size、color、background-color三個屬性：

$('p').css({'font-size':'50px','color':'red','background-color':'gray'});

如果需要獲取某個元素的高度(height)屬性，可以通過如下代碼實現(xiàn)：

$(selector).css('height')

在jQuery中還有另外一種方法也可以獲取或設置元素的高度，即height()方法。它的作用是取得匹配元素當前計算的高度值(px)。語法如下：

$(selector).height([number/'string'])

如果要使用height()方法獲取元素的高度，則無須傳入?yún)?shù)；如果要設置元素的高度，則可以傳入一個數(shù)字作為參數(shù)，默認單位為px。如以下代碼：

$('p').height() //獲取匹配p元素的高度

$('p').height(30) //設置匹配p元素的高度為30px

$('p').height('30px') //設置匹配p元素的高度為30px

height()與css('height')的區(qū)別：css('height')方法獲取的高度值與元素的設置有關，可能會得到“auto”，也可能得到“30px”之類的字符串；height()方法獲取的高度值是元素在頁面中的實際高度，與樣式設置無關，且不帶單位。

與height()方法相似的還有width()方法，它可以獲取匹配元素的寬度值(px)。語法如下：

$('p').width() //獲取匹配p元素的寬度

$('p').width(30) //設置匹配p元素的寬度為30px

$('p').width('30px') //設置匹配p元素的寬度為30px

2.?offset()方法

它的作用是獲取元素在當前視窗的相對偏移，其中返回的對象包含兩個屬性，即top和left，它只對可見元素有效。例如用它來獲取p元素的的偏移量，代碼如下：

varoffset=$('p').offset(); //獲取p元素的offset

varleft=offset.left; //獲取左偏移

vartop=offset.top; //獲取上偏移

3.?position()方法

它的作用是獲取元素相對于最近的一個position樣式屬性設置為relative或者absolute的祖父節(jié)點的相對偏移，與offset()方法一樣，它返回的對象也包括兩個屬性，即top和left。代碼如下：

varposition=$('p').position(); //獲取p元素的position

varleft=position.left; //獲取左偏移

vartop=position.top; //獲取上偏移

4.?scrollTop()方法和scrollLeft()方法

這兩個方法的作用分別是獲取元素的滾動條距頂端的距離和距左側(cè)的距離。例如使用下面的代碼獲取p元素的滾動條距離：

$('p').scrollTop();//獲取p元素的滾動條距頂端的距離

$('p').scrollLeft();//獲取p元素的滾動條距左側(cè)的距離

另外，可以為這兩個方法指定一個參數(shù)，控制元素的滾動條滾動到指定位置。例如使用如下代碼控制元素內(nèi)的滾動條滾動到距頂端300和距左側(cè)300的位置:

$('textarea').scrollTop(300); //設置textarea元素的滾動條距頂端的距離為300px

$('textarea').scrollLeft(300); //設置textarea元素的滾動條距左側(cè)的距離為300px

5.?toggleClass()方法

此方法的作用是設置或移除被選元素的一個或多個類進行切換。檢查每個元素中指定的類。如果不存在則添加類，如果已設置則刪除之。這就是所謂的切換效果。語法如下：

$(selector).toggleClass('className'[,switch])

此方法有兩個參數(shù)：

第一個參數(shù)：必選。要添加或移除的類(class)名，如果要設置多個類，可以使用空格來分隔類名。

第二個參數(shù)：可選，規(guī)定是否只添加(true)或只移除(false)類。

1.?向頁面添加HTML元素

導航欄一般使用無序列表(ul)，每一個列表項(li)中放一個超鏈接(a)。

2.?使用CSS定義HTML元素的樣式

(1)?清除頁面所有元素(*)的內(nèi)邊距和外邊距，并改變寬度的計算方法。

(2)?取消無序列表(ul)的列標，并設置高度、背景顏色等。

(3)?設置項(li)的寬度和高度，向左浮動。

(4)?設置超鏈接(a)，取消下劃線，設置文本顏色、文本居中，并改變盒模型為塊級元素，寬度、高度撐滿項(li)。

(5)?設置高亮顯示類，并將該類賦予第一個項(li)。

(6)?設置當鼠標懸停(:hover)在項(li)上時高亮顯示。

3.?使用jQuery定義元素的動作

為所有項添加點擊事件：當項被點擊時，為被點擊的項添加高亮類名，同時取消其他項的高亮類名。

單?元?總?結(jié)

本單元首先簡單地介紹了什么是DOM；然后介紹了DOM操作分為DOMCore操作、HTML-DOM操作和CSS-DOM操作，以及它們的功能和用法；然后詳細地介紹了jQuery中的DOM操作，例如創(chuàng)建節(jié)點、設置屬性等；最后以一個網(wǎng)頁導航欄作為案例，通過案例的編程和實現(xiàn)過程，加深對DOM操作的理解。單元4jQuery中的事件任務4制作頁面登錄模塊4.1jQuery加載事件4.2jQuery事件綁定4.3合成事件4.4事件冒泡4.5事件捕獲4.6

移除事件4.7模擬操作單元總結(jié)

4.1jQuery加載事件

在編寫JavaScript代碼時，我們通常會在頁面加載完成時對元素做一些初始化操作，而這些初始化操作需要頁面全部加載完畢后才執(zhí)行，否則可能代碼運行時頁面上的元素還沒有生成。在原生JavaScript中，通常使用window.onload方法，而在jQuery中，使用的是$(document).ready()方法。

4.1.1$(document).ready()方法

$(document).ready()方法是在文檔加載后激活的函數(shù)。當DOM(文檔對象模型)已經(jīng)加載，并且頁面(包括圖像)已經(jīng)完全呈現(xiàn)時，會發(fā)生ready事件。由于該事件在文檔就緒后發(fā)生，因此把所有其他的jQuery事件和函數(shù)置于該事件中是非常好的做法。而$(document).ready()方法是ready事件發(fā)生時執(zhí)行的代碼，此方法僅能用于當前文檔，因此無需選擇器。語法如下：

4.1.2$(document).ready()與window.onload的區(qū)別

$(document).ready()與window.onload有類似的作用，但是也有細微區(qū)別，列舉如下。

1.?執(zhí)行時機

window.onload方法是在網(wǎng)頁中所有的元素(包括元素的所有關聯(lián)文件)完全加載到瀏覽器后才執(zhí)行，即JavaScript此時才可以訪問網(wǎng)頁中的任何元素。而通過$(document).ready()方法注冊的事件處理程序，在DOM完全就緒時就可以被調(diào)用。此時，網(wǎng)頁的所有元素對jQuery而言都是可以訪問的，但是，這并不意味著這些元素關聯(lián)的文件都已經(jīng)下載完畢。

2.?執(zhí)行次數(shù)

在window.onload方法中，每個頁面只能綁定一個函數(shù)，如果頁面中執(zhí)行了兩次window.onload方法，則后綁定的函數(shù)會替換之前綁定的函數(shù)，因此不能在現(xiàn)有行為后添加新的行為。如圖4-1所示的代碼，執(zhí)行了兩次window.onload方法，頁面運行后只打印“2”。圖4-1window.onload方法執(zhí)行示例

對比window.onload方法，$(document).ready()方法會在現(xiàn)有行為上追加新的行為，這些行為會根據(jù)注冊的順序依次執(zhí)行。也就是說，$(document).ready()方法可以執(zhí)行多次，不會替換前面的內(nèi)容。如圖4-2所示的代碼，執(zhí)行了兩次$(document).ready()方法，頁面運行后打印“1”和“2”。圖4-2$(document).ready()方法執(zhí)行示例

4.2jQuery事件綁定

1.?bind()方法在頁面加載完成后，如果要為元素綁定事件來完成某些操作，則可以使用bind()方法來對匹配元素進行特定事件的綁定。語法如下：$(selector).bind(type[,data][,function])

此方法最多允許傳入三個參數(shù)：

?第一個參數(shù)：必需參數(shù)，表示要綁定的事件類型，如點擊事件(click)、雙擊事件(dblclick)等。

?第二個參數(shù)：可選參數(shù)，表示作為event.data屬性值傳遞給事件對象的額外數(shù)據(jù)對象。

?第三個參數(shù)：必需參數(shù)，表示事件需要觸發(fā)的處理函數(shù)。

在jQuery中，可綁定的事件名比原生JavaScript的事件名少了“on”。例如鼠標單擊事件，在原生JavaScript中的名字是onclick()，而在jQuery中對應的是click()。

表4-1列舉了常用的jQuery事件，在后面的單元中會對這些事件進行詳細講解。

更多的事件可以去官方幫助文檔查詢，官方幫助文檔地址：

/jquery/jquery_ref_events.asp

下面的代碼使用了bind()方法，為標題(h3)元素綁定了一個點擊事件，點擊效果是：讓內(nèi)容(div)在顯示與隱藏之間切換。

顯示效果如圖4-3所示。圖4-3事件綁定效果展示

2.?簡寫綁定方法

像click、mouseover、mouseout等事件在編程過程中會經(jīng)常使用，jQuery為此提供了一套簡寫方法。簡寫方法和其他的jQuery方法寫法一樣，實現(xiàn)的效果也相同，唯一的區(qū)別就是能夠減少代碼量。

例如，為某div元素綁定click事件，使用bind()方法綁定的寫法為：

$('div').bind('click',function(){

//事件處理代碼

})

使用簡寫綁定事件的寫法為：

$('div').click(function(){

//事件處理代碼

})

3.?綁定多個事件類型

bind()方法不僅能為元素綁定瀏覽器支持的具有相同名稱的事件，而且可以綁定自定義事件，還能夠一次性綁定多個事件類型。

例如，同時為div綁定mouseover和mouseout事件的代碼如下：

$('div').bind('mouseovermouseout',function(){

$(this).toggleClass('highLight');

})

這段代碼等同于下面的代碼：

$('div').bind('mouseover',function(){

$(this).addClass('highLight');

}).bind('mouseout',function(){

$(this).removeClass('highLight');

})

這兩段代碼的作用都一樣，當鼠標移入p元素時，高亮顯示p元素；當鼠標移出p元素時，恢復p元素顯示狀態(tài)。

4.?添加事件命名空間

jQuery還可以把為元素綁定的多個事件類型用命名空間規(guī)范起來，即在所綁定的事件類型后面用點(.)添加命名空間，示例代碼如下：

上面的代碼，首先給div綁定了三個事件：click、mouseenter、dblclick，同時為前兩個事件添加了命名空間test，給按鈕(button)綁定了一個點擊事件，當點擊按鈕時，刪除div中命名空間名為test的事件。當點擊按鈕時，會刪除div的click和mouseenter事件，而dblclick事件則不會被刪除。

上面的點擊按鈕事件也可以用以下鏈式代碼實現(xiàn)：

$('button').click(function(){

$('div').unbind('click').unbind('mouseenter');

})

4.3合?成?事?件

jQuery有一個合成事件方法：hover()，這是jQuery自定義的方法。此方法用于模擬鼠標懸停事件。語法如下：$(selector).hover(enter,leave)此方法有兩個必需參數(shù)，兩個參數(shù)都是事件處理函數(shù)。當鼠標移動到元素上時，會觸發(fā)指定的第一個函數(shù)(enter)；當鼠標移除這個元素時，會觸發(fā)指定的第二個函數(shù)(leave)。

比如下面的代碼，使用jQuery模擬實現(xiàn)CSS:hover偽類的效果，當鼠標進入元素時改變背景顏色，鼠標移出時恢復背景顏色：

$('div').mouseenter(function(){

$(this).addClass('highLight');

})

$('div').mouseleave(function(){

$(this).removeClass('highLight');

})

將上面的例子改用hover()方法實現(xiàn)，代碼如下：

$('div').hover(function(){

$(this).addClass('highLight');

},function(){

$(this).removeClass('highLight');

})

4.4事?件?冒?泡

1.?什么是冒泡在頁面上可以有多個事件，也可以多個元素響應同一個事件。比如圖4-4中的代碼，網(wǎng)頁上有兩個元素：div和p，p元素是div元素的子元素，兩者都綁定了click事件，同時body元素上也綁定了click事件，此時點擊p元素會觸發(fā)p元素的click事件，同時也會觸發(fā)div和body元素的click事件。

如圖4-4所示，點擊一次p元素，會依次在控制臺打印“3”“2”“1”。圖4-4事件冒泡示例

在這個示例中，點擊p元素時，也點擊了包含p元素的div元素和包含div元素的body元素，因此三個元素的點擊事件都被觸發(fā)了。而三個元素的點擊事件會按照以下順序依次觸發(fā)：p元素→div元素→body元素。因為事件會按照DOM樹的層次結(jié)構像水泡一樣不斷向上直至頂端，所以稱為事件冒泡。事件冒泡過程示意圖如圖4-5所示。圖4-5事件冒泡過程示意圖

2.?事件對象

事件冒泡可能會引發(fā)預料之外的效果，比如上面的例子中，本來只想觸發(fā)p元素的點擊(click)事件，但是點擊時卻連同上級元素的點擊事件一起觸發(fā)了。因此，有必要對事件的作用范圍進行限制，以便準確控制點擊事件到底由誰來完成。比如當點擊p元素時，只觸發(fā)p元素的點擊事件而不觸發(fā)div和body元素的點擊事件；當點擊div元素時，只觸發(fā)div元素的點擊事件而不觸發(fā)body元素的點擊事件。用jQuery提供的事件對象就能很好地處理這個問題。

由于IE-DOM和標準DOM實現(xiàn)事件對象的方法各不相同，導致在不同瀏覽器中獲取事件對象變得比較困難。針對這個問題，jQuery進行了必要的擴展和封裝，從而使得在任何瀏覽器中都能很輕松地獲取事件對象以及事件對象的一些屬性。

在程序中使用事件對象非常簡單，只需要將事件對象作為函數(shù)的參數(shù)傳入即可，示例代碼如下：

$(selector).bind(type,function(event){

//事件處理代碼

})

事件對象(event)只有在事件處理函數(shù)中才能使用，事件處理函數(shù)執(zhí)行完畢后就會被銷毀。

事件對象常用的屬性和方法如表4-2所示。

如圖4-4所示的代碼，如果我們要實現(xiàn)點擊p元素時只觸發(fā)p元素的點擊事件，而不觸發(fā)div元素和body元素的點擊事件，可以在p元素的點擊事件中使用事件對象的阻止事件冒泡方法。圖4-4中的部分代碼修改如下：

4.5事?件?捕?獲

事件捕獲和事件冒泡是剛好相反的兩個過程，事件捕獲是從最頂端往下開始觸發(fā)。如冒泡事件的例子，其中元素的點擊(click)事件會按照以下順序捕獲：body元素→div元素→p元素。事件捕獲過程示意圖如圖4-6所示。圖4-6事件捕獲過程示意圖

遺憾的是，并非所有主流瀏覽器都支持事件捕獲，并且這個缺陷無法通過JavaScript來修復，因此，jQuery不支持事件捕獲。如果需要使用事件捕獲，可使用原生JavaScript來完成。

4.6移?除?事?件

1.?unbind()方法unbind()方法的作用是為匹配的元素解除指定事件的處理函數(shù)。語法如下：$(selector).unbind([type][,data])

此方法有兩個參數(shù)：

?第一個參數(shù)：可選參數(shù)，表示要解除綁定的事件類型。

?第二個參數(shù)：可選參數(shù)，表示要解除綁定的函數(shù)名。

此方法接受0～2個參數(shù)，根據(jù)參數(shù)個數(shù)不同，函數(shù)的作用也不同：

(1)?如果沒有參數(shù)，則刪除匹配元素所有綁定的事件。

(2)?如果提供了事件類型作為參數(shù)，則只刪除匹配元素該類型的綁定事件。

(3)?如果把在綁定時傳遞的處理函數(shù)作為第二個參數(shù)，則匹配元素只有這個特定的事件處理函數(shù)會被刪除。

2.?one()方法

對于只需要觸發(fā)一次，隨后就要立即解除綁定的情況，jQuery提供了一種簡寫方法one()。one()方法可以為元素綁定事件處理函數(shù)。當處理函數(shù)觸發(fā)一次后，立即被刪除。即在每個對象上，事件處理函數(shù)只會被執(zhí)行一次。語法如下：

$(selector).one(type[,data],function)

one()方法和bind()方法的作用類似，使用方法也相同，此處不再贅述。

4.7模?擬?操?作

1.?trigger()方法普通的事件都需要通過用戶操作來觸發(fā)，如用戶點擊(click)、鼠標移入(moveenter)等。但是，有時候需要通過模擬用戶操作來達到某些效果。例如在用戶進入頁面后就觸發(fā)某個按鈕的點擊(click)事件，而不需要用戶去主動點擊。

在jQuery中，可以使用trigger()方法完成模擬操作。trigger()方法的作用是觸發(fā)被選元素的指定事件類型以及事件的默認行為，比如提交表單。語法如下：

$(selector).trigger(type[,data1][,data2][,…])

trigger()方法的第一個參數(shù)是必需的，用來規(guī)定指定元素上要觸發(fā)的事件，可以是自定義事件或者其他任何標準事件。從第二個參數(shù)開始是需要傳遞到事件處理函數(shù)的參數(shù)。

比如圖4-4中的代碼，想要直接觸發(fā)p元素的點擊事件，可以使用下面的代碼：

$('p').trigger('click')

上面的代碼也可以直接用簡寫方法click()來達到同樣的效果：

$('p').click()

2.?triggerHandler()方法

trigger()方法觸發(fā)事件后，會執(zhí)行瀏覽器的默認操作。例如，下面的代碼不僅會觸發(fā)input元素綁定的focus事件(元素獲得焦點時觸發(fā)的事件)，也會使input元素本身得到焦點(瀏覽器默認操作)。

$('input').trigger('focus')

如果只想觸發(fā)綁定的focus事件，而不想執(zhí)行瀏覽器的默認操作，可以使用jQuery中另外一個類似的方法：triggerHandler()方法。

triggerHandler()方法的作用是觸發(fā)被選元素上指定的事件，而不觸發(fā)瀏覽器的默認事件。語法如下：

$(selector).triggerHandler(type[,data1][,data2][,…])

triggerHandler()方法的參數(shù)和trigger()方法的一樣，此處不再贅述。

與其他jQuery方法不同的是，triggerHandler()方法的返回值是事件處理函數(shù)的返回值，而不是具有可鏈性的jQuery對象。此外，triggerHandler()觸發(fā)的事件不會在DOM樹中冒泡，如果沒有處理程序被觸發(fā)，這個方法會返回undefined。同時，triggerHandler()方法只操作匹配到的第一個元素，而不是所有匹配元素。

比如上面的示例代碼，如果使用triggerHandler()方法，那么文本框只會觸發(fā)綁定的focus事件，而不會得到焦點，代碼如下：

$('input').triggerHandler('focus')

1.?頁面設計

根據(jù)業(yè)務需求，進行如下頁面設計：

?在頁面頂部放入一個div元素，用于放置用戶信息相關的HTML元素，在此div元素中放入一個超鏈接(a元素)，用于呼出登錄div。

?在頁面中放入另一個div元素，此div元素充斥整個頁面，定位方式為fixed，目的是呼出登錄界面后，充斥整個瀏覽器窗口。

?在登錄div層中放入一個div元素，該div元素在頁面居中位置，用于放置登錄相關HTML元素。

頁面設計示意圖如圖4-7和圖4-8所示。圖4-7正常頁面效果圖4-8進入登錄界面

2.?定義頁面結(jié)構及CSS樣式

由于頁面結(jié)構及CSS樣式不是本書重點，因此這部分的編碼思路及過程省略，讀者可以參考下面的代碼：

3.?為頁面元素添加事件

1)?為登錄按鈕添加事件

頁面正常打開的情況下，登錄的div層應該是不顯示的，即“display:none”。當點擊登錄按鈕時，彈出登錄div層。由于登錄按鈕是使用超鏈接，因此在彈出登錄div層后要取消元素的瀏覽器默認事件。jQuery代碼如下：

$('#btn_login').click(function(event){

$("#login_form").show();

event.preventDefault();

});

2)?為關