jQuery第三天
課程回顧：
? 動(dòng)畫效果：基本動(dòng)畫，滑動(dòng)動(dòng)畫，淡入淡出，自定義動(dòng)畫效果(animate)
? 事件切換：hover(over，out);
? 停止動(dòng)畫：stop
? 操作屬性：prop（固有屬性），attr（自定義屬性），data
? 文本內(nèi)容值：html，text，val
案例：購物車案例模塊-增減商品數(shù)量
①核心思路：首先聲明一個(gè)變量，當(dāng)我們點(diǎn)擊+號(hào)（increment），就讓這個(gè)值++，然后賦值給文本框。②注意1： 只能增加本商品的數(shù)量， 就是當(dāng)前+號(hào)的兄弟文本框（itxt）的值。 ③修改表單的值是val() 方法④注意2： 這個(gè)變量初始值應(yīng)該是這個(gè)文本框的值，在這個(gè)值的基礎(chǔ)上++。要獲取表單的值⑤減號(hào)（decrement）思路同理，但是如果文本框的值是1，就不能再減了，直接return false即可**購物車案例模塊-**修改商品小計(jì)
①核心思路：每次點(diǎn)擊+號(hào)或者-號(hào)，根據(jù)文本框的值 乘以 當(dāng)前商品的價(jià)格 就是 商品的小計(jì)②注意1： 只能增加本商品的小計(jì)， 就是當(dāng)前商品的小計(jì)模塊（p-sum） ③修改普通元素的內(nèi)容是text() 方法④注意2： 當(dāng)前商品的價(jià)格，要把￥符號(hào)去掉再相乘 截取字符串 substr(1)⑤parents(‘選擇器’) 可以返回指定祖先元素 ⑥最后計(jì)算的結(jié)果如果想要保留2位小數(shù) 通過 toFixed(2) 方法⑦用戶也可以直接修改表單里面的值，同樣要計(jì)算小計(jì)。 用表單change事件⑧用最新的表單內(nèi)的值 乘以 單價(jià)即可 但是還是當(dāng)前商品小計(jì)點(diǎn)擊獲取單價(jià)和數(shù)量相乘的結(jié)果保存給小計(jì)既可用戶直接輸入數(shù)字問題parents
<body><div class="c1"><div class="c2"><div class="c3"><div class="c4">哇哈哈</div></div></div></div><script type="text/javascript">// parentsconsole.log( $('.c4').parents('.c1') );</script></body>jQuery 元素操作
主要是遍歷、創(chuàng)建、添加、刪除元素操作。
遍歷元素
jQuery 隱式迭代是對(duì)同一類元素做了同樣的操作。如果想要給同一類元素做不同操作，就需要用到遍歷。
語法1：$(“div”).each(function(index, domEle) { xxx; }）
\1. each() 方法遍歷匹配的每一個(gè)元素。主要用DOM處理。 each 每一個(gè)\2. 里面的回調(diào)函數(shù)有2個(gè)參數(shù)： index 是每個(gè)元素的索引號(hào); demEle 是每個(gè)DOM元素對(duì)象，不是jquery對(duì)象\3. 所以要想使用jquery方法，需要給這個(gè)dom元素轉(zhuǎn)換為jquery對(duì)象 $(domEle)主要用來遍歷元素語法2：$.each(object，function(index, element){ xxx;}）
\1. $.each()方法可用于遍歷任何對(duì)象。主要用于數(shù)據(jù)處理，比如數(shù)組，對(duì)象\2. 里面的函數(shù)有2個(gè)參數(shù)： index 是每個(gè)元素的索引號(hào); element 遍歷內(nèi)容主要用來遍歷數(shù)據(jù)**案例：購物車案例模塊-**計(jì)算總計(jì)和總額
①核心思路：把所有文本框里面的值相加就是總計(jì)數(shù)量。總額同理②文本框里面的值不相同，如果想要相加需要用到each遍歷。聲明一個(gè)變量，相加即可③點(diǎn)擊+號(hào)-號(hào)，會(huì)改變總計(jì)和總額，如果用戶修改了文本框里面的值同樣會(huì)改變總計(jì)和總額④因此可以封裝一個(gè)函數(shù)求總計(jì)和總額的， 以上2個(gè)操作調(diào)用這個(gè)函數(shù)即可。⑤注意1： 總計(jì)是文本框里面的值相加用 val() 總額是普通元素的內(nèi)容用text() ⑥要注意普通元素里面的內(nèi)容要去掉￥并且轉(zhuǎn)換為數(shù)字型才能相加多次需要求總計(jì)，所有封裝函數(shù)最為合適創(chuàng)建元素
語法：$(’’
- ’’);
添加元素
內(nèi)部添加
element.append(’‘內(nèi)容’’) [把內(nèi)容放入匹配元素內(nèi)部最后面，類似原生 appendChild
element.prepend(’‘內(nèi)容’’) 把內(nèi)容放入匹配元素內(nèi)部最前面。
外部添加
element.after(’‘內(nèi)容’’) // 把內(nèi)容放入目標(biāo)元素后面
element.before(’‘內(nèi)容’’) // 把內(nèi)容放入目標(biāo)元素前面
①內(nèi)部添加元素，生成之后，它們是父子關(guān)系。②外部添加元素，生成之后，他們是兄弟關(guān)系。刪除元素
element.remove() // 刪除匹配的元素（本身）[元素就不在了]
element.empty() // 刪除匹配的元素集合中所有的子節(jié)點(diǎn)[內(nèi)容刪除，元素依舊存在]
element.html(’’’’) // 清空匹配的元素內(nèi)容
①remove 刪除元素本身。②empt() 和 html('''') 作用等價(jià)，都可以刪除元素里面的內(nèi)容，只不過 html 還可以設(shè)置內(nèi)容。**案例：購物車案例模塊-**刪除商品模塊
①核心思路：把商品remove() 刪除元素即可②有三個(gè)地方需要?jiǎng)h除： 1. 商品后面的刪除按鈕 2. 刪除選中的商品 3. 清理購物車③商品后面的刪除按鈕： 一定是刪除當(dāng)前的商品，所以從 $(this) 出發(fā)④刪除選中的商品： 先判斷小的復(fù)選框按鈕是否選中狀態(tài)，如果是選中，則刪除對(duì)應(yīng)的商品⑤清理購物車： 則是把所有的商品全部刪掉**案例：購物車案例模塊-**選中商品添加背景
①核心思路：選中的商品添加背景，不選中移除背景即可②全選按鈕點(diǎn)擊：如果全選是選中的，則所有的商品添加背景，否則移除背景③小的復(fù)選框點(diǎn)擊： 如果是選中狀態(tài)，則當(dāng)前商品添加背景，否則移除背景④這個(gè)背景，可以通過類名修改，添加類和刪除類上午回顧：
? parents：獲取所有上級(jí)元素
? jQuery元素操作：
? 遍歷元素：
? $(元素).each(function (index, elm) {注意：elm是DOM對(duì)象});
? $.each(對(duì)象，function (index, elm) {});
? 創(chuàng)建元素：$(‘
- 新的元素
- ’);
? 添加元素：
? 內(nèi)部添加：append，appendTo，prepend，prependTo
? 外部添加：after，before
? 刪除元素：remove，empty，html(’’);
jQuery 尺寸、位置操作
jQuery 尺寸
width()、height()【只算width和height】
innerWidth()、innerHeight()【包含padding+width】
outerWidth()、outerHeight()【包含padding、border、width】
outerWidth(true)、outerHeight(true)【包含padding、border、margin、width】
以上參數(shù)為空，則是獲取相應(yīng)值，返回的是數(shù)字型。 如果參數(shù)為數(shù)字，則是修改相應(yīng)值。 參數(shù)可以不必寫單位。<style type="text/css">div {width : 100px;height: 100px;background: red;margin: 10px;padding: 10px;border:10px solid blue;}</style> </head> <body><input type="button" value="點(diǎn)擊"><div></div><script type="text/javascript">$('input').click(function () {// var w = $('div').width();// var h = $('div').height();// console.log(w,h);// 設(shè)置// $('div').width(200);// var w = $('div').innerWidth();// var h = $('div').innerHeight();// console.log(w,h);// $('div').innerWidth(200);// var w = $('div').outerWidth();// var h = $('div').outerHeight()// console.log(w, h);// $('div').outerWidth(200);// var w = $('div').outerWidth(true);// var h = $('div').outerHeight(true);// console.log(w,h);// $('div').outerWidth(200,true);});</script>jQuery 位置
位置主要有三個(gè)： offset()、position()、scrollTop()/scrollLeft();
offset：獲取元素相對(duì)于文檔偏移量（獲取的是對(duì)象），可以設(shè)置
position：獲取元素相對(duì)于定位父的偏移量（獲取的是對(duì)象），不可以設(shè)置
offset()設(shè)置或獲取元素偏移
①offset() 方法設(shè)置或返回被選元素相對(duì)于**文檔**的偏移坐標(biāo)，跟父級(jí)沒有關(guān)系。 $(元素).offset(); ②該方法有2個(gè)屬性 left、top 。offset().top 用于獲取距離文檔頂部的距離，offset().left 用于獲取距離文檔左側(cè)的距離。③可以設(shè)置元素的偏移：offset({ top: 10, left: 30 });// 獲取son的位置// offset：獲取元素距離文檔的位置，返回是對(duì)象// 如果只想獲取其中某一個(gè)值，那么我們offset().top// console.log( $('.son').offset() );$('.son').offset({top : 200,left : 300});position() 獲取元素偏移**
①position() 方法用于返回被選元素相對(duì)于**帶有定位的父級(jí)**偏移坐標(biāo)，如果父級(jí)都沒有定位，則以文檔為準(zhǔn)。 $('元素').position()②該方法有2個(gè)屬性 left、top。position().top 用于獲取距離定位父級(jí)頂部的距離，position().left 用于獲取距離定位父級(jí)左側(cè)的距離。注意：該方法只能獲取。// 獲取元素距離定位父的偏移位置// console.log( $('.son').position().left );// 注意：offset是可以設(shè)置，而position是不可以設(shè)置$('.son').position({left : 20,top : 20});scrollTop()、scrollLeft()設(shè)置或獲取元素被卷去的頭部和左側(cè)
①scrollTop() 方法設(shè)置或返回被選元素被卷去的頭部。
②不跟參數(shù)是獲取，參數(shù)為不帶單位的數(shù)字則是設(shè)置被卷去的頭部。
scroll事件：滾動(dòng)事件，（誰有滾動(dòng)條加給誰）
$('div').scroll(function () {// console.log(123);console.log( $('div').scrollTop() );});$('input').click(function () {// $('div').scrollTop(0);$('div').animate({scrollTop : 0}, 3000);});案例帶有動(dòng)畫的返回頂部
①核心原理： 使用animate動(dòng)畫返回頂部。②animate動(dòng)畫函數(shù)里面有個(gè)scrollTop 屬性，可以設(shè)置位置③但是是元素做動(dòng)畫，因此$(“body,html”).animate({scrollTop: 0})案例：品優(yōu)購電梯導(dǎo)航
①當(dāng)我們滾動(dòng)到 今日推薦 模塊，就讓電梯導(dǎo)航顯示出來②點(diǎn)擊電梯導(dǎo)航頁面可以滾動(dòng)到相應(yīng)內(nèi)容區(qū)域③核心算法：因?yàn)殡娞輰?dǎo)航模塊和內(nèi)容區(qū)模塊一一對(duì)應(yīng)的④當(dāng)我們點(diǎn)擊電梯導(dǎo)航某個(gè)小模塊，就可以拿到當(dāng)前小模塊的索引號(hào)⑤就可以把a(bǔ)nimate要移動(dòng)的距離求出來：當(dāng)前索引號(hào)內(nèi)容區(qū)模塊它的offset().top⑥然后執(zhí)行動(dòng)畫即可 第二部分：①當(dāng)我們點(diǎn)擊電梯導(dǎo)航某個(gè)小li， 當(dāng)前小li 添加current類，兄弟移除類名②當(dāng)我們頁面滾動(dòng)到內(nèi)容區(qū)域某個(gè)模塊， 左側(cè)電梯導(dǎo)航，相對(duì)應(yīng)的小li模塊，也會(huì)添加current類， 兄弟移除current類。③觸發(fā)的事件是頁面滾動(dòng)，因此這個(gè)功能要寫到頁面滾動(dòng)事件里面。④需要用到each，遍歷內(nèi)容區(qū)域大模塊。 each里面能拿到內(nèi)容區(qū)域每一個(gè)模塊元素和索引號(hào)⑤判斷的條件： 被卷去的頭部 大于等于 內(nèi)容區(qū)域里面每個(gè)模塊的offset().top⑥就利用這個(gè)索引號(hào)找到相應(yīng)的電梯導(dǎo)航小li添加類。課程回顧：
? parents：獲取所有上級(jí)元素
? 元素操作：
? 遍歷元素：
? 1、$(元素).each(function (index（索引）, elm（元素）) {})
? 2、$.each(對(duì)象,function (index（索引）, elm（元素）) {})
? 創(chuàng)建元素：
$ ('<li>新的元素</li>');? 添加元素：
? 內(nèi)部添加：
append （在父元素內(nèi)最上方）， appendTo（在父元素內(nèi)最下方）， prepend（在父元素外最上方）， prependTo（在父元素外最下方）? 外部添加：after（下），before（上）
? jQuery尺寸：width，innerWidth，outerWidth，outerWidth(true)
<script>$(function() {// 1. width() / height() 獲取設(shè)置元素 width和height大小 console.log($("div").width());// $("div").width(300);// 2. innerWidth() / innerHeight() 獲取設(shè)置元素 width和height + padding 大小 console.log($("div").innerWidth());// 3. outerWidth() / outerHeight() 獲取設(shè)置元素 width和height + padding + border 大小 console.log($("div").outerWidth());// 4. outerWidth(true) / outerHeight(true) 獲取設(shè)置 width和height + padding + border + marginconsole.log($("div").outerWidth(true));})</script>? jQuery位置：
? 偏移位置：offset，position
<script>$(function() {// 1. 獲取設(shè)置距離文檔的位置（偏移） offsetconsole.log($(".son").offset());console.log($(".son").offset().top);// $(".son").offset({// top: 200,// left: 200// });// 2. 獲取距離帶有定位父級(jí)位置（偏移） position 如果沒有帶有定位的父級(jí)，則以文檔為準(zhǔn)// 這個(gè)方法只能獲取不能設(shè)置偏移console.log($(".son").position());// $(".son").position({// top: 200,// left: 200// });})</script>? 卷起距離：scrollTop，卷起頂部距離
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {height: 2000px;}.back {position: fixed;width: 50px;height: 50px;background-color: pink;right: 30px;bottom: 100px;display: none;}.container {width: 900px;height: 500px;background-color: skyblue;margin: 400px auto;}</style><script src="jquery.min.js"></script> </head><body><div class="back">返回頂部</div><div class="container"></div><script>$(function() {$(document).scrollTop(100);// 被卷去的頭部 scrollTop() / 被卷去的左側(cè) scrollLeft()// 頁面滾動(dòng)事件var boxTop = $(".container").offset().top;$(window).scroll(function() {// console.log(11);console.log($(document).scrollTop());if ($(document).scrollTop() >= boxTop) {$(".back").fadeIn();} else {$(".back").fadeOut();}});// 返回頂部$(".back").click(function() {// $(document).scrollTop(0);$("body, html").stop().animate({scrollTop: 0});// $(document).stop().animate({// scrollTop: 0// }); 不能是文檔而是 html和body元素做動(dòng)畫})})</script> </body></html>
總結(jié)
