(JavaScript學習記錄)：jQuery 屬性操作

Asinmy發表於2020-09-30
JavaScriptjQuery

目錄

jQuery 屬性操作

設定或獲取元素固有屬性值 prop()

設定或獲取元素自定義屬性值 attr()

資料快取 data()

案例：購物車案例模組-全選

jQuery 屬性操作

設定或獲取元素固有屬性值 prop()

  • 所謂元素固有屬性就是元素本身自帶的屬性，比如 元素裡面的 href ，比如 元素裡面的 type。

  • 獲取屬性語法
prop(''屬性'')
  • 設定屬性語法
prop(''屬性'', ''屬性值'')

設定或獲取元素自定義屬性值 attr()

  • 使用者自己給元素新增的屬性，我們稱為自定義屬性。 比如給 div 新增 index =“1”。
  • 獲取屬性語法
attr(''屬性'') // 類似原生 getAttribute()
  • 設定屬性語法
attr(''屬性'', ''屬性值'') // 類似原生 setAttribute()
  • 此方法也可以獲取 H5 自定義屬性

資料快取 data()

  • data() 方法可以在指定的元素上存取資料，並不會修改 DOM 元素結構。一旦頁面重新整理，之前存放的資料都將被移除。
  • 附加資料語法
data(''name'',''value'') // 向被選元素附加資料
  • 獲取資料語法
date(''name'') // 向被選元素獲取資料
  • 同時，還可以讀取 HTML5 自定義屬性 data-index ，得到的是數字型
<!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>
    <script src="jquery.min.js"></script>
</head>

<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"));
            });
            // 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>

</html>

案例：購物車案例模組-全選

分析

① 全選思路：裡面3個小的核取方塊按鈕（j-checkbox）選中狀態（checked）跟著全選按鈕（checkall）走。
② 因為checked 是核取方塊的固有屬性，此時我們需要利用prop()方法獲取和設定該屬性。
③ 把全選按鈕狀態賦值給3小核取方塊就可以了。
④ 當我們每次點選小的核取方塊按鈕，就來判斷：
⑤ 如果小核取方塊被選中的個數等於3 就應該把全選按鈕選上，否則全選按鈕不選。
⑥ :checked 選擇器 :checked 查詢被選中的表單元素。
// 1. 全選 全不選功能模組
// 就是把全選按鈕（checkall）的狀態賦值給 三個小的按鈕（j-checkbox）就可以了
// 事件可以使用change
$(".checkall").change(function() {
    // console.log($(this).prop("checked"));
    $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
    if ($(this).prop("checked")) {
        // 讓所有的商品新增 check-cart-item 類名
        $(".cart-item").addClass("check-cart-item");
    } else {
        // check-cart-item 移除
        $(".cart-item").removeClass("check-cart-item");
    }
});
// 2. 如果小核取方塊被選中的個數等於3 就應該把全選按鈕選上，否則全選按鈕不選。
$(".j-checkbox").change(function() {
    // if(被選中的小的核取方塊的個數 === 3) {
    //     就要選中全選按鈕
    // } else {
    //     不要選中全選按鈕
    // }
    // console.log($(".j-checkbox:checked").length);
    // $(".j-checkbox").length 這個是所有的小核取方塊的個數
    if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
        $(".checkall").prop("checked", true);
    } else {
        $(".checkall").prop("checked", false);
    }

 

相關文章