jQuery前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第5章 jQuery實(shí)現(xiàn)動(dòng)畫(huà)效果_第1頁(yè)
jQuery前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第5章 jQuery實(shí)現(xiàn)動(dòng)畫(huà)效果_第2頁(yè)
jQuery前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第5章 jQuery實(shí)現(xiàn)動(dòng)畫(huà)效果_第3頁(yè)
jQuery前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第5章 jQuery實(shí)現(xiàn)動(dòng)畫(huà)效果_第4頁(yè)
jQuery前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第5章 jQuery實(shí)現(xiàn)動(dòng)畫(huà)效果_第5頁(yè)
已閱讀5頁(yè)，還剩58頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第5章jQuery實(shí)現(xiàn)動(dòng)畫(huà)效果《jQuery前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)教程》學(xué)習(xí)目標(biāo)/Target

掌握淡入和淡出元素的方法，能夠?qū)崿F(xiàn)元素的淡入和淡出效果

掌握上滑和下滑元素的方法，能夠?qū)崿F(xiàn)元素的上滑和下滑效果掌握操作元素尺寸的方法，能夠根據(jù)實(shí)際情況靈活獲取元素的尺寸學(xué)習(xí)目標(biāo)/Target

掌握開(kāi)關(guān)燈效果的實(shí)現(xiàn)方法，能夠通過(guò)單擊按鈕切換燈的開(kāi)啟和關(guān)閉狀態(tài)

掌握滑動(dòng)切換導(dǎo)航菜單效果的實(shí)現(xiàn)方法，能夠完成滑動(dòng)切換導(dǎo)航菜單的效果掌握導(dǎo)航欄下劃線(xiàn)跟隨選中菜單項(xiàng)滑動(dòng)效果的實(shí)現(xiàn)方法，能夠完成導(dǎo)航欄下

劃線(xiàn)跟隨選中菜單項(xiàng)滑動(dòng)的效果章節(jié)概述/Summary在網(wǎng)頁(yè)開(kāi)發(fā)中，動(dòng)畫(huà)扮演著重要角色。它不僅可以使網(wǎng)頁(yè)內(nèi)容更加生動(dòng)有趣，還可以提升用戶(hù)體驗(yàn)和增加視覺(jué)吸引力。動(dòng)畫(huà)讓元素的出現(xiàn)、消失和變換過(guò)程更加平滑流暢，可給用戶(hù)帶來(lái)更好的交互感和視覺(jué)體驗(yàn)。此外，動(dòng)畫(huà)還能突出顯示重要內(nèi)容、引導(dǎo)用戶(hù)注意力。在開(kāi)發(fā)中，合理地應(yīng)用動(dòng)畫(huà)可以增強(qiáng)網(wǎng)頁(yè)的動(dòng)感和活力，并提升用戶(hù)的使用體驗(yàn)，加深用戶(hù)對(duì)網(wǎng)頁(yè)的印象。本章將詳細(xì)講解如何使用jQuery實(shí)現(xiàn)各種動(dòng)畫(huà)效果。目錄/Contents任務(wù)5.1任務(wù)5.2開(kāi)關(guān)燈效果滑動(dòng)切換導(dǎo)航菜單效果任務(wù)5.3導(dǎo)航欄下劃線(xiàn)跟隨選中菜單項(xiàng)滑動(dòng)效果開(kāi)關(guān)燈效果任務(wù)5.1任務(wù)需求隨著科技的不斷進(jìn)步和智能設(shè)備的廣泛應(yīng)用，智能家居的普及程度越來(lái)越高。例如，用戶(hù)可以通過(guò)智能手機(jī)或平板電腦遠(yuǎn)程控制房間內(nèi)的燈光。不僅可以簡(jiǎn)單地打開(kāi)或關(guān)閉燈光，還可以自由地調(diào)節(jié)亮度和色溫，以滿(mǎn)足多樣的照明需求。為了模擬燈光的控制，本任務(wù)使用jQuery實(shí)現(xiàn)簡(jiǎn)單的開(kāi)關(guān)燈效果。頁(yè)面初次加載時(shí)，燈是關(guān)閉狀態(tài)，按鈕的文字顯示為“開(kāi)燈”，背景圖像為關(guān)燈的圖像。單擊按鈕時(shí)，根據(jù)當(dāng)前燈的狀態(tài)進(jìn)行相應(yīng)的操作，具體如下。如果當(dāng)前燈是開(kāi)啟狀態(tài)，單擊“關(guān)燈”按鈕時(shí)，將開(kāi)燈的背景圖像淡出隱藏，將關(guān)燈的背景圖像淡入顯示，同時(shí)將按鈕的文字改為“開(kāi)燈”。如果當(dāng)前燈為關(guān)閉狀態(tài)，單擊“開(kāi)燈”按鈕時(shí)，將關(guān)燈的背景圖像淡出隱藏，將開(kāi)燈的背景圖像淡入顯示，同時(shí)將按鈕的文字改為“關(guān)燈”。任務(wù)需求燈的開(kāi)啟狀態(tài)和關(guān)閉狀態(tài)的效果如下圖所示。任務(wù)需求知識(shí)儲(chǔ)備淡入和淡出元素的方法

