jQuery 屬性，元素_ZenDei技術網路在線

屬性操作固定屬性 prop()獲取固定屬性$("a").prop("href") 2. 設置屬性$('a').prop("title", '我們')註意:prop 更加適用disabled / checked / selected 等。自定義屬性 attr()獲取自定義屬性$('div').attr... ...

屬性操作

固定屬性 prop()

獲取固定屬性

$("a").prop("href")

2. 設置屬性

$('a').prop("title", '我們')

註意:

prop 更加適用disabled / checked / selected 等。

自定義屬性 attr()

獲取自定義屬性

$('div').attr('index')

2. 設置自定義屬性

$('span').attr('index', 1)

數據緩存 data()

設置數據緩存

$('span').data('uname', 'peach')

2. 獲取數據緩存

$('span').data('uname')

註意：

data 獲取html5 自定義data-index，第一個不用寫data- , 得到的是數字型。

<!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>
</body>
<script>

    $(function () {
        // 1.獲取固定屬性名
        console.log($("a").prop("href"));
        console.log($("a").prop('title'));
        // 1.1 設置屬性
        $('a').prop("title", '我們')

        // 1.2 prop 更加適用disabled / checked / selected 等。
        $('input').change(function () {
            console.log($(this).prop("checked"));
        })

        // 2 自定義屬性
        // 2.1 獲取自定義屬性
        console.log($('div').attr('data-index'));
        console.log($('div').attr('index'));
        // 2.2 設置自定義屬性
        $('span').attr('index', 1)

        // 3 數據緩存 data() 這個裡面的數據是存放在元素的記憶體裡面
        $('span').data('uname', 'peach'); // 設置緩存數據
        console.log($('span').data('uname'));  // 獲取緩存數據
        // 3.1 data 獲取html5 自定義data-index， 第一個 不用寫data- , 得到的是數字型。
        console.log($('div').data('index'));

    })

</script>

</html>

示例代碼

$(function () {
    // 全選和 全不選
    // 把全選的的狀態給其他商品的狀態即可
    // 1. 全選
    $('.checkall').change(function () {
        // 1.1 設置其他商品的狀態和全選按鈕 的狀態一致
        console.log($(this).prop('checked'));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));

        // 1.2 如果全選則 讓所有的商品添加 check-cart-item 類名
        if ($(this).prop("checked")) {
            $('.cart-item').addClass("check-cart-item"); // 添加類名
        } else {
            $(".cart-item").removeClass("check-cart-item");
        }
    })

    // 2. 如果小框裡面的數值等於所有數組，則選擇全選
    $('.j-checkbox').change(function () {
        console.log($(".j-checkbox:checked").length);

        // 如果當前選擇的數量等於商品數量， 則全選選中
        if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }

        if ($(this).prop("checked")) {
            // 讓當前的商品添加 check-cart-item 類名
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
    })



})

案列-全選與全不選

文本數值

文本屬性值常見操作有三種：html() / text() / val() ; 分別對應JS中的 innerHTML 、innerText 和 value 屬性。

普通元素內容html() 對應JS中的 innerHTML
普通元素文本內容對應JS中的 innerText
表單的值對應JS中的 value

註意：html() 可識別標簽，text() 不識別標簽。

<!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>

    <div>
        <span>我是內容</span>
    </div>
    <input type="text" value="請輸入內容">
    <script>
        // 1. 獲取設置元素內容 html()
        console.log($('div').html());
        // 1.1 設置HTML內容
        $('div').html('<h1>握手</h1>')

        // 2. 獲取設置元素文本內容 text()
        console.log($('div').text());
        // 2.1 設置文本內容
        $('div').text('111')

        // 3. 獲取設置表單值 val()
        console.log($('input').val());
        // 3.1 設置屬性值
        $('input').val('test')


    </script>
</body>

</html>

示例代碼

