學習單元8

JavaScript框架之jQuery應用任務8.1

為網(wǎng)頁添加定時廣告特效——jQuery基礎(chǔ)任務8.2

為網(wǎng)頁添加輪播圖特效——jQuery應用JavaScript框架之jQuery應用任務8.1為網(wǎng)頁添加定時廣告特效——jQuery基礎(chǔ)jQuery的優(yōu)勢任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用初識jQueryjQuery元素處理元素獲取jQuery動畫特效jQuery事件機制jQuery版本對比jQuery庫文件的引入方式jQuery對象初識jQueryjQuery是一個語法簡潔并兼容多瀏覽器的JavaScript類庫。由約翰·瑞思格（JohnResig）于2006年1月創(chuàng)建的開源項目。核心理念是Writeless,domore（寫得更少，做得更多）。jQuery是免費、開源的。任務8.1為網(wǎng)頁添加定時廣告特效——jQuery基礎(chǔ)（1）輕量級（2）強大的選擇器（3）更少的代碼（4）出色的DOM封裝（5）可靠的事件處理機制（6）封裝好的AJAX函數(shù)（7）解決了瀏覽器的兼容性問題（8）隱式迭代（9）擁有豐富的插件（10）開源jQuery優(yōu)勢任務8.1為網(wǎng)頁添加定時廣告特效——jQuery基礎(chǔ)目前jQuery有3個主要的大版本：jQuery1.x系列的經(jīng)典版本保持了對早期瀏覽器的支持，使用較為廣泛，最終版本是jQuery1.12.4；jQuery2.x系列的版本不再兼容IE6～IE8瀏覽器，從而更加輕量級，最終版本是jQuery2.2.4；jQuery3.x系列的版本不兼容IE6～IE8瀏覽器，此系列的版本增加了一些新方法，對一些方法的行為進行了優(yōu)化和改進。目前jQuery1.x和jQuery2.x系列的版本已停止更新，除非有特殊需求，否則一般不會使用這兩大版本，本課程選擇使用jQuery3.x。jQuery版本對比任務8.1為網(wǎng)頁添加定時廣告特效——jQuery基礎(chǔ)1.引入本地下載的jQuery庫文件

jQuery庫文件的引用有兩種方式：本地下載的jQuery庫文件不需要安裝，直接將下載的jQuery庫文件復制到項目的指定位置，當使用該文件時，直接在網(wǎng)頁頭部進行引用即可。例如，將jQuery庫文件jquery-3.7.1.min.js和引用庫文件的網(wǎng)頁放置到同一個目錄下，則網(wǎng)頁中引用jQuery庫文件的語句參考如下：<scriptsrc="jquery-3.7.1.min.js"></script>jQuery庫文件的引入方式任務8.1為網(wǎng)頁添加定時廣告特效——jQuery基礎(chǔ)2.引入在線的jQuery庫文件

jQuery庫文件的引用有兩種方式：引入在線的jQuery庫文件時，用戶無須下載，通過CDN引入即可。例如，在網(wǎng)頁中引入jQuery官網(wǎng)的在線jQuery庫文件的語句參考如下：<scriptsrc="/jquery-3.7.1.min.js"></script>jQuery庫文件的引入方式任務8.1為網(wǎng)頁添加定時廣告特效——jQuery基礎(chǔ)jQuery對象與DOM對象

DOM對象指的是普通的JavaScript對象，而jQuery對象則是包裝DOM對象后產(chǎn)生的對象。jQuery對象的作用是通過自身提供的一系列快捷功能來降低DOM操作的復雜度，提高程序的開發(fā)效率，同時解決不同瀏覽器間的兼容性問題。jQuery對象任務8.1為網(wǎng)頁添加定時廣告特效——jQuery基礎(chǔ)全局變量：$和jQuery將jQuery庫文件引入后，在全局作用域下會增加“$”和“jQuery”兩個全局變量，這兩個全局變量引用的是同一個對象，稱為jQuery頂級對象。在代碼中可以使用jQuery代替$，但一般為了方便，通常都直接使用$。例如，利用jQuery技術(shù)獲取頁面上的“div”元素，并將該元素設(shè)置為隱藏，參考代碼如下：

