欢迎光临
这是我的个人博客

Jquery 中 attr和 prop的区别

在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。

关于它们两个的区别,网上的答案很多。这里谈谈我的心得,我的心得很简单:

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

上面的描述也许有点模糊,举几个例子就知道了。 

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

 这个例子里<a>元素的DOM属性有“href、target和class”,这些属性就是<a>元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。

<a href="#" id="link1" action="delete">删除</a>

这个例子里<a>元素的DOM属性有“href、id和action”,很明显,前两个是固有属性,而后面一个“action”属性是我们自己自定义上去的,<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法。使用prop方法取值和设置属性值时,都会返回undefined值。

 

再举一个例子:

<input id="chk1" type="checkbox" />是否可见 <input id="chk2" type="checkbox" checked="checked" />是否可见

像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false $("#chk2").prop("checked") == true

如果上面使用attr方法,则会出现:

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"


一、自定义html标签属性

对于html文件中的html标签,可以自定义属性,如:

<a href=”#” id=”link1″ action=”delete”>删除</a>

上面的标签a并没有action属性(也就是说w3c定义中没有给a标签定义action属性),但有href ,id 属性。

但我们一样可以给它加自己需要的属性,如这里的action。这个在很多场合下还是有用的,特别是当需要给标签来设置某些特性时。

我们看到很多的框架,如bootstrap都给html标签定了各种自定义属性。

二、获取html标签的属性

方法一:利用dom对象来获取

如: $(“#link1”)[0].id  ,

或   $(“#link1”)[0][“id”] 

注意:对于自定义属性,无法利用dom对象来获取,比如 $(“#link1”)[0].action 是获取不到值的。可以利用下面介绍的attr方法来获取。

方法二:利用jquery对象的 attr 或 prop方法

jquery的prop方法是jquery1.6版本引入的,那什么时候使用 prop方法,什么时候使用attr方法呢?

这个还真有些区别。经过实际的测试,发现如下使用比较好。

对于标签的固有属性(也就是说w3c给该标签定义的属性),建议用prop方法。 如  var id = $(“#link1”).prop(“id”); 获取标签a的id属性。

对于上述在html文件中静态添加的自定义属性,建议用attr方法。如  var action = $(“#link1”).attr(“action”); 获取标签a的自定义action属性。因为经过测试发现,对于这种自定义属性,调用prop方法无法获取。如果想深入研究下,建议看下jquery的源代码就清楚了。

三、动态设置html标签的属性

我们知道,html文件的每个标签,在浏览器内存中实际对应一个dom对象。html页面开发中的Js代码实际就是对dom对象的处理。

这样我们可以利用js代码动态的来给dom对象设置属性。

也有两种方法:

第一种方法时,获取dom对象(注意不是jquery对象),如同给普通的js对象一样,给其添加或设置属性。

第二种方法,调用jquery对象的方法,给其对应的dom对象添加和设置属性。

经过测试我们发现,如果要动态添加一个新的属性,需要利用prop方法,使用attr方法是无效的。如 $(“#link1”).prop(“mydata”,”demo”)

如果该属性是通过在html文件中静态添加的自定义的属性,则修改其值时只能用attr方法。

如果该标签已经有某个静态添加的自定义的属性,这时用prop方法添加一个属性,则不会影响原来的静态属性。但原来的静态属性只能用attr方法去读写,而用prop方法添加的属性只能用prop方法去读写。

可以看出,attr方法和prop方法还是有很多区别的。

对于自定义属性,静态设置和动态设置有较大差别,动态添加自定义属性只能用prop方法(包括添加、读取和修改),而静态自定义属性后续的读取和修改只能用attr方法。并且静态设置的自定义属性和动态设置的自定义属性是互不干涉的。对于标签的固定属性,读写都应该用prop方法

四、动态删除html元素的属性

对于静态自定义的html属性,可以利用jquery对象的 removeAttr 方法来删除属性,如$(“#link1”).removeAttr(“action”); 就删除了action自定义属性。

如果是利用prop方法动态添加的自定义属性,则需要调用jquery的 removeProp方法来删除。

对于固定属性,则也需要调用jquery的 removeProp方法来删除。

 

赞(2)
未经允许不得转载:好好网 » Jquery 中 attr和 prop的区别

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址