jQuery常用API--属性操作

1. 设置或获取元素固有属性值 prop()

所谓元素固有属性指的就是元素本身自带的属性，比如元素里面的href，元素里面的type，里面的src等属性。

    
    跳转至百度
    
    

 由于给标签设置了固有属性title的值，所以鼠标移入后会出现下图效果：

2. 设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性，称之为自定义属性。比如给div 添加index ="2"

2.1 获取属性语法

element.attr("属性")     // 类似原生JS 中的 getAttribute()

2.2 设置属性语法

element.attr("属性", "属性值")    // 类似原生JS 中的 setAttribute() 

2.3 代码体验 

在利用attr("属性", "属性值") 重新设置了index的值后，可以在调试器中看到下图效果：

注意：自定义属性的值无法使用prop()获取，而要使用attr(). 但是attr()不仅可以获取自定义属性，也可以获取固有属性，但是我们一般获取固有属性还是使用prop()。attr()还可以获取H5自定义属性，即data-xxx的属性值。

3. 数据缓存 data()

data() 方法可以在指定的元素上存取数据，并不会修改DOM元素结构（也就是说存放的数据，在DOM树上是看不见的），而且一旦页面刷新，之前存放的数据都将被移除。

3.1 附加数据语法

element.data("name" , "value")     // 给元素附加数据

3.2 获取数据语法

element.data("name")    // 从元素中获取数据 

3.3 代码体验 

注意：

①  data()是给指定元素缓存数据，但是不修改DOM元素结构；

②  data()方法 还可以获取H5自定义属性data-index的值，并且不需要写data- , 且得到的结果是数字型，使用attr()方法得到的 data-index的值是字符串型

4.案例-购物车全选功能

需求：

①  勾上全选则所有商品信息前的复选框勾上，取消全选，所有商品信息前的复选框也相应的取消选中；

② 如果所有商品信息前的复选框都勾上了，则全选按钮勾上，否则全选按钮不勾上

    
    

        
        

             全选
            商品
            单价
            数量
            小计
            操作
        
        
        

            
            

                
                【5本32.9元】经典儿童文学彩图青少年版八十天环游地球中学生语文教学大纲
            
            
￥12.60元
            

                
-
                
                
+
            
            
￥12.60元
            

                删除
            
        
        

            
            

                
                【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童
            
            
￥25.90元
            

                
-
                
                
+
            
            
￥25.90元
            

                删除
            
        
        

            
            

                
                唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍
            
            
￥29.90元
            

                
-
                
                
+
            
            
￥29.90元
            

                删除
            
        
        
        

            

                 全选
                删除选中的商品
                清理购物车
            
            

                已经选1件商品
                总价：￥12.60
                去结算
            
        
    
    
    

案例分析：

① 全选功能思路：里面3个商品信息复选框按钮的选中状态，是与全选按钮保持一致的

② 因为选中状态checked 是复选框的固有属性，所以需要利用prop() 方法来获取和设置

③ 把全选按钮选中状态值赋值给3个商品复选框就可以了；

④ 反过来实现全选按钮选中状态思路：当我们每次点击商品信息复选框时，就进行判断：

⑤ 如果商品信息复选框被选中的个数等于3（也就是商品复选框本身个数）时，就把全选按钮选上，否则不选上

⑥ :checked 选择器，可以用于查找被选中的表单元素