$(function () {
    // 全選和 全不選
    // 把全選的的狀態給其他商品的狀態即可
    // 1. 全選
    $('.checkall').change(function () {
        // 1.1 設置其他商品的狀態和全選按鈕 的狀態一致
        console.log($(this).prop('checked'));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));

        // 1.2 如果全選則 讓所有的商品添加 check-cart-item 類名
        if ($(this).prop("checked")) {
            $('.cart-item').addClass("check-cart-item"); // 添加類名
        } else {
            $(".cart-item").removeClass("check-cart-item");
        }
    })

    // 2. 如果小框裡面的數值等於所有數組，則選擇全選
    $('.j-checkbox').change(function () {
        console.log($(".j-checkbox:checked").length);

        // 如果當前選擇的數量等於商品數量， 則全選選中
        if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }

        if ($(this).prop("checked")) {
            // 讓當前的商品添加 check-cart-item 類名
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
    })

    // --------------------------------------------------------------------------------
    // 商品 + 計算
    $('.increment').click(function () {
        // 獲取到當前多少件商品
        var n = $(this).siblings('.itxt').val()
        n++;
        $(this).siblings(".itxt").val(n);
        // 然後獲取到單價標簽
        var p = $(this).parents('.p-num').siblings('.p-price').html()
        p = p.substr(1) // 得到單價

        var price = (p * n).toFixed(2); // 保留兩位小數
        console.log(price);
        // 然後把價格替換到小計裡面
        // 獲取到小計標簽
        $(this).parents('.p-num').siblings('.p-sum').html("￥" + price)

    })

    // 商品 - 計算
    $('.decrement').click(function () {
        // 先獲取到當前商品數量
        var n = $(this).siblings('.itxt').val()
        // 如果等於1  不做操作
        if (n == 1) {
            return false
        }
        n--;
        // 賦值到數量標簽裡面
        $(this).siblings(".itxt").val(n);
        // 得到商品的單價
        var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1)
        var price = (p * n).toFixed(2); // 保留兩位小數
        $(this).parents('.p-num').siblings('.p-sum').html("￥" + price)
    })

    // 用戶直接再文本款裡面輸入數量
    $('.itxt').change(function () {
        var n = $(this).val()
        if (n < 0) {
            n = 1
            $(this).val(n);
        }
        // 得到商品的單價
        var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1)
        var price = (p * n).toFixed(2); // 保留兩位小數
        $(this).parents('.p-num').siblings('.p-sum').html("￥" + price)

    })

})

案例-購物車小計計算

元素操作

$('div').each(function (i, domEle) { })

回調函數第一個是index，第二個是dom元素對象, 要轉換為jquer對象

2. $.each(obj, function (i, ele) { })

$.each() 方法遍歷元素主要用於遍曆數據，處理數據

<!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>

    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function () {
            var sum = 0
            var arr = ["red", "green", "blue"];
            // 第一種遍歷元素
            $('div').each(function (i, domEle) {
                // console.log(i, domEle);
                // 回調函數第一個是index，
                // 第二個是dom元素對象,要轉換為jquer對象
                $(domEle).css('color', arr[i])
                sum += parseInt($(domEle).text())
            })


            // 第二種 $.each() 方法遍歷元素 主要用於遍曆數據，處理數據
            $.each(arr, function (i, ele) {
                console.log(i, ele);
            })

            $.each({
                "name": 'peach',
                "age": 12
            }, function (i, ele) {
                console.log(i);  // name
                console.log(ele); // peach

            })


        })
    </script>
</body>

</html>

示例代碼

