JavaScript+jQuery交互式Web前端開發(fā)（第2版） 課件 第8、9章 BOM、jQuery（上）

第8章BOM《JavaScript+jQuery交互式Web前端開發(fā)（第2版）》學(xué)習(xí)目標(biāo)/Target

了解BOM的概念，能夠闡述BOM的概念

掌握BOM對(duì)象的使用，能夠靈活應(yīng)用BOM對(duì)象實(shí)現(xiàn)瀏覽器操作

掌握窗口事件的使用，能夠在窗口加載、窗口卸載或窗口大小改變時(shí)運(yùn)行特定

的代碼

掌握定時(shí)器方法的使用，能夠應(yīng)用定時(shí)器延遲一段時(shí)間運(yùn)行代碼或間歇運(yùn)行代碼熟悉同步和異步的概念，能夠區(qū)分同步和異步章節(jié)概述/Summary在實(shí)際開發(fā)中，使用JavaScript開發(fā)網(wǎng)頁交互效果時(shí)，經(jīng)常需要獲取瀏覽器的一些信息，控制瀏覽器的刷新和頁面跳轉(zhuǎn)。為了使JavaScript控制瀏覽器，可以使用BOM。本章將詳細(xì)講解BOM。目錄/Contents8.18.28.3BOM簡(jiǎn)介BOM對(duì)象窗口事件8.4定時(shí)器8.5同步和異步BOM簡(jiǎn)介8.1了解BOM的概念，能夠闡述BOM的概念

先定一個(gè)小目標(biāo)！8.1BOM簡(jiǎn)介8.1BOM簡(jiǎn)介BOM（BrowserObjectModel，瀏覽器對(duì)象模型）是由瀏覽器提供的一系列對(duì)象構(gòu)成的，它主要用于管理窗口與窗口之間的通信。在BOM中，頂級(jí)對(duì)象是window，表示瀏覽器窗口，其他對(duì)象都是window對(duì)象的屬性，當(dāng)調(diào)用window對(duì)象下的屬性和方法時(shí)，可以省略window。常見的BOM對(duì)象如下圖所示。以下5個(gè)BOM對(duì)象都是window對(duì)象的屬性。document對(duì)象表示文檔，它既屬于BOM又屬于DOM。location對(duì)象用于操作瀏覽器地址。navigator對(duì)象用于獲取瀏覽器的基本信息。history對(duì)象用于操作瀏覽器的歷史記錄。screen對(duì)象用于獲取屏幕信息。BOM沒有統(tǒng)一標(biāo)準(zhǔn)，每個(gè)瀏覽器都有對(duì)BOM的實(shí)現(xiàn)方式，因此，BOM的瀏覽器兼容性較差。8.1BOM簡(jiǎn)介BOM對(duì)象8.2掌握window對(duì)象的使用，能夠靈活應(yīng)用window對(duì)象常用的方法和屬性8.2.1 window對(duì)象

先定一個(gè)小目標(biāo)！window對(duì)象既是瀏覽器窗口對(duì)象，又是全局對(duì)象，全局變量在書寫時(shí)可以省略，例如，window.document、window.console、window.alert()和mpt()可以寫成document、console、alert()、prompt()，其中document和console是window對(duì)象的屬性，alert()和prompt()是window對(duì)象的方法。8.2.1 window對(duì)象在JavaScript中，定義在全局作用域中的變量是window對(duì)象的屬性；定義在全局作用域中的函數(shù)是window對(duì)象的方法，示例代碼如下。//全局作用域中的變量是window對(duì)象的屬性varnum=10;console.log(window.num);

//輸出結(jié)果為：10//全局作用域中的函數(shù)是window對(duì)象的方法functionfn(){

return11;}console.log(window.fn());

//輸出結(jié)果為：118.2.1 window對(duì)象下面列舉window對(duì)象常用的方法和屬性，如下表所示。8.2.1 window對(duì)象分類名稱說明方法alert()彈出帶有一段消息和一個(gè)“確定”按鈕的警告框confirm()彈出帶有一段消息以及“確定”按鈕和“取消”按鈕的警告框prompt()彈出帶有提示信息的輸入框open()打開一個(gè)新的瀏覽器窗口或查找一個(gè)已命名的窗口close()關(guān)閉瀏覽器窗口focus()使窗口獲得焦點(diǎn)scrollBy()按照指定的像素值來滾動(dòng)內(nèi)容scrollTo()把內(nèi)容滾動(dòng)到指定的坐標(biāo)>>續(xù)上一頁表8.2.1 window對(duì)象分類名稱說明屬性name設(shè)置或獲取窗口的名稱opener獲取打開當(dāng)前窗口的window對(duì)象parent獲取當(dāng)前窗口的父窗口的window對(duì)象self獲取當(dāng)前窗口的window對(duì)象，等價(jià)于window對(duì)象window獲取當(dāng)前窗口的window對(duì)象top獲取頂層窗口的window對(duì)象（頁面中有多個(gè)框架時(shí)）下面通過代碼演示window對(duì)象中alert()方法和confirm()方法的使用，示例代碼如下。if(confirm('您確定要運(yùn)行此操作？')){

alert('用戶確認(rèn)');}else{

alert('用戶取消');}8.2.1 window對(duì)象上述示例代碼中，confirm()方法用于彈出一個(gè)具有提示信息的對(duì)話框，返回值為true或false，表示用戶單擊了對(duì)話框中的“確定”按鈕或“取消”按鈕。掌握location對(duì)象的使用，能夠靈活應(yīng)用location對(duì)象常用的方法和屬性

