XML與WEB Service技術(shù)(微軟)：第04章 JavaScript和jQuery

1、第4章 JavaScript和jQuery08 七月 20222Ch4 JavaScript和jQuery4.1 在網(wǎng)頁中使用JavaScript和jQuery4.2 JavaScript和jquery的基本用法4.3 JavaScript的內(nèi)置的函數(shù)和對象4.4 瀏覽器對象和客戶端事件4.5 jQuery選擇器4.6 jQuery方法4.7 jQuery動畫08 七月 202234.1在網(wǎng)頁中使用JavaScript和jQueryJavaScript是什么JavaScript是一種廣泛用于網(wǎng)頁客戶端開發(fā)的腳本語言。通過JavaScript，可以動態(tài)選擇、添加、刪除、修改HTML元素和CSS。

2、JavaScript具有內(nèi)置的函數(shù)、對象和事件。jQuery是什么jQuery是一種免費(fèi)的開源JavaScript庫，這些庫函數(shù)也是用JavaScript來編寫的，但是語法更加簡潔、直觀。08 七月 202244.1在網(wǎng)頁中使用JavaScript和jQuery使用JavaScript和jQuery的限制區(qū)分大小寫， myname和MyName是兩個不同的變量名用戶可以設(shè)置禁用JavaScript，重要業(yè)務(wù)不能完全依賴于客戶端JavaScript腳本來實(shí)現(xiàn)由于JavaScript是在客戶端的瀏覽器解析執(zhí)行，用戶可以在客戶機(jī)中看到JavaScript的源碼。因此，它不適用于處理安全級別較高的敏感

