jquery中attr和prop的区别

505 阅读1分钟

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

定义

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

代码演示

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

	<span class="sp" name="aspan">我是一个span标签</span>
	<input type="checkbox" checked="checked" name='handsome' class="ainput" aname='aname' />
		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方法对于元素中已有的属性处理更好,例如获取inputchecked状态。同理removeAttrremoveProp也一样,可以试一试效果是怎样的

如果你觉得我写得还有点意思或者对你有帮助,麻烦点个赞或者关注公众号 ProgrammerHe ,感谢阅读与关注,谢谢!