先定一個(gè)小目標(biāo)！8.2.2 location對(duì)象location對(duì)象用于操作瀏覽器的地址，通過location對(duì)象可以獲取當(dāng)前窗口的URL信息。location對(duì)象既是window對(duì)象的屬性又是document對(duì)象的屬性。8.2.2 location對(duì)象下面列舉location對(duì)象常用的方法和屬性，如下表所示。分類名稱說明方法assign(url)觸發(fā)窗口加載并顯示指定URL的內(nèi)容replace(url)使用給定的URL替換當(dāng)前的資源reload([forcedReload])刷新當(dāng)前頁面屬性search獲取或設(shè)置當(dāng)前URL的查詢字符串（又稱為URL參數(shù)），即URL中“?”之后的內(nèi)容hash獲取當(dāng)前URL的錨點(diǎn)部分（從“#”開始的部分）8.2.2 location對(duì)象>>續(xù)上一頁表分類名稱說明屬性host獲取當(dāng)前URL的主機(jī)名和端口hostname獲取當(dāng)前URL的主機(jī)名href獲取當(dāng)前URLpathname獲取當(dāng)前URL中的路徑名port獲取當(dāng)前URL中的端口號(hào)protocol獲取當(dāng)前URL中的協(xié)議8.2.2 location對(duì)象reload()方法的可選參數(shù)forcedReload是一個(gè)布爾值，當(dāng)值為true時(shí)，表示強(qiáng)制瀏覽器從服務(wù)器加載頁面資源，當(dāng)值為false或未傳參時(shí)，瀏覽器則可能從緩存中讀取頁面。search屬性通常用于在向服務(wù)器查詢信息時(shí)傳入查詢條件，如頁碼、搜索的關(guān)鍵字、排序方式等。assign()方法在打開指定URL時(shí)，會(huì)生成一條新的歷史記錄，而replace()方法不會(huì)在瀏覽器歷史記錄中生成新的記錄，并且在調(diào)用replace()方法后，用戶不能返回到前一個(gè)頁面。8.2.2 location對(duì)象下面以如下URL為例，演示location對(duì)象常用的屬性的使用。8.2.2 location對(duì)象http://:5500/test.html?name=a#data在瀏覽器打開上述URL時(shí)，使用location對(duì)象常用的屬性的示例代碼如下。console.log(location.search); //輸出結(jié)果為：?name=aconsole.log(location.hash);

//輸出結(jié)果為：#dataconsole.log(location.host);

//輸出結(jié)果為：:5500console.log(location.hostname); //輸出結(jié)果為：console.log(location.href); //輸出結(jié)果為::5500/test.htmlconsole.log(location.pathname);

//輸出結(jié)果為：/test.htmlconsole.log(location.port);

//輸出結(jié)果為：5500console.log(tocol);

//輸出結(jié)果為：http:掌握navigator對(duì)象的使用，能夠靈活應(yīng)用navigator對(duì)象常用的方法和屬性

先定一個(gè)小目標(biāo)！8.2.3 navigator對(duì)象navigator對(duì)象用于獲取瀏覽器的相關(guān)信息，下面列舉navigator對(duì)象常用的方法和屬性，如下表所示。分類名稱說明方法javaEnable()是否在瀏覽器中啟動(dòng)Java屬性appCodeName獲取瀏覽器的內(nèi)部名稱appName獲取瀏覽器的完整名稱appVersion獲取瀏覽器的平臺(tái)和版本信息cookieEnable瀏覽器中是否啟用Cookieplatform獲取運(yùn)行瀏覽器的操作系統(tǒng)平臺(tái)userAgent獲取由瀏覽器發(fā)送到服務(wù)器的User-Agent的值8.2.3 navigator對(duì)象下面以u(píng)serAgent屬性為例，演示如何獲取由瀏覽器發(fā)送到服務(wù)器的User-Agent的值。8.2.3 navigator對(duì)象

