JavaScript和jQueryHTML5與ASPNET程序設(shè)計(jì)教程 課件_第1頁
JavaScript和jQueryHTML5與ASPNET程序設(shè)計(jì)教程 課件_第2頁
JavaScript和jQueryHTML5與ASPNET程序設(shè)計(jì)教程 課件_第3頁
JavaScript和jQueryHTML5與ASPNET程序設(shè)計(jì)教程 課件_第4頁
JavaScript和jQueryHTML5與ASPNET程序設(shè)計(jì)教程 課件_第5頁
已閱讀5頁，還剩69頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

第04章JavaScript和jQuery(HTML5與ASPNET程序設(shè)計(jì)教程〔第2版〕課件)12一月20235在網(wǎng)頁中使用JavaScript和jQueryJavaScript和jQuery的代碼形式-以查找HTML元素為例查找id為“div2〞的元素<divid="div1">塊級(jí)元素1</div><divid="div2">塊級(jí)元素2</div>JavaScript代碼例如：varid=document.getElementById("div2");jQuery代碼例如：varid=$("#div2");jQuery實(shí)際上就是用函數(shù)jQuery()對(duì)JavaScript功能進(jìn)行封裝，然后用簡潔的參數(shù)形式提供給開發(fā)人員去調(diào)用。本書使用的jQuery版本為版12一月20236在網(wǎng)頁中使用JavaScript和jQuery編寫JavaScript和jQuery代碼的兩種方式1、在網(wǎng)頁中直接編寫網(wǎng)頁中的JavaScript和jQuery代碼都必須包含在<script>和</script>之間，一般將其定義為函數(shù)保存在body塊的末尾。為了防止文檔在完全加載完畢之前執(zhí)行jQuery代碼，一般都將jQuery函數(shù)放在函數(shù)的內(nèi)部?！纠?-1】：演示如何在頁面中分別用JavaScript和jQuery顯示和隱藏div元素。在網(wǎng)頁中直接編寫代碼的缺點(diǎn)：無法在其他網(wǎng)頁中重復(fù)調(diào)用。12一月20237在網(wǎng)頁中使用JavaScript和jQuery編寫JavaScript和jQuery代碼的兩種方式2、在js文件中編寫為了到達(dá)“在多個(gè)網(wǎng)頁中重復(fù)調(diào)用〞這個(gè)目的，我們可以先將JavaScript和jQuery代碼寫到一個(gè)或多個(gè)以“.js〞為擴(kuò)展名的外部文件中，然后在網(wǎng)頁中根據(jù)需要引用對(duì)應(yīng)的.js文件?！纠?-2】：演示如何在單獨(dú)的文件中編寫JavaScript和jQuery代碼。注意：為了提高網(wǎng)頁顯示的速度，一般不要將對(duì).js文件的引用放到head塊內(nèi)。在實(shí)際的工程開發(fā)時(shí)，應(yīng)把所有對(duì)JavaScript文件的引用全部放在<body>元素的末尾〔</body>之前〕。12一月20238在網(wǎng)頁中使用JavaScript和jQuery提高JavaScript和jQuery性能的技巧盡量使用整數(shù)進(jìn)行運(yùn)算合理確定JavaScript變量名不要在頁面中引用不必要的.js文件12一月20239JavaScript和jQuery根本用法變量和運(yùn)算符從大的方面看，JavaScript有兩種數(shù)據(jù)類型。〔1〕根本類型：用于保存固定長度的值，包括數(shù)字、布爾值〔true和false〕、null以及undefined等。這里需要注意一點(diǎn)，在JavaScript中，null表示無效的對(duì)象、數(shù)組、數(shù)字、字符串和布爾值，而undefined那么表示未聲明的變量?！?〕引用類型：用于保存可變長度的值，包括對(duì)象、數(shù)組和函數(shù)。注意字符串是一種特殊的對(duì)象，函數(shù)也是一個(gè)對(duì)象。12一月202310JavaScript和jQuery根本用法變量和運(yùn)算符變量JavaScript是一種弱類型的腳本語言，所以不管是什么類型的JavaScript變量，一律都使用var關(guān)鍵字來聲明，變量的類型在給變量賦值時(shí)才能確定。 例如：vari；varj,k；vari=5；12一月202311JavaScript和jQuery根本用法變量和運(yùn)算符變量作用域在函數(shù)內(nèi)部定義的變量稱為局部變量，作用域僅限于函數(shù)內(nèi)部在函數(shù)外部定義的變量稱為全局變量，而全局變量那么可以用于所有函數(shù)。 varx=100；vary=200；functionf1(){document.writeln("x="+x)；}functionf2(){document.writeln("y="+y)；}JavaScript和jQuery根本用法注意： 如局部變量和全局變量同名，那么在函數(shù)內(nèi)部會(huì)使用局部變量，而隱藏與其同名的全局變量。但是，開發(fā)人員一定要注意，在JavaScript函數(shù)內(nèi)聲明的變量作用域是整個(gè)函數(shù)，而不受函數(shù)內(nèi)的塊的約束。例如：functionf(){vari=0；if(i>=0){varj=3；}document.write(j)；}12一月202312JavaScript和jQuery根本用法

