6、jQuery-DOM属性操作

一、概要

常见的属性

语法栗子

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、参数

4、返回值

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

6、示例代码

HTML代码

<div id="d1">
    <p id="p_id" >这个是网站内容</p>
    <input id="name_id" name="name" type="text" label="姓名" >
    <img id="img_id" alt="提示" src="/image/blank.gif" >
    <img id="login_id" alt="logo" title="测试" src="/img/logo" >
    <ul id="ul_id">
        <li id="l1_id" uid="1">1</li>
        <li id="l2_id" uid="2">2</li>
        <li id="l3_id" uid="3">3</li>
    </ul>
</div>

jq代码

$(function () {
  // 改变img的src属性
  $("#logo").attr("src", "img/22.jpg");
  // 获取src属性的值  注意只会获取第一个的值,
  var $attr = $("#logo").attr("src");
  /**
    * 如果要获取多个值 可以直接添加函数
    * 函数的参数1  属性的索引
    * 函数的参数2  属性的值
    * @type {string|any|JQuery<TElement>|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、参数

4、栗子

HTML代码

<div>
    <span id="s1">prop操作针对的是元素(Element对象)的属性，而不是元素节点(HTML文档)的属性</span>
    <form>
        <label for="boy">男</label><input id="boy" disabled="disabled" name="sex" type="checkbox" checked value="1">
        <label for="girl">女</label><input id="girl"  name="sex" type="checkbox" value="2">
    </form>
</div>

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