先定一個(gè)小目標(biāo)！掌握淡入和淡出元素的方法，能夠?qū)崿F(xiàn)元素的淡入和淡出效果如果希望元素以淡入的動(dòng)畫(huà)效果顯示，或者以淡出的動(dòng)畫(huà)效果隱藏，如何實(shí)現(xiàn)呢？知識(shí)儲(chǔ)備淡入和淡出元素的方法知識(shí)儲(chǔ)備淡入和淡出元素的方法可以使用jQuery中的淡入和淡出元素的方法來(lái)實(shí)現(xiàn)。jQuery中用于淡入和淡出元素的方法如下表所示。方法說(shuō)明fadeIn([duration][,easing][,complete])通過(guò)淡入的方式顯示匹配元素fadeOut([duration][,easing][,complete])通過(guò)淡出的方式隱藏匹配元素fadeToggle([duration][,easing][,complete])根據(jù)元素當(dāng)前的狀態(tài)，通過(guò)淡入或淡出的方式顯示或隱藏元素知識(shí)儲(chǔ)備淡入和淡出元素方法的介紹。淡入和淡出元素的方法fadeIn()方法通過(guò)逐漸增加元素的不透明度（不透明度從0逐漸變?yōu)?）實(shí)現(xiàn)元素逐漸顯示的效果。fadeOut()方法通過(guò)逐漸降低元素的不透明度（不透明度從1逐漸變?yōu)?）實(shí)現(xiàn)元素逐漸隱藏的效果。fadeToggle()方法可以使元素在顯示和隱藏狀態(tài)之間切換。如果元素當(dāng)前是可見(jiàn)的，則調(diào)用fadeToggle()方法會(huì)使元素逐漸隱藏；如果元素當(dāng)前是隱藏的，則調(diào)用fadeToggle()方法會(huì)使元素逐漸顯示。知識(shí)儲(chǔ)備淡入和淡出元素方法的各個(gè)參數(shù)的介紹。duration：表示動(dòng)畫(huà)的持續(xù)時(shí)間，可以設(shè)置為以毫秒為單位的動(dòng)畫(huà)時(shí)長(zhǎng)（如1000）或預(yù)定的速度值（如slow、fast）。easing：表示切換效果，默認(rèn)值為swing（開(kāi)始和結(jié)束時(shí)速度慢，中間速度快），也可以設(shè)置為linear（勻速）。complete：表示在動(dòng)畫(huà)完成后執(zhí)行的回調(diào)函數(shù)。淡入和淡出元素的方法知識(shí)儲(chǔ)備下面以fadeIn()方法為例，演示元素淡入方法的使用方法，實(shí)現(xiàn)單擊按鈕后淡入顯示隱藏的內(nèi)容的效果，示例代碼如下。<head><style>