varmsg=navigator.userAgent;console.log(msg);在上述示例代碼中，使用navigator對(duì)象的userAgent屬性獲取由瀏覽器發(fā)送到服務(wù)器的User-Agent的值，其內(nèi)容主要包含瀏覽器版本、操作系統(tǒng)等信息，每種瀏覽器獲取的信息都不相同。下面以Chrome瀏覽器、Firefox瀏覽器、IE瀏覽器為例演示瀏覽器獲取的信息。8.2.3 navigator對(duì)象Mozilla/5.0(WindowsNT10.0;Win64;x64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/Safari/537.36Chrome瀏覽器的輸出結(jié)果示例如下。Firefox瀏覽器的輸出結(jié)果示例如下。Mozilla/5.0(WindowsNT10.0;Win64;x64;rv:109.0)Gecko/20100101Firefox/111.0IE瀏覽器的輸出結(jié)果示例如下。Mozilla/5.0(WindowsNT10.0;WOW64;Trident/7.0;.NET4.0C;.NET4.0E;rv:11.0)likeGecko掌握history對(duì)象的使用，能夠靈活應(yīng)用navigator對(duì)象常用的方法和屬性

先定一個(gè)小目標(biāo)！8.2.4 history對(duì)象history對(duì)象可以對(duì)用戶在瀏覽器中訪問的歷史記錄進(jìn)行操作。出于安全方面考慮，history對(duì)象不能直接獲取用戶瀏覽過的歷史記錄，但可以控制瀏覽器的“前進(jìn)”和“后退”功能。8.2.4 history對(duì)象8.2.4 history對(duì)象下面列舉history對(duì)象常用的方法和屬性，如下表所示。分類名稱說明方法back()加載history列表中的上一個(gè)URL，即后退一頁forward()加載history列表中的下一個(gè)URL，即前進(jìn)一頁go([delta])加載history列表中的某個(gè)具體頁面，可選參數(shù)delta的值是負(fù)整數(shù)時(shí)，表示后退指定的頁數(shù)；是正整數(shù)時(shí)，表示前進(jìn)指定的頁數(shù)；是0或省略時(shí)，表示刷新頁面屬性length返回history列表中的URL數(shù)8.2.4 history對(duì)象下面通過代碼演示history對(duì)象的back()方法和forward()方法，示例代碼如下。<body>

<buttonid="btn1">后退</button><buttonid="btn2">前進(jìn)</button>

<script>

varbtn1=document.getElementById('btn1');

varbtn2=document.getElementById('btn2');btn1.onclick=function(){

history.back(); //控制瀏覽器后退一頁

};btn2.onclick=function(){

history.forward(); //控制瀏覽器前進(jìn)一頁

};

</script></body>掌握screen對(duì)象的使用，能夠靈活應(yīng)用screen對(duì)象常用的方法和屬性

先定一個(gè)小目標(biāo)！8.2.5 screen對(duì)象screen對(duì)象用于獲取屏幕相關(guān)的信息，例如，屏幕的寬度、屏幕的高度等。下面列舉screen對(duì)象常用的屬性，如下表所示。屬性作用width獲取整個(gè)屏幕的寬度height獲取整個(gè)屏幕的高度availWidth獲取瀏覽器窗口在屏幕上可占用的水平空間availHeight獲取瀏覽器窗口在屏幕上可占用的垂直空間8.2.5 screen對(duì)象上述表中的屬性的獲取結(jié)果都是數(shù)字型像素值。下面通過代碼進(jìn)行演示。8.2.5 screen對(duì)象console.log(screen.width);

//輸出結(jié)果為：1920console.log(screen.height);

//輸出結(jié)果為：1080console.log(screen.availWidth);

//輸出結(jié)果為：1920console.log(screen.availHeight);

//輸出結(jié)果為：1040窗口事件8.3掌握窗口加載與卸載事件，能夠在窗口加載、窗口卸載時(shí)運(yùn)行特定的代碼

先定一個(gè)小目標(biāo)！8.3.1 窗口加載與卸載事件當(dāng)需要在窗口加載完成后運(yùn)行某些代碼，或在窗口關(guān)閉時(shí)運(yùn)行某些代碼，可以使用window對(duì)象提供的窗口加載與卸載事件。下面列舉window對(duì)象提供的窗口加載與卸載事件，如下表所示。8.3.1 窗口加載與卸載事件屬性作用load窗口加載事件，當(dāng)頁面加載完畢后觸發(fā)unload窗口卸載事件，當(dāng)頁面關(guān)閉時(shí)觸發(fā)窗口加載事件在網(wǎng)頁文檔以及外鏈的文件（包括圖像文件、JavaScript文件、CSS文件等）全部加載完成后才會(huì)觸發(fā)；窗口卸載事件會(huì)在用戶關(guān)閉網(wǎng)頁時(shí)觸發(fā)。窗口加載與卸載事件有兩種注冊(cè)方式，第1種注冊(cè)方式的示例代碼如下。8.3.1 窗口加載與卸載事件window.onload=function(){}; //窗口加載事件window.onunload=function(){}; //窗口卸載事件在上述示例代碼中，只能注冊(cè)一個(gè)事件處理函數(shù)。窗口加載與卸載事件的第2種注冊(cè)方式的示例代碼如下。8.3.1 窗口加載與卸載事件window.addEventListener('load',function(){});

//窗口加載事件window.addEventListener('unload',function(){});//窗口卸載事件在上述示例代碼中，當(dāng)多次調(diào)用window.addEventListener()時(shí)，可以注冊(cè)多個(gè)事件處理函數(shù)。下面通過代碼進(jìn)行演示。首先演示不使用窗口加載事件時(shí)代碼運(yùn)行出錯(cuò)的情況。由于程序中的代碼是從上往下運(yùn)行的，當(dāng)JavaScript代碼寫在需要操作的HTML標(biāo)簽前面時(shí)，獲取元素的操作會(huì)失敗，示例代碼如下。8.3.1 窗口加載與卸載事件<body>

<script>

document.getElementById('demo').onclick=function(){

console.log('被單擊了');

};

</script>

<divid="demo">持之以恒</div></body>保存代碼，在瀏覽器中進(jìn)行測(cè)試，運(yùn)行結(jié)果如下圖所示。8.3.1 窗口加載與卸載事件下面通過窗口加載事件解決示例代碼中出現(xiàn)的問題。8.3.1 窗口加載與卸載事件<script>

window.onload=function(){

document.getElementById('demo').onclick=function(){

console.log('被單擊了');

};

};</script>document.DOMContentLoaded事件多學(xué)一招當(dāng)網(wǎng)頁中的圖片較多時(shí)，如果圖片加載速度慢，窗口加載事件的觸發(fā)可能需要較長(zhǎng)的時(shí)間，這樣會(huì)影響到用戶的體驗(yàn)，此時(shí)，可以使用document.DOMContentLoaded事件，該事件會(huì)在文檔加載完成時(shí)觸發(fā)，與圖片文件、JavaScript文件、CSS文件等外部文件是否加載完成無關(guān)，適用于頁面中有很多外部文件的情況。8.3.1 窗口加載與卸載事件注意document.DOMContentLoaded事件不兼容IE9之前的瀏覽器。

先定一個(gè)小目標(biāo)！8.3.2 窗口大小改變事件掌握窗口大小改變事件，能夠靈活應(yīng)用兩種方式注冊(cè)窗口大小改變事件在實(shí)際開發(fā)中，為了能夠響應(yīng)用戶調(diào)整瀏覽器窗口大小的操作，可以使用窗口大小改變事件resize，該事件有兩種注冊(cè)方式，第1種注冊(cè)方式的示例代碼如下。8.3.2 窗口大小改變事件window.onresize=function(){};第2種注冊(cè)方式的示例代碼如下。window.addEventListener('resize',function(){});下面通過代碼進(jìn)行演示。要求當(dāng)用戶調(diào)整窗口大小時(shí)，在控制臺(tái)輸出當(dāng)前頁面的寬度。8.3.2 窗口大小改變事件<script>

window.addEventListener('resize',function(){

console.log(document.body.clientWidth);

});</script>定時(shí)器8.4掌握定時(shí)器方法的使用，能夠應(yīng)用定時(shí)器延遲一段時(shí)間運(yùn)行代碼或間歇運(yùn)行代碼

先定一個(gè)小目標(biāo)！8.4.1 設(shè)置定時(shí)器方法window對(duì)象提供了兩種用于設(shè)置定時(shí)器的方法，分別是setTimeout()方法和setInterval()方法，此外，還提供了兩種用于清除定時(shí)器的方法，分別是clearTimeout()方法和clearInterval()方法。關(guān)于設(shè)置和清除定時(shí)器的方法說明如下。8.4.1 設(shè)置定時(shí)器方法方法說明setTimeout(fn,delay)在達(dá)到指定時(shí)間（以毫秒計(jì)）后調(diào)用函數(shù)或運(yùn)行一段代碼setInterval(fn,delay)按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或運(yùn)行一段代碼clearTimeout(定時(shí)器ID)清除由setTimeout()方法設(shè)置的定時(shí)器clearInterval(定時(shí)器ID)清除由setInterval()方法設(shè)置的定時(shí)器setTimeout()方法和setInterval()方法都可以在固定時(shí)間段內(nèi)運(yùn)行代碼，二者的區(qū)別是，使用setTimeout()方法時(shí)只運(yùn)行一次代碼，使用setInterval()方法時(shí)會(huì)在指定的時(shí)間后自動(dòng)重復(fù)運(yùn)行代碼。8.4.1 設(shè)置定時(shí)器方法8.4.1 設(shè)置定時(shí)器方法setTimeout()方法和setInterval()方法都有兩個(gè)參數(shù)，第1個(gè)參數(shù)fn表示到達(dá)延遲時(shí)間后運(yùn)行的代碼，可以傳入普通函數(shù)、匿名函數(shù)或字符串代碼，第2個(gè)參數(shù)delay表示延遲時(shí)間的毫秒值。8.4.1 設(shè)置定時(shí)器方法setTimeout()方法和setInterval()方法的返回值為定時(shí)器ID（定時(shí)器的唯一標(biāo)識(shí)），將定時(shí)器ID作為參數(shù)傳給clearTimeout()方法或clearInterval()方法可以清除定時(shí)器。8.4.1 設(shè)置定時(shí)器方法下面以setTimeout()方法為例，演示使用3種傳參方式實(shí)現(xiàn)定時(shí)器的設(shè)置。（1）傳入普通函數(shù)的方式setTimeout(fn,2000);functionfn(){

alert('爭(zhēng)分奪秒');}8.4.1 設(shè)置定時(shí)器方法（2）傳入匿名函數(shù)的方式setTimeout(function(){

alert('爭(zhēng)分奪秒');},2000);（3）傳入字符串代碼的方式setTimeout('alert("爭(zhēng)分奪秒");',2000);8.4.1 設(shè)置定時(shí)器方法//設(shè)置定時(shí)器時(shí)保存定時(shí)器IDvartimer=setTimeout(function(){

alert('爭(zhēng)分奪秒');},2000);//清除定時(shí)器時(shí)傳入需要清除的定時(shí)器IDclearTimeout(timer);下面以clearTimeout()方法為例，演示定時(shí)器的清除，示例代碼如下。掌握3秒后自動(dòng)關(guān)閉廣告的案例，能夠編寫代碼實(shí)現(xiàn)案例