$("div").hide();jQuery("div").hide();jQuery對象任務8.1為網(wǎng)頁添加定時廣告特效——jQuery基礎(chǔ)創(chuàng)建jQuery對象

jQuery頂級對象類似于構(gòu)造函數(shù)，用來創(chuàng)建jQuery實例化對象（簡稱jQuery對象），但它不需要使用new進行實例化，其內(nèi)部會自動進行實例化，返回實例化后的對象。用戶可以為$()傳入一個參數(shù)來創(chuàng)建一個jQuery對象，也可以利用$直接調(diào)用jQuery靜態(tài)方法：例如：console.log($("div"));//利用$(參數(shù))創(chuàng)建jQuery對象console.log($.trim("HeBei"));//利用$直接調(diào)用jQuery靜態(tài)方法trim()jQuery對象任務8.1為網(wǎng)頁添加定時廣告特效——jQuery基礎(chǔ)jQuery代碼的書寫位置

jQuery代碼需要寫在要操作的DOM元素的后面，確保DOM元素已經(jīng)加載后，再運行jQuery代碼。如果將jQuery代碼寫在DOM元素前面，則代碼不會生效。例如：運行結(jié)果：jQuery對象任務8.1為網(wǎng)頁添加定時廣告特效——jQuery基礎(chǔ)上述代碼目的是通過jQuery代碼實現(xiàn)修改div元素內(nèi)容的目的，但運行程序查看結(jié)果，div的內(nèi)容并沒有被修改。究其原因是因為jQuery沒有找到div元素。//語法格式1$(document).ready(function(){//頁面DOM加載后執(zhí)行的代碼

});如果一定要將jQuery代碼寫在DOM元素的前面，則可以利用jQuery中的頁面加載事件方法來解決，常用的語法格式有以下三種：//語法格式2$().ready(function(){//頁面DOM加載后執(zhí)行的代碼

});jQuery對象任務8.1為網(wǎng)頁添加定時廣告特效——jQuery基礎(chǔ)//語法格式3$(function(){//頁面DOM加載后執(zhí)行的代碼});對前面案例進行如下兩種方式修改，程序都能得到正確結(jié)果：頁面加載事件利用頁面加載事件修改：修改代碼順序：運行結(jié)果：jQuery對象任務8.1為網(wǎng)頁添加定時廣告特效——jQuery基礎(chǔ)需要注意的是，雖然jQuery頁面加載事件與window.onload的功能類似，但是兩者在使用時有一定的區(qū)別。window.onload與jQuery頁面加載事件對比對比項window.onload$(document).ready()執(zhí)行時機必須等待網(wǎng)頁中的所有內(nèi)容（包括外部資源，如圖片）加載完成后才能執(zhí)行網(wǎng)頁中的所有DOM結(jié)構(gòu)繪制完成后就執(zhí)行（可能關(guān)聯(lián)內(nèi)容并未加載完成）編寫個數(shù)不能編寫多個事件處理函數(shù)能夠編寫多個事件處理函數(shù)簡化寫法無$()jQuery對象任務8.1為網(wǎng)頁添加定時廣告特效——jQuery基礎(chǔ)

為吸引用戶關(guān)注，廣告以慢慢下滑的方式顯示；廣告會占用頁面較大篇幅，為避免引起用戶反感，為廣告設(shè)置3s后以慢慢上滑的方式進行隱藏的特效，或者為廣告設(shè)置大幅廣告慢慢隱藏、小幅廣告慢慢顯示并停留在頁面上的特效。任務8.1為網(wǎng)頁添加定時廣告特效任務描述任務分析為一個運行的網(wǎng)站添加廣告特效，快捷、高效是開發(fā)者關(guān)注的重點。相對于JavaScript而言，jQuery通過對JavaScript的函數(shù)進行封裝，使得語法更加簡潔，同時解決了很多瀏覽器的兼容性問題。本任務選用jQuery替代JavaScript。任務會講解如何下載、安裝、配置jQuery環(huán)境，利用jQuery實現(xiàn)廣告定時顯示與隱藏，或者定時進行大幅廣告、小幅廣告的切換。任務8.1為網(wǎng)頁添加定時廣告特效1.下載jQuery2.配置運行環(huán)境3.引入jQuery庫文件4.為頁面添加廣告圖片5.為廣告圖片設(shè)置CSS樣式任務實施任務8.1為網(wǎng)頁添加定時廣告特效6.引入廣告樣式文件7.為廣告添加顯示與隱藏特效18.引入廣告特效的JavaScript代碼9.為廣告添加顯示與隱藏特效210.測試運行文件任務實施任務8.1為網(wǎng)頁添加定時廣告特效

