《JavaScript程序設(shè)計(jì)》課件-項(xiàng)目7-3jQuery屬性操作和內(nèi)容操作

JavaScript程序設(shè)計(jì)20211課程導(dǎo)入2任務(wù)導(dǎo)入3知識講解4任務(wù)實(shí)施項(xiàng)目7-3jQuery屬性操作和內(nèi)容操作5任務(wù)總結(jié)知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery操作樣式的方法是什么？jQuery操作類的方法是什么？jQuery動畫方法有哪些？提問知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)重難點(diǎn)完成購物車商品全選案例完成購物車商品小計(jì)案例重點(diǎn)：jQuery屬性操作jQuery內(nèi)容操作知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery屬性操作1.jQuery屬性操作1.1

prop()方法prop()方法：prop()方法用來設(shè)置或獲取元素固有屬性值。prop()方法獲取屬性值語法：$(selector).prop("屬性名")。prop()方法設(shè)置屬性值語法：$(selector).prop("屬性","屬性值")知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery屬性操作prop()方法獲取a標(biāo)簽屬性：<a

href="http://localhost"

title="主頁"></a><script>console.log($("a").prop("href"));//輸出結(jié)果http://localhost$("a").prop("title",

"首頁"); //設(shè)置title的值為“首頁”</script>獲取href屬性知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery屬性操作prop()方法獲取input標(biāo)簽屬性：<input

type="checkbox"

checked><script>//獲取表單元素的checked值$("input").change(function()