div{

width:200px;height:200px;background-color:red;display:none;

}</style></head>淡入和淡出元素的方法知識(shí)儲(chǔ)備>>接上頁(yè)代碼<body>

<buttonid="toggle_btn">淡入</button>

<div></div>

<script>

$('#toggle_btn').on('click',function(){

$('div').fadeIn(1000);

});

</script></body>淡入和淡出元素的方法知識(shí)儲(chǔ)備上述示例代碼運(yùn)行后，頁(yè)面中會(huì)顯示一個(gè)“淡入”按鈕。單擊該按鈕后，一個(gè)盒子逐漸顯示出來(lái)，盒子的淡入過(guò)程演示效果如下圖所示。單擊按鈕后，在等待1秒的期間盒子逐漸顯示出來(lái)，等待1秒后，盒子完全顯示出來(lái)。淡入和淡出元素的方法知識(shí)儲(chǔ)備為了更好地分析盒子的淡入效果，打開(kāi)Chrome瀏覽器的開(kāi)發(fā)者工具，單擊Elements選項(xiàng)卡，選中<div>標(biāo)簽，單擊“淡入”按鈕，查看盒子的不透明度變化，如下圖所示。<div>標(biāo)簽的opacity屬性逐漸從0變化到1，元素的display屬性被設(shè)置為block，從而實(shí)現(xiàn)盒子淡入的效果。淡入和淡出元素的方法任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握開(kāi)關(guān)燈效果的實(shí)現(xiàn)方法，能夠通過(guò)單擊按鈕切換燈的開(kāi)啟和關(guān)閉狀態(tài)任務(wù)實(shí)現(xiàn)創(chuàng)建D:\jQuery\chapter05目錄，將jquery-3.6.4.min.js文件和本章配套源代碼中的images文件夾復(fù)制到該目錄下，并使用VSCode編輯器打開(kāi)該目錄。創(chuàng)建switch.html文件，編寫(xiě)開(kāi)關(guān)燈頁(yè)面的結(jié)構(gòu)并引入jquery-3.6.4.min.js文件。步驟1步驟2實(shí)現(xiàn)開(kāi)關(guān)燈效果的開(kāi)發(fā)編寫(xiě)開(kāi)關(guān)燈頁(yè)面的樣式。編寫(xiě)邏輯代碼，實(shí)現(xiàn)單擊按鈕切換對(duì)應(yīng)的背景圖像和按鈕上顯示的文字，以及淡入淡出效果。步驟3步驟4任務(wù)實(shí)現(xiàn)在瀏覽器中打開(kāi)switch.html文件，初始頁(yè)面效果如下圖所示。初始頁(yè)面中燈為關(guān)閉狀態(tài)，且按鈕的文字為“開(kāi)燈”。任務(wù)實(shí)現(xiàn)單擊“開(kāi)燈”按鈕，開(kāi)燈頁(yè)面效果如下圖所示。當(dāng)前燈為開(kāi)啟狀態(tài)，且按鈕上的文字為“關(guān)燈”。滑動(dòng)切換導(dǎo)航菜單效果任務(wù)5.2任務(wù)需求隨著科技的不斷進(jìn)步和經(jīng)濟(jì)的發(fā)展，旅游行業(yè)越來(lái)越多地采用數(shù)字技術(shù)和互聯(lián)網(wǎng)平臺(tái)來(lái)提供更便捷和個(gè)性化的服務(wù)。某旅游公司正在開(kāi)發(fā)一個(gè)旅游平臺(tái)，當(dāng)前正在進(jìn)行導(dǎo)航菜單的開(kāi)發(fā)任務(wù)。這個(gè)任務(wù)要求實(shí)現(xiàn)以下功能：當(dāng)鼠標(biāo)指針移入一級(jí)菜單項(xiàng)時(shí)，對(duì)應(yīng)的二級(jí)菜單項(xiàng)以向下滑動(dòng)的方式顯示；當(dāng)鼠標(biāo)指針移出一級(jí)菜單項(xiàng)時(shí)，二級(jí)菜單項(xiàng)以向上滑動(dòng)的方式隱藏。任務(wù)需求導(dǎo)航菜單的一級(jí)菜單項(xiàng)以及相應(yīng)的二級(jí)菜單項(xiàng)如下表所示。一級(jí)菜單項(xiàng)二級(jí)菜單項(xiàng)首頁(yè)無(wú)文化北京演出、展覽、影視特色文化古都文化、紅色文化、京味文化特色美食北京烤鴨、炸醬面、驢打滾特色景區(qū)故宮、天安門(mén)廣場(chǎng)導(dǎo)游服務(wù)聯(lián)系方式、導(dǎo)游介紹、預(yù)約導(dǎo)航地圖和交通交通路線(xiàn)、地圖聯(lián)系我們聯(lián)系方式、客服電話(huà)鼠標(biāo)指針移入和移出一級(jí)菜單項(xiàng)的效果如下圖所示。任務(wù)需求知識(shí)儲(chǔ)備上滑和下滑元素的方法