在程序開發(fā)過程中，經(jīng)常需要對HTML元素進行操作，在操作前必須先準確地找到對應的DOM元素。為此，jQuery提供了類似CSS選擇器的機制，利用jQuery選擇器可以輕松地獲取DOM元素。jQuery支持CSS1.0～CSS3.0規(guī)則中幾乎所有的選擇器。如標簽選擇器、類選擇器、ID選擇器、后代選擇器等，使用$()或jQuery()可以非常方便地獲取需要操作的DOM元素。語法格式如下$(selector)或jQuery(selector)如$("div")表示獲取DOM元素中的所有<div>元素。根據(jù)選擇器獲取元素方式的不同，可將選擇器大致分為基本選擇器、層級選擇器、篩選選擇器、內(nèi)容選擇器、可見性選擇器、屬性選擇器、子元素選擇器和表單選擇器等。jQuery元素獲取任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用jQuery基本選擇器和CSS選擇器非常類似，jQuery常用基本選擇器如下表所示。選擇器功能描述示例#id獲取指定id的元素$("#lastname");//選取id為lastname的元素*匹配所有元素$("*");//選取所有元素.class獲取同一類class的元素$(".intro");//選取所有class為intro的元素element獲取相同標簽名的所有元素$("p");//選取所有的<p>的元素el1,el2,el3選取多個元素$("h1,div,p");//同時獲取所有<h1>、<div>和<p>的元素jQuery元素獲取——基本選擇器任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用jQuery層級選擇器可以通過一些指定的符號來完成多層級元素之間的獲取。選擇器功能描述示例parent>child獲取父元素下的所有子元素$("div>p");//獲取<div>元素下的所有名稱為<p>的直接子元素（一級）parentdescendant獲取父元素下的所有后代元素$("divp");//獲取<div>元素下的所有名稱為<p>的后代元素（多級）element+next獲取當前元素緊鄰的兄弟元素$("div+p");//獲取緊鄰<div>元素的下一個名稱為<p>的兄弟元素element~siblings獲取當前元素后的所有兄弟元素$("div~p");//獲取<div>元素后的所有名稱為<p>的同級元素節(jié)點任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用jQuery元素獲取——層級選擇器在使用jQuery