{//復(fù)選框選中時，輸出結(jié)果為trueconsole.log($(this).prop("checked"));});</script>獲取checked屬性知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery屬性操作attr()方法：attr()用來設(shè)置或獲取元素的自定義屬性，自定義屬性是指用戶給元素添加的非固有屬性。attr()方法獲取屬性值語法：$(selector).attr("屬性名") 。attr()方法設(shè)置屬性值語法：$(selector).attr("屬性","屬性值")

1.2

attr()方法知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery屬性操作attr()方法獲取div標(biāo)簽屬性：<div

index="1"

data-index="2">我是div</div><script>console.log($("div").attr("index"));//輸出結(jié)果：1console.log($("div").attr("data-index"));//輸出結(jié)果：2

$("div").attr("index",

3);//設(shè)置index屬性值為3

$("div").attr("data-index",

4);//設(shè)置data-index屬性值為4</script>獲取div標(biāo)簽屬性知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery屬性操作data()方法：data()方法用來在指定的元素上存取數(shù)據(jù)，數(shù)據(jù)保存在內(nèi)存中，并不會修改DOM元素結(jié)構(gòu)；data()方法獲取屬性值語法：$(selector).data("數(shù)據(jù)名")data()方法設(shè)置屬性值語法：$(selector).data("數(shù)據(jù)名","數(shù)據(jù)值")

1.3

data()方法知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery屬性操作data()方法獲取div標(biāo)簽數(shù)據(jù)操作：<div>我是div</div><script>$("div").data("uname",

"andy");//設(shè)置數(shù)據(jù)//獲取數(shù)據(jù)，輸出結(jié)果：andyconsole.log($("div").data("uname"));</script>data()方法操作div標(biāo)簽數(shù)據(jù)知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery屬性操作在瀏覽器運(yùn)行結(jié)果如下：知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery屬性操作案例展示如下：

【案例】購物車商品全選

知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery屬性操作案例實(shí)現(xiàn)：<divclass="cart-warp"><!--頭部模塊--><divclass="cart-thead"></div><!--商品列表模塊--><divclass="cart-item-list"></div><!--結(jié)算模塊--><divclass="cart-floatbar"></div></div>定義頁面結(jié)構(gòu)<!--

先引入jquery

--><script

src="js/jquery.min.js"></script><!--

再引入我們自己的js文件

--><script

src="js/car.js"></script>引入jQuery知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery屬性操作案例實(shí)現(xiàn)：$(".checkall").change(function()

{$(".j-checkbox,

.checkall").prop("checked",

$(this).prop("checked"));});$(".j-checkbox").change(function(){if

($(".j-checkbox:checked").length

===

$(".j-checkbox").length)

{$(".checkall").prop("checked",

true);}

else

{$(".checkall").prop("checked",

false);}});編寫car.js知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery內(nèi)容操作2.jQuery內(nèi)容操作操作方法如下表：2.1

jQuery中的內(nèi)容操作方法語法說明html()獲取第一個匹配元素的HTML內(nèi)容html(content)設(shè)置第一個匹配元素的HTML內(nèi)容text()獲取所有匹配元素包含的文本內(nèi)容組合起來的文本text(content)設(shè)置所有匹配元素的文本內(nèi)容val()獲取表單元素的value值val(value)設(shè)置表單元素的value值知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery內(nèi)容操作編寫簡單頁面結(jié)構(gòu)：<div><span>我是內(nèi)容</span></div><input

type="text"

value="請輸入內(nèi)容編寫簡單頁面結(jié)構(gòu)知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery內(nèi)容操作通過html()、text()、val()等方法獲取元素內(nèi)容：//

1.

獲取設(shè)置元素內(nèi)容html()console.log($("div").html());//輸出結(jié)果：<span>我是內(nèi)容</span>$("div").html("<span>hello</span>");//修改div的內(nèi)容

//

2.

獲取設(shè)置元素文本內(nèi)容text()console.log($("div").text()); //輸出結(jié)果：hello$("div").text("<span>123</span>");//設(shè)置div的文本內(nèi)容//

3.

獲取設(shè)置表單值val()console.log($("input").val());//輸出結(jié)果：請輸入內(nèi)容$(“input”).val(“123”);//設(shè)置表單元素的值為123獲取元素內(nèi)容操作知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery內(nèi)容操作在瀏覽器運(yùn)結(jié)果如下：知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery內(nèi)容操作案例分析：當(dāng)用戶單擊“+”按鈕，就讓文本框中的數(shù)字加1。單擊“-”按鈕，讓文本框的數(shù)字減1。

【案例】在購物車中增減商品數(shù)量

知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery內(nèi)容操作案例實(shí)現(xiàn)：首先為頁面中的“+”按鈕綁定單擊事件，事件觸發(fā)后，先獲取文本框中當(dāng)前的值，然后將這個值加1后設(shè)置給文本框。$(".increment").click(function()

{//

得到當(dāng)前兄弟文本框的值var

n

=

$(this).siblings(".itxt").val();n++;$(this).siblings(".itxt").val(n);});設(shè)置文本框的值知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery內(nèi)容操作案例實(shí)現(xiàn)：“-”按鈕的開發(fā)思路與“+”按鈕類似，但是需要增加一個判斷，就是當(dāng)文本框的值是1的時候，就不能再減了。$(".decrement").click(function()

{//

得到當(dāng)前兄弟文本框的值var

n

=

$(this).siblings(".itxt").val();if

(n

==

1)

{return

false;}n--;$(this).siblings(".itxt").val(n);});商品數(shù)量判斷知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery內(nèi)容操作案例分析：用戶每次單擊“+”或“-”根據(jù)文本框的值乘以當(dāng)前商品的價格，就可以得到商品的小計(jì)然后通過html()方法修改當(dāng)前商品的小計(jì)中顯示的內(nèi)容。

【案例】購物車商品小計(jì)

知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery內(nèi)容操作案例實(shí)現(xiàn)：在“+”按鈕的單擊事件中新增代碼，實(shí)現(xiàn)小計(jì)的計(jì)算，$('.increment').click(function(){

……（原有代碼）//以下是新增代碼varp=$(this).parents(".p-num").siblings(".p-price").html();p=p.substr(1);varprice=(p*n).toFixed(2);//將計(jì)算結(jié)果保留2位小數(shù)$(this).parents(".p-num").siblings(".p-sum").html("￥"+price);});在+按鈕事件中添加代碼知識回顧任務(wù)導(dǎo)入知識講解任務(wù)實(shí)施任務(wù)總結(jié)jQuery內(nèi)容操作案例實(shí)現(xiàn)：將計(jì)算商品小計(jì)的代碼復(fù)制到“-”按鈕的事件中$('.decrement').click(function(){

……（原有代碼）//將“+”按鈕中新增的代碼復(fù)制到此處即可varp=$(this).parents(".p-num").siblings(".p-price").html();p=p.substr(1);varprice=(p*n).toFixed(2);//將計(jì)算結(jié)果保留2位小數(shù)$(this).parents(".p-num").siblings(".p-sum").html("￥"+price);