6、jQuery-DOM属性操作

一、概要

常见的属性

属性	版本	说明
attr()	1.0	设置或返回文档节点的属性。
removeAttr()	1.0	移除文档节点的属性。
prop()	1.6	设置或返回DOM元素的属性。
removeProp()	1.6	移除每个匹配元素的属性。
addClass()	1.0	添加CSS类名。
removeClass()	1.0	移除CSS类名。
toggleClass()	1.2	切换CSS类名(存在就删除，不存在就添加)。

语法栗子

1.获取第一个匹配元素class属性
$("selector").attr("class");
2. 设置所有匹配元素的class属性为"code"
$("selector").attr("class", "code");
3.移除所有匹配元素的class属性
$("selector").removeAttr("class");
4.获取第一个匹配元素的checked属性值
$("selector").prop("checked");
5.设置所有匹配元素的checked属性值为true(意即选中所有匹配的复选框或单选框)
$("selector").prop("checked", true);
6.移除所有匹配元素的className属性
$("selector").removeProp("className");

二、attr()

1、作用

函数用于设置或返回当前jQuery对象所匹配的元素节点的属性值。该函数属于jQuery对象(实例)。如果需要删除DOM元素节点的属性，请使用[removeAttr()]函数

2、语法

$("selector").attr(name|properties|key,value|fn)

3、参数

参数	类型	说明	版本
name(常用)	String	属性名称	1.0
properties(常用)	Map	属性的“名/值键值”对象	1.0
key value	String,Object	1. 属性名称， 2. 属性值	1.0
key function(index, attr)	String function	1.属性名称， 2.返回属性值的函数， 第一个参数为当前元素的索引值， 第二个参数为原先的属性值	1.0

4、返回值

1. attr()函数的返回值是任意类型，返回值的类型取决于当前attr()函数执行的是"设置属性"操作还是"读取属性"操作。
2. 如果attr()函数执行的是"设置属性"操作，则返回当前jQuery对象本身；如果是"读取属性"操作，则返回读取到的属性值。
3. 如果当前jQuery对象匹配多个元素，返回属性值时，attr()函数只以其中第一个匹配的元素为准。如果该元素没有指定的属性，则返回undefined。

6、示例代码

HTML代码

    
这个是网站内容
    
    
    
    

        
1
        
2
        
3
    

jq代码

$(function () {
  // 改变img的src属性
  $("#logo").attr("src", "img/22.jpg");
  // 获取src属性的值  注意只会获取第一个的值,
  var $attr = $("#logo").attr("src");
  /**
    * 如果要获取多个值 可以直接添加函数
    * 函数的参数1  属性的索引
    * 函数的参数2  属性的值
    * @type {string|any|JQuery|jQuery|HTMLElement|*}
    */
  var $attr = $("#logo").attr("src", function (index, value) {
    if (value !== undefined) {
      // 获取value的值操作
    }
  });
  //遍历title属性 如果有属性这个属性改变值 没有就设置值
  $("img").attr('alt', function (index, attrValue) {
    return attrValue === undefined ? this.alt = "呵呵" : "还是呵呵";
  });
  //如果使用attr获取返回boolean类型的属性时返回undefined
  var $disabled_attr = $("#i1").attr("disabled");
  var $checked_attr = $("#div").find(":checkbox").attr("checked");
});

三、prop()

1、作用

函数用于设置或返回当前jQuery对象所匹配的元素的属性值。该函数属于jQuery对象(实例)。如果需要删除DOM元素的属性，请使用[removeProp()]函数。

2、语法格式

$("selector").prop(name|properties|key,value|fn)

3、参数

参数	类型	说明	版本
name(常用)	String	属性名称	1.0
properties(常用)	Map	属性的“名/值键值”对象	1.0
key value	String,Object	1. 属性名称， 2. 属性值	1.0
key function(index, attr)	String function	1.属性名称， 2.返回属性值的函数， 第一个参数为当前元素的索引值， 第二个参数为原先的属性值	1.0

4、栗子

HTML代码

    prop操作针对的是元素(Element对象)的属性，而不是元素节点(HTML文档)的属性
    

        男
        女
    

jq代码

$(function () {
  var $sp = $("#s1");
  //prop操作针对的是元素(Element对象)的属性，而不是元素节点(HTML文档)的属性
  $sp.prop("prop1", "test1");
  $sp.attr("attr1", "test2");
  var $girl = $("#girl");
  $girl.change(function () {
    var attr1 = $girl.attr("checked");
    console.log(attr1);
    var attr2 = $girl.prop("checked");
    console.log(attr2);
    console.log($("#boy").prop("disabled"));
    console.log($("#boy").attr("disabled"));
  });
 });

5、与attr主要区别

1. prop()函数针对的是DOM元素(JS Element对象)的属性
2. attr()函数针对的是DOM元素所对应的文档节点的属性
3. 官方建议:具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()