Jquery 複習02
1.1. jQuery 屬性操作
jQuery 常用屬性操作有三種:prop() / attr() / data() ;
1.1.1 元素固有屬性值 prop()
所謂元素固有屬性就是元素本身自帶的屬性,比如 元素裡面的 href ,比如 元素裡面的 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新增類。