$(function () {
    // 全選和 全不選
    // 把全選的的狀態給其他商品的狀態即可
    // 1. 全選
    $('.checkall').change(function () {
        // 1.1 設置其他商品的狀態和全選按鈕 的狀態一致
        console.log($(this).prop('checked'));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));

        // 1.2 如果全選則 讓所有的商品添加 check-cart-item 類名
        if ($(this).prop("checked")) {
            $('.cart-item').addClass("check-cart-item"); // 添加類名
        } else {
            $(".cart-item").removeClass("check-cart-item");
        }
    })

    // 2. 如果小框裡面的數值等於所有數組，則選擇全選
    $('.j-checkbox').change(function () {
        console.log($(".j-checkbox:checked").length);

        // 如果當前選擇的數量等於商品數量， 則全選選中
        if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }

        if ($(this).prop("checked")) {
            // 讓當前的商品添加 check-cart-item 類名
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
    })

    // --------------------------------------------------------------------------------
    // 商品 + 計算
    $('.increment').click(function () {
        // 獲取到當前多少件商品
        var n = $(this).siblings('.itxt').val()
        n++;
        $(this).siblings(".itxt").val(n);
        // 然後獲取到單價標簽
        var p = $(this).parents('.p-num').siblings('.p-price').html()
        p = p.substr(1) // 得到單價

        var price = (p * n).toFixed(2); // 保留兩位小數
        console.log(price);
        // 然後把價格替換到小計裡面
        // 獲取到小計標簽
        $(this).parents('.p-num').siblings('.p-sum').html("￥" + price)
        getSum()

    })

    // 商品 - 計算
    $('.decrement').click(function () {
        // 先獲取到當前商品數量
        var n = $(this).siblings('.itxt').val()
        // 如果等於1  不做操作
        if (n == 1) {
            return false
        }
        n--;
        // 賦值到數量標簽裡面
        $(this).siblings(".itxt").val(n);
        // 得到商品的單價
        var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1)
        var price = (p * n).toFixed(2); // 保留兩位小數
        $(this).parents('.p-num').siblings('.p-sum').html("￥" + price)
        getSum()
    })

    // 用戶直接再文本款裡面輸入數量
    $('.itxt').change(function () {
        var n = $(this).val()
        if (n < 0) {
            n = 1
            $(this).val(n);
        }
        // 得到商品的單價
        var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1)
        var price = (p * n).toFixed(2); // 保留兩位小數
        $(this).parents('.p-num').siblings('.p-sum').html("￥" + price)
        getSum()

    })

    // ----------------------------------------------------------------
    // 計算總價
    getSum()

    function getSum() {
        // 先定義總件數，總價格
        var count = 0;
        var money = 0;
        $('.itxt').each(function (i, ele) {
            // ele 就是三個圖書的dom對象，要轉換為jquer對象
            count += parseInt($(ele).val()) // 總件數
        })
        // 修改底部總件數
        $('.amount-sum em').text(count)

        // 修改總價格
        $('.p-sum').each(function (i, ele) {
            // 總價格
            money += parseInt($(ele).text().substr(1))
        })
        // 修改底部總價格
        $(".price-sum em").text("￥" + money.toFixed(2));


    }

})

案例-購物車計算總價和總件數

創建，刪除，修改元素

創建

$("<li>創建的li</li>")

添加

內部添加

$('li').append(li) // 放在元素的最後面
$('li').prepend(li) // 放在元素的最前面

2. 外部添加

$('li').after(li) // 放在目標元素的最後面
$('li').before(li) // 放在目標元素的最前面

內部添加元素，生成後，他們是父子關係

外部添加元素，生成後，他們是兄弟關係

刪除

$('ul').remove() // 自殺式刪除，刪除元素本身
$('ul').html('') // 可以刪除匹配的元素裡面的子節點孩子
$('ul').empty() // 匹配刪除ele 裡面的所有子節點

empty() 和 html() 區別在於html可以設置內容

<!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>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>

    <script>
        $(function () {
            // 創建元素

            // 1.1 內部添加
            // var li = $("<li>創建的li</li>")
            // $('li').append(li) // 放在元素的最後面 
            // $('li').prepend(li)  // 放在元素的最前面

            // 1.2 外部添加
            // var li = $("<div> 我是外部添加的</div>")
            // $('li').after(li) // 放在目標元素的最後面
            // $('li').before(li)   // 放在目標元素的最前面

            // 刪除元素
            // $('ul').remove() // 自殺式刪除，刪除元素本身
            // $('ul').html('')  // 可以刪除匹配的元素裡面的子節點 孩子
            $('ul').empty() // 匹配刪除ele 裡面的所有子節點


        })

    </script>
