1.1. jQuery 屬性操作
? jQuery 常用屬性操作有三種：prop() / attr() / data() ;
1.1.1 元素固有屬性值 prop()
? 所謂元素固有屬性就是元素本身自帶的屬性，比如 <a> 元素里面的 href 哪替，比如 <input> 元素里面的 type栋荸。
語法
? 注意：prop() 除了普通屬性操作，更適合操作表單屬性：disabled / checked / selected 等凭舶。
1.1.2 元素自定義屬性值 attr()
? 用戶自己給元素添加的屬性晌块，我們稱為自定義屬性。 比如給 div 添加 index =“1”库快。
語法
? 注意：attr() 除了普通屬性操作摸袁，更適合操作自定義屬性。（該方法也可以獲取 H5 自定義屬性）
1.1.3 數(shù)據(jù)緩存 data()
? data() 方法可以在指定的元素上存取數(shù)據(jù)义屏，并不會修改 DOM 元素結(jié)構(gòu)靠汁。一旦頁面刷新，之前存放的數(shù)據(jù)都將被移除闽铐。
語法
? 注意：同時蝶怔，還可以讀取 HTML5 自定義屬性 data-index ，得到的是數(shù)字型兄墅。
演示代碼
<body>
<a title="都挺好">都挺好</a>
<input type="checkbox" name="" id="" checked>
<div index="1" data-index="2">我是div</div>
<span>123</span>
<script>
$(function() {
//1. element.prop("屬性名") 獲取元素固有的屬性值
console.log($("a").prop("href"));
$("a").prop("title", "我們都挺好");
$("input").change(function() {
console.log($(this).prop("checked"));
});
// console.log($("div").prop("index"));
// 2. 元素的自定義屬性 我們通過 attr()
console.log($("div").attr("index"));
$("div").attr("index", 4);
console.log($("div").attr("data-index"));
// 3. 數(shù)據(jù)緩存 data() 這個里面的數(shù)據(jù)是存放在元素的內(nèi)存里面
$("span").data("uname", "andy");
console.log($("span").data("uname"));
// 這個方法獲取data-index h5自定義屬性 第一個 不用寫data- 而且返回的是數(shù)字型
console.log($("div").data("index"));
})
</script>
</body>
1.1.4 案例：購物車案例模塊-全選
1.全選思路：里面3個小的復(fù)選框按鈕（j-checkbox）選中狀態(tài)（checked）跟著全選按鈕（checkall）走踢星。
2.因為checked 是復(fù)選框的固有屬性，此時我們需要利用prop()方法獲取和設(shè)置該屬性隙咸。
3.把全選按鈕狀態(tài)賦值給3小復(fù)選框就可以了沐悦。
4.當(dāng)我們每次點擊小的復(fù)選框按鈕，就來判斷：
5.如果小復(fù)選框被選中的個數(shù)等于3 就應(yīng)該把全選按鈕選上五督，否則全選按鈕不選藏否。
6.:checked 選擇器 :checked 查找被選中的表單元素。
? 代碼實現(xiàn)略充包。(詳情參考源代碼)
1.2. jQuery 文本屬性值
? jQuery的文本屬性值常見操作有三種：html() / text() / val() ; 分別對應(yīng)JS中的 innerHTML 副签、innerText 和 value 屬性。
1.2.1 jQuery內(nèi)容文本值
? 常見操作有三種：html() / text() / val() ; 分別對應(yīng)JS中的 innerHTML 基矮、innerText 和 value 屬性淆储，主要針對元素的內(nèi)容還有表單的值操作。
語法
? 注意：html() 可識別標(biāo)簽家浇，text() 不識別標(biāo)簽本砰。
演示代碼
<body>
<div>
<span>我是內(nèi)容</span>
</div>
<input type="text" value="請輸入內(nèi)容">
<script>
// 1. 獲取設(shè)置元素內(nèi)容 html()
console.log($("div").html());
// $("div").html("123");
// 2. 獲取設(shè)置元素文本內(nèi)容 text()
console.log($("div").text());
$("div").text("123");
// 3. 獲取設(shè)置表單值 val()
console.log($("input").val());
$("input").val("123");
</script>
</body>
1.2.2. 案例：購物車案例模塊-增減商品數(shù)量
1.核心思路：首先聲明一個變量，當(dāng)我們點擊+號（increment）钢悲，就讓這個值++点额，然后賦值給文本框青团。
2.注意1： 只能增加本商品的數(shù)量， 就是當(dāng)前+號的兄弟文本框（itxt）的值咖楣。
3.修改表單的值是val() 方法
4.注意2： 這個變量初始值應(yīng)該是這個文本框的值，在這個值的基礎(chǔ)上++芦昔。要獲取表單的值
5.減號（decrement）思路同理诱贿，但是如果文本框的值是1，就不能再減了咕缎。
? 代碼實現(xiàn)略珠十。(詳情參考源代碼)
1.2.3. 案例：購物車案例模塊-修改商品小計
1.核心思路：每次點擊+號或者-號，根據(jù)文本框的值 乘以 當(dāng)前商品的價格 就是 商品的小計
2.注意1： 只能增加本商品的小計凭豪， 就是當(dāng)前商品的小計模塊（p-sum）
3.修改普通元素的內(nèi)容是text() 方法
4.注意2： 當(dāng)前商品的價格焙蹭，要把￥符號去掉再相乘 截取字符串 substr(1)
5.parents(‘選擇器’) 可以返回指定祖先元素
6.最后計算的結(jié)果如果想要保留2位小數(shù) 通過 toFixed(2) 方法
7.用戶也可以直接修改表單里面的值，同樣要計算小計嫂伞。 用表單change事件
8.用最新的表單內(nèi)的值 乘以 單價即可 但是還是當(dāng)前商品小計
? 代碼實現(xiàn)略孔厉。(詳情參考源代碼)
1.3. jQuery 元素操作
? jQuery 元素操作主要講的是用jQuery方法，操作標(biāo)簽的遍歷帖努、創(chuàng)建撰豺、添加、刪除等操作拼余。
1.3.1. 遍歷元素
? jQuery 隱式迭代是對同一類元素做了同樣的操作污桦。 如果想要給同一類元素做不同操作，就需要用到遍歷匙监。
語法1
? 注意：此方法用于遍歷 jQuery 對象中的每一項凡橱，回調(diào)函數(shù)中元素為 DOM 對象，想要使用 jQuery 方法需要轉(zhuǎn)換亭姥。
語法2
? 注意：此方法用于遍歷 jQuery 對象中的每一項稼钩，回調(diào)函數(shù)中元素為 DOM 對象，想要使用 jQuery 方法需要轉(zhuǎn)換致份。
演示代碼
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function() {
// 如果針對于同一類元素做不同操作变抽，需要用到遍歷元素（類似for，但是比for強大）
var sum = 0;
var arr = ["red", "green", "blue"];
// 1. each() 方法遍歷元素
$("div").each(function(i, domEle) {
// 回調(diào)函數(shù)第一個參數(shù)一定是索引號 可以自己指定索引號號名稱
// console.log(i);
// 回調(diào)函數(shù)第二個參數(shù)一定是 dom 元素對象氮块，也是自己命名
// console.log(domEle); // 使用jQuery方法需要轉(zhuǎn)換 $(domEle)
$(domEle).css("color", arr[i]);
sum += parseInt($(domEle).text());
})
console.log(sum);
// 2. $.each() 方法遍歷元素 主要用于遍歷數(shù)據(jù)绍载，處理數(shù)據(jù)
// $.each($("div"), function(i, ele) {
// console.log(i);
// console.log(ele);
// });
// $.each(arr, function(i, ele) {
// console.log(i);
// console.log(ele);
// })
$.each({
name: "andy",
age: 18
}, function(i, ele) {
console.log(i); // 輸出的是 name age 屬性名
console.log(ele); // 輸出的是 andy 18 屬性值
})
})
</script>
</body>
1.3.2. 案例：購物車案例模塊-計算總計和總額
1.把所有文本框中的值相加就是總額數(shù)量，總計同理滔蝉。
2.文本框里面的值不同击儡，如果想要相加需要用 each() 遍歷，聲明一個變量做計數(shù)器蝠引，累加即可阳谍。
? 代碼實現(xiàn)略蛀柴。(詳情參考源代碼)
1.3.3. 創(chuàng)建、添加矫夯、刪除
? jQuery方法操作元素的創(chuàng)建害捕、添加忿偷、刪除方法很多，則重點使用部分，如下：
語法總和
? 注意：以上只是元素的創(chuàng)建佩捞、添加俯树、刪除方法的常用方法丸冕，其他方法請參詳API沫勿。
案例代碼
<body>
<ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
$(function() {
// 1. 創(chuàng)建元素
var li = $("<li>我是后來創(chuàng)建的li</li>");
// 2. 添加元素
// 2.1 內(nèi)部添加
// $("ul").append(li); 內(nèi)部添加并且放到內(nèi)容的最后面
$("ul").prepend(li); // 內(nèi)部添加并且放到內(nèi)容的最前面
// 2.2 外部添加
var div = $("<div>我是后媽生的</div>");
// $(".test").after(div);
$(".test").before(div);
// 3. 刪除元素
// $("ul").remove(); 可以刪除匹配的元素 自殺
// $("ul").empty(); // 可以刪除匹配的元素里面的子節(jié)點 孩子
$("ul").html(""); // 可以刪除匹配的元素里面的子節(jié)點 孩子
})
</script>
</body>
1.3.4 案例：購物車案例模塊-刪除商品模塊
1.核心思路：把商品remove() 刪除元素即可
2.有三個地方需要刪除： 1. 商品后面的刪除按鈕 2. 刪除選中的商品 3. 清理購物車
3.商品后面的刪除按鈕： 一定是刪除當(dāng)前的商品，所以從 $(this) 出發(fā)
4.刪除選中的商品： 先判斷小的復(fù)選框按鈕是否選中狀態(tài)款慨，如果是選中儒飒，則刪除對應(yīng)的商品
5.清理購物車： 則是把所有的商品全部刪掉
? 代碼實現(xiàn)略。(詳情參考源代碼)
1.3.5 案例：購物車案例模塊-選中商品添加背景
1.核心思路：選中的商品添加背景檩奠，不選中移除背景即可
2.全選按鈕點擊：如果全選是選中的桩了，則所有的商品添加背景，否則移除背景
3.小的復(fù)選框點擊： 如果是選中狀態(tài)埠戳，則當(dāng)前商品添加背景圣猎，否則移除背景
4.這個背景，可以通過類名修改乞而，添加類和刪除類
? 代碼實現(xiàn)略送悔。(詳情參考源代碼)
1.4. jQuery 尺寸、位置操作
? jQuery中分別為我們提供了兩套快速獲取和設(shè)置元素尺寸和位置的API爪模，方便易用欠啤，內(nèi)容如下。
1.4.1. jQuery 尺寸操作
? jQuery 尺寸操作包括元素寬高的獲取和設(shè)置屋灌，且不一樣的API對應(yīng)不一樣的盒子模型洁段。
語法
代碼演示
<body>
<div></div>
<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 + margin
console.log($("div").outerWidth(true));
})
</script>
</body>
? 注意：有了這套 API 我們將可以快速獲取和子的寬高，至于其他屬性想要獲取和設(shè)置共郭，還要使用 css() 等方法配合祠丝。
1.4.2. jQuery 位置操作
? jQuery的位置操作主要有三個： offset()、position()除嘹、scrollTop()/scrollLeft() , 具體介紹如下:
語法
代碼演示
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="back">返回頂部</div>
<div class="container"></div>
<script>
$(function() {
// 1. 獲取設(shè)置距離文檔的位置（偏移） offset
console.log($(".son").offset());
console.log($(".son").offset().top);
// $(".son").offset({
// top: 200,
// left: 200
// });
// 2. 獲取距離帶有定位父級位置（偏移） position 如果沒有帶有定位的父級写半，則以文檔為準(zhǔn)
// 這個方法只能獲取不能設(shè)置偏移
console.log($(".son").position());
// $(".son").position({
// top: 200,
// left: 200
// });
// 3. 被卷去的頭部
$(document).scrollTop(100);
// 被卷去的頭部 scrollTop() / 被卷去的左側(cè) scrollLeft()
// 頁面滾動事件
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元素做動畫
})
})
</script>
</body>
1.4.3. 案例：帶有動畫的返回頂部
1.核心原理： 使用animate動畫返回頂部。
2.animate動畫函數(shù)里面有個scrollTop 屬性尉咕，可以設(shè)置位置
3.但是是元素做動畫叠蝇，因此 $(“body,html”).animate({scrollTop: 0})
? 代碼實現(xiàn)略。(詳情參考源代碼)
1.4.4. 案例： 品優(yōu)購電梯導(dǎo)航（上）
1.當(dāng)我們滾動到 今日推薦 模塊年缎，就讓電梯導(dǎo)航顯示出來
2.點擊電梯導(dǎo)航頁面可以滾動到相應(yīng)內(nèi)容區(qū)域
3.核心算法：因為電梯導(dǎo)航模塊和內(nèi)容區(qū)模塊一一對應(yīng)的
4.當(dāng)我們點擊電梯導(dǎo)航某個小模塊悔捶，就可以拿到當(dāng)前小模塊的索引號
5.就可以把animate要移動的距離求出來：當(dāng)前索引號內(nèi)容區(qū)模塊它的offset().top
6.然后執(zhí)行動畫即可
? 代碼實現(xiàn)略铃慷。(詳情參考源代碼)
1.4.5. 案例：品優(yōu)購電梯導(dǎo)航（下）
1.當(dāng)我們點擊電梯導(dǎo)航某個小li， 當(dāng)前小li 添加current類蜕该，兄弟移除類名
2.當(dāng)我們頁面滾動到內(nèi)容區(qū)域某個模塊犁柜， 左側(cè)電梯導(dǎo)航，相對應(yīng)的小li模塊堂淡，也會添加current類赁温， 兄弟移除current類。
3.觸發(fā)的事件是頁面滾動淤齐，因此這個功能要寫到頁面滾動事件里面。
4.需要用到each袜匿，遍歷內(nèi)容區(qū)域大模塊更啄。 each里面能拿到內(nèi)容區(qū)域每一個模塊元素和索引號
5.判斷的條件： 被卷去的頭部 大于等于 內(nèi)容區(qū)域里面每個模塊的offset().top
6.就利用這個索引號找到相應(yīng)的電梯導(dǎo)航小li添加類。
? 代碼實現(xiàn)略居灯。(詳情參考源代碼)
1.5. 今日總結(jié)