先定一個(gè)小目標(biāo)！掌握上滑和下滑元素的方法，能夠?qū)崿F(xiàn)元素的上滑和下滑效果如果希望用戶(hù)單擊一個(gè)按鈕時(shí)，一個(gè)元素以向下滑動(dòng)的動(dòng)畫(huà)效果顯示，且當(dāng)單擊另一個(gè)按鈕時(shí)，該元素從當(dāng)前位置向上滑動(dòng)并隱藏，如何實(shí)現(xiàn)呢？知識(shí)儲(chǔ)備上滑和下滑元素的方法知識(shí)儲(chǔ)備可以使用jQuery中上滑和下滑元素的方法來(lái)實(shí)現(xiàn)。jQuery中用于上滑和下滑元素的方法如下表所示。方法說(shuō)明slideDown([duration][,easing][,complete])通過(guò)向下滑動(dòng)的方式顯示元素slideUp([duration][,easing][,complete])通過(guò)向上滑動(dòng)的方式隱藏元素slideToggle([duration][,easing][,complete])使元素在顯示和隱藏狀態(tài)之間切換上滑和下滑元素的方法知識(shí)儲(chǔ)備針對(duì)上滑和下滑元素的方法的介紹如下。slideDown()方法通過(guò)向下滑動(dòng)的方式顯示元素，直到元素完全展開(kāi)。slideUp()方法通過(guò)向上滑動(dòng)的方式隱藏元素，直到元素的高度變?yōu)?。在高度變?yōu)?之后，slideUp()方法會(huì)將元素的display屬性值設(shè)置為none，以防止元素仍然占據(jù)空間并干擾其他元素的布局。slideToggle()方法可以使元素在顯示和隱藏狀態(tài)之間進(jìn)行切換。如果元素當(dāng)前是可見(jiàn)的，則調(diào)用slideToggle()方法會(huì)將元素向上滑動(dòng)隱藏；如果元素當(dāng)前是隱藏的，則調(diào)用slideToggle()方法會(huì)將元素向下滑動(dòng)顯示。上滑和下滑元素的方法知識(shí)儲(chǔ)備下面以slideUp()方法為例，演示如何實(shí)現(xiàn)圖像上滑隱藏，示例代碼如下。<head><style>input{margin-bottom:20px;}div{width:200px;height:500px;text-align:center;background:url("images/flag.png")topcenterno-repeat;background-size:200px500px;

}上滑和下滑元素的方法知識(shí)儲(chǔ)備>>接上頁(yè)代碼

divspan{

margin-top:50px;

line-height:50px;

display:inline-block;

width:40px;

font-family:"KaiTi";

font-size:40px;

color:#ff0;

}

</style></head>上滑和下滑元素的方法知識(shí)儲(chǔ)備>>接上頁(yè)代碼<body>

<inputtype="button"value="滑動(dòng)隱藏圖像">

<div>

<span>青春有志須勤奮</span>

</div>

<script>

$('input').on('click',function(){

$('div').slideUp('slow');

});