先定一個(gè)小目標(biāo)！8.4.2 【案例】3秒后自動(dòng)關(guān)閉廣告在瀏覽網(wǎng)站的過程中，經(jīng)常會(huì)在頁面中看到廣告，并顯示自動(dòng)關(guān)閉廣告的倒計(jì)時(shí)。自動(dòng)關(guān)閉廣告的倒計(jì)時(shí)效果可以使用定時(shí)器實(shí)現(xiàn)。下面將通過一個(gè)案例演示如何實(shí)現(xiàn)3秒后自動(dòng)關(guān)閉廣告。8.4.2 【案例】3秒后自動(dòng)關(guān)閉廣告掌握60秒內(nèi)只能發(fā)送一次驗(yàn)證碼的案例，能夠編寫代碼實(shí)現(xiàn)案例

先定一個(gè)小目標(biāo)！8.4.3 【案例】60秒內(nèi)只能發(fā)送一次驗(yàn)證碼本案例要求在頁面中設(shè)置一個(gè)文本框和一個(gè)“發(fā)送驗(yàn)證碼”按鈕，在單擊“發(fā)送驗(yàn)證碼”按鈕后，該按鈕中的文字會(huì)變?yōu)椤?0秒后重新發(fā)送”，并且“60”會(huì)每秒減1。在60秒后，才能再次單擊“發(fā)送驗(yàn)證碼”按鈕，并且按鈕恢復(fù)為初始狀態(tài)。8.4.3 【案例】60秒內(nèi)只能發(fā)送一次驗(yàn)證碼同步和異步8.5熟悉同步和異步的概念，能夠區(qū)分同步和異步

先定一個(gè)小目標(biāo)！8.5同步和異步同步是指前一個(gè)任務(wù)結(jié)束后再運(yùn)行后一個(gè)任務(wù)，程序的運(yùn)行順序與任務(wù)的排列順序一致。例如，做飯時(shí)，先煮飯，等飯煮好后再去炒菜。8.5同步和異步異步是指在處理一個(gè)任務(wù)的同時(shí)，可以去處理其他的任務(wù)。例如，在煮飯的同時(shí)去炒菜。異步代碼通常寫在回調(diào)函數(shù)中，例如，注冊(cè)事件時(shí)傳入的事件處理函數(shù)，以及設(shè)置定時(shí)器時(shí)傳入的函數(shù)，都是回調(diào)函數(shù)。8.5同步和異步JavaScript的運(yùn)行機(jī)制是單線程，即同一個(gè)時(shí)間只能做一件事。假設(shè)JavaScript被設(shè)計(jì)為多線程，一個(gè)線程在某個(gè)DOM節(jié)點(diǎn)上添加內(nèi)容，另一個(gè)線程要?jiǎng)h除這個(gè)節(jié)點(diǎn)，此種情況下瀏覽器將無法確定以哪個(gè)線程為準(zhǔn)。多線程會(huì)讓JavaScript變得復(fù)雜，而采用單線程可以避免出現(xiàn)這樣的問題。8.5同步和異步采用單線程意味著所有任務(wù)需要排隊(duì)，前一個(gè)任務(wù)結(jié)束，才會(huì)運(yùn)行后一個(gè)任務(wù)，如果其中一個(gè)任務(wù)運(yùn)行的時(shí)間過長(zhǎng)，就會(huì)阻塞后面的任務(wù)。例如，有3個(gè)任務(wù)正在排隊(duì)，第1個(gè)任務(wù)是在控制臺(tái)輸出1，第2個(gè)任務(wù)是3秒后在控制臺(tái)輸出2，第3個(gè)任務(wù)是在控制臺(tái)輸出3。當(dāng)程序運(yùn)行到第2個(gè)任務(wù)時(shí)，程序就會(huì)被阻塞3秒，3秒后才能運(yùn)行第3個(gè)任務(wù)。8.5同步和異步若想要解決程序中的阻塞問題，可以使用定時(shí)器，例如，使用setTimeout()方法設(shè)置一個(gè)3秒的定時(shí)器，將第2個(gè)任務(wù)放到定時(shí)器函數(shù)中即可，示例代碼如下。8.5同步和異步console.log(1);

//第1個(gè)任務(wù)setTimeout(function(){

console.log(2);

//第2個(gè)任務(wù)},3000);console.log(3);

//第3個(gè)任務(wù)JavaScript運(yùn)行機(jī)制多學(xué)一招首先思考一個(gè)問題：當(dāng)定時(shí)器的時(shí)間設(shè)為0時(shí)，程序是優(yōu)先運(yùn)行定時(shí)器傳入的回調(diào)函數(shù)還是優(yōu)先運(yùn)行setTimeout()方法后面的代碼呢？示例代碼如下。8.5同步和異步console.log(1);setTimeout(function(){

