jQuery筆記（二）
day02 - jQuery
學習目標：
能夠操作 jQuery 屬性
能夠操作 jQuery 元素
能夠操作 jQuery 元素尺寸、位置
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 資料快取 data()
data() 方法可以在指定的元素上存取資料，並不會修改 DOM 元素結構。一旦頁面重新整理，之前存放的資料都將被移除。
語法
注意：同時，還可以讀取 HTML5 自定義屬性 data-index ，得到的是數字型。
演示程式碼
<body> <a href="http://www.itcast.cn" 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. 資料快取 data() 這個裡面的資料是存放在元素的記憶體裡面 $("span").data("uname", "andy"); console.log($("span").data("uname")); // 這個方法獲取data-index h5自定義屬性 第一個 不用寫data- 而且返回的是數字型 console.log($("div").data("index")); }) </script> </body>
1.1.4 案例：購物車案例模組-全選
1.全選思路：裡面3個小的複選框按鈕（j-checkbox）選中狀態（checked）跟著全選按鈕（checkall）走。
2.因為checked 是複選框的固有屬性，此時我們需要利用prop()方法獲取和設定該屬性。
3.把全選按鈕狀態賦值給3小複選框就可以了。
4.當我們每次點選小的複選框按鈕，就來判斷：
5.如果小複選框被選中的個數等於3 就應該把全選按鈕選上，否則全選按鈕不選。
6.:checked 選擇器 :checked 查詢被選中的表單元素。
1.2. jQuery 文字屬性值
jQuery的文字屬性值常見操作有三種：html() / text() / val() ; 分別對應JS中的 innerHTML 、innerText 和 value 屬性。
1.2.1 jQuery內容文字值
常見操作有三種：html() / text() / val() ; 分別對應JS中的 innerHTML 、innerText 和 value 屬性，主要針對元素的內容還有表單的值操作。
語法
注意：html() 可識別標籤，text() 不識別標籤。
演示程式碼
<body>
<div>
<span>我是內容</span>
</div>
<input type="text" value="請輸入內容">
<script>
// 1. 獲取設定元素內容 html()
console.log($("div").html());
// $("div").html("123");
// 2. 獲取設定元素文字內容 text()
console.log($("div").text());
$("div").text("123");
// 3. 獲取設定表單值 val()
console.log($("input").val());
$("input").val("123");
</script>
</body>
1.2.2. 案例：購物車案例模組-增減商品數量
1.核心思路：首先宣告一個變數，當我們點選+號（increment），就讓這個值++，然後賦值給文字框。
2.注意1： 只能增加本商品的數量， 就是當前+號的兄弟文字框（itxt）的值。
3.修改表單的值是val() 方法
4.注意2： 這個變數初始值應該是這個文字框的值，在這個值的基礎上++。要獲取表單的值
5.減號（decrement）思路同理，但是如果文字框的值是1，就不能再減了。
1.2.3. 案例：購物車案例模組-修改商品小計
1.核心思路：每次點選+號或者-號，根據文字框的值 乘以 當前商品的價格 就是 商品的小計
2.注意1： 只能增加本商品的小計， 就是當前商品的小計模組（p-sum）
3.修改普通元素的內容是text() 方法
4.注意2： 當前商品的價格，要把￥符號去掉再相乘 擷取字串 substr(1)
5.parents(‘選擇器’) 可以返回指定祖先元素
6.最後計算的結果如果想要保留2位小數 通過 toFixed(2) 方法
7.使用者也可以直接修改表單裡面的值，同樣要計算小計。 用表單change事件
8.用最新的表單內的值 乘以 單價即可 但是還是當前商品小計
效果參考上圖
1.3. jQuery 元素操作
jQuery 元素操作主要講的是用jQuery方法，操作標籤的遍歷、建立、新增、刪除等操作。
1.3.1. 遍歷元素
jQuery 隱式迭代是對同一類元素做了同樣的操作。 如果想要給同一類元素做不同操作，就需要用到遍歷。
語法1
注意：此方法用於遍歷 jQuery 物件中的每一項，回撥函式中元素為 DOM 物件，想要使用 jQuery 方法需要轉換。
語法2
注意：此方法用於遍歷 jQuery 物件中的每一項，回撥函式中元素為 DOM 物件，想要使用 jQuery 方法需要轉換。
演示程式碼
<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) {
// 回撥函式第一個引數一定是索引號 可以自己指定索引號號名稱
// console.log(i);
// 回撥函式第二個引數一定是 dom 元素物件，也是自己命名
// console.log(domEle); // 使用jQuery方法需要轉換 $(domEle)
$(domEle).css("color", arr[i]);
sum += parseInt($(domEle).text());
})
console.log(sum);
// 2. $.each() 方法遍歷元素 主要用於遍歷資料，處理資料
// $.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.把所有文字框中的值相加就是總額數量，總計同理。
2.文字框裡面的值不同，如果想要相加需要用 each() 遍歷，宣告一個變數做計數器，累加即可。
1.3.3. 建立、新增、刪除
jQuery方法操作元素的建立、新增、刪除方法很多，則重點使用部分，如下：
語法總和
注意：以上只是元素的建立、新增、刪除方法的常用方法，其他方法請參詳API。
案例程式碼
<body>
<ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
$(function() {
// 1. 建立元素
var li = $("<li>我是後來建立的li</li>");
// 2. 新增元素
// 2.1 內部新增
// $("ul").append(li); 內部新增並且放到內容的最後面
$("ul").prepend(li); // 內部新增並且放到內容的最前面
// 2.2 外部新增
var div = $("<div>我是後媽生的</div>");
// $(".test").after(div);
$(".test").before(div);
// 3. 刪除元素
// $("ul").remove(); 可以刪除匹配的元素 自殺
// $("ul").empty(); // 可以刪除匹配的元素裡面的子節點 孩子
$("ul").html(""); // 可以刪除匹配的元素裡面的子節點 孩子
})
</script>
</body>
1.3.4 案例：購物車案例模組-刪除商品模組
1.核心思路：把商品remove() 刪除元素即可
2.有三個地方需要刪除： 1. 商品後面的刪除按鈕 2. 刪除選中的商品 3. 清理購物車
3.商品後面的刪除按鈕： 一定是刪除當前的商品，所以從 $(this) 出發
4.刪除選中的商品： 先判斷小的複選框按鈕是否選中狀態，如果是選中，則刪除對應的商品
5.清理購物車： 則是把所有的商品全部刪掉
1.3.5 案例：購物車案例模組-選中商品新增背景
1.核心思路：選中的商品新增背景，不選中移除背景即可
2.全選按鈕點選：如果全選是選中的，則所有的商品新增背景，否則移除背景
3.小的複選框點選： 如果是選中狀態，則當前商品新增背景，否則移除背景
4.這個背景，可以通過類名修改，新增類和刪除類
1.4. jQuery 尺寸、位置操作
jQuery中分別為我們提供了兩套快速獲取和設定元素尺寸和位置的API，方便易用，內容如下。
1.4.1. jQuery 尺寸操作
jQuery 尺寸操作包括元素寬高的獲取和設定，且不一樣的API對應不一樣的盒子模型。
語法
程式碼演示
<body>
<div></div>
<script>
$(function() {
// 1. width() / height() 獲取設定元素 width和height大小
console.log($("div").width());
// $("div").width(300);
// 2. innerWidth() / innerHeight() 獲取設定元素 width和height + padding 大小
console.log($("div").innerWidth());
// 3. outerWidth() / outerHeight() 獲取設定元素 width和height + padding + border 大小
console.log($("div").outerWidth());
// 4. outerWidth(true) / outerHeight(true) 獲取設定 width和height + padding + border + margin
console.log($("div").outerWidth(true));
})
</script>
</body>
注意：有了這套 API 我們將可以快速獲取和子的寬高，至於其他屬性想要獲取和設定，還要使用 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. 獲取設定距離文件的位置（偏移） offset
console.log($(".son").offset());
console.log($(".son").offset().top);
// $(".son").offset({
// top: 200,
// left: 200
// });
// 2. 獲取距離帶有定位父級位置（偏移） position 如果沒有帶有定位的父級，則以文件為準
// 這個方法只能獲取不能設定偏移
console.log($(".son").position());
// $(".son").position({
// top: 200,
// left: 200
// });
// 3. 被捲去的頭部
$(document).scrollTop(100);
// 被捲去的頭部 scrollTop() / 被捲去的左側 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動畫函式裡面有個scrollTop 屬性，可以設定位置
3.但是是元素做動畫，因此 $(“body,html”).animate({scrollTop: 0})
1.4.4. 案例： 品優購電梯導航（上）
1.當我們滾動到 今日推薦 模組，就讓電梯導航顯示出來
2.點選電梯導航頁面可以滾動到相應內容區域
3.核心演算法：因為電梯導航模組和內容區模組一一對應的
4.當我們點選電梯導航某個小模組，就可以拿到當前小模組的索引號
5.就可以把animate要移動的距離求出來：當前索引號內容區模組它的offset().top
6.然後執行動畫即可
1.4.5. 案例：品優購電梯導航（下）
1.當我們點選電梯導航某個小li， 當前小li 新增current類，兄弟移除類名
2.當我們頁面滾動到內容區域某個模組， 左側電梯導航，相對應的小li模組，也會新增current類， 兄弟移除current類。
3.觸發的事件是頁面滾動，因此這個功能要寫到頁面滾動事件裡面。
4.需要用到each，遍歷內容區域大模組。 each裡面能拿到內容區域每一個模組元素和索引號
5.判斷的條件： 被捲去的頭部 大於等於 內容區域裡面每個模組的offset().top
6.就利用這個索引號找到相應的電梯導航小li新增類。