VOLANTIS 2.6.6

前言：我们都知道attr和prop都有获取和改变元素内属性值的能力，但他们之间有什么区别吗？

定义

1. `attribute`（特性），是我们赋予某个事物的特质或对象,而`attribute`是我们通过设置HTML标签而给之赋予的特性。
 2. `property`（属性），是早已存在的不需要外界赋予的特质,`property`是DOM对象自身就拥有的属性。

代码演示

如图，写了两个标签，一个span和input标签。他们都有各自的属性。

1
2
<span class="sp" name="aspan">我是一个span标签</span>
<input type="checkbox" checked="checked" name='handsome' class="ainput" aname='aname' />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
console.log($('.sp').prop('class')); 
console.log($('.sp').attr('class'));

console.log("----------------------")

console.log($('.sp').prop('name')) //undefined
console.log($('.sp').attr('name')) // aspan

console.log('------------------------')

console.log($('.ainput').prop('checked')) //true
console.log($('.ainput').attr('checked')) //checked

console.log("-----------------------")

console.log($('.ainput').prop('aname')); //undefined
console.log($('.ainput').attr('aname')); //aname

总结

我们可以发现对于元素自身添加的属性attr处理更加好，例如添加的aname属性prop方法会显示undefined。而prop方法对于元素中已有的属性处理更好，例如获取input框checked状态。同理removeAttr和removeProp也一样，可以试一试效果是怎样的

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：https://fengzehe.github.io/blog/2020/08/12/attrAndprop/

评论