</body>

</html>

示例代碼

$(function () {
    // 全選和 全不選
    // 把全選的的狀態給其他商品的狀態即可
    // 1. 全選
    $('.checkall').change(function () {
        // 1.1 設置其他商品的狀態和全選按鈕 的狀態一致
        console.log($(this).prop('checked'));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));

        // 1.2 如果全選則 讓所有的商品添加 check-cart-item 類名
        if ($(this).prop("checked")) {
            $('.cart-item').addClass("check-cart-item"); // 添加類名
        } else {
            $(".cart-item").removeClass("check-cart-item");
        }
    })

    // 2. 如果小框裡面的數值等於所有數組，則選擇全選
    $('.j-checkbox').change(function () {
        console.log($(".j-checkbox:checked").length);

        // 如果當前選擇的數量等於商品數量， 則全選選中
        if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }

        if ($(this).prop("checked")) {
            // 讓當前的商品添加 check-cart-item 類名
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
    })

    // --------------------------------------------------------------------------------
    // 商品 + 計算
    $('.increment').click(function () {
        // 獲取到當前多少件商品
        var n = $(this).siblings('.itxt').val()
        n++;
        $(this).siblings(".itxt").val(n);
        // 然後獲取到單價標簽
        var p = $(this).parents('.p-num').siblings('.p-price').html()
        p = p.substr(1) // 得到單價

        var price = (p * n).toFixed(2); // 保留兩位小數
        console.log(price);
        // 然後把價格替換到小計裡面
        // 獲取到小計標簽
        $(this).parents('.p-num').siblings('.p-sum').html("￥" + price)
        getSum()

    })

    // 商品 - 計算
    $('.decrement').click(function () {
        // 先獲取到當前商品數量
        var n = $(this).siblings('.itxt').val()
        // 如果等於1  不做操作
        if (n == 1) {
            return false
        }
        n--;
        // 賦值到數量標簽裡面
        $(this).siblings(".itxt").val(n);
        // 得到商品的單價
        var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1)
        var price = (p * n).toFixed(2); // 保留兩位小數
        $(this).parents('.p-num').siblings('.p-sum').html("￥" + price)
        getSum()
    })

    // 用戶直接再文本款裡面輸入數量
    $('.itxt').change(function () {
        var n = $(this).val()
        if (n < 0) {
            n = 1
            $(this).val(n);
        }
        // 得到商品的單價
        var p = $(this).parents('.p-num').siblings('.p-price').html().substr(1)
        var price = (p * n).toFixed(2); // 保留兩位小數
        $(this).parents('.p-num').siblings('.p-sum').html("￥" + price)
        getSum()

    })

    // ----------------------------------------------------------------
    // 刪除商品模塊
    $('.p-action a').click(function () {
        $(this).parents('.cart-item').remove();
        getSum();

    })
    // 刪除選中的商品
    $('.remove-batch').click(function () {
        $('.j-checkbox:checked').parents('.cart-item').remove()
        getSum()
    })

    // 清空購物車
    $('.clear-all').click(function () {
        $('.cart-item').remove()
        getSum()
    })



    // ----------------------------------------------------------------
    // 計算總價
    getSum()

    function getSum() {
        // 先定義總件數，總價格
        var count = 0;
        var money = 0;
        $('.itxt').each(function (i, ele) {
            // ele 就是三個圖書的dom對象，要轉換為jquer對象
            count += parseInt($(ele).val()) // 總件數
        })
        // 修改底部總件數
        $('.amount-sum em').text(count)

        // 修改總價格
        $('.p-sum').each(function (i, ele) {
            // 總價格
            money += parseInt($(ele).text().substr(1))
        })
        // 修改底部總價格
        $(".price-sum em").text("￥" + money.toFixed(2));

    }

})

案例-清空刪除購物車

