《JavaScript程序設(shè)計(jì)》課件-項(xiàng)目7-4 jQuery元素操作和尺寸位置操作

JavaScript程序設(shè)計(jì)20211課程導(dǎo)入2任務(wù)導(dǎo)入3知識(shí)講解4任務(wù)實(shí)施項(xiàng)目7-4jQuery元素操作和尺寸位置操作5任務(wù)總結(jié)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery操作樣式的方法是什么？jQuery操作類的方法是什么？jQuery動(dòng)畫(huà)方法有哪些？提問(wèn)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)重難點(diǎn)完成購(gòu)物車(chē)刪除商品案例完成電梯導(dǎo)航案例重點(diǎn)：jQuery元素操作jQuery尺寸和位置操作知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery元素操作1.jQuery元素操作遍歷元素：基本語(yǔ)法$(selector).each(function(index,

domEle)

{});該方法的參數(shù)是一個(gè)函數(shù)。這個(gè)函數(shù)將會(huì)在遍歷時(shí)調(diào)用在函數(shù)中，index參數(shù)是每個(gè)元素的索引號(hào)domEle是每個(gè)DOM元素的對(duì)象（個(gè)元素調(diào)用一次不是jQuery對(duì)象）如果要想使用jQuery方法，需要將這個(gè)DOM對(duì)象轉(zhuǎn)換成為jQuery對(duì)象，即$(domEle)。

1.1

遍歷元素知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery元素操作案例演示：<div>1</div><div>2</div><div>3</div><script>var

arr

=

["red",

"green",

"blue"];$("div").each(function

(index,

domEle)

{console.log(index);//查看索引號(hào)console.log(domEle);//查看DOM元素$(domEle).css("color",

arr[index]);//對(duì)每個(gè)元素進(jìn)行操作

});</script>遍歷元素知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery元素操作$.each()方法：基本語(yǔ)法$.each(Object,function(index,

element)

{});

多學(xué)一招

//遍歷數(shù)組var

arr

=

["red",

"green",

"blue"];$.each(arr,

function(index,

element)

{console.log(index);//數(shù)組中的每個(gè)元素的索引console.log(element);//數(shù)組中的每個(gè)元素的值});//遍歷對(duì)象varobj={name:

"andy",age:

18};$.each(obj,

function(index,

element)

{console.log(index);

//

對(duì)象中的每個(gè)成員的名console.log(element);

//

對(duì)象中的每個(gè)成員的值});$.each()遍歷數(shù)組知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery元素操作$.each()方法：基本語(yǔ)法$.each(Object,function(index,

element)

{});//遍歷對(duì)象varobj={name:

"andy",age:

18};$.each(obj,

function(index,

element)

{console.log(index);

//

對(duì)象中的每個(gè)成員的名console.log(element);

//

對(duì)象中的每個(gè)成員的值});$.each()遍歷對(duì)象知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery元素操作案例分析：將所有選中的商品的購(gòu)買(mǎi)數(shù)量文本框中的值相加，得到總件數(shù)。將所有選中的商品的小計(jì)值相加，得到總額。當(dāng)用戶更改了復(fù)選框的狀態(tài)時(shí)，更新總額。當(dāng)用戶更改了商品數(shù)量時(shí)，更新總額。

【案例】計(jì)算購(gòu)物車(chē)商品總件數(shù)和總額

知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery元素操作案例實(shí)現(xiàn)：function

getSum()