例：JavaScript的變量作用域處理方式可能會(huì)引起邏輯錯(cuò)誤<scripttype="text/javascript">vari=8；

functionfunction1(){document.write(i)；vari=5；document.write(i)；}function1()；</script>輸出為：undefined5

12一月202313JavaScript和jQuery根本用法運(yùn)算符JavaScript使用的運(yùn)算符和C#語言的運(yùn)算符絕大局部都相同。例如：算術(shù)運(yùn)算符：加〔+〕、減〔-〕、乘〔*〕、除〔/〕比較運(yùn)算符：大于〔>〕、小于〔<〕、大于等于〔>=〕、小于等于〔<=〕、等于〔==〕、不等于〔!=〕邏輯運(yùn)算符：〔&&、||、！〕和位運(yùn)算符〔&、|〕等。12一月20231412一月202315JavaScript和jQuery根本用法流程控制語句if語句if語句的語法和C#語言的if語句語法及含義完全相同。【例4-3】if語句代碼例如switch語句switch語句的用法和C#語言的switch語句有些區(qū)別。在JavaScript中，當(dāng)case塊的末尾不包含break或者return語句時(shí)，程序?qū)⒀刂乱粋€(gè)case語句繼續(xù)執(zhí)行，直到遇到break或者return語句為止，也可能一直執(zhí)行到switch語句的結(jié)束?！纠?-4】switch語句代碼例如JavaScript和jQuery根本用法for語句for語句的語法和C#語言的for語句語法相同。for/in語句JavaScript的for/in語句和C#的foreach作用相同，可以用它逐個(gè)遍歷數(shù)組或者集合中的每個(gè)元素。一般形式為：for(變量in對(duì)象){//語句塊}【例4-5】for語句和for/in語句代碼例如12一月20231612一月202317JavaScript和jQuery根本用法流程控制語句while語句和do-while語句while語句和do-while語句的用法和C#語言的while語句和do-while用法相同。【例4-6】while語句代碼例如try-catch-finally語句try-catch-finally語句的用法和C#的try-catch-finally用法相同。12一月202318JavaScript內(nèi)置的函數(shù)和對(duì)象定義函數(shù)和對(duì)象在JavaScript中，函數(shù)〔function〕是一個(gè)可執(zhí)行的JavaScript代碼段，對(duì)象〔object〕是指已命名的數(shù)據(jù)的集合。自定義函數(shù)C#要求必須聲明方法參數(shù)的類型才能正常調(diào)用，而在JavaScript函數(shù)中，不需要聲明函數(shù)參數(shù)的類型。另外，JavaScript利用function關(guān)鍵字聲明函數(shù)，函數(shù)中如果有參數(shù)，各參數(shù)之間用逗號(hào)分隔。自定義對(duì)象 定義JavaScript對(duì)象與定義C#語言的對(duì)象形式上也比較相似12一月202319JavaScript內(nèi)置的函數(shù)和對(duì)象JavaScript的內(nèi)置函數(shù)JavaScript提供了包括數(shù)學(xué)函數(shù)、字符串函數(shù)、數(shù)組函數(shù)、日期和時(shí)間函數(shù)，以及各種數(shù)據(jù)類型之間的轉(zhuǎn)換。數(shù)學(xué)函數(shù)JavaScript提供的Math函數(shù)與C#語言的Math類的用法相似。【例4-7】演示數(shù)學(xué)函數(shù)的根本用法。字符串函數(shù)JavaScript對(duì)字符串的處理與C#對(duì)字符串的處理類似，但也有一些區(qū)別。另外，jQuery還提供了JavaScript沒有提供的Trim方法?！纠?-8】演示字符串的根本操作12一月202320JavaScript內(nèi)置的函數(shù)和對(duì)象數(shù)組函數(shù)