</script></body>上滑和下滑元素的方法知識(shí)儲(chǔ)備上述示例代碼運(yùn)行后，頁(yè)面上會(huì)顯示一個(gè)“滑動(dòng)隱藏圖像”按鈕。單擊該按鈕后，圖像將以向上滑動(dòng)的方式隱藏，圖像的滑動(dòng)過(guò)程演示效果如下圖所示。上滑和下滑元素的方法知識(shí)儲(chǔ)備為了更好地分析圖像的滑動(dòng)效果，打開(kāi)Chrome瀏覽器的開(kāi)發(fā)者工具，單擊Elements選項(xiàng)卡，選中<div>標(biāo)簽，單擊“滑動(dòng)隱藏圖像”按鈕，查看圖像的尺寸變化，如下圖所示。<div>標(biāo)簽的height屬性值逐漸減少到0，變?yōu)?后，slideUp()方法將元素的display屬性值設(shè)置為none，從而實(shí)現(xiàn)圖像向上滑動(dòng)隱藏的效果。上滑和下滑元素的方法任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握滑動(dòng)切換導(dǎo)航菜單效果的實(shí)現(xiàn)方法，能夠完成滑動(dòng)切換導(dǎo)航菜單的效果任務(wù)實(shí)現(xiàn)創(chuàng)建sliderNavigation.html文件，編寫(xiě)導(dǎo)航菜單的頁(yè)面結(jié)構(gòu)并引入jquery-3.6.4.min.js文件。編寫(xiě)導(dǎo)航菜單頁(yè)面的樣式代碼。步驟1步驟2實(shí)現(xiàn)滑動(dòng)切換導(dǎo)航菜單的開(kāi)發(fā)編寫(xiě)邏輯代碼，實(shí)現(xiàn)導(dǎo)航菜單下滑展示和上滑隱藏效果。步驟3任務(wù)實(shí)現(xiàn)在瀏覽器中打開(kāi)sliderNavigation.html文件，然后將鼠標(biāo)指針移到“特色文化”下的“紅色文化”選項(xiàng)上，滑動(dòng)切換導(dǎo)航菜單效果如下圖所示。當(dāng)鼠標(biāo)指針位于“特色文化”下的“紅色文化”選項(xiàng)上時(shí)，文字的不透明度改變。任務(wù)5.3導(dǎo)航欄下劃線(xiàn)跟隨選中菜單項(xiàng)滑動(dòng)效果任務(wù)需求某企業(yè)網(wǎng)站的導(dǎo)航欄太過(guò)單調(diào)，缺乏吸引人的動(dòng)態(tài)效果，沒(méi)有足夠的互動(dòng)性，難以吸引用戶(hù)的關(guān)注。為了提升用戶(hù)體驗(yàn)和增強(qiáng)頁(yè)面的互動(dòng)性，該企業(yè)決定優(yōu)化導(dǎo)航欄的交互效果，使用jQuery實(shí)現(xiàn)導(dǎo)航欄下劃線(xiàn)跟隨選中菜單項(xiàng)滑動(dòng)的效果。任務(wù)需求當(dāng)鼠標(biāo)指針移入導(dǎo)航欄的菜單項(xiàng)時(shí)，當(dāng)前選中的菜單項(xiàng)的下方顯示一條下劃線(xiàn)。當(dāng)鼠標(biāo)指針從當(dāng)前選中的菜單項(xiàng)移動(dòng)到另一個(gè)菜單項(xiàng)時(shí)，下劃線(xiàn)平滑地從當(dāng)前位置滑動(dòng)到另一個(gè)菜單項(xiàng)，整個(gè)過(guò)程自然、流暢。當(dāng)鼠標(biāo)指針移出當(dāng)前選中的菜單項(xiàng)時(shí)，下劃線(xiàn)停留在該菜單項(xiàng)下方，直至下一次鼠標(biāo)指針移入。鼠標(biāo)指針移入和移出菜單項(xiàng)的效果如下圖所示。任務(wù)需求知識(shí)儲(chǔ)備操作元素尺寸的方法