選擇器獲取元素后，如果不考慮獲取到的元素數(shù)量，直接對元素進行操作，則在操作時會發(fā)生隱式迭代。隱式迭代是指當要操作的元素實際上有多個時，jQuery會自動對所有的元素進行操作?！景咐坷秒[式迭代的方式為所有l(wèi)i元素設(shè)置顏色，參考代碼如下：代碼截圖運行結(jié)果任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用jQuery元素獲取——層級選擇器開發(fā)中若需要對獲取的元素進行篩選，可以使用jQuery提供的基本篩選選擇器完成，常用基本篩選選擇器如下表所示。選擇器功能描述示例:first獲取指定選擇器中的第一個元素$("li:first");//獲取第一個<li>元素:last獲取指定選擇器中的最后一個元素$("li:last");//獲取最后一個<li>元素:even獲取索引為偶數(shù)的指定選擇器中的奇數(shù)行數(shù)據(jù)，索引默認從0開始$("li:even")獲取所有l(wèi)i元素中，索引為偶數(shù)的奇數(shù)行數(shù)據(jù)，如索引為0、2、4的第1個、第3個和第5個<li>元素:odd獲取索引為奇數(shù)的指定選擇器中的偶數(shù)行數(shù)據(jù)，索引默認從0開始$("li:odd")獲取所有l(wèi)i元素中，索引為奇數(shù)的偶數(shù)行數(shù)據(jù)，如索引為1、3、5的第2個、第4個和第6個<li>元素:eq(index)獲取索引等于index的元素，默認從0開始$("li:eq(3)")獲取索引為3的<li>元素:gt(index)獲取索引大于index的元素$("li:gt(3)")獲取索引大于3的所有<li>元素:lt(index)獲取索引小于index的元素$("li:lt(3)")獲取索引小于3的所有<li>元素:not(seletor)獲取除指定的選擇器外的其他元素$("input:not(:empty)")獲取所有不為空的<input>元素:focus匹配當前獲取焦點的元素$("input:focus")匹配當前獲取焦點的<input>元素:animated匹配所有正在執(zhí)行動畫效果的元素$("div:not(:animated)")匹配當前沒有執(zhí)行動畫的<div>元素任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用jQuery元素獲取——篩選選擇器（1）內(nèi)容選擇器jQuery提供了根據(jù)內(nèi)容完成指定元素的獲取，常用內(nèi)容過濾選擇器如下表所示。選擇器功能描述示例:contains(text)獲取內(nèi)容包含text文本的元素$("li:contains('Hello')");//獲取內(nèi)容包含“Hello”的<li>元素:empty獲取內(nèi)容為空的元素$("li:empty");//獲取內(nèi)容為空的<li>元素:has(selector)獲取內(nèi)容包含指定選擇器的元素$("li:has('a')");//獲取內(nèi)容中包含<a>元素的所有<li>元素:parent選取帶有子元素或包含文本的元素$("li:parent");//選取帶有子元素或包含文本的<li>元素任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用jQuery元素獲取——其他常用選擇器（2）可見性選擇器為了方便開發(fā)，jQuery提供了可見或隱藏元素的獲取，具體如下表所示。選擇器功能描述示例:hidden獲取所有隱藏元素$("li:hidden");//選取所有隱藏的<li>元素:visible獲取所有可見元素$("li:visible");//選取所有可見的<li>元素任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用jQuery元素獲取——其他常用選擇器（3）屬性選擇器jQuery中提供了根據(jù)元素的屬性獲取指定元素的方式，常用的屬性選擇器如表下所示。選擇器功能描述示例[attr]獲取具有指定屬性的元素$("[href]");//選取所有帶有href屬性的元素[attr=value]獲取屬性值等于value的元素$("[href='#']");//選取所有href屬性的值等于"#"的元素[attr!=value]獲取屬性值不等于value的元素$("[href!='#']");//選取所有href屬性的值不等于"#"的元素[attr$=value]獲取屬性值以value結(jié)尾的元素$("[href$='.jpg']");//選取所有href屬性的值以".jpg"結(jié)尾的元素[attr^=value]獲取屬性值以value開始的元素$("[title^='Tom']");//選取所有title屬性的值以"Tom"開頭的元素[attr*=value]獲取屬性值包含value的元素$("[title*='Tom']");//選取所有title屬性值中含有"Tom"的元素任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用jQuery元素獲取——其他常用選擇器（4）子元素選擇器開發(fā)中若需要通過子元素的方式獲取元素，則可以利用jQuery提供的子元素選擇器完成。選擇器功能描述示例:nth-child(index/even/odd/公式)索引index默認從1開始，匹配指定index索引、偶數(shù)、奇數(shù)或符合指定公式（如2n，n默認從0開始）的子元素$("p:nth-child(2)");//獲取屬于其父元素的第二個子元素的所有<p>元素:first-child獲取第一個子元素$("p:first-child");//選取屬于其父元素的第一個子元素的所有<p>元素:last-child獲取最后一個子元素$("p:last-child");//選取屬于其父元素的最后一個子元素的所有<p>元素:only-child如果當前元素是唯一的子元素，則匹配$("p:only-child");//選取屬于其父元素的唯一子元素的所有<p>元素:nth-last-child(n)選擇所有它們父元素的第n個子元素。計數(shù)從最后一個元素開始到第一個$("p:nth-last-child(2)");//選取屬于其父元素的第二個子元素的<p>元素，從最后一個子元素開始計數(shù):nth-of-type(n)選擇同屬于一個父元素之下，并且標簽名相同的子元素中的第n個子元素$("p:nth-of-type(2)");//獲取屬于其父元素的第二個<p>元素的所有<p>元素:first-of-type選擇所有相同的元素名稱的第一個子元素$("p:first-of-type");//選取屬于其父元素的第一個<p>元素的所有<p>元素:last-of-type選擇所有相同的元素名稱的最后一個子元素$("p:last-of-type");//選取屬于其父元素的最后一個<p>元素的所有<p>元素:only-of-type選擇所有沒有兄弟元素，且具有相同的元素名稱的元素$("p:only-of-type");//選取屬于其父元素的特定類型的唯一子元素的所有<p>元素:nth-last-of-type(n)選擇屬于父元素的特定類型的第n個子元素，計數(shù)從最后一個元素到第一個$("p:nth-last-of-type(2)");//選取屬于其父元素的第二個<p>元素的所有<p>元素，從最后一個子元素開始計數(shù)任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用jQuery元素獲取——其他常用選擇器（5）表單選擇器

表單在Web開發(fā)中是最常見的操作之一，為此，jQuery專門提供了操作表單元素的表單選擇器，常用的表單選擇器如下表所示。選擇器功能描述示例:input獲取頁面中的所有表單元素，包含<select>以及<textarea>元素$(":input");//獲取所有<input>元素:text選取所有的文本框$(":text");//獲取所有type="text"的<input>元素:password選取所有的密碼框$(":password");//獲取所有type="password"的<input>元素:radio選取所有的單選按鈕$(":radio");//獲取所有type="radio"的<input>元素:checkbox選取所有的復選框$(":checkbox");//獲取所有type="checkbox"的<input>元素:submit獲取submit提交按鈕$(":submit");//獲取所有type="submit"的<input>元素:reset獲取reset重置按鈕$(":reset");//獲取所有type="reset"的<input>元素:button獲取button按鈕，包括<button></button>和type="button"$(":button");//獲取所有type="button"的<input>元素:image獲取type="image"的圖像域$(":image");//獲取所有type="image"的<input>元素:file獲取type="file"的文件域$(":file");//獲取所有type="file"的<input>元素:enabled獲取所有可用表單元素$(":enabled");//獲取所有啟用的元素:disabled獲取所有不可用表單元素$(":disabled");//獲取所有禁用的元素:selected獲取所有選中的表單元素，主要針對select$(":selected");//獲取所有被選中的<input>元素:checked獲取所有選中的表單元素，主要針對radio和checkbox$(":checked");//獲取所有被選中的<input>元素任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用jQuery元素獲取——其他常用選擇器任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用jQuery提供了一系列方法，用于元素的遍歷、創(chuàng)建、添加和刪除操作。1.遍歷元素

jQuery具有隱式迭代的功能，當一個jQuery對象中包含多個元素時，jQuery會對這些元素進行相同的操作。如果想對這些元素進行遍歷，可以使用jQuery提供的each()方法，其基本語法如下：$(selector).each(function(index，domEle){//對每個元素進行操作});$.each()方法和each()方法的用法類似，主要用于遍歷數(shù)組或?qū)ο蟮膶傩裕且环N用于數(shù)據(jù)處理的實用工具，具體語法如下：$.each(Object,function(index，element){//對每個元素進行操作});jQuery元素處理——元素操作例如：利用each()方法遍歷元素代碼運行結(jié)果任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用jQuery元素處理——元素操作在jQuery

中直接在$()函數(shù)中傳入一個HTML

字符串，即可方便地動態(tài)創(chuàng)建一個元素?！景咐坷胘Query動態(tài)創(chuàng)建一個元素，并將元素輸出到控制臺，參考代碼如下：2.創(chuàng)建元素任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用jQuery元素處理——元素操作3.添加元素jQuery添加元素的方式有兩種，分別是內(nèi)部添加和外部添加。內(nèi)部添加是指在元素內(nèi)部添加元素，用戶可以指定在內(nèi)部的最前面還是最后面添加，通過prepend()方法和append()方法來實現(xiàn)。外部添加指的是在目標元素的前面或者后面添加元素，可以通過before()方法和after()方法來實現(xiàn)。任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用jQuery元素處理——元素操作【案例】利用jQuery動態(tài)創(chuàng)建元素，根據(jù)需要將創(chuàng)建的元素添加到另一個元素的內(nèi)部或者外部，參考代碼如下：3.添加元素任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用jQuery元素處理——元素操作4.刪除元素常用刪除元素操作一般是指刪除某個元素或者某個元素的子元素，jQuery中提供了相對應的兩種方法，如表所示。方法功能描述empty()刪除元素下的子元素，但不刪除元素本身remove([selector])刪除元素下的子元素和本身，可選參數(shù)選擇器用于篩選元素

元素刪除方法empty()僅能刪除匹配元素的文本內(nèi)容，而元素節(jié)點依然存在；而remove()方法則可以同時刪除匹配元素本身和文本內(nèi)容。此外，用戶還可以通過html()方法修改元素內(nèi)容，如果在參數(shù)中傳入一個空字符串，也可以實現(xiàn)刪除元素子節(jié)點的效果，如“$('ul').html('')

”。任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用jQuery元素處理——元素操作jQuery中的操作元素內(nèi)容方法，主要包括html()方法、text()方法和val()方法。html()方法用于獲取或設(shè)置元素的HTML內(nèi)容，tex()方法用于獲取或設(shè)置元素的文本內(nèi)容，val()方法用來獲取或設(shè)置表單元素的value值。方法功能描述html()獲取第1個匹配元素的HTML內(nèi)容html(htmlString)設(shè)置第1個匹配元素的HTML內(nèi)容為htmlStringtext()獲取所有匹配元素包含的文本內(nèi)容組合起來的文本text(text)設(shè)置所有匹配元素的文本內(nèi)容為textval()獲取表單元素的value值val(value)設(shè)置表單元素的value值

需要注意的是，val()方法可以操作表單（select、radio和checkbox）的選中情況。當要獲取的元素是<select>元素時，返回結(jié)果是一個包含所選值的數(shù)組；當要為表單元素設(shè)置選中情況時，可以傳遞數(shù)組參數(shù)。jQuery元素處理——元素內(nèi)容操作任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用jQuery提供了兩種方式用于元素樣式的操作，分別是css()方法和設(shè)置類樣式方法，前者通過css()方法直接操作元素樣式，后者通過給元素添加或刪除類名來操作的樣式。例如：利用css()方法獲取及設(shè)置樣式參考用法如下console.log($('div').css('width'));$('div').css('width','100px');jQuery元素處理——元素樣式操作任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用本次任務就是利用jQuery實現(xiàn)Tab欄的切換特效。案例——Tab欄的切換特效：案例描述任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用利用jQuery實現(xiàn)Tab欄的切換特效可以利用jQuery提供的操作元素樣式的樣式類的方法，通過綁定點擊事件，動態(tài)顯示和隱藏對應內(nèi)容，從而提升用戶的交互體驗和信息組織效率。案例——Tab欄的切換特效：案例分析任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用1.定義HTML結(jié)構(gòu)2.定義CSS樣式3.利用jQuery實現(xiàn)交互4.測試運行案例——Tab欄的切換特效：案例實施任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用jQuery提供了一些屬性操作的方法，利用這些方法可以快捷地操作元素屬性，具體方法如表所示。方法功能描述attr(name)獲取第一個匹配元素的自定義屬性值，獲取失敗返回undefinedattr(name,

value)為所有匹配的元素設(shè)置一個自定義屬性值attr(properties)將一個鍵值對形式的對象properties設(shè)置為所有匹配元素的自定義屬性removeAttr(name)從每一個匹配的元素中刪除一個屬性prop(name)獲取第一個匹配元素的屬性值，獲取失敗返回undefinedprop(name,

value)為所有匹配的元素設(shè)置一個屬性prop(properties)將一個鍵值對形式的對象properties設(shè)置為所有匹配元素的屬性data(name)獲取指定元素上存儲的數(shù)據(jù)data(name,

value)設(shè)置指定元素上存儲的數(shù)據(jù)例如，利用屬性操作方法設(shè)置元素屬性及刪除元素屬性參考代碼如下：$('div').attr('class','second');$('div').removeAttr('class');jQuery元素處理——元素屬性操作任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用事件的處理在jQuery中是一個很重要的功能。jQuery簡化了事件的操作，用戶可以直接調(diào)用相關(guān)事件的操作方法來實現(xiàn)事件的處理。頁面事件、表單事件、鼠標事件以及鍵盤事件等，都可以用jQuery來完成。jQuery事件機制任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用

在jQuery中，實現(xiàn)事件注冊有兩種方式，一種是通過事件方法進行注冊，另一種是通過on()方法進行注冊。1.通過事件方法注冊事件在jQuery中通過事件方法注冊事件是通過調(diào)用某個事件方法，并傳入事件處理函數(shù)實現(xiàn)事件注冊。

jQuery的事件方法允許為一個事件綁定多個事件處理函數(shù)，只需多次調(diào)用事件方法，傳入不同的函數(shù)即可。jQuery中的一些常用的事件方法如下表所示。jQuery事件機制——事件注冊任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用jQuery事件機制——事件注冊分類方法功能描述表單事件blur([[eventData],

handler])當元素失去焦點時觸發(fā)focus([[eventData],

handler])當元素獲得焦點時觸發(fā)change([[eventData],

handler])當元素的值發(fā)生改變時觸發(fā)focusin([[eventData],

handler])在父元素上檢測子元素獲取焦點的情況focusout([[eventData],

handler])在父元素上檢測子元素失去焦點的情況select([[eventData],

handler])當文本框（包括<input>和<textarea>）中的文本被選中時觸發(fā)submit([[eventData],

handler])當表單提交時觸發(fā)鍵盤事件keydown([[eventData],

handler])按鍵盤按鍵時觸發(fā)keypress([[eventData],

handler])按鍵盤按鍵（Shift、Fn、CapsLock等非字符鍵除外）時觸發(fā)keyup([[eventData],

handler])鍵盤按鍵彈起時觸發(fā)鼠標事件mouseover([[eventData],

handler])當鼠標指針移入元素或其子元素時觸發(fā)mouseout([[eventData],

handler])在鼠標指針移出元素或其子元素時觸發(fā)mouseenter([[eventData],

handler])當鼠標指針移入元素時觸發(fā)mouseleave([[eventData],

handler])在鼠標指針移出元素時觸發(fā)click([[eventData],

handler])當單擊元素時觸發(fā)dblclick([[eventData],

handler])當雙擊元素時觸發(fā)mousedown([[eventData],

handler])當鼠標指針移動到元素上方，并按鼠標按鍵時觸發(fā)mouseup([[eventData],

handler])當在元素上放松鼠標按鍵時會被觸發(fā)瀏覽器事件scroll([[eventData],

handler])當滾動條發(fā)生變化時觸發(fā)resize([[eventData],

handler])當調(diào)整瀏覽器窗口的大小時會被觸發(fā)任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用

在jQuery中，如果一直對同一個元素或元素的其他關(guān)系元素（兄弟元素、父子元素）進行操作，那么可以使用“.語法”（點語法），一直寫下去，這就是jQuery中的鏈式編程，使用鏈式編程可以大大減少代碼量，讓代碼看起來更簡潔。利用鏈式編程給表格添加隔行變色效果，以及鼠標懸停高亮效果，參考代碼如下：jQuery事件機制——事件注冊任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用jQuery提供的

on()方法用于為元素綁定一個或多個事件處理函數(shù)，基本語法如下：2.通過on()方法綁定事件用法1：一次綁定一個事件處理函數(shù)element.on(event,fn);用法2：一次綁定多個事件處理函數(shù)element.on({event:fn},{event:fn},…);用法3：為不同事件注冊相同的事件處理函數(shù)element.on(events,fn);jQuery事件機制——事件注冊任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用其中，event表示事件類型，如click、mouseover等；events表示多個事件類型，每個事件類型之間使用空格分隔；fn表示回調(diào)函數(shù)，即綁定在元素身上的監(jiān)聽函數(shù)。上一案例用on（）方法實現(xiàn)格式如下：jQuery事件機制——事件注冊任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用此外，jQuery還提供了hover()方法，可以代替鼠標指針移入、移出事件，語法如下：element.hover(over,out)其中，over表示鼠標指針移入元素時執(zhí)行的事件處理函數(shù)，out表示鼠標指針移出時執(zhí)行的事件處理函數(shù)。利用hover()方法再次修改上例代碼，運行效果與前例的相同，修改代碼參考如下：jQuery事件機制——事件注冊任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用jQuery中事件委托通過on()方法實現(xiàn)，具體用法如下：element.on(event,selector,fn)其中，event表示事件類型，selector表示子元素選擇器，fn表示事件處理函數(shù)。事件委托的優(yōu)勢在于，可以為未來動態(tài)創(chuàng)建的元素注冊事件，其原理是將事件委托給父元素后，在父元素中動態(tài)創(chuàng)建的子元素也會擁有事件。jQuery事件機制——事件委托任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用【案例】定義一個無序序列，將子元素的單擊事件委托給父元素，并且新增的子元素也擁有單擊事件，部分代碼如下：jQuery事件機制——事件委托任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用一般情況下，為元素注冊事件后，由用戶或瀏覽器觸發(fā)事件，若希望某個事件在程序中被觸發(fā)，就需要手動觸發(fā)這個事件。在jQuery中，事件手動觸發(fā)一般有三種方式：通過事件方法實現(xiàn)事件觸發(fā)；通過trigger()方法實現(xiàn)事件觸發(fā)；通過triggerHandler()方法實現(xiàn)事件觸發(fā)。jQuery事件機制——事件觸發(fā)任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用（1）通過事件方法實現(xiàn)事件觸發(fā)在jQuery中，調(diào)用事件方法不僅可以實現(xiàn)事件注冊，還可以實現(xiàn)事件觸發(fā)，兩者的區(qū)別在于是否傳入?yún)?shù)，傳入?yún)?shù)表示事件注冊，不傳入?yún)?shù)表示事件觸發(fā)，示例代碼如下：jQuery事件機制——事件觸發(fā)任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用（2）通過trigger()方法實現(xiàn)事件觸發(fā)通過trigger()方法可以觸發(fā)指定事件，修改代碼參考如下：jQuery事件機制——事件觸發(fā)任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用（3）通過triggerHandler()方法實現(xiàn)事件觸發(fā)

通過事件方法和trigger()方法觸發(fā)事件時，都會執(zhí)行元素的默認行為，而通過triggerHandler()方法觸發(fā)事件不會執(zhí)行元素的默認行為。所謂元素的默認行為指的是用戶發(fā)生某個動作后元素自動發(fā)生的行為。jQuery事件機制——事件觸發(fā)任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用通過triggerHandler()方法觸發(fā)事件，使用方法如下:jQuery事件機制——事件觸發(fā)任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用

事件解除指的是移除元素所注冊的事件，jQuery提供了off()方法可以移除元素上注冊的事件。關(guān)于off()方法主要有以下三種常用的方式：element.off(); //解除元素上的所有事件element.off(event);//解除元素上指定的事件element.off(event,selector);//解除元素的事件委托jQuery事件機制——事件解除任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用在程序開發(fā)中，如果某個元素的某個事件只需要觸發(fā)一次，傳統(tǒng)方式是先給元素綁定事件，事件觸發(fā)后再解除事件，這樣實現(xiàn)起來比較麻煩。jQuery提供了一個one()方法，可以簡單、快速地實現(xiàn)此功能。jQuery事件機制——事件解除任務8.2為網(wǎng)頁添加輪播圖特效——jQuery應用

jQuery提供了許多