在JavaScript中，有一個(gè)內(nèi)置的名為Array的數(shù)組。由于JavaScript是一種弱類型的腳本語言，所以它的每一個(gè)元素可以是任何類型的值。JavaScript中數(shù)組的下標(biāo)編號(hào)和C#相同，即從0開始編號(hào)。例如：vara=newArray();vara=newArray(10)；也可以在定義數(shù)組的同時(shí)賦初值，例如：vara=newArray("aaa","bb",12);或者：vara=["aaa","bb",12];12一月202321JavaScript內(nèi)置的函數(shù)和對(duì)象數(shù)組函數(shù)----〔1〕數(shù)組和字符串轉(zhuǎn)換---------------vara=[1,2,3];vars=a.join(",");//數(shù)組轉(zhuǎn)換為字符串，結(jié)果為"1,2,3“vara1=s.split(",");//字符串轉(zhuǎn)換為數(shù)組，結(jié)果為[1,2,3]----〔2〕合并數(shù)組-----------------------varb=[4,5];vara2=a.concat(b);//結(jié)果為a2==[1,2,3,4,5]12一月202322JavaScript內(nèi)置的函數(shù)和對(duì)象數(shù)組函數(shù)----〔3〕獲取數(shù)組的一局部---------------vara3=a.slice(0,2);//結(jié)果為[1,2]vara4=a.slice(2);//結(jié)果為[3]---〔4〕添加或刪除數(shù)組元素-------------varc=[1,2,3,4,5,6];//刪除c數(shù)組中從第3個(gè)元素開始的所有元素varc1=c.splice(3);//結(jié)果為c1==[4,5,6],c==[1,2,3]vard=[1,2,3,4,5,6];vard1=d.splice(2,3);//結(jié)果為d==[1,2,6],d1=[3,4,5]12一月202323JavaScript內(nèi)置的函數(shù)和對(duì)象數(shù)組函數(shù) //----〔5〕數(shù)組排序----------------------vart1=["cab","b12","cook"];t1.sort();//升序排序,結(jié)果為t1==["b12","cab","cook"]vart2=["cab","b12","cook"];t2.reverse();//逆序，結(jié)果為t2==["cook","b12","cab"]varr1=[2,1,3];r1.sort();//結(jié)果為r1==[1,2,3]varr2=[2,1,3];r2.reverse();//逆序，結(jié)果為r2==[3,1,2]【例4-9】演示Array數(shù)組的根本用法12一月202324JavaScript內(nèi)置的函數(shù)和對(duì)象日期和時(shí)間函數(shù)在JavaScript中，對(duì)日期〔年、月、日、星期〕和時(shí)間〔時(shí)、分、秒、毫秒〕的處理是通過date對(duì)象來實(shí)現(xiàn)的其用法和C#的date用法相似【例4-10】演示日期函數(shù)的根本用法12一月202325JavaScript內(nèi)置的函數(shù)和對(duì)象數(shù)據(jù)類型轉(zhuǎn)換字符串轉(zhuǎn)換為整數(shù)〔parseInt〕該函數(shù)將字符串轉(zhuǎn)換為整數(shù)，其功能類似于C#的int.Parse(string,radix)方法的功能。語法為：parseInt(string,radix)。string表示被轉(zhuǎn)換的字符串。radix表示被轉(zhuǎn)換的數(shù)字的基數(shù)，該值介于2~36之間。如果省略radix參數(shù)，那么將字符串看作十進(jìn)制為基數(shù)進(jìn)行轉(zhuǎn)換。如果該參數(shù)小于2或者大于36，那么返回NaN。12一月202326JavaScript內(nèi)置的函數(shù)和對(duì)象數(shù)據(jù)類型轉(zhuǎn)換字符串轉(zhuǎn)換為浮點(diǎn)數(shù)〔parseFloat〕該函數(shù)將字符串轉(zhuǎn)換為浮點(diǎn)數(shù)，類似于C#的float.Parse(string)方法的功能。語法為：parseFloat(string)如果字符串中存在除了數(shù)字、符號(hào)、小數(shù)點(diǎn)和指數(shù)符號(hào)以外的字符，那么停止轉(zhuǎn)換并返回已經(jīng)轉(zhuǎn)換的結(jié)果。如果第一個(gè)字符就不能轉(zhuǎn)換，那么返回“NaN〞。例如：〔1〕parseFloat("10")； //返回10〔2〕parseFloat("10.33")； //返回〔3〕parseFloat("344566")； //返回34〔4〕parseFloat("40years")； //返回40〔5〕parseFloat("Hewas40")； //返回NaN12一月202327JavaScript內(nèi)置的函數(shù)和對(duì)象數(shù)據(jù)類型轉(zhuǎn)換整數(shù)或浮點(diǎn)數(shù)轉(zhuǎn)換為字符串〔1〕toString函數(shù)：將一個(gè)數(shù)轉(zhuǎn)換為十進(jìn)制、二進(jìn)制、八進(jìn)制、十六進(jìn)制的字符串?！?〕toFixed函數(shù)：將一個(gè)數(shù)轉(zhuǎn)換為固定長度的字符串，參數(shù)指定小數(shù)位數(shù)。〔3〕toExponential函數(shù)：將一個(gè)數(shù)轉(zhuǎn)換為指數(shù)形式的字符串，參數(shù)指定小數(shù)位數(shù)。【例4-11】演示將浮點(diǎn)數(shù)轉(zhuǎn)換為字符串的根本用法。12一月202328JavaScript內(nèi)置的函數(shù)和對(duì)象數(shù)據(jù)類型轉(zhuǎn)換判斷轉(zhuǎn)換結(jié)果是否為非數(shù)字〔isNaN〕當(dāng)使用parseInt函數(shù)或者parseFloat函數(shù)時(shí)，如果不能將字符串轉(zhuǎn)換成數(shù)字，將自動(dòng)返回一個(gè)叫做NaN的結(jié)果。利用isNaN函數(shù)，可以測試轉(zhuǎn)換是否成功，如果轉(zhuǎn)換成功，那么isNaN函數(shù)返回false，否那么返回true。例如：vara=isNaN(parseInt("10"))；//結(jié)果為falsevarb=isNaN(parseFloat("hello"))；//結(jié)果為true12一月202329瀏覽器對(duì)象和客戶端事件DOMDOM〔DocumentObjectModelforHTML，文檔對(duì)象模型〕是W3C制定的一種與客戶端瀏覽器、平臺(tái)和語言無關(guān)的HTML編程接口，它提供了對(duì)HTML文檔的結(jié)構(gòu)表述，定義了訪問和操作HTML文檔的標(biāo)準(zhǔn)方法，而且可被其他編程語言或腳本使用。例如：<html><head><title>文檔標(biāo)題</title></head><body><h1>標(biāo)題1</h1><ahref=〞://mytest〞id=〞myLink〞>我的鏈接</a></body></html>12一月202330瀏覽器對(duì)象和客戶端事件DOM客戶端瀏覽器公開的DOM樹中html元素對(duì)象的層次結(jié)構(gòu)。12一月202331瀏覽器對(duì)象和客戶端事件Windows對(duì)象利用瀏覽器提供的window對(duì)象，可以控制瀏覽器窗口。12一月202332瀏覽器對(duì)象和客戶端事件Windows對(duì)象獲取瀏覽器窗口信息//瀏覽器窗口大小varwindowWidth=window.outerWidth;varwindowHeight=window.outerHeight;//瀏覽器窗口相對(duì)于屏幕左上角的位置varwindowX=window.screenX;varwindowY=window.screenY;//瀏覽器工作區(qū)〔不包括工具條、菜單條、狀態(tài)條〕varviewportWidth=window.innerWidth;varviewportHeight=window.innerHeight;【例4-12】演示獲取瀏覽器窗口信息的根本用法12一月202333瀏覽器對(duì)象和客戶端事件Windows對(duì)象計(jì)時(shí)器計(jì)時(shí)器提供了一個(gè)可以異步延時(shí)執(zhí)行JavaScript代碼片段的能力。注意JavaScript本身是單線程的〔在一定時(shí)間范圍內(nèi)僅一局部腳本能運(yùn)行〕，利用計(jì)時(shí)器那么可以突破這種限制，從而規(guī)劃一些在指定時(shí)間后自動(dòng)執(zhí)行的代碼。【例4-13】演示利用JavaScript函數(shù)開始和停止計(jì)時(shí)。12一月202334瀏覽器對(duì)象和客戶端事件screen對(duì)象screen對(duì)象用于獲取客戶端屏幕和渲染能力等信息。屬性：〔1〕availHeight：獲取屏幕的工作區(qū)高度，不包括Windows任務(wù)欄可用高度。〔2〕availWidth：獲取屏幕的工作區(qū)寬度，不包括Windows任務(wù)欄可用寬度?！?〕width：屏幕寬度?！?〕height：屏幕高度?！?〕colorDepth：顏色深度，即可用的顏色數(shù)量。【例4-14】利用Screen對(duì)象返回客戶端屏幕的高度和寬度等信息。12一月202335瀏覽器對(duì)象和客戶端事件Document對(duì)象Document對(duì)象的常用方法varx=document.getElementsByTagName("p")；//返回標(biāo)記名為p的子元素列表〔數(shù)組〕varx=document.createElement("div")；//創(chuàng)立一個(gè)div元素節(jié)點(diǎn)vartxt=document.createTextNode("這是動(dòng)態(tài)創(chuàng)立的內(nèi)容")；//創(chuàng)立一段文本12一月202336瀏覽器對(duì)象和客戶端事件Document對(duì)象node對(duì)象調(diào)用Node對(duì)象的屬性及方法來查詢、設(shè)置或者刪除一個(gè)節(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)對(duì)象追加節(jié)點(diǎn)，一般用于給頁面動(dòng)態(tài)添加內(nèi)容的場合?！?〕removeChild方法： 移除當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)，并返回被移除的節(jié)點(diǎn)對(duì)象。12一月202337瀏覽器對(duì)象和客戶端事件客戶端事件在HTML元素的開始標(biāo)記內(nèi)，可以定義與用戶交互的客戶端事件。可以利用JavaScript或者jQuery實(shí)現(xiàn)事件被觸發(fā)時(shí)執(zhí)行的代碼。鼠標(biāo)事件12一月202338瀏覽器對(duì)象和客戶端事件客戶端事件鍵盤事件窗體事件12一月202339瀏覽器對(duì)象和客戶端事件客戶端事件表單事件表單事件是指在form元素的開始標(biāo)記內(nèi)聲明的事件【例4-15】演示利用onmouseover事件控制和顯示區(qū)域熱點(diǎn)。12一月202340jQuery選擇器當(dāng)希望對(duì)某個(gè)元素進(jìn)行操作時(shí)，首先必須找到這個(gè)元素。jQuery選擇器的用途就是通過標(biāo)記名、特性名、元素內(nèi)容或其他CSS樣式屬性等多種方式準(zhǔn)確地找到將要對(duì)其操作的元素。根本格式$(selector)其中，selector是一個(gè)字符串，字符串的內(nèi)容和選擇器的表示形式完全相同。例如：$("#div1")表示選擇id為“div1〞的元素。由于jQuery選擇器的參數(shù)是字符串常量，當(dāng)參數(shù)中包含選擇器中的特殊符號(hào)〔!“#$%&‘()*+,./:;<=>?@[\]^`{|}~等〕時(shí)，必須在每個(gè)字符的前面加上兩個(gè)反斜杠〔\\〕如：$(".bar")$("#div1\\.bar")12一月202341jQuery選擇器根本選擇器jQuery根本選擇器的格式和根本選擇器的格式完全相同?！纠?-16】演示jQuery根本選擇器的用法。層次選擇器【例4-17】演示jQuery層次選擇器的用法。12一月202342jQuery選擇器特性選擇器jQuery特性選擇器的格式和根本選擇器的格式完全相同。【例4-18】演示jQuery特性選擇器的用法。根本過濾選擇器【例4-19】演示jQuery根本過濾選擇器的用法。12一月202343jQuery選擇器內(nèi)容過濾選擇器jQuery的元素內(nèi)容選擇器用于對(duì)DOM文檔中的文本內(nèi)容進(jìn)行篩選，從而準(zhǔn)確地選取所需元素?！纠?-20】演示jQuery內(nèi)容過濾選擇器的用法。可見性過濾選擇器可見性過濾選擇器用于選擇可見或者不可見的元素12一月202344jQuery選擇器子元素過濾選擇器jQUery的子元素過濾選擇器是對(duì)某一元素的子元素進(jìn)行選取。表單對(duì)象選擇器利用表單對(duì)象選擇器可以在頁面中快讀定位某表單對(duì)象。12一月202345jQuery選擇器表單對(duì)象特性選擇器表單對(duì)象特性選擇器主要是通過表單中某對(duì)象的特性獲取該類元素，例如選擇不可用的表單元素、被選中的下拉框、多項(xiàng)選擇框等。12一月202346jQuery方法CSS操作利用jQuery提供的CSS操作方法，能方便地獲取或設(shè)置元素的CSS屬性。css(propertyName,value)