{//計(jì)算總件數(shù)var

count

=

0;varitem=$(".j-checkbox:checked").parents(".cart-item");item.find(".itxt").each(function(i,

ele)

{count

+=

parseInt($(ele).val());});$(".amount-sum

em").text(count);}getSum();getSum()總件數(shù)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery元素操作案例實(shí)現(xiàn)：function

getSum()

{//計(jì)算總額var

money

=

0;item.find(".p-sum").each(function(i,ele){money+=parseFloat($(ele).text().substr(1));});$(".price-sumem").text("￥"+money.toFixed(2));}getSum();getSum()求總額知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery元素操作案例實(shí)現(xiàn)：在各個(gè)操作事件中調(diào)用getSum()方法$(".checkall").change(function(){

……（原有代碼）getSum();//調(diào)用});$(".j-checkbox").change(function(){

……（原有代碼）getSum();//調(diào)用});……（省略+、change和按鈕事件中調(diào)用）分別調(diào)用getSum()方法知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery元素操作創(chuàng)建元素：通過(guò)jQuery可以很方便地動(dòng)態(tài)創(chuàng)建一個(gè)元素，直接在“$()”函數(shù)中傳入一個(gè)HTML字符串即可進(jìn)行創(chuàng)建。

1.2

創(chuàng)建元素$(function

()

{var

li

=

$("<li>我是后來(lái)創(chuàng)建的li</li>"); //創(chuàng)建元素console.log(li);//將元素輸出到控制臺(tái)});創(chuàng)建li元素并打印知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery元素操作內(nèi)部添加：內(nèi)部添加的方式可以實(shí)現(xiàn)在元素內(nèi)部添加元素，并且可以放到內(nèi)部的最后面或者最前面。

1.3

添加元素var

li

=

$("<li>我是后來(lái)創(chuàng)建的li</li>");$("ul").append(li);

//內(nèi)部添加并且放到內(nèi)部的最后面$("ul").prepend(li);

//

內(nèi)部添加并且放到內(nèi)部的最前面append()和prepend()方法知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery元素操作外部添加：外部添加就是把元素放入目標(biāo)元素的后面或者前面，通過(guò)after()和before()方法來(lái)實(shí)現(xiàn)。var

div

=

$("<div>我是后來(lái)創(chuàng)建的div</div>");$(".test").after(div);//div放入到目標(biāo)元素的后面$(".test").before(div);//div放入到目標(biāo)元素的前面after()和before()方法知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery元素操作刪除元素：刪除元素分為刪除匹配的元素本身、刪除匹配的元素里面的子節(jié)點(diǎn)兩種情況。

1.4

刪除元素語(yǔ)法說(shuō)明empty()清空元素的內(nèi)容，但不刪除元素本身remove([expr])清空元素的內(nèi)容，并刪除元素本身（可選參數(shù)expr用于篩選元素）知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery元素操作案例分析：為頁(yè)面中的各種刪除鏈接綁定事件在事件觸發(fā)后，通過(guò)remove()方法刪除元素在刪除商品后，還需要更新購(gòu)物車(chē)頁(yè)面底部的商品總件數(shù)和總額

【案例】在購(gòu)物車(chē)中刪除商品

知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery元素操作案例實(shí)現(xiàn)：為每件商品的“刪除”鏈接綁定事件，用于刪除當(dāng)前商品$(".p-action

a").click(function()

{$(this).parents(".cart-item").remove();getSum();});給刪除按鈕綁定單擊事件知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery元素操作案例實(shí)現(xiàn)：為頁(yè)面底部的“刪除選中的商品”鏈接綁定事件，用于刪除所有復(fù)選框選中的商品。$(".remove-batch").click(function()

{$(".j-checkbox:checked").parents(".cartitem").remove();getSum();});刪除選中的商品知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery元素操作案例實(shí)現(xiàn)：為“清理購(gòu)物車(chē)”鏈接綁定事件，用于刪除全部商品。$(".clear-all").click(function()

{$(".cart-item").remove();getSum();})清空購(gòu)物車(chē)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery元素操作案例分析：在商品復(fù)選框和“全選”復(fù)選框的change()事件中增加代碼，判斷當(dāng)前的選中狀態(tài)，如果是選中狀態(tài)，則添加背景色，如果不是選中狀態(tài)，則移除背景色。獲取當(dāng)前元素的選中狀態(tài)可以用$(this).prop()方法來(lái)實(shí)現(xiàn)。

【案例】在購(gòu)物車(chē)中為選中的商品添加背景色

知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery元素操作案例實(shí)現(xiàn)：定義check-cart-item類，表示背景色樣式.check-cart-item{background:#fff4e8;}定義類名check-cart-item知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery元素操作案例實(shí)現(xiàn)：為全選復(fù)選框的change()事件中添加代碼$(".checkall").change(function(){

……（原有代碼）if($(this).prop("checked")){$(".cart-item").addClass("check-cart-item");}else{$(".cart-item").removeClass("check-cart-item");}});操作check-cart-item類名知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery元素操作案例實(shí)現(xiàn)：在商品復(fù)選框的change()事件中編寫(xiě)代碼$("j-checkbox").change(function(){

……（原有代碼）if($(this).prop("checked")){$(this).parents(".cart-item").addClass("check-cart-item");}else{$(this).parents(".cart-item").removeClass("check-cart-item");}});操作check-cart-item類名知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery尺寸和位置操作2.jQuery尺寸和位置操作尺寸操作：在jQuery中，尺寸方法用來(lái)獲取或設(shè)置元素的寬度和高度。

2.1尺寸方法方法說(shuō)明width()獲取或設(shè)置元素寬度height()獲取或設(shè)置元素高度outerWidth(true)獲取元素寬度（包含padding、border、margin）outerHeight(true)獲取元素高度（包含padding、border、margin）innerWidth()獲取元素寬度（包含padding）知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery尺寸和位置操作尺寸操作：在jQuery中，尺寸方法用來(lái)獲取或設(shè)置元素的寬度和高度。方法說(shuō)明innerHeight()獲取元素高度（包含padding）outerWidth()獲取元素寬度（包含padding、border）outerHeight()獲取元素高度（包含padding、border）知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery尺寸和位置操作案例演示：先準(zhǔn)備一個(gè)頁(yè)面結(jié)構(gòu)。<style>div

{width:

200px;height:

200px;background-color:

pink;padding:

10px;border:

15px

solid

red;margin:

20px;}</style><div></div>編寫(xiě)簡(jiǎn)單頁(yè)面結(jié)構(gòu)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery尺寸和位置操作案例演示：獲取元素的尺寸。<script>console.log($("div").width());//輸出結(jié)果：200console.log($("div").innerWidth());//輸出結(jié)果：220console.log($("div").outerWidth());//輸出結(jié)果：250console.log($("div").outerWidth(true));//輸出結(jié)果：290//width()設(shè)置寬度$("div").width(300);//設(shè)置寬度為300px</script>獲取元素的尺寸知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery尺寸和位置操作offset()方法：使用offset()方法可以獲取元素的位置，返回的是一個(gè)對(duì)象，包含left和top屬性，表示相對(duì)于文檔的偏移坐標(biāo)，和父級(jí)元素沒(méi)有關(guān)系。

2.2

位置方法//獲取元素距離文檔頂部的距離$(selector).offset().top;//獲取元素距離文檔左側(cè)的距離$(selector).offset().left;//設(shè)置元素的偏移$(selector).offset({top:200,left:200});獲取元素位置知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery尺寸和位置操作案例演示：知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery尺寸和位置操作案例實(shí)現(xiàn)：<style>*

{margin:

0;padding:

0;}……（省略樣式代碼）</style><div

class="father"><div

class="son"></div></div>編寫(xiě)頁(yè)面結(jié)構(gòu)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery尺寸和位置操作案例實(shí)現(xiàn)：獲取元素的位置<script>//獲取偏移console.log($(".son").offset());//結(jié)果：top為20，left為20console.log($(".son").offset().top);//結(jié)果：20//設(shè)置偏移$(".son").offset({top:

55,left:

55});</script>獲取元素位置知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery尺寸和位置操作position()方法：position()方法用于獲取元素距離父元素的位置，如果父元素沒(méi)有設(shè)置定位（即CSS中的position），則獲取的結(jié)果是距離文檔的位置。console.log($(".son").position().top); //獲取距離頂部的位置console.log($(".son").position().left); //獲取距離左側(cè)的位置position()方法知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery尺寸和位置操作注意需要注意的是，position()方法只能獲取元素位置，不能設(shè)置元素位置。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery尺寸和位置操作scroTop()和scrollLeft()方法：scrollTop()方法用于獲取或設(shè)置元素被卷去的頭部距離，scrollLeft()方法用于獲取或設(shè)置元素被卷去的左側(cè)距離。//獲取元素距離頁(yè)面左側(cè)的距離$(".container").scrollLeft();//設(shè)置元素距離頁(yè)面頂部的距離$(document).scrollTop(100);scrollLeft()方法和scrollTop()方法知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery尺寸和位置操作案例展示：

【案例】帶有動(dòng)畫(huà)的返回頂部

案例分析：通過(guò)CSS將“返回頂部”的按鈕放在右下角的位置然后為按鈕綁定單擊事件，在單擊后使用animate()動(dòng)畫(huà)方法返回頂部知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery尺寸和位置操作案例實(shí)現(xiàn)：<style>body{height:2000px;}……（省略了部分樣式代碼）</style><divclass="back">返回頂部</div><divclass="container"></div>編寫(xiě)簡(jiǎn)單頁(yè)面結(jié)構(gòu)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery尺寸和位置操作案例實(shí)現(xiàn)：為“返回頂部”按鈕綁定單擊事件$(".back").click(function(){$("body,html").stop().animate({scrollTop:0});});返回頂部綁定單擊事件知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery尺寸和位置操作案例展示：

【案例】電梯導(dǎo)航

案例分析：當(dāng)用戶將頁(yè)面滾動(dòng)到“家用電器”模塊時(shí)，導(dǎo)航欄中的“家用電器”就會(huì)被設(shè)為激活的效果；如果用戶滾動(dòng)到“手機(jī)通訊”模塊，則導(dǎo)航欄中的“手機(jī)通訊”就會(huì)被設(shè)為激活的效果如果用戶在導(dǎo)航欄中單擊其中的某一項(xiàng)，則可以自動(dòng)滾動(dòng)到對(duì)應(yīng)的模塊下。例如，單擊“家用電器”，則頁(yè)面會(huì)自動(dòng)滾動(dòng)到“家用電器”模塊下知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery尺寸和位置操作案例實(shí)現(xiàn)：<!--

固定電梯導(dǎo)航

--><div

class="fixedtool"><ul><li

class="current">家用電器</li><li>手機(jī)通訊</li><li>電腦辦公</li><li>精品家具</li></ul></div>編寫(xiě)簡(jiǎn)單頁(yè)面結(jié)構(gòu)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery尺寸和位置操作案例實(shí)現(xiàn)：<scriptsrc="jquery.min.js"></script><scriptsrc="js/index.js"></index>引入核心js文件知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery尺寸和位置操作案例實(shí)現(xiàn)：只有用戶滾動(dòng)到指定區(qū)域時(shí)，才會(huì)顯示電梯導(dǎo)航。//控制電梯導(dǎo)航的顯示和隱藏var

toolTop

=

$(".recommend").offset().top;toggleTool();function

toggleTool()

{if

($(document).scrollTop()

>=

toolTop)

{$(".fixedtool").fadeIn();}

else

{$(".fixedtool").fadeOut();};}$(window).scroll(function()

{toggleTool();});滾動(dòng)到指定區(qū)域顯示導(dǎo)航知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery尺寸和位置操作案例實(shí)現(xiàn)：當(dāng)用戶單擊電梯導(dǎo)航上的選項(xiàng)時(shí)，需要讓頁(yè)面滾動(dòng)到對(duì)應(yīng)的內(nèi)容區(qū)域。

互斥鎖（在后面將會(huì)用到）var

flag

=

true;//

單擊電梯導(dǎo)航中的