console.log(2);},0);for(vari=0,str='';i<900000;i++){

str+=i;

//使用字符串拼接運(yùn)算延遲運(yùn)行時(shí)間}console.log(3); //輸出結(jié)果為：132多學(xué)一招由于JavaScript中同步任務(wù)都是放在主線程的運(yùn)行棧中優(yōu)先運(yùn)行的，而異步任務(wù)（回調(diào)函數(shù)中代碼）則被放在任務(wù)隊(duì)列中等待運(yùn)行，所以出現(xiàn)前面示例代碼運(yùn)行后的結(jié)果。下面演示運(yùn)行棧和任務(wù)隊(duì)列的區(qū)別，如下圖所示。8.5同步和異步多學(xué)一招一旦運(yùn)行棧中的所有同步任務(wù)運(yùn)行完畢，系統(tǒng)就會(huì)按次序讀取任務(wù)隊(duì)列中的異步任務(wù)，被讀取的異步任務(wù)就會(huì)進(jìn)入運(yùn)行棧開始運(yùn)行。JavaScript的主線程會(huì)不斷地從任務(wù)隊(duì)列里重復(fù)獲取任務(wù)、運(yùn)行任務(wù)，這種機(jī)制被稱為事件循環(huán)。8.5同步和異步本章小結(jié)本章主要講解了BOM的相關(guān)知識(shí)，首先講解了BOM的基本概念，其次講解了BOM對(duì)象，包括window對(duì)象、location對(duì)象、navigator對(duì)象、history對(duì)象和screen對(duì)象，然后講解了窗口事件，包括窗口加載與卸載事件、窗口大小改變事件，最后講解了定時(shí)器、同步和異步。通過本章的學(xué)習(xí)，讀者能夠使用BOM完成一些常見的頁面交互效果。本章小結(jié)第9章jQuery（上）《JavaScript+jQuery交互式Web前端開發(fā)（第2版）》學(xué)習(xí)目標(biāo)/Target

了解什么是jQuery，能夠描述jQuery的特點(diǎn)

掌握jQuery的下載和引入，能夠獨(dú)立完成jQuery的下載并且能夠使用兩種方式

引入jQuery

掌握jQuery的簡(jiǎn)單使用，能夠使用jQuery實(shí)現(xiàn)簡(jiǎn)單的頁面效果熟悉jQuery對(duì)象，能夠區(qū)別jQuery對(duì)象和DOM對(duì)象學(xué)習(xí)目標(biāo)/Target掌握jQuery選擇器的使用，能夠根據(jù)不同場(chǎng)景使用不同的jQuery選擇器獲取元素

掌握jQuery內(nèi)容操作，能夠靈活應(yīng)用jQuery中操作元素內(nèi)容的方法

掌握jQuery樣式操作，能夠根據(jù)不同場(chǎng)景使用jQuery實(shí)現(xiàn)元素的樣式操作

掌握jQuery屬性操作，能夠靈活應(yīng)用prop()方法、attr()方法和data()方法操作

元素的屬性章節(jié)概述/SummaryjQuery提供了許多簡(jiǎn)化DOM操作、事件處理、動(dòng)畫效果等常見任務(wù)的方法和函數(shù)。通過使用jQuery，可以快速地開發(fā)交互性更強(qiáng)的網(wǎng)頁和Web應(yīng)用程序，減少冗余的代碼，解決瀏覽器兼容問題。因此，學(xué)習(xí)和掌握jQuery具有重要的價(jià)值。jQuery的知識(shí)內(nèi)容較多，本章首先對(duì)jQuery的上半部分內(nèi)容進(jìn)行講解。目錄/Contents9.19.29.3初識(shí)jQueryjQuery選擇器jQuery內(nèi)容操作9.4jQuery樣式操作9.5jQuery屬性操作初識(shí)jQuery9.1了解什么是jQuery，能夠描述jQuery的特點(diǎn)

先定一個(gè)小目標(biāo)！9.1.1什么是jQuery9.1.1什么是jQueryjQuery是一款快速、簡(jiǎn)潔、開源、輕量級(jí)的JavaScript庫，它的設(shè)計(jì)宗旨是“writeless,domore”（使用更少的代碼，做更多的事情）。jQuery具有以下6個(gè)特點(diǎn)。9.1.1什么是jQuery代碼可讀性強(qiáng)。語法簡(jiǎn)潔易懂，文檔豐富。支持CSS1~CSS3定義的屬性和選擇器。支持事件、樣式、動(dòng)畫和Ajax操作?？煽鐬g覽器，支持的瀏覽器包括IE、Firefox和Chrome等?？蓴U(kuò)展性強(qiáng)，插件豐富，可以通過插件擴(kuò)展更多功能。目前jQuery有3個(gè)系列的版本，分別是jQuery1.x、jQuery2.x和jQuery3.x系列的版本。它們的區(qū)別在于，jQuery1.x系列的版本保持了對(duì)早期版本的IE瀏覽器的支持；jQuery2.x系列的版本不兼容IE6~IE8瀏覽器，從而更加輕量化；jQuery3.x系列的版本不兼容IE6~IE8瀏覽器，此系列的版本增加了一些新方法，并對(duì)一些方法進(jìn)行了優(yōu)化和改進(jìn)。9.1.1什么是jQuery掌握jQuery的下載和引入，能夠獨(dú)立完成jQuery的下載并且能夠使用兩種方式引入jQuery

先定一個(gè)小目標(biāo)！9.1.2下載和引入jQuery在學(xué)習(xí)使用jQuery之前，需要下載和引入jQuery，具體操作步驟如下。9.1.2下載和引入jQuery在Chrome瀏覽器中訪問jQuery的下載頁面，如下圖所示。9.1.2下載和引入jQuery在jQuery的下載頁面，單擊“jQuery3.6.4”的“minified”鏈接，彈出“CodeIntegration”對(duì)話框，如下圖所示。9.1.2下載和引入jQuery引入jQuery。引入方式有兩種，第1種方式是將“CodeIntegration”對(duì)話框中的整個(gè)<script>標(biāo)簽的代碼復(fù)制到頁面文件中使用。整個(gè)<script>標(biāo)簽的具體代碼如下。<scriptsrc="/jquery-3.6.4.min.js"integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="crossorigin="anonymous"></script>9.1.2下載和引入jQuery第2種方式是復(fù)制“CodeIntegration”對(duì)話框中的地址“/jquery-3.6.4.min.js”，并在瀏覽器中訪問該地址，將“jquery-3.6.4.min.js”文件保存到計(jì)算中，然后在程序中手動(dòng)引入jQuery。引入jQuery的示例代碼如下。<scriptsrc="jquery-3.6.4.min.js"></script>上述示例代碼表示引入當(dāng)前目錄下的jQuery-3.6.4.min.js文件。掌握jQuery的簡(jiǎn)單使用，能夠使用jQuery實(shí)現(xiàn)簡(jiǎn)單的頁面效果9.1.3 jQuery的簡(jiǎn)單使用

先定一個(gè)小目標(biāo)！在使用jQuery時(shí)可以分為3個(gè)步驟，具體如下。9.1.3 jQuery的簡(jiǎn)單使用在程序中引入jQuery文件。獲取需要操作的元素。調(diào)用操作方法，例如調(diào)用hide()方法將元素隱藏。下面通過代碼演示jQuery的簡(jiǎn)單使用，首先定義一個(gè)<div>標(biāo)簽，并使用jQuery獲取元素，然后將元素在頁面中隱藏，示例代碼如下。9.1.3 jQuery的簡(jiǎn)單使用<head>

<scriptsrc="jquery-3.6.4.min.js"></script></head><body>

<div>HellojQuery</div>

<script>

$('div').hide();

//隱藏div元素

</script></body>熟悉jQuery對(duì)象，能夠區(qū)別jQuery對(duì)象和DOM對(duì)象9.1.4 jQuery對(duì)象

先定一個(gè)小目標(biāo)！在頁面中引入jQuery后，全局作用域下會(huì)新增兩個(gè)變量，分別是$和jQuery，這兩個(gè)變量引用的是同一個(gè)對(duì)象，該對(duì)象稱為jQuery頂級(jí)對(duì)象。為了方便書寫，通常使用$變量。下面通過代碼演示$變量和jQuery變量的使用。//$變量的使用$('div').hide();//jQuery變量的使用jQuery('div').hide();9.1.4 jQuery對(duì)象jQuery頂級(jí)對(duì)象類似構(gòu)造函數(shù)，用于創(chuàng)建jQuery實(shí)例對(duì)象（簡(jiǎn)稱jQuery對(duì)象），但它不需要使用new關(guān)鍵字，它的內(nèi)部會(huì)自動(dòng)進(jìn)行實(shí)例化，然后它會(huì)返回實(shí)例化后的對(duì)象。jQuery對(duì)象的本質(zhì)是jQuery頂級(jí)對(duì)象對(duì)DOM對(duì)象包裝后產(chǎn)生的對(duì)象。9.1.4 jQuery對(duì)象9.1.4 jQuery對(duì)象jQuery對(duì)象以類數(shù)組的形式存儲(chǔ)，它可以包裝一個(gè)或多個(gè)DOM對(duì)象。下面通過代碼對(duì)比jQuery對(duì)象和DOM對(duì)象。<body>

<div>HellojQuery</div>

<script>

//jQuery對(duì)象

vardiv1=$('div');

console.log(div1);

//DOM對(duì)象

vardiv2=document.getElementsByTagName('div');

console.log(div2);

</script></body>9.1.4 jQuery對(duì)象前面的示例代碼運(yùn)行后，jQuery對(duì)象和DOM對(duì)象的輸出結(jié)果如下圖所示。在實(shí)際開發(fā)中，經(jīng)常會(huì)在jQuery對(duì)象和DOM對(duì)象之間進(jìn)行轉(zhuǎn)換，由于DOM對(duì)象比jQuery對(duì)象更復(fù)雜，DOM對(duì)象的一些屬性和方法在jQuery對(duì)象中沒有封裝，所以使用這些屬性和方法時(shí)需要把jQuery對(duì)象轉(zhuǎn)化為DOM對(duì)象。另外，DOM對(duì)象也可以轉(zhuǎn)換為jQuery對(duì)象。9.1.4 jQuery對(duì)象9.1.4 jQuery對(duì)象1.將jQuery對(duì)象轉(zhuǎn)換為DOM對(duì)象將jQuery對(duì)象轉(zhuǎn)換為DOM對(duì)象有兩種實(shí)現(xiàn)方式，第1種實(shí)現(xiàn)方式的語法格式如下。jQuery對(duì)象[索引]第2種實(shí)現(xiàn)方式的語法格式如下。jQuery對(duì)象.get(索引)9.1.4 jQuery對(duì)象將jQuery對(duì)象轉(zhuǎn)換為DOM對(duì)象的示例代碼如下。vardiv1=$('div')[0]; //第1種實(shí)現(xiàn)方式vardiv2=$('div').get(0); //第2種實(shí)現(xiàn)方式上述示例代碼分別使用兩種方式將jQuery對(duì)象轉(zhuǎn)換為DOM對(duì)象，當(dāng)jQuery對(duì)象轉(zhuǎn)換為DOM對(duì)象后就可以使用DOM方式操作元素。9.1.4 jQuery對(duì)象2.將DOM對(duì)象轉(zhuǎn)換為jQuery對(duì)象將DOM對(duì)象轉(zhuǎn)換為jQuery對(duì)象的語法格式如下。$(DOM對(duì)象)將DOM對(duì)象轉(zhuǎn)換為jQuery對(duì)象的示例代碼如下。//獲取DOM對(duì)象vardiv=document.getElementByTagName('div')[0];//將DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象div=$(div);jQuery選擇器9.2掌握基本選擇器的使用，能夠靈活應(yīng)用基本選擇器獲取元素9.2.1 基本選擇器

先定一個(gè)小目標(biāo)！jQuery提供了類似CSS選擇器的機(jī)制，使用選擇器可以很方便地獲取元素，使用jQuery選擇器獲取元素的語法格式如下。$(selector)9.2.1 基本選擇器上述語法格式中，selector表示選擇器。下面列舉jQuery中常用的基本選擇器，具體如下表所示。選擇器功能描述示例#id獲取指定id的元素$('#btn')獲取id為btn的元素*匹配所有元素$('*')獲取頁面中的所有元素.class獲取同一class的元素$('.tab')獲取所有class為tab的元素element獲取相同標(biāo)簽名的所有元素$('div')獲取所有div元素selector1,selector2,…同時(shí)獲取多個(gè)元素$('div,p,li')同時(shí)獲取div元素、p元素和li元素9.2.1 基本選擇器下面通過代碼進(jìn)行演示。<divclass="fruit">蘋果</div><script>console.log($('.fruit'));</script>9.2.1 基本選擇器

先定一個(gè)小目標(biāo)！9.2.2 層次選擇器掌握層次選擇器的使用，能夠靈活應(yīng)用層次選擇器獲取元素在實(shí)際開發(fā)中，當(dāng)需要獲取某個(gè)元素的子元素、后代元素或兄弟元素時(shí)，可以使用jQuery的層次選擇器。在jQuery中可以通過一些指定符號(hào)（如“>”、空格、“+”和“~”）完成多層次元素之間的獲取。9.2.2 層次選擇器下面列舉jQuery中常用的層次選擇器，具體如下表所示。選擇器功能描述示例parent>child獲取所有子元素$('ul>li')獲取ul元素下的所有l(wèi)i子元素selectorselector1獲取所有后代元素$('ulli')獲取ul元素下的所有l(wèi)i后代元素prev+next獲取后面緊鄰的兄弟元素$('div+.title')獲取div元素后面緊鄰的class為title的兄弟元素prev~siblings獲取后面的所有兄弟元素$('.bar~li')獲取class為bar的元素后的所有l(wèi)i兄弟元素9.2.2 層次選擇器下面通過代碼進(jìn)行演示。<ul><li>第1個(gè)li元素</li><li>第2個(gè)li元素</li></ul><script>console.log($('ulli')); //獲取ul中的li</script>9.2.2 層次選擇器

先定一個(gè)小目標(biāo)！9.2.3 篩選選擇器掌握篩選選擇器的使用，能夠靈活應(yīng)用篩選選擇器獲取元素在實(shí)際開發(fā)中，若需要對(duì)獲取到的元素進(jìn)行篩選，例如獲取指定選擇器中的第一個(gè)或最后一個(gè)元素，就可以使用jQuery的篩選選擇器完成。9.2.3 篩選選擇器下面列舉jQuery中常用的篩選選擇器，具體如下表所示。選擇器功能描述示例:first獲取指定選擇器中的第一個(gè)元素$('li:first')獲取第一個(gè)li元素:last獲取指定選擇器中的最后一個(gè)元素$('li:last')獲取最后一個(gè)li元素:eq(index)獲取索引等于index的元素（索引從0開始）$('li:eq(2)')獲取索引為2的li元素:gt(index)獲取索引大于index的元素$('li:gt(3)')獲取索引大于3的所有l(wèi)i元素:lt(index)獲取索引小于index的元素$('li:lt(3)')獲取索引小于3的所有l(wèi)i元素:even獲取索引為偶數(shù)的元素$('li:even')獲取索引為偶數(shù)的li元素9.2.3 篩選選擇器>>續(xù)上一頁表9.2.3 篩選選擇器選擇器功能描述示例:odd獲取索引為奇數(shù)的元素$('li:odd')獲取索引為奇數(shù)的li元素:not(seletor)獲取除指定的選擇器之外的其他元素$('li:not(li:eq(3))')獲取除索引為3的li元素之外的所有l(wèi)i元素:focus獲取當(dāng)前獲得焦點(diǎn)的元素$('input:focus')獲取當(dāng)前獲得焦點(diǎn)的input元素:animated獲取所有正在運(yùn)行動(dòng)畫效果的元素$('div:animated')獲取當(dāng)前正在運(yùn)行動(dòng)畫效果的div元素:target選擇由文檔URL的格式化識(shí)別碼表示的目標(biāo)元素若URL為http://localhost/#foo，則$('div:target')將獲取id為foo的div元素:contains(text)獲取內(nèi)容包含text的元素$('li:contains(js)')獲取內(nèi)容中包含js的li元素選擇器功能描述示例:empty獲取內(nèi)容為空的元素$('li:empty')獲取內(nèi)容為空的li元素:has(selector)獲取內(nèi)容包含指定選擇器的元素$("li:has('a')")獲取內(nèi)容中包含a元素的所有l(wèi)i元素:parent獲取帶有子元素或包含文本的元素$('li:parent')獲取帶有子元素或包含文本的li元素:hidden獲取所有隱藏元素$('li:hidden')獲取所有隱藏的li元素:visible獲取所有可見元素$('li:visible')獲取所有可見的li元素9.2.3 篩選選擇器>>續(xù)上一頁表下面通過代碼進(jìn)行演示。<ul><li>第1個(gè)li元素，索引為0</li><li>第2個(gè)li元素，索引為1</li><li>第3個(gè)li元素，索引為2</li></ul><script>$('ulli:first').css('color','red');$('ulli:eq(2)').css('color','blue');</script>9.2.3 篩選選擇器前面的示例代碼運(yùn)行后，使用了篩選選擇器的輸出結(jié)果如下圖所示。9.2.3 篩選選擇器

先定一個(gè)小目標(biāo)！9.2.4 其他選擇器掌握其他選擇器的使用，能夠靈活應(yīng)用其他選擇器獲取元素在jQuery中，選擇器的種類非常多，除了前面介紹的基本選擇器、層次選擇器和篩選選擇器外，在開發(fā)中還可能會(huì)用到其他選擇器，如屬性選擇器、子元素選擇器和表單選擇器。9.2.4 其他選擇器1.屬性選擇器jQuery中提供了根據(jù)元素的屬性獲取指定元素的選擇器，即屬性選擇器。常用的屬性選擇器如下表所示。9.2.4 其他選擇器選擇器功能描述示例[attr]獲取具有指定屬性的元素$('div[class]')獲取含有class屬性的所有div元素[attr=value]獲取屬性值等于value的元素$('div[class=current]')獲取class屬性值等于current的所有div元素[attr!=value]獲取屬性值不等于value的元素$('div[class!=current]')獲取class屬性值不等于current的所有div元素[attr^=value]獲取屬性值以value開始的元素$('div[class^=box]')獲取class屬性值以box開始的所有div元素>>續(xù)上一頁表9.2.4 其他選擇器選擇器功能描述示例[attr$=value]獲取屬性值以value結(jié)尾的元素$('div[class$=er]')獲取class屬性值以er結(jié)尾的所有div元素[attr*=value]獲取屬性值包含value的元素$("div[class*='-']")獲取class屬性值中含有“-”符號(hào)的所有div元素[attr~=value]獲取屬性值包含value或以空格分隔并包含value的元素$("div[class~='box']")獲取class屬性值等于“box”或通過空格分隔并含有box的div元素，如“abox”[attr1][attr2]…獲取同時(shí)擁有多個(gè)屬性的元素$("input[id][name$='usr']")獲取同時(shí)含有id屬性和屬性值以u(píng)sr結(jié)尾的name屬性的input元素2.子元素選擇器在開發(fā)過程中，若需要通過子元素獲取元素，可以使用jQuery提供的子元素選擇器。常用的子元素選擇器如下表所示。9.2.4 其他選擇器選擇器功能描述示例:nth-child(數(shù)字/even/odd/公式)按數(shù)字、奇數(shù)、偶數(shù)或公式獲取元素$('ulli:nth-child(3)')獲取所有ul中的第3個(gè)li元素:first-child獲取第一個(gè)子元素$('ulli:first-child')獲取所有ul中的第一個(gè)li元素:last-child獲取最后一子元素$('ulli:last-child')獲取所有ul中的最后一個(gè)li元素:only-child如果當(dāng)前元素是父元素唯一的子元素，則獲取$('ulli:only-child')如果當(dāng)前l(fā)i元素是ul唯一的子元素，則獲取:nth-last-child(數(shù)字/even/odd/公式)按指定條件獲取相同父元素中的子元素，計(jì)數(shù)從最后一個(gè)元素開始到第一個(gè)$('ulli:nth-last-child(2)')獲取所有ul中的最后2個(gè)li元素9.2.4 其他選擇器選擇器功能描述示例:nth-of-type(數(shù)字/even/odd/公式)按指定條件獲取相同父元素中的同類子元素$('span:nth-of-type(2)')獲取span類型元素中的第2個(gè)子元素:first-of-type獲取同類元素中的第一個(gè)子元素$('span:first-of-type')獲取span類型元素中的第一個(gè)子元素:last-of-type獲取同類元素中的最后一個(gè)子元素$('span:last-of-type')獲取span類型元素中的最后一個(gè)子元素:only-of-type獲取沒有兄弟元素的同類子元素$('span:only-of-type')獲取沒有兄弟元素的span類型子元素:nth-last-of-type(數(shù)字/even/odd/公式)按指定條件獲取相同父元素下的同類子元素，計(jì)數(shù)從最后一個(gè)元素開始到第一個(gè)$('span:nth-last-of-type(2)')獲取span類型的最后2個(gè)子元素>>續(xù)上一頁表3.表單選擇器在開發(fā)過程中，若需要對(duì)表單進(jìn)行操作，可以使用jQuery提供的表單選擇器獲取表單元素。常用的表單選擇器如下表所示。9.2.4 其他選擇器選擇器功能描述示例:input獲取頁面中的所有表單元素，包括select元素以及textarea元素$('input:input')獲取頁面中的所有表單元素:text獲取所有的文本框$('input:text')獲取所有的文本框:password獲取所有的密碼框$('input:password')獲取所有的密碼框:radio獲取所有的單選按鈕$('input:radio')獲取所有的單選按鈕:checkbox獲取所有的復(fù)選框$('input:checkbox')獲取所有的復(fù)選框9.2.4 其他選擇器選擇器功能描述示例:submit獲取提交按鈕$('input:submit')獲取提交按鈕:reset獲取重置按鈕$('input:reset')獲取重置按鈕:image獲取圖像域，即<inputtype="image">$('input:image')獲取圖像域:button獲取所有按鈕，包括<button>和<inputtype="button">$('input:button')獲取所有按鈕:file獲取文件域，即<inputtype="file">$('input:file')獲取文件域>>續(xù)上一頁表9.2.4 其他選擇器選擇器功能描述示例:hidden獲取表單隱藏項(xiàng)$('input:hidden')獲取表單隱藏項(xiàng):enabled獲取所有可用表單元素$('input:enabled')獲取所有可用表單元素:disabled獲取所有不可用表單元素$('input:disabled')獲取所有不可用表單元素:checked獲取所有選中的表單元素，主要針對(duì)radio元素和checkbox元素$(':checked')獲取所有被選中的表單元素:selected獲取所有選中的表單元素，主要針對(duì)select元素$('selected')獲取所有選中的表單元素>>續(xù)上一頁表jQuery內(nèi)容操作9.3掌握jQuery內(nèi)容操作，能夠靈活應(yīng)用jQuery中操作元素內(nèi)容的方法

先定一個(gè)小目標(biāo)！9.3jQuery內(nèi)容操作9.3jQuery內(nèi)容操作jQuery提供了多個(gè)方法用于操作元素的HTML內(nèi)容和文本內(nèi)容。在網(wǎng)頁開發(fā)中，若需要獲取或設(shè)置元素的HTML內(nèi)容，可以使用html()方法實(shí)現(xiàn)；若需要獲取或設(shè)置元素的文本內(nèi)容，可以使用text()方法實(shí)現(xiàn)；若需要獲取或設(shè)置表單元素的value值，可以使用val()方法實(shí)現(xiàn)。下面列舉jQuery中元素內(nèi)容操作的方法，具體如下表所示。選擇器功能描述示例html()獲取第1個(gè)匹配元素的HTML內(nèi)容html()html(htmlString)設(shè)置所有匹配元素的HTML內(nèi)容為htmlStringhtml(htmlString)text()獲取所有匹配元素包含的文本內(nèi)容組合起來的文本text()text(text)設(shè)置所有匹配元素的文本內(nèi)容為texttext(text)val()獲取表單元素的value值val()val(value)設(shè)置表單元素的value值val(value)9.3jQuery內(nèi)容操作當(dāng)需要獲取內(nèi)容的元素是select時(shí)，val()方法的返回結(jié)果是一個(gè)包含所選值的數(shù)組；當(dāng)需要為表單元素設(shè)置選中情況時(shí)，可以為val()方法傳遞數(shù)組參數(shù)。9.3jQuery內(nèi)容操作jQuery樣式操作9.4掌握css()方法的使用，能夠靈活應(yīng)用css()方法操作元素的樣式

先定一個(gè)小目標(biāo)！9.4.1 css()方法操作元素的樣式9.4.1 css()方法操作元素的樣式使用jQuery提供的css()方法可以獲取元素的樣式和設(shè)置元素的樣式。css()方法的具體用法和說明如下表所示。方法說明css(propertyName)獲取第一個(gè)匹配元素的樣式css(propertyName,value)為所有匹配的元素設(shè)置樣式css(properties)將一個(gè)鍵值對(duì)形式的對(duì)象properties設(shè)置為所有匹配元素的樣式9.4.1 css()方法操作元素的樣式在css()方法的參數(shù)中：propertyName是一個(gè)字符串，表示樣式屬性名。value表示樣式屬性值。properties表示樣式對(duì)象，如{color:'red'}。需要注意的是，當(dāng)css()方法接收對(duì)象作為參數(shù)時(shí)，如果屬性名由兩個(gè)單詞組成，需要將CSS屬性名中的“-”去掉，并將第2個(gè)單詞首字母大寫，例如，設(shè)置元素的backgroud-color樣式屬性時(shí)，需要將屬性名修改為backgroudColor。下面通過代碼演示如何使用css()方法操作元素的樣式。首先定義一個(gè)<div>標(biāo)簽，并設(shè)置其寬度為100px，高度為100px，背景顏色為blue，然后使用css()方法將<div>標(biāo)簽的寬度設(shè)置為200px，高度為200px，背景顏色為pink。9.4.1 css()方法操作元素的樣式

先定一個(gè)小目標(biāo)！9.4.2 操作元素樣式類掌握操作元素樣式類，能夠靈活應(yīng)用操作元素樣式類的方法9.4.2 操作元素樣式類在網(wǎng)頁開發(fā)中不僅可以使用類操作元素的樣式，即定義class，還可以通過jQuery操作元素樣式類。下面列舉操作元素樣式類的方法，具體如下表所示。用法說明addClass(className)為每個(gè)匹配的元素追加指定類名的樣式removeClass(className)從所有匹配的元素中刪除全部或者指定的類toggleClass(className)判斷指定類是否存在，存在則刪除，不存在則添加下面通過代碼進(jìn)行演示。首先定義1個(gè)<div>標(biāo)簽和3個(gè)類，這3個(gè)類分別為first、second和third，再使用addClass()方法為<div>標(biāo)簽添加first類和second類，然后使用removeClass()方法刪除<div>標(biāo)簽中