用于設(shè)置匹配元素的CSS屬性。參數(shù)propertyName指定要設(shè)置的CSS屬性名，value指定propertyName的值。如果value是一個(gè)數(shù)，還可以用原來的值參與運(yùn)算。例如：$(this).css("background-color","#FF0000");//設(shè)置當(dāng)前對(duì)象的背景色$(this).css("background-color","");//移除當(dāng)前對(duì)象的背景色屬性$("div").css("background-color","red");//設(shè)置所有div元素的背景色$(this).css("width","+=10");//將原來的寬度增加10px$(this).css("height","-=15");//將原來的寬度減少15px12一月202347jQuery方法CSS操作css(propertyName)獲取匹配元素的CSS屬性值，propertyName指定要獲取的屬性。例如：$(this).css("background-color");//獲取當(dāng)前對(duì)象的背景色$("#div1").css("background-color");//獲取id="div1"的對(duì)象的背景色12一月202348jQuery方法CSS操作css({properties})該方法為匹配的每個(gè)元素設(shè)置一個(gè)或多個(gè)CSS屬性。一般格式為：.css({"屬性名1":"值1","屬性名2":"值2",……,"屬性名n":"值n"})如果屬性名不包含“-〞，可以不加引號(hào)，否那么必須加引號(hào)。建議全部加引號(hào)屬性名和屬性值之間用冒號(hào)分隔，多個(gè)屬性之間用逗號(hào)分隔。例如：$(this).css({"background-color":"blue","color":"white"});$("p").css({"background-color":"red","font-size":"150%"});【例4-21】演示jQuery提供的CSS方法的根本用法。12一月202349jQuery方法HTML操作jQuery提供的HTML方法用于獲取或設(shè)置元素的內(nèi)容或選項(xiàng)的值。html([value])、html(function(index,html))html([value])：不帶參數(shù)時(shí)，獲取第一個(gè)匹配元素的html內(nèi)容。帶參數(shù)時(shí)，設(shè)置每一個(gè)匹配元素的html內(nèi)容。html(function(index,html))：用參數(shù)返回的HTML字符串設(shè)置每一個(gè)匹配元素的html內(nèi)容。text([value])、text(function(index,html))獲取的是所有匹配元素的內(nèi)容，結(jié)果是由所有匹配元素包含的文本內(nèi)容組合起來的文本。val([value])不帶參數(shù)時(shí)，獲取第一個(gè)匹配元素的值，如果有多個(gè)值，那么返回的是一個(gè)數(shù)組。帶參數(shù)時(shí)，設(shè)置每一個(gè)匹配元素的值。12一月202350jQuery方法元素大小和位置操作元素大小和位置相關(guān)的方法用于獲取或設(shè)置元素的大小、位置和偏移量。width、height、innerWidth、innerHeight、outerWidth、outerHeightscrollLeft([value])、scrollTop([value])offset([coordinates])例如：varp=$("p:last");varoffset=p.offset();p.html("left:"+offset.left+",top:"+offset.top);$("p:last").offset({top:10,left:30});scrollLeft([value])、scrollTop([value])position()獲取匹配元素相對(duì)父元素的偏移量，返回的對(duì)象包含兩個(gè)整型屬性top和left。12一月202351jQuery方法元素特性和屬性操作attr()、prop()attr方法獲取或設(shè)置元素的特性，prop方法獲取或設(shè)置元素的屬性.〔1〕attr(attributeName)、prop(propertyName)attr(attributeName)獲取第一個(gè)匹配元素的特性值。如果元素沒有相應(yīng)的特性，那么返回"undefined"。例如:<imgid="img1"src="test.jpg"alt="圖片1"/>，那么$("img").attr("src")的結(jié)果為"test.jpg"。prop(propertyName)獲取的是第一個(gè)匹配元素的屬性值，而不是元素的特性值。例如：<inputid="Checkbox1"type="checkbox"checked="checked"/>12一月202352jQuery方法元素特性和屬性操作attr()、prop()attr方法獲取或設(shè)置元素的特性，prop方法獲取或設(shè)置元素的屬性.〔2〕attr(attributeName,value)、prop(propertyName,value)attr(attributeName,value)為所有匹配的元素設(shè)置特性值。例如：$("img").attr("src","test.jpg");//為一個(gè)特性設(shè)置值$('#img1').attr({"alt":"圖片1","src":"test.jpg"});//為多個(gè)特性設(shè)置值prop(propertyName,value)為所有匹配的元素設(shè)置屬性值。12一月202353jQuery方法元素特性和屬性操作attr()、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指定的屬性12一月202354jQuery方法元素特性和屬性操作addClass(className)為所選元素添加class特性的值。參數(shù)className指定為元素的class特性添加的值如果有多個(gè)class值，各個(gè)值之間用空格分隔。removeClass(className)刪除所選元素的class中的值參數(shù)指定要?jiǎng)h除的class特性的值。12一月202355jQuery方法元素特性和屬性操作addClass(function(index,currentClass))含義和css(name,function(index,value))的含義相似。例如：$("div").addClass(function(index,currentClass){varaddedClass;if(currentClass=="red"){addedClass="green";$("p").text("Thereisonegreendiv");}returnaddedClass;});hasClass(className)、toggleClass(className)hasClass(className)判斷指定的className是否存在，如果存在那么返回true，否那么返回false。toggleClass(className)在添加className和刪除className之間切換。12一月202356jQuery方法元素自定義數(shù)據(jù)操作data([key],[value])該方法用于在一個(gè)元素上存取“鍵/值〞數(shù)據(jù)<div></div>$("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");//undefined12一月202357jQuery方法元素自定義數(shù)據(jù)操作removeData(key)移除在元素上存放的名為key的數(shù)據(jù)。文檔處理jQuery提供的文檔處理方法用于在HTML文檔中添加、插入、包圍、替換元素在元素內(nèi)部插入新元素〔1〕append(content[,content])、appendTo(target)這兩個(gè)方法的功能相似，都是向匹配的元素內(nèi)部追加內(nèi)容。區(qū)別是$(A).append(B)的含義是向A中追加B，而$(A).appendTo(B)的含義是向B中追加A?！?〕prepend(content[,content])、prependTo(target)這兩個(gè)方法和append及appendTo方法的區(qū)別是在匹配元素內(nèi)部的最前面增加內(nèi)容，其他用法和append及appendTo方法的用法相同?！纠?-23】演示append和appendTo方法的根本用法。12一月202358jQuery方法文檔處理在元素外部插入元素外部插入是指將內(nèi)容插入到元素的外部。〔1〕after(content[,content])、insertAfter(target)這兩個(gè)方法的用法和append及appendTo方法的用法相同，唯一的區(qū)別就是被插入的內(nèi)容是插入到元素的外部了?！?〕before(content[,content])、insertBrfore(target)這兩個(gè)方法的用法和prepend及prependTo方法的用法相同，唯一的區(qū)別就是被插入的內(nèi)容是插入到元素的外部了。刪除元素〔1〕remove([selector])、detach([selector])這兩個(gè)方法的功能相似，都是從DOM中刪除匹配的元素。區(qū)別是remove方法包括數(shù)據(jù)和事件一塊刪除，而detach方法不刪除數(shù)據(jù)和事件?！?〕empty()該方法刪除匹配的元素集合中所有的子節(jié)點(diǎn)。12一月202359jQuery方法文檔處理容器容器〔wrap〕的含義是將原始元素的外圍插入新元素作為容器?！?〕wrap(wrappingElement)用指定的元素作為匹配元素的容器。例如：$("span").wrap("<div></div>");//將span作為div元素的容器〔2〕wrap(function(index))用指定的元素作為匹配元素的容器?！?〕wrapAll(wrappingElement)用單個(gè)元素作為匹配元素的容器。它與wrap()的區(qū)別是wrap()為每一個(gè)匹配的元素都包裹一次，而該函數(shù)只用單個(gè)元素包裹。其他用法都和wrap方法相同。〔4〕wrapInner(wrappingElement)將每一個(gè)匹配的元素的子內(nèi)容(包括文本節(jié)點(diǎn))用DOM元素包裹起來。例如：<p>Hello</p><p>cruel</p><p>World</p>〔5〕unwrap()該方法將移出元素的父元素。12一月202360jQuery方法文檔處理替換元素替換元素用于將一種或多種元素替換為另一種元素。〔1〕replaceWith(newContent)該方法先從DOM中刪除與newContent匹配的元素，然后再將所有匹配的目標(biāo)元素替換為用newContent指定的元素。例如：<divclass="container"><divclass="innerfirst">Hello</div><divclass="innersecond">And</div><divclass="innerthird">Goodbye</div></div>〔2〕.replaceAll(target)該方法用匹配的元素替換掉所有target匹配到的元素。12一月202361jQuery方法事件處理on方法〔1〕on(events[,selector][,data],handler(eventObject))該方法給所有匹配的元素附加一個(gè)或多個(gè)事件處理函數(shù)?！瞐〕events參數(shù)該參數(shù)表示附加一個(gè)或多個(gè)用空格分隔的事件類型或命名空間，例如：“clickkeydown.myPlugin"〔b〕selector參數(shù)該參數(shù)表示要篩選的觸發(fā)該事件的選定元素的后代選擇器的字符串?！瞔〕data參數(shù)該參數(shù)表示事件被觸發(fā)時(shí)，通過傳遞給事件處理程序的數(shù)據(jù)。如果只有一個(gè)數(shù)據(jù)，可以用引號(hào)引起來。如果有多個(gè)數(shù)據(jù)，那么用集合表示。例如：{data1:"abc",data2:15}12一月202362jQuery方法事件處理on方法〔d〕handler(eventObject)參數(shù)該參數(shù)表示在觸發(fā)事件時(shí)要執(zhí)行的函數(shù)。該函數(shù)也可以直接寫為false，起作用和在事件處理函數(shù)中只有一條語句“returnfalse;〞的作用相同。例如：$("p").on("click",{data1:"abc",data2:15},function(){alert($(this).text());});也可以在該參數(shù)中指定事件句柄，例如：$("p").on("click",{data1:"abc",data2:15},Myhander);functionMyHander(){alert($(this).text());}【例4-24】演示on方法的根本用法。12一月202363jQuery方法事件處理除了上述的on事件根本用法外，利用on事件還可以取消事件冒泡等默認(rèn)的操作。〔1〕在on方法的參數(shù)中指定是否取消冒泡和默認(rèn)行為，其作用和在事件處理函數(shù)的最后一條語句中加上returnfalse;的作用相同。例如下面的代碼取消窗體提交操作，并返回false防止事件向上冒泡：$("form").on("submit",false)〔2〕在事件處理函數(shù)中調(diào)用preventdefault方法。該方法不阻止事件冒泡，但阻止其他的默認(rèn)行為。例如：$("form").on("submit",function(event){event.preventDefault();});〔3〕在事件處理函數(shù)中調(diào)用stopPropagation方法。該方法只阻止事件冒泡，但不阻止其他的默認(rèn)行為。例如下面的代碼阻止了事件冒泡，但不會(huì)阻止窗體提交：$("form").on("submit",function(event){event.stopPropagation();});12一月202364jQuery方法事件處理【例4-25】演示自定義事件的根本用法?！?〕on(events-map[,selector][,data])在這個(gè)方法中，events-map的參數(shù)是JavaScript事件對(duì)象。它和上一個(gè)方法的events參數(shù)一樣是一個(gè)字符串，用來表示事件類型名稱和可選的命名空間，如果有多個(gè)附加的事件，各事件類型之間用空格分隔。off方法off方法移除用on方法附加的事件操作。參數(shù)含義和on方法的參數(shù)含義相同。off(events[,selector][,handler(eventObject)])off(events-map[,selector])這兩種方法的參數(shù)含義和對(duì)應(yīng)的on方法的參數(shù)含義相同。【例4-26】演示off方法的根本用法。12一月202365jQuery動(dòng)畫jQuery還提供了創(chuàng)立、隱藏、顯示、切換、滑動(dòng)等對(duì)HTML元素操作的方法12一月202366jQuery動(dòng)畫參數(shù)〔duration、easing、callback〕Duration該參數(shù)指定動(dòng)畫持續(xù)的時(shí)間。類型可以是整數(shù)或字符串。如果是整數(shù)，單位為毫秒如果是字符串，有3個(gè)可用的選項(xiàng)"fast"、"slow"和"normal"，分別表示持續(xù)時(shí)間為200毫秒、400毫秒、600毫秒。例如：$("div").show();//默認(rèn)為持續(xù)時(shí)間為0$("div").show("fast");//持續(xù)時(shí)間為200毫秒$("div").show(1000);//持續(xù)時(shí)間為1000毫秒12一月202367jQuery動(dòng)畫參數(shù)〔duration、easing、callback〕Easing實(shí)現(xiàn)漸變路徑，在easing參數(shù)中，只需要指定函數(shù)名稱即可，而不需要指定參數(shù)。如果不指定easing參數(shù)，Query就會(huì)自動(dòng)使用默認(rèn)的漸變函數(shù)。例如：show方法、hide方法默認(rèn)使用的是linear函數(shù)toggle方法默認(rèn)使用的是swing函數(shù)。callbackcallback稱為回調(diào)函數(shù)，是指當(dāng)該參數(shù)所在的方法執(zhí)行完成后自動(dòng)執(zhí)行的函數(shù)。可以在callback函數(shù)中復(fù)位或者重新設(shè)置某些元素的位置、顏色等CSS屬性。12一月202368jQuery動(dòng)畫顯示隱藏和切換〔hide、show、toggle〕通過jQuery的hide、show和toggle方法，可以動(dòng)態(tài)地顯示、隱藏HTML元素，以及切換隱藏和顯示的狀態(tài)。根本格式為：$(selector).show([duration][,easing][,callback])$(selector).hide([duration][,easing][,callback])$(selector).toggle

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論