jquery中attr和prop的区别

刚开始学习jQuery的萌新们,看到了两个方法:attr和prop;感觉prop()和attr()差不多,也不知道有什么区别,关于它们两个的区别,网上的答案很多。我也是看了别人的技术文档做一下笔记,看到的同学不至于再去其他的地方找了。

attr和prop的区别:

  • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
  • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

举例说明:

百度
这个例子里元素的DOM属性有“href、target和class",这些属性就是元素本身就带有的属性,也是W3C标准里就包含有这几个属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。
删除
这个例子里元素的DOM属性有“href、id和action”,很明显,前两个是固有属性,而后面一个“del”属性是我们自己自定义上去的,元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法。使用prop方法取值和设置属性值时,都会返回undefined值。

再举一例:

未选中
选中
像checkbox,disabled,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。
$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true
如果上面使用attr方法,则会出现:
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked",比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined。

jq提供新的方法“prop”来获取这些属性,就是来解决这个问题的,以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。

你可能感兴趣的:(jquery中attr和prop的区别)