jquery中attr和prop的区别

简介: 关于它们两个的区别,网上的答案很多。这里谈谈我的心得,我的心得很简单: •对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。•对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

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

 •对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。

•对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

 

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

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

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

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

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

再举一个例子:

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

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

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

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

?
1
2
$( "#chk1" ).attr( "checked" ) == undefined
$( "#chk2" ).attr( "checked" ) == "checked"
相关文章
|
7月前
|
JavaScript 前端开发 API
jQuery的attr()方法和JavaScript的属性操作
jQuery的attr()方法和JavaScript的属性操作
44 0
|
25天前
|
JavaScript 前端开发
JQuery和JS的区别有哪些?
JQuery和JS的区别有哪些?
14 0
|
1月前
|
JavaScript 前端开发
jQuery 和 Zepto 的区别? 各自的使用场景?
jQuery 和 Zepto 的区别? 各自的使用场景?
11 1
|
4月前
|
JavaScript 前端开发 API
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
42 0
|
4月前
|
JavaScript 前端开发
|
5月前
|
JavaScript 前端开发 开发者
vue和jQuery有什么区别
vue和jQuery有什么区别
80 0
|
5月前
|
JavaScript 前端开发 API
Vue、jquery和angular之间区别
Vue、jquery和angular之间区别
39 2
|
5月前
|
JavaScript
jQuery学习(四)— jQuery的ready事件和原生JS的load事件的区别
jQuery学习(四)— jQuery的ready事件和原生JS的load事件的区别
|
5月前
|
JavaScript
jQuery学习(一)—jQuery应用步骤以及ready事件和load事件的区别
jQuery学习(一)—jQuery应用步骤以及ready事件和load事件的区别
|
6月前
|
JavaScript
jQuery的empty、remove、detach区别
jQuery的empty、remove、detach区别