3、數(shù)據(jù)。08 七月 202254.1在網(wǎng)頁中使用JavaScript和jQueryJavaScript和jQuery的代碼形式-以查找HTML元素為例 查找id為“div2”的元素塊級元素1塊級元素2JavaScript代碼示例：var id=document.getElementById(div2);jQuery代碼示例：var id = $(#div2);jQuery實(shí)際上就是用函數(shù)jQuery()對JavaScript功能進(jìn)行封裝，然后用簡潔的參數(shù)形式提供給開發(fā)人員去調(diào)用。本書使用的jQuery版本為1.7.1版08 七月 202264.1在網(wǎng)頁中使用JavaScript和jQuery編寫

4、JavaScript和jQuery代碼的兩種方式1、在網(wǎng)頁中直接編寫網(wǎng)頁中的JavaScript和jQuery代碼都必須包含在和之間，一般將其定義為函數(shù)保存在body塊的末尾。為了防止文檔在完全加載完畢之前執(zhí)行jQuery代碼，一般都將jQuery函數(shù)放在document.ready函數(shù)的內(nèi)部?！纠?-1】：演示如何在頁面中分別用JavaScript和jQuery顯示和隱藏div元素。在網(wǎng)頁中直接編寫代碼的缺點(diǎn)：無法在其他網(wǎng)頁中重復(fù)調(diào)用。08 七月 202274.1在網(wǎng)頁中使用JavaScript和jQuery編寫JavaScript和jQuery代碼的兩種方式2、在js文件中編寫為了達(dá)到“在

5、多個網(wǎng)頁中重復(fù)調(diào)用”這個目的，我們可以先將JavaScript和jQuery代碼寫到一個或多個以“.js”為擴(kuò)展名的外部文件中，然后在網(wǎng)頁中根據(jù)需要引用對應(yīng)的.js文件?！纠?-2】：演示如何在單獨(dú)的文件中編寫JavaScript和jQuery代碼。 注意：為了提高網(wǎng)頁顯示的速度，一般不要將對.js文件的引用放到head塊內(nèi)。在實(shí)際的項(xiàng)目開發(fā)時，應(yīng)把所有對JavaScript文件的引用全部放在元素的末尾（之前）。08 七月 202284.1在網(wǎng)頁中使用JavaScript和jQuery提高JavaScript和jQuery性能的技巧盡量使用整數(shù)進(jìn)行運(yùn)算合理確定JavaScript變量名不要在頁

6、面中引用不必要的.js文件08 七月 202294.2 JavaScript和jQuery基本用法變量和運(yùn)算符 從大的方面看，JavaScript有兩種數(shù)據(jù)類型。（1）基本類型：用于保存固定長度的值，包括數(shù)字、布爾值（true和false）、null以及undefined等。 這里需要注意一點(diǎn)，在JavaScript中，null表示無效的對象、數(shù)組、數(shù)字、字符串和布爾值，而undefined則表示未聲明的變量。（2）引用類型：用于保存可變長度的值，包括對象、數(shù)組和函數(shù)。注意字符串是一種特殊的對象，函數(shù)也是一個對象。08 七月 2022104.2 JavaScript和jQuery基本用法變量和

7、運(yùn)算符變量 JavaScript是一種弱類型的腳本語言，所以不論是什么類型的JavaScript變量，一律都使用var關(guān)鍵字來聲明，變量的類型在給變量賦值時才能確定。例如：var i； var j, k； var i = 5；08 七月 2022114.2 JavaScript和jQuery基本用法變量和運(yùn)算符變量作用域在函數(shù)內(nèi)部定義的變量稱為局部變量，作用域僅限于函數(shù)內(nèi)部在函數(shù)外部定義的變量稱為全局變量，而全局變量則可以用于所有函數(shù)。 var x = 100； var y = 200； function f1() document.writeln(x= + x)； function f2()

8、 document.writeln(y= + y)； 4.2 JavaScript和jQuery基本用法注意：如局部變量和全局變量同名，則在函數(shù)內(nèi)部會使用局部變量，而隱藏與其同名的全局變量。但是，開發(fā)人員一定要注意，在JavaScript函數(shù)內(nèi)聲明的變量作用域是整個函數(shù)，而不受函數(shù)內(nèi)的塊的約束。例如：function f() var i = 0； if(i = 0) var j=3； document.write(j)；08 七月 2022124.2 JavaScript和jQuery基本用法 例： JavaScript的變量作用域處理方式可能會引起邏輯錯誤 var i = 8； functi

9、on function1() document.write(i)； var i = 5； document.write(i)； function1()；輸出為：undefined5 08 七月 2022134.2 JavaScript和jQuery基本用法運(yùn)算符JavaScript使用的運(yùn)算符和C#語言的運(yùn)算符絕大部分都相同。例如：算術(shù)運(yùn)算符：加（+）、減（-）、乘（*）、除（/）比較運(yùn)算符：大于（）、小于（=）、小于等于（=）、等于（=）、不等于（!=）邏輯運(yùn)算符：（&、|、！）和位運(yùn)算符（&、|）等。08 七月 20221408 七月 2022154.2 JavaScript和jQuery

10、基本用法流程控制語句if語句 if語句的語法和C#語言的if語句語法及含義完全相同。 【例4-3】if語句代碼示例switch語句switch語句的用法和C#語言的switch語句有些區(qū)別。在JavaScript中，當(dāng)case塊的末尾不包含break或者return語句時，程序?qū)⒀刂乱粋€case語句繼續(xù)執(zhí)行，直到遇到break或者return語句為止，也可能一直執(zhí)行到switch語句的結(jié)束。【例4-4】switch語句代碼示例4.2 JavaScript和jQuery基本用法for語句for語句的語法和C#語言的for語句語法相同。for/in語句JavaScript的for/in語句和C#

11、的foreach作用相同，可以用它逐個遍歷數(shù)組或者集合中的每個元素。一般形式為：for(變量 in 對象) /語句塊 【例4-5】for語句和for/in語句代碼示例08 七月 20221608 七月 2022174.2 JavaScript和jQuery基本用法流程控制語句while語句和do-while語句while語句和do-while語句的用法和C#語言的while語句和do-while用法相同?！纠?-6】 while語句代碼示例try-catch-finally語句try-catch-finally語句的用法和C#的try-catch-finally用法相同。08 七月 20221

12、84.3 JavaScript內(nèi)置的函數(shù)和對象定義函數(shù)和對象在JavaScript中，函數(shù)（function）是一個可執(zhí)行的JavaScript代碼段，對象（object）是指已命名的數(shù)據(jù)的集合。自定義函數(shù)C#要求必須聲明方法參數(shù)的類型才能正常調(diào)用，而在JavaScript函數(shù)中，不需要聲明函數(shù)參數(shù)的類型。另外，JavaScript利用function關(guān)鍵字聲明函數(shù)，函數(shù)中如果有參數(shù)，各參數(shù)之間用逗號分隔。自定義對象 定義JavaScript對象與定義C#語言的對象形式上也比較相似08 七月 2022194.3 JavaScript內(nèi)置的函數(shù)和對象JavaScript的內(nèi)置函數(shù)JavaScri

13、pt提供了包括數(shù)學(xué)函數(shù)、字符串函數(shù)、數(shù)組函數(shù)、日期和時間函數(shù)，以及各種數(shù)據(jù)類型之間的轉(zhuǎn)換。數(shù)學(xué)函數(shù)JavaScript提供的Math函數(shù)與C#語言的Math類的用法相似?！纠?-7】演示數(shù)學(xué)函數(shù)的基本用法。字符串函數(shù)JavaScript對字符串的處理與C#對字符串的處理類似，但也有一些區(qū)別。另外，jQuery還提供了JavaScript沒有提供的Trim方法。【例4-8】演示字符串的基本操作08 七月 2022204.3 JavaScript內(nèi)置的函數(shù)和對象數(shù)組函數(shù)在JavaScript中，有一個內(nèi)置的名為Array的數(shù)組。由于JavaScript是一種弱類型的腳本語言，所以它的每一個元素可以

14、是任何類型的值。 JavaScript中數(shù)組的下標(biāo)編號和C#相同，即從0開始編號。例如：var a = new Array();var a = new Array(10)；也可以在定義數(shù)組的同時賦初值，例如：var a = new Array(aaa, bb, 12);或者：var a = aaa, bb, 12;08 七月 2022214.3 JavaScript內(nèi)置的函數(shù)和對象數(shù)組函數(shù)-（1）數(shù)組和字符串轉(zhuǎn)換-var a = 1, 2, 3;var s = a.join(,); /數(shù)組轉(zhuǎn)換為字符串，結(jié)果為1,2,3“var a1 = s.split(,); /字符串轉(zhuǎn)換為數(shù)組，結(jié)果為1,2

15、,3-（2）合并數(shù)組-var b = 4, 5;var a2 = a.concat(b); /結(jié)果為a2=1,2,3,4,508 七月 2022224.3 JavaScript內(nèi)置的函數(shù)和對象數(shù)組函數(shù)-（3）獲取數(shù)組的一部分-var a3 = a.slice(0, 2); /結(jié)果為1,2var a4 = a.slice(2); /結(jié)果為3-（4）添加或刪除數(shù)組元素-var c = 1, 2, 3, 4, 5, 6;/刪除c數(shù)組中從第3個元素開始的所有元素var c1 = c.splice(3); /結(jié)果為c1=4,5,6,c=1,2,3var d = 1, 2, 3, 4, 5, 6;var

16、d1 = d.splice(2, 3); /結(jié)果為d=1,2,6,d1=3,4,508 七月 2022234.3 JavaScript內(nèi)置的函數(shù)和對象數(shù)組函數(shù)/-（5）數(shù)組排序-var t1 = cab, b12, cook;t1.sort(); /升序排序,結(jié)果為t1=b12,cab,cookvar t2 = cab, b12, cook;t2.reverse(); /逆序，結(jié)果為t2=cook,b12,cabvar r1 = 2, 1, 3;r1.sort(); /結(jié)果為r1=1,2,3var r2 = 2, 1, 3;r2.reverse(); /逆序，結(jié)果為r2=3,1,2【例4-9】

17、演示Array數(shù)組的基本用法08 七月 2022244.3 JavaScript內(nèi)置的函數(shù)和對象日期和時間函數(shù) 在JavaScript中，對日期（年、月、日、星期）和時間（時、分、秒、毫秒）的處理是通過date對象來實(shí)現(xiàn)的 其用法和C#的date用法相似 【例4-10】演示日期函數(shù)的基本用法08 七月 2022254.3 JavaScript內(nèi)置的函數(shù)和對象數(shù)據(jù)類型轉(zhuǎn)換字符串轉(zhuǎn)換為整數(shù)（parseInt）該函數(shù)將字符串轉(zhuǎn)換為整數(shù)，其功能類似于C#的int.Parse(string,radix)方法的功能。語法為：parseInt(string, radix)。string表示被轉(zhuǎn)換的字符串。r

18、adix表示被轉(zhuǎn)換的數(shù)字的基數(shù)，該值介于2 36之間。如果省略radix參數(shù)，則將字符串看作十進(jìn)制為基數(shù)進(jìn)行轉(zhuǎn)換。如果該參數(shù)小于2或者大于36，則返回NaN。08 七月 2022264.3 JavaScript內(nèi)置的函數(shù)和對象數(shù)據(jù)類型轉(zhuǎn)換字符串轉(zhuǎn)換為浮點(diǎn)數(shù)（parseFloat）該函數(shù)將字符串轉(zhuǎn)換為浮點(diǎn)數(shù)，類似于C#的float.Parse(string)方法的功能。語法為：parseFloat (string)如果字符串中存在除了數(shù)字、符號、小數(shù)點(diǎn)和指數(shù)符號以外的字符，則停止轉(zhuǎn)換并返回已經(jīng)轉(zhuǎn)換的結(jié)果。如果第一個字符就不能轉(zhuǎn)換，則返回“NaN”。例如：（1） parseFloat(10)；/返

19、回10（2） parseFloat(10.33)；/返回10.33（3） parseFloat(34 45 66)；/返回34（4） parseFloat(40 years)；/返回40（5） parseFloat(He was 40)；/返回NaN08 七月 2022274.3 JavaScript內(nèi)置的函數(shù)和對象數(shù)據(jù)類型轉(zhuǎn)換整數(shù)或浮點(diǎn)數(shù)轉(zhuǎn)換為字符串（1）toString函數(shù)：將一個數(shù)轉(zhuǎn)換為十進(jìn)制、二進(jìn)制、八進(jìn)制、十六進(jìn)制的字符串。（2）toFixed函數(shù)：將一個數(shù)轉(zhuǎn)換為固定長度的字符串，參數(shù)指定小數(shù)位數(shù)。（3）toExponential函數(shù)：將一個數(shù)轉(zhuǎn)換為指數(shù)形式的字符串，參數(shù)指定小數(shù)位數(shù)

20、。【例4-11】演示將浮點(diǎn)數(shù)轉(zhuǎn)換為字符串的基本用法。08 七月 2022284.3 JavaScript內(nèi)置的函數(shù)和對象數(shù)據(jù)類型轉(zhuǎn)換判斷轉(zhuǎn)換結(jié)果是否為非數(shù)字（isNaN）當(dāng)使用parseInt函數(shù)或者parseFloat函數(shù)時，如果不能將字符串轉(zhuǎn)換成數(shù)字，將自動返回一個叫做NaN的結(jié)果。利用isNaN函數(shù)，可以測試轉(zhuǎn)換是否成功，如果轉(zhuǎn)換成功，則isNaN函數(shù)返回false，否則返回true。例如：var a = isNaN(parseInt(10)； /結(jié)果為falsevar b = isNaN(parseFloat(hello)； /結(jié)果為true08 七月 2022294.4瀏覽器對象和客

21、戶端事件DOMDOM（Document Object Model for HTML，文檔對象模型）是W3C制定的一種與客戶端瀏覽器、平臺和語言無關(guān)的HTML編程接口，它提供了對HTML文檔的結(jié)構(gòu)表述，定義了訪問和操作HTML文檔的標(biāo)準(zhǔn)方法，而且可被其他編程語言或腳本使用。例如：文檔標(biāo)題 標(biāo)題1我的鏈接08 七月 2022304.4瀏覽器對象和客戶端事件DOM客戶端瀏覽器公開的DOM樹中html元素對象的層次結(jié)構(gòu)。08 七月 2022314.4瀏覽器對象和客戶端事件Windows對象利用瀏覽器提供的window對象，可以控制瀏覽器窗口。08 七月 2022324.4瀏覽器對象和客戶端事件Wind

22、ows對象獲取瀏覽器窗口信息/瀏覽器窗口大小var windowWidth = window.outerWidth;var windowHeight = window.outerHeight;/瀏覽器窗口相對于屏幕左上角的位置var windowX = window.screenX;var windowY = window.screenY;/瀏覽器工作區(qū)（不包括工具條、菜單條、狀態(tài)條）var viewportWidth = window.innerWidth;var viewportHeight = window.innerHeight;【例4-12】演示獲取瀏覽器窗口信息的基本用法08 七月

23、 2022334.4瀏覽器對象和客戶端事件Windows對象計(jì)時器計(jì)時器提供了一個可以異步延時執(zhí)行JavaScript代碼片段的能力。注意JavaScript本身是單線程的（在一定時間范圍內(nèi)僅一部分腳本能運(yùn)行），利用計(jì)時器則可以突破這種限制，從而規(guī)劃一些在指定時間后自動執(zhí)行的代碼?！纠?-13】演示利用JavaScript函數(shù)開始和停止計(jì)時。08 七月 2022344.4瀏覽器對象和客戶端事件screen對象screen對象用于獲取客戶端屏幕和渲染能力等信息。屬性：（1）availHeight：獲取屏幕的工作區(qū)高度，不包括Windows任務(wù)欄可用高度。（2）availWidth：獲取屏幕的工作

24、區(qū)寬度，不包括Windows任務(wù)欄可用寬度。（3）width：屏幕寬度。（4）height：屏幕高度。（5）colorDepth：顏色深度，即可用的顏色數(shù)量。【例4-14】利用Screen對象返回客戶端屏幕的高度和寬度等信息。08 七月 2022354.4瀏覽器對象和客戶端事件Document對象Document對象的常用方法var x= document.getElementsByTagName(p)；/返回標(biāo)記名為p的子元素列表（數(shù)組）var x=document.createElement(div) ；/創(chuàng)建一個div元素節(jié)點(diǎn)var txt=document.createTextNode

25、(這是動態(tài)創(chuàng)建的內(nèi)容)；/創(chuàng)建一段文本08 七月 2022364.4瀏覽器對象和客戶端事件Document對象node對象調(diào)用Node對象的屬性及方法來查詢、設(shè)置或者刪除一個節(jié)點(diǎn)的相關(guān)屬性：（1）childNodes屬性：返回指定節(jié)點(diǎn)的所有子節(jié)點(diǎn)，并將其保存在數(shù)組中（2）nodeName屬性：返回指定節(jié)點(diǎn)的HTML標(biāo)記名稱（3）innerHTML屬性：設(shè)置或返回該標(biāo)簽元素開始和結(jié)束標(biāo)記之間包含的HTML（4） appendChild方法：向當(dāng)前節(jié)點(diǎn)對象追加節(jié)點(diǎn)，一般用于給頁面動態(tài)添加內(nèi)容的場合。（5）removeChild方法：移除當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)，并返回被移除的節(jié)點(diǎn)對象。08 七月 2022

26、374.4瀏覽器對象和客戶端事件客戶端事件在HTML元素的開始標(biāo)記內(nèi)，可以定義與用戶交互的客戶端事件?？梢岳肑avaScript或者jQuery實(shí)現(xiàn)事件被觸發(fā)時執(zhí)行的代碼。鼠標(biāo)事件08 七月 2022384.4瀏覽器對象和客戶端事件客戶端事件鍵盤事件窗體事件08 七月 2022394.4瀏覽器對象和客戶端事件客戶端事件表單事件表單事件是指在form元素的開始標(biāo)記內(nèi)聲明的事件【例4-15】演示利用onmouseover事件控制和顯示區(qū)域熱點(diǎn)。08 七月 2022404.5 jQuery選擇器當(dāng)希望對某個元素進(jìn)行操作時，首先必須找到這個元素。jQuery選擇器的用途就是通過標(biāo)記名、特性名、元素內(nèi)

27、容或其他CSS樣式屬性等多種方式準(zhǔn)確地找到將要對其操作的元素。基本格式$(selector)其中，selector是一個字符串，字符串的內(nèi)容和CSS 3.0選擇器的表示形式完全相同。例如：$(#div1)表示選擇id為“div1”的元素。由于jQuery選擇器的參數(shù)是字符串常量，當(dāng)參數(shù)中包含CSS 3.0選擇器中的特殊符號（!“#$%&()*+,./:;?|等）時，必須在每個字符的前面加上兩個反斜杠（）如：$(.bar)$(#div1.bar)08 七月 2022414.5 jQuery選擇器基本選擇器jQuery基本選擇器的格式和CSS 3.0基本選擇器的格式完全相同?！纠?-16】演示jQ

28、uery基本選擇器的用法。層次選擇器【例4-17】演示jQuery層次選擇器的用法。08 七月 2022424.5 jQuery選擇器特性選擇器jQuery特性選擇器的格式和CSS 3.0基本選擇器的格式完全相同?！纠?-18】演示jQuery特性選擇器的用法。基本過濾選擇器【例4-19】演示jQuery基本過濾選擇器的用法。08 七月 2022434.5 jQuery選擇器內(nèi)容過濾選擇器jQuery的元素內(nèi)容選擇器用于對DOM文檔中的文本內(nèi)容進(jìn)行篩選，從而準(zhǔn)確地選取所需元素?！纠?-20】演示jQuery內(nèi)容過濾選擇器的用法?？梢娦赃^濾選擇器可見性過濾選擇器用于選擇可見或者不可見的元素08

29、七月 2022444.5 jQuery選擇器子元素過濾選擇器jQUery的子元素過濾選擇器是對某一元素的子元素進(jìn)行選取。表單對象選擇器利用表單對象選擇器可以在頁面中快讀定位某表單對象。08 七月 2022454.5 jQuery選擇器表單對象特性選擇器表單對象特性選擇器主要是通過表單中某對象的特性獲取該類元素，例如選擇不可用的表單元素、被選中的下拉框、多選框等。08 七月 2022464.6 jQuery方法CSS操作利用jQuery提供的CSS操作方法，能方便地獲取或設(shè)置元素的CSS屬性。css(propertyName,value) 用于設(shè)置匹配元素的CSS屬性。參數(shù)propertyNam

30、e指定要設(shè)置的CSS屬性名，value指定propertyName的值。如果value是一個數(shù)，還可以用原來的值參與運(yùn)算。例如：$(this).css(background-color, #FF0000); /設(shè)置當(dāng)前對象的背景色$(this).css(background-color, ); /移除當(dāng)前對象的背景色屬性$(div).css(background-color, red); /設(shè)置所有div元素的背景色$(this).css(width, +=10); /將原來的寬度增加10px$(this).css(height, -=15); /將原來的寬度減少15px08 七月 20224

31、74.6 jQuery方法CSS操作css(propertyName)獲取匹配元素的CSS屬性值，propertyName指定要獲取的屬性。例如：$(this).css(background-color); /獲取當(dāng)前對象的背景色$(#div1).css(background-color); /獲取id=div1的對象的背景色08 七月 2022484.6 jQuery方法CSS操作css(properties)該方法為匹配的每個元素設(shè)置一個或多個CSS屬性。一般格式為：.css(屬性名1:值1, 屬性名2:值2, , 屬性名n:值n)如果屬性名不包含“-”，可以不加引號，否則必須加引號。建議

32、全部加引號屬性名和屬性值之間用冒號分隔，多個屬性之間用逗號分隔。例如：$(this).css(background-color:blue, color:white);$(p).css(background-color:red, font-size:150%); 【例4-21】演示jQuery提供的CSS方法的基本用法。08 七月 2022494.6 jQuery方法HTML操作jQuery提供的HTML方法用于獲取或設(shè)置元素的內(nèi)容或選項(xiàng)的值。html(value)、html(function(index, html)html(value)：不帶參數(shù)時，獲取第一個匹配元素的html內(nèi)容。帶參數(shù)時

33、，設(shè)置每一個匹配元素的html內(nèi)容。html(function(index, html)：用參數(shù)返回的HTML字符串設(shè)置每一個匹配元素的html內(nèi)容。text(value)、text(function(index, html)獲取的是所有匹配元素的內(nèi)容，結(jié)果是由所有匹配元素包含的文本內(nèi)容組合起來的文本。val(value)不帶參數(shù)時，獲取第一個匹配元素的值，如果有多個值，則返回的是一個數(shù)組。帶參數(shù)時，設(shè)置每一個匹配元素的值。08 七月 2022504.6 jQuery方法元素大小和位置操作元素大小和位置相關(guān)的方法用于獲取或設(shè)置元素的大小、位置和偏移量。width、height、innerWid

34、th、innerHeight、outerWidth、outerHeightscrollLeft(value)、scrollTop(value)offset(coordinates)例如：var p = $(p:last);var offset = p.offset();p.html( left: + offset.left + , top: + offset.top );$(p:last).offset( top: 10, left: 30 );scrollLeft(value)、scrollTop(value)position()獲取匹配元素相對父元素的偏移量，返回的對象包含兩個整型屬性to

35、p和left。08 七月 2022514.6 jQuery方法元素特性和屬性操作attr()、prop()attr方法獲取或設(shè)置元素的特性，prop方法獲取或設(shè)置元素的屬性.（1）attr(attributeName)、prop(propertyName)attr(attributeName)獲取第一個匹配元素的特性值。如果元素沒有相應(yīng)的特性，則返回undefined。例如:，則 $(img).attr(src) 的結(jié)果為test.jpg。prop(propertyName)獲取的是第一個匹配元素的屬性值，而不是元素的特性值。例如：08 七月 2022524.6 jQuery方法元素特性和屬性

36、操作attr()、prop()attr方法獲取或設(shè)置元素的特性，prop方法獲取或設(shè)置元素的屬性.（2）attr(attributeName,value)、prop(propertyName,value)attr(attributeName,value)為所有匹配的元素設(shè)置特性值。例如：$(img).attr(src,test.jpg); /為一個特性設(shè)置值$(#img1).attr(alt:圖片1,src:test.jpg); /為多個特性設(shè)置值prop(propertyName,value)為所有匹配的元素設(shè)置屬性值。08 七月 2022534.6 jQuery方法元素特性和屬性操作att

37、r()、prop()attr(attributeName, function(index, attr)將返回的結(jié)果作為特性值prop(propertyName, function(index, prop)將返回的結(jié)果作為屬性值【例4-22】演示attr和prop方法的基本用法。removeAttr(attributeName)、removeProp(propertyName)removeAttr(attributeName)為所有匹配的元素移除用attributeName指定的特性。removeProp(propertyName)為所有匹配的元素移除用propertyName指定的屬性08 七

38、月 2022544.6 jQuery方法元素特性和屬性操作addClass(className)為所選元素添加class特性的值。參數(shù)className指定為元素的class特性添加的值如果有多個class值，各個值之間用空格分隔。removeClass(className)刪除所選元素的class中的值參數(shù)指定要刪除的class特性的值。08 七月 2022554.6 jQuery方法元素特性和屬性操作addClass(function(index, currentClass)含義和css(name, function(index, value)的含義相似。例如：$(div).addClas

39、s(function (index, currentClass) var addedClass; if (currentClass = red) addedClass = green; $(p).text(There is one green div); return addedClass;);hasClass(className)、toggleClass(className)hasClass(className)判斷指定的className是否存在，如果存在則返回true，否則返回false。toggleClass(className)在添加className和刪除className之間切換

40、。08 七月 2022564.6 jQuery方法元素自定義數(shù)據(jù)操作data(key , value)該方法用于在一個元素上存取“鍵/值”數(shù)據(jù)$(div).data(MyData); / undefined$(div).data(MyData, hello); /MyData設(shè)置為hello$(div).data(MyData); / hello$(div).data(MyData, 86); / MyData設(shè)置為86$(div).data(MyData); / 86$(div).removeData(MyData); /移除MyData$(div).data(MyData); / unde

41、fined08 七月 2022574.6 jQuery方法元素自定義數(shù)據(jù)操作removeData(key)移除在元素上存放的名為key的數(shù)據(jù)。文檔處理jQuery提供的文檔處理方法用于在HTML文檔中添加、插入、包圍、替換元素在元素內(nèi)部插入新元素（1）append( content , content )、appendTo(target)這兩個方法的功能相似，都是向匹配的元素內(nèi)部追加內(nèi)容。區(qū)別是$(A).append(B)的含義是向A中追加B，而$(A).appendTo(B)的含義是向B中追加A。（2）prepend( content , content )、prependTo( targe

42、t )這兩個方法和append及appendTo方法的區(qū)別是在匹配元素內(nèi)部的最前面增加內(nèi)容，其他用法和append及appendTo方法的用法相同?！纠?-23】演示append和appendTo方法的基本用法。08 七月 2022584.6 jQuery方法文檔處理在元素外部插入元素外部插入是指將內(nèi)容插入到元素的外部。（1）after ( content , content )、insertAfter( target )這兩個方法的用法和append及appendTo方法的用法相同，唯一的區(qū)別就是被插入的內(nèi)容是插入到元素的外部了。（2）before ( content , content )

43、、insertBrfore(target)這兩個方法的用法和prepend及prependTo方法的用法相同，唯一的區(qū)別就是被插入的內(nèi)容是插入到元素的外部了。刪除元素（1）remove( selector )、detach( selector )這兩個方法的功能相似，都是從DOM中刪除匹配的元素。區(qū)別是remove方法包括數(shù)據(jù)和事件一塊刪除，而detach方法不刪除數(shù)據(jù)和事件。（2）empty()該方法刪除匹配的元素集合中所有的子節(jié)點(diǎn)。08 七月 2022594.6 jQuery方法文檔處理容器容器（wrap）的含義是將原始元素的外圍插入新元素作為容器。（1）wrap( wrappingEle

44、ment )用指定的元素作為匹配元素的容器。例如：$(span).wrap(); /將span作為div元素的容器（2）wrap( function(index) )用指定的元素作為匹配元素的容器。（3）wrapAll( wrappingElement )用單個元素作為匹配元素的容器。它與wrap()的區(qū)別是wrap()為每一個匹配的元素都包裹一次，而該函數(shù)只用單個元素包裹。其他用法都和wrap方法相同。（4）wrapInner( wrappingElement )將每一個匹配的元素的子內(nèi)容(包括文本節(jié)點(diǎn))用DOM元素包裹起來。例如：HellocruelWorld（5）unwrap()該方法將

45、移出元素的父元素。08 七月 2022604.6 jQuery方法文檔處理替換元素替換元素用于將一種或多種元素替換為另一種元素。（1）replaceWith( newContent )該方法先從DOM中刪除與newContent匹配的元素，然后再將所有匹配的目標(biāo)元素替換為用newContent指定的元素。例如： Hello And Goodbye（2）.replaceAll( target )該方法用匹配的元素替換掉所有target匹配到的元素。08 七月 2022614.6 jQuery方法事件處理on方法（1）on( events , selector , data, handler(ev

46、entObject) )該方法給所有匹配的元素附加一個或多個事件處理函數(shù)。（a）events參數(shù)該參數(shù)表示附加一個或多個用空格分隔的事件類型或命名空間，例如：“click keydown.myPlugin（b）selector參數(shù)該參數(shù)表示要篩選的觸發(fā)該事件的選定元素的后代選擇器的字符串。（c）data參數(shù)該參數(shù)表示事件被觸發(fā)時，通過event.data傳遞給事件處理程序的數(shù)據(jù)。如果只有一個數(shù)據(jù)，可以用引號引起來。如果有多個數(shù)據(jù)，則用集合表示。例如： data1:abc, data2:1508 七月 2022624.6 jQuery方法事件處理on方法（d）handler(eventObjec

47、t)參數(shù)該參數(shù)表示在觸發(fā)事件時要執(zhí)行的函數(shù)。該函數(shù)也可以直接寫為false，起作用和在事件處理函數(shù)中只有一條語句“return false;”的作用相同。例如：$(p).on(click, data1:abc, data2:15, function () alert($(this).text(););也可以在該參數(shù)中指定事件句柄，例如：$(p).on(click, data1:abc, data2:15, Myhander);function MyHander()alert($(this).text();【例4-24】演示on方法的基本用法。08 七月 2022634.6 jQuery方法事件

48、處理除了上述的on事件基本用法外，利用on事件還可以取消事件冒泡等默認(rèn)的操作。（1）在on方法的參數(shù)中指定是否取消冒泡和默認(rèn)行為，其作用和在事件處理函數(shù)的最后一條語句中加上return false;的作用相同。例如下面的代碼取消窗體提交操作，并返回false防止事件向上冒泡：$(form).on(submit, false)（2）在事件處理函數(shù)中調(diào)用preventdefault方法。該方法不阻止事件冒泡，但阻止其他的默認(rèn)行為。例如：$(form).on(submit, function (event) event.preventDefault(););（3）在事件處理函數(shù)中調(diào)用stopProp

49、agation方法。該方法只阻止事件冒泡，但不阻止其他的默認(rèn)行為。例如下面的代碼阻止了事件冒泡，但不會阻止窗體提交：$(form).on(submit, function (event) event.stopPropagation(); );08 七月 2022644.6 jQuery方法事件處理【例4-25】演示自定義事件的基本用法。（2）on( events-map , selector , data )在這個方法中，events-map的參數(shù)是JavaScript事件對象。它和上一個方法的events參數(shù)一樣是一個字符串，用來表示事件類型名稱和可選的命名空間，如果有多個附加的事件，各事件

50、類型之間用空格分隔。off方法off方法移除用on方法附加的事件操作。參數(shù)含義和on方法的參數(shù)含義相同。off( events , selector , handler(eventObject) )off( events-map , selector )這兩種方法的參數(shù)含義和對應(yīng)的on方法的參數(shù)含義相同?！纠?-26】演示off方法的基本用法。08 七月 2022654.6 jQuery動畫jQuery還提供了創(chuàng)建、隱藏、顯示、切換、滑動等對HTML元素操作的方法08 七月 2022664.6 jQuery動畫參數(shù)（duration、easing、callback）Duration該參數(shù)指定動

51、畫持續(xù)的時間。類型可以是整數(shù)或字符串。如果是整數(shù)，單位為毫秒如果是字符串，有3個可用的選項(xiàng)fast、slow和normal，分別表示持續(xù)時間為200毫秒、400毫秒、600毫秒。例如：$(div).show(); /默認(rèn)為持續(xù)時間為0$(div).show(fast); /持續(xù)時間為200毫秒$(div).show(1000); /持續(xù)時間為1000毫秒08 七月 2022674.6 jQuery動畫參數(shù)（duration、easing、callback）Easing實(shí)現(xiàn)漸變路徑，在easing參數(shù)中，只需要指定函數(shù)名稱即可，而不需要指定參數(shù)。如果不指定easing參數(shù)，Query就會自動使用

52、默認(rèn)的漸變函數(shù)。例如：show方法、hide方法默認(rèn)使用的是linear函數(shù)toggle方法默認(rèn)使用的是swing函數(shù)。callbackcallback稱為回調(diào)函數(shù)，是指當(dāng)該參數(shù)所在的方法執(zhí)行完成后自動執(zhí)行的函數(shù)?？梢栽赾allback函數(shù)中復(fù)位或者重新設(shè)置某些元素的位置、顏色等CSS屬性。08 七月 2022684.6 jQuery動畫顯示隱藏和切換（hide、show、toggle） 通過jQuery的hide、show和toggle方法，可以動態(tài)地顯示、隱藏HTML元素，以及切換隱藏和顯示的狀態(tài)?；靖袷綖椋?(selector).show(duration , easing , callback )$(selector).hide(duration , easing , callback )$(selector).toggle(duration , eas