尺寸，位置操作

尺寸

語法	用法
width() / height()	匹配元素寬度和高度，只算width和height
innerWidth() / innerHieght()	匹配元素寬度和高度，包含padding
outerWidth() / outerHeight()	匹配元素寬度和高度，包含padding, border
outerWidth(true) / outerHeight(true)	匹配元素寬度和高度，包含padding，border，margin

如果() 裡面參數為空，返回相對應值，返回數字類型
參數如果為數字，則是修改相對於的值
參數可以不寫單位

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 15px solid red;
            margin: 20px;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div></div>
    <script>
        $(function () {
            console.log($('div').height());  //200
            console.log($('div').width(250));  // 修改值

            console.log($('div').innerWidth());  //220  width + padding

            console.log($('div').outerWidth());  // 250   width + padding + border

            console.log($('div').outerWidth(true))  // 290  width + padding + border + margin

        })

    </script>
</body>

</html>

示例代碼

位置

offset() 設置或者獲取元素偏移量

跟父級別沒關係，相對於文檔的偏移量
有left, top兩個屬性， offset().top 獲取相對於文檔的值，
設置元素偏移量: offser({left: 100, top: 100})

2. position() 獲取元素偏移

相對於定位的父親偏移量坐標
有left, top兩個屬性， offset().top 獲取相對於父親的值
只能獲取

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 100px;
            overflow: hidden;
            position: relative;
        }

        .son {
            width: 150px;
            height: 150px;
            background-color: purple;
            position: absolute;
            left: 10px;
            top: 10px;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        // 相對於文檔
        console.log($('.son').offset());
        console.log($('.son').offset().top)
        //設置
        $('.son').offset({
            top: 200,
            left: 200
        })

        // 相對於父親, 只能獲取，不是設置
        console.log($('.son').position());
        console.log($('.son').position().top);

    </script>
</body>

</html>

示例代碼

3. scrollTop() / scrollLeft() 設置獲取元素捲去的距離

() 為空是獲取，裡面是數字是設置

<!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)

            // 獲取box 距離頂部的距離
            var boxTop = $('.container').offset().top
            console.log(boxTop);

            // 註冊卷去事件
            $(window).scroll(function () {
                // console.log($(document).scrollTop()); // 這個是文檔距離頂部的距離
                // 如果頁面的捲去大於 盒子捲去的距離，顯示返回頂部按鈕
                if ($(document).scrollTop() >= boxTop) {
                    $('.back').fadeIn()
                } else {
                    $('.back').fadeOut()
                }

            })

            // 點擊返回頂部，
            $('.back').click(function () {
                $('html, body').stop().animate({
                    scrollTop: 0
                })
            })


        })
    </script>
</body>

</html>

示例代碼

$(function () {
    // 當我們點擊了小li 此時不需要執行 頁面滾動事件裡面的 li 的背景選擇 添加 current
    // 節流閥  互斥鎖 
    var flag = true;
    // 1.顯示隱藏電梯導航
    var toolTop = $(".recommend").offset().top;
    toggleTool();

    function toggleTool() {
        if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
    }

    $(window).scroll(function () {
        toggleTool();
        // 3. 頁面滾動到某個內容區域，左側電梯導航小li相應添加和刪除current類名


        if (flag) {
            $(".floor .w").each(function (i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    console.log(i);
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();

                }
            })
        }



    });
    // 2. 點擊電梯導航頁面可以滾動到相應內容區域
    $(".fixedtool li").click(function () {
        flag = false;
        console.log($(this).index());
        // 當我們每次點擊小li 就需要計算出頁面要去往的位置 
        // 選出對應索引號的內容區的盒子 計算它的.offset().top
        var current = $(".floor .w").eq($(this).index()).offset().top;
        // 頁面動畫滾動效果
        $("body, html").stop().animate({
            scrollTop: current
        }, function () {
            flag = true;
        });
        // 點擊之後，讓當前的小li 添加current 類名 ，姐妹移除current類名
        $(