知识回顾

学习jQuery属性方法前，先回顾一些概念：

什么是属性？如何操作属性？

属性：属性就是对象中保存的变量；

操作属性：

var obj = {};
obj.name = 'peanut';
// 或
obj["name"] = "peanut";

什么是属性节点？如何操作属性节点？

属性节点：在编写html时为元素添加的属性就是属性节点，相应地DOM元素的所有属性节点全部保存在attributes集合中；

操作属性节点：

  • DOMEle.setAttribute(attr,value): 设置属性；
  • DOMEle.getAttribute(attr): 获取属性值；
  • DOMEle.removeAttribute(attr): 删除属性；

属性和属性节点的区别？

所有的对象都有属性，但是属性节点是DOM对象所特有的；

jquery中的属性方法

1.attr()方法和removeAttr()方法

attr()方法：获取或设置属性值；

  • 只给一个参数：获取匹配的元素集合中的第一个元素的属性值；
  • 给两个参数：设置匹配元素的属性和属性值（设置多个属性时，只需要字符串之间空格隔开）；

注意：获取属性值时，如果有多个元素匹配，只返回元素集合中的第一个元素对应的属性值；设置属性值时，设置的是所有匹配元素的属性值；

语法：

.attr(name|properties|key,value|fn);

代码演示：

<img name="img1">
<img name="img2">
<script>
    // 一个参数：表示获取指定属性的值
    var res1 = $('img').attr('name');
    console.log(res1);//img1，在有多个元素匹配时，只返回符合匹配条件的元素集合中的第一个元素的属性值
    
    // 两个参数：设置属性值，不存在就新设置一个属性，存在的话就修改属性值
    $('img').attr('src','https://picsum.photos/200/300');//为所有元素设置src属性
    $('img').attr('title',function(){//将title属性值设置为src的值
        return this.src;
    })
</script>

reniveAttr(name)方法：从匹配的元素中删除属性(删除所有匹配元素的属性)；

语法：

//name：要删除的属性名
.removeAttr(name);

// 以上文的img元素为例
// 删除src属性
$('img').removeAttr('src');

2.prop()方法和removeProp()方法

prop(name|properties|key,value|fn)方法：获取在匹配的元素集中的第一个元素的属性值，或设置匹配元素集合中元素的属性值；

  • 与attr方法一样，一个参数时表示获取属性值，两个参数时设置属性和属性值；

removeProp(name)方法：用来删除由.prop()方法设置的属性集；

  • 特点与removeAttr()方法一样；

prop方法与attr方法的区别

  • 对具有true、false两个属性值的属性的返回情况不同；
  • prop方法不仅能操作属性，还能操作属性节点（Attributes集合中的属性）；
  • 因此，在操作属性节点时，对checked、disabled、selected等属性，使用prop方法更好；
  • 如下代码所示：
<input type="checkbox" checked>
<script>
    var res1 = $('input').attr('checked');
    var res2 = $('input').prop('checked');
    console.log(res1);// checked
    console.log(res2);// true
    // 在读取不存在的属性时
    var res3 = $('input').attr('disabled');
    var res4 = $('input').prop('disabled');
    console.log(res3);// undefined
    console.log(res4);// false
</script>
  • 显而易见，在对只有true和false两个属性值的属性进行操作时，prop方法是最合适的；