jQuery中prop方法和attr方法区别

attr方法用的是原生js中的getAttribute和setAttribute;

prop方法相当于直接用.或者[]来访问/修改dom元素的属性,

所以它俩的区别相当于问原生js中的getAttribute和直接.来修改属性有什么区别:

 

<input type="text" zs="user">

1.在html中能看到的属性一定会在dom的属性节点中保存,本文称它为节点属性, 这些属性分为html自带的属性(如上面的type),和自定义属性(如上面的zs). 

 元素还有很多属性是html中看不到的, 如offsetLeft, clientTop等,它们保存在元素对象中,是普通属性,不是节点属性.

普通属性和节点属性是独立的,可以同名而不冲突.

 1.1. 直接.或者[]只能获取元素的普通属性; 

1.2.  getAttribute方法只能获取节点属性.

 

2.如果不在html写好属性, 而用js设置属性, 也有两种方式: 直接.设置和使用setAttribute方法:

2.1.用.或[]设置

     2.1.1 对于html中标签本身自带的属性(如img标签的src属性, a标签的href属性等),会设置成节点属性,在html中看得见.

              但如果不是html中标签自带的,而是自定义属性, 则这些属性会成为普通属性, 在html中看不见,但我们一般不希望这样.

2.2.  用setAttribute设置

      2.2.1 无论是不是html自带的属性, 都会被设置成节点属性,在html中看得见.

 

对于html自带的布尔属性,如checked, disabled等, 直接.或[]才能得到true/false真实的布尔值, 用jQuery的prop方法也是一样;

但是attr方法不能正常得到布尔属性的布尔值,它返回的是属性名,也就是attr("checked") = "checked", 所以操作布尔属性要用prop方法;

 

总结: 一般来说,我们自定义的属性希望能在html中也能看得见, 所以对于非html自带的属性, 用attr方法操作;

          对于html自带的属性,尤其是布尔属性, 要用prop方法操作.

 

补充:

h5之前, 我们有时希望在html元素上绑定一些信息, 可以用setAttribute直接绑定到标签上,但这并不是标准做法.

h5之后,提供了一种新解决方法:  dataset. 在html标签中,自定义属性名加上data-前缀都是合法的,我们可以给这些属性设置值.但是在js中获取这些属性时,不需要带data-前缀.

html中自定义的的属性名不要出现大写字母, 用连字符-连起来, 要在js中获取这些属性的话,要去掉data-前缀和中间连字符,直接用驼峰命名

以下引用自《javascript权威指南》: