jQuery 屬性操做

時間 2020-10-06

標籤緩存 this atom spa 3d blog 內存 element input 欄目 JQuery 简体版

原文原文鏈接

jQuery 經常使用屬性操做有三種：prop() / attr() / data() ;緩存

1、元素固有屬性值 prop()

所謂元素固有屬性就是元素自己自帶的屬性，好比 <a> 元素裏面的 href ，好比 <input> 元素裏面的 type。 this

語法atom

注意：prop() 除了普通屬性操做，更適合操做表單屬性：disabled / checked / selected 等。spa

2、元素自定義屬性值 attr()

用戶本身給元素添加的屬性，咱們稱爲自定義屬性。好比給 div 添加 index =「1」。 3d

語法blog

注意：attr() 除了普通屬性操做，更適合操做自定義屬性。（該方法也能夠獲取 H5 自定義屬性）ip

3、數據緩存 data()

data() 方法能夠在指定的元素上存取數據，並不會修改 DOM 元素結構。一旦頁面刷新，以前存放的數據都將被移除。內存

語法element

注意：同時，還能夠讀取 HTML5 自定義屬性 data-index ，獲得的是數字型。input

演示代碼

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

4、案例：購物車案例模塊-全選

1.全選思路：裏面3個小的複選框按鈕（j-checkbox）選中狀態（checked）跟着全選按鈕（checkall）走。

2.由於checked 是複選框的固有屬性，此時咱們須要利用prop()方法獲取和設置該屬性。

3.把全選按鈕狀態賦值給3小複選框就能夠了。

4.當咱們每次點擊小的複選框按鈕，就來判斷：

5.若是小複選框被選中的個數等於3 就應該把全選按鈕選上，不然全選按鈕不選。

6.:checked 選擇器 :checked 查找被選中的表單元素。

 // 全選按鈕改變狀態，小複選框跟着改變
    $(".checkall").change(function () {
        // console.log($(this).prop("checked"));
        $(".j-checkbox,.checkall").prop("checked", $(this).prop('checked'));
   });
    $(".j-checkbox").change(function () {
        // 每次改變小複選框狀態都要判斷小複選框是否全被選中
        // 若是小複選框選中的個數等於全部小複選框個數，則選中全選按鈕 不然不選中
        // .j-checkbox:checked 選中的複選框
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
       } else {
            $(".checkall").prop("checked", false);
       }
   })