先定一個(gè)小目標(biāo)！掌握操作元素尺寸的方法，能夠根據(jù)實(shí)際情況靈活獲取元素的尺寸在網(wǎng)頁(yè)開(kāi)發(fā)中，常常需要對(duì)元素尺寸進(jìn)行操作，以滿(mǎn)足不同的布局需求和用戶(hù)交互需求。例如，實(shí)現(xiàn)登錄框的拖曳特效、圖片的放大功能等。知識(shí)儲(chǔ)備操作元素尺寸的方法知識(shí)儲(chǔ)備jQuery提供了專(zhuān)門(mén)用于操作元素尺寸的方法，如下表所示。方法說(shuō)明width()用于獲取或設(shè)置元素的寬度，不包括內(nèi)邊距、邊框?qū)挾群屯膺吘鄅eight()用于獲取或設(shè)置元素的高度，不包括內(nèi)邊距、邊框?qū)挾群屯膺吘鄆nnerWidth()用于獲取元素的寬度，包括內(nèi)邊距innerHeight()用于獲取元素的高度，包括內(nèi)邊距outerWidth([true])用于獲取元素的寬度，包括內(nèi)邊距和邊框?qū)挾?，如果傳入?yún)?shù)true，則包括外邊距outerHeight([true])用于獲取元素的高度，包括內(nèi)邊距和邊框?qū)挾?，如果傳入?yún)?shù)true，則包括外邊距操作元素尺寸的方法知識(shí)儲(chǔ)備（1）width()方法width()方法用于操作元素的寬度，該方法可以用于獲取匹配元素集中第一個(gè)元素的寬度，也可以用于設(shè)置匹配元素集中每個(gè)元素的寬度。調(diào)用width()方法獲取的元素的寬度不包括內(nèi)邊距、邊框?qū)挾群屯膺吘?。在jQuery中，可以使用jQuery對(duì)象來(lái)調(diào)用width()方法，width()方法的語(yǔ)法格式如下。width() //獲取元素的寬度width(value) //設(shè)置元素的寬度width(function(index,width){}) //動(dòng)態(tài)設(shè)置元素的寬度操作元素尺寸的方法知識(shí)儲(chǔ)備操作元素尺寸的方法對(duì)語(yǔ)法格式的解釋如下。當(dāng)width()方法不傳入?yún)?shù)時(shí)，表示獲取元素的寬度，返回值為一個(gè)數(shù)字，單位為px。當(dāng)width()方法傳入?yún)?shù)value時(shí)，表示設(shè)置元素的寬度。value可以是一個(gè)數(shù)字或一個(gè)字符串。如果value是一個(gè)數(shù)字，jQuery會(huì)自動(dòng)為其添加默認(rèn)的單位px；如果value是一個(gè)字符串，可以直接設(shè)置為有效的CSS尺寸，如100px、50%或auto。當(dāng)width()方法傳入一個(gè)函數(shù)時(shí)，表示動(dòng)態(tài)設(shè)置元素的寬度。該函數(shù)接收兩個(gè)參數(shù)，index表示元素的索引，width表示元素設(shè)置前的寬度。該函數(shù)應(yīng)返回一個(gè)新的寬度。知識(shí)儲(chǔ)備（2）height()方法height()方法用于操作元素的高度，該方法可以用于獲取匹配元素集中第一個(gè)元素的高度，也可以用于設(shè)置匹配元素集中每個(gè)元素的高度。調(diào)用height()方法獲取的元素的高度不包括內(nèi)邊距、邊框?qū)挾群屯膺吘?。在jQuery中，可以使用jQuery對(duì)象來(lái)調(diào)用height()方法，height()方法的語(yǔ)法格式如下。height()

//獲取元素的高度height(value) //設(shè)置元素的高度height(function(index,width){}) //動(dòng)態(tài)設(shè)置元素的高度操作元素尺寸的方法操作元素尺寸的方法知識(shí)儲(chǔ)備對(duì)語(yǔ)法格式的解釋如下。當(dāng)height()方法不傳遞參數(shù)時(shí)表示獲取元素的高度，返回值為一個(gè)數(shù)字，單位為px。當(dāng)height()方法傳入?yún)?shù)value時(shí)，表示設(shè)置元素的高度，value的含義與width()方法中value參數(shù)的含義相同。當(dāng)height()方法傳入一個(gè)函數(shù)時(shí)，表示動(dòng)態(tài)設(shè)置元素的高度。該函數(shù)接收兩個(gè)參數(shù)，index表示元素的索引，height表示元素設(shè)置前的高度。該函數(shù)應(yīng)返回一個(gè)新的高度。知識(shí)儲(chǔ)備（3）innerWidth()方法和innerHeight()方法innerWidth()方法和innerHeight()方法分別用于獲取匹配元素集中第一個(gè)元素的寬度和高度。與width()方法和height()方法不同的是，這兩個(gè)方法獲取的元素寬度和高度包括元素的內(nèi)邊距。操作元素尺寸的方法知識(shí)儲(chǔ)備下面演示如何使用innerWidth()方法和innerHeight()方法獲取元素的寬度和高度，并展示其與使用width()方法和height()方法獲取元素的寬度和高度的區(qū)別，示例代碼如下。<head><style>

div{

width:100px;

height:100px;

border:1pxsolid#999;

padding:10px;

}</style></head>操作元素尺寸的方法知識(shí)儲(chǔ)備<body>

<div>這里是內(nèi)容區(qū)域</div>

<script>

varwidth=$('div').width();

varheight=$('div').height();

varinnerWidth=$('div').innerWidth();

varinnerHeight=$('div').innerHeight();

console.log('width：'+width);

console.log('height：'+height);

console.log('innerWidth：'+innerWidth);

console.log('innerHeight：'+innerHeight);

</script></body>操作元素尺寸的方法>>接上頁(yè)代碼知識(shí)儲(chǔ)備操作元素尺寸的方法上述示例代碼運(yùn)行后，控制臺(tái)的輸出結(jié)果如下圖所示。其中，前兩個(gè)值是通過(guò)width()方法和height()方法獲取到的值，包括元素本身的寬度和高度；后兩個(gè)值是通過(guò)innerWidth()方法和innerHeight()方法獲取到的值，包括元素本身的寬度、高度和元素內(nèi)邊距，不包含邊框?qū)挾取ＶR(shí)儲(chǔ)備（4）outerWidth()方法和outerHeight()方法outerWidth()方法和outerHeight()方法可用于獲取匹配元素集中第一個(gè)元素的寬度和高度。這兩個(gè)方法可以通過(guò)傳入的布爾值參數(shù)來(lái)控制返回的值是否包括元素的外邊距。當(dāng)傳入?yún)?shù)為true時(shí)，這兩個(gè)方法返回的元素的寬度和高度包括內(nèi)邊距、邊框?qū)挾群屯膺吘?。?dāng)傳入?yún)?shù)為false或不傳入省略時(shí)，這兩個(gè)方法返回的元素的寬度和高度僅包括內(nèi)邊距和邊框?qū)挾?，不包括外邊距。操作元素尺寸的方法知識(shí)儲(chǔ)備下面演示如何使用outerWidth()方法和outerHeight()方法，并展示傳入?yún)?shù)true與省略參數(shù)的區(qū)別，示例代碼如下。<head><style>

div{

width:100px;

height:100px;

border:1pxsolid#999;

padding:10px;

margin:2px;

}</style></head>操作元素尺寸的方法知識(shí)儲(chǔ)備<body>

<div>這里是內(nèi)容區(qū)域</div>

<script>

varouterWidth=$('div').outerWidth();

varouterHeight=$('div').outerHeight();

varouterWidthWithMargin=$('div').outerWidth(true);

varouterHeightWithMargin=$('div').outerHeight(true);

console.log('outerWidth：'+outerWidth);

console.log('outerHeight：'+outerHeight);

console.log('outerWidthWithMargin：'+outerWidthWithMargin);

console.log('outerHeightWithMargin：'+

溫馨提示

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

評(píng)論

0/150

提交評(píng)論