jQueryattr()与prop()之间的区别

attr()

Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
获取匹配的元素集合中第一个元素的attribute,或者为每个选定的元素添加一个至多个attribute

prop()

Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element.
获取匹配的元素集合中第一个元素的property,或者为每个选定的元素添加一个至多个property

可以观察到,两者之间的功能是十分相近的,只是两者操作的对象不同。

这样,我们将问题缩小为attribute与property之间的区别。

attribute与propery都有属性的意思,为了以示区分,我们约定命名attribute为属性,命名property为特性

先说attribute

在javascript中有getAttribute(),专门用来获取节点的属性值。

节点的属性值,我们指的是<img id=‘test‘ src=‘test.jpg‘>中的src的值

<img id=‘test‘ src=‘test.jpg‘>
    <script type=‘text/javascript‘>
        var image = document.getElementById(‘test‘);
        console.log(image.getAttribute(‘src‘));
    </script>

以及setAttribute(),设置节点的属性值。

<img id=‘test‘ src=‘test.jpg‘>
    <script type=‘text/javascript‘>
        var image = document.getElementById(‘test‘);
        image.setAttribute(‘src‘, ‘another.jpg‘);
    </script>

可以看到,节点的属性值发生了改变。通过setAttribute设置的属性值改变的就是节点的属性值。

attr()的功能便是结合javascript中的getAttribute()与setAttribut(),操作的对象是节点的属性值。

再说property

property是DOM元素的特性,和平常使用对象的方法相同,可以通过对象.特性获取对象的特性值,也可以通过对象.特性=特性值的方法来设置对象的特性值。

<img id=‘test‘ src=‘test.jpg‘>
    <script type=‘text/javascript‘>
        var image = document.getElementById(‘test‘);
        console.log(image.src);
    </script>

可以看到获取了DOM元素的特性值。虽然与节点的属性值内容所指相同,但是形式上还是有区别的。

再看看设置DOM元素特性值:

<img id=‘test‘ src=‘test.jpg‘>
    <script type=‘text/javascript‘>
        var image = document.getElementById(‘test‘);
        image.src=‘another.jpg‘;
    </script>

发现改变了DOM元素的特性值,节点元素的属性值随着发生了改变。再通过getAttribute()方法,看是否能获取刚刚设定的特性值。

<img id=‘test‘ src=‘test.jpg‘>
    <script type=‘text/javascript‘>
        var image = document.getElementById(‘test‘);
        image.src=‘another.jpg‘;
        console.log(img.getAttribute(‘src‘));
    </script>

证实改变DOM的特性值,元素的属性值也同样发生了改变。

难道说attribute与property是一样的吗?

其实不尽然,真实情况是attribute与property引用了相同的数据来源。

1. 于build-in属性,attribute和property共享数据,attribute更改了会对property造成影响,反之亦然,但是两者的自定义属性是独立的数据,即使name一样,也互不影响,看起来是下面这张图,但是IE6、7没有作区分,依然共享自定义属性数据。

2. 并不是所有的attribute与对应的property名字都一致。比如attribute中的class,在property中对应的名称为className。

3. 对于值是true/false的property,类似于input的checked等,attribute取得值是HTML文档里面的值(checked),property是取得计算结果(true/false),property改变并不影响attribute字面量,但attribute改变会影响property计算。

4. 对于一些和路径相关的属性,两者取得值也不尽相同,但是同样attribute取得是字面量,property取得是计算后的完整路径,就像上面例子中src的返回值。

如何选择

总体来说,对于内建属性使用prop(),自定义属性时使用attr(),另外的参数可以参照下面这张表。

时间: 2024-08-05 12:05:47

jQueryattr()与prop()之间的区别的相关文章

jquery里的attr()方法和prop()方法的区别

在jq的高版本里出现了prop()方法,那么attr()和prop()的区别在哪呢?这两者分别在什么情况用呢? 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. eg:<a href="http://www.baidu.com" target="_blank">哈哈</a> 像href.target这样的属性是html元素本身就带有的固有属性,在处理时

jquery之prop和attr区别

最近用jquery比较多,处理属性的时候发现之前并没有注意到的问题. 平时处理属性都用attr,比如获取checkbox的checked值 或者设置checkbox的checked的值 <input type="checkbox" id="allCheck"> $('#allCheck').attr('checked') $('#allCheck').attr('checked','checked') //发现选项并未被选中,只是在有些情况下发生 转自:

外发外协外包三者之间的区别与联系

1.应当贯彻顾客为中心原则,通过建立体系来控制过程,确保产品质量.不要化精力在符合标准要求上.如果您 的目标.产品的要求不切合顾客要求的话,就是符合了ISO 9001标准要求,不能满足顾客要求的,符合顾客要求了,顾客满意了,不注意质量成本,经济效益,也就不一定能赚到钱的. 2.7.4条采购要求是,如果您从质量管理体系外得到各种影响产品要求符合性的资源(过程也作为一种资源)的话,就必须对这些产品或者活动(也就是过程) 加以控制的."采购"英文是purchasing,"外包过程&

socket,tcp,http三者之间的区别和原理

http.TCP/IP协议与socket之间的区别下面的图表试图显示不同的TCP/IP和其他的协议在最初OSI模型中的位置: 7 应用层 例如HTTP.SMTP.SNMP.FTP.Telnet.SIP.SSH.NFS.RTSP.XMPP.Whois.ENRP 6 表示层 例如XDR.ASN.1.SMB.AFP.NCP 5 会话层 例如ASAP.TLS.SSH.ISO 8327 / CCITT X.225.RPC.NetBIOS.ASP.Winsock.BSD sockets 4 传输层 例如TC

Android培训准备资料之UI一些相似控件和控件一些相似属性之间的区别

这一篇博客主要收集五大布局中的一些相似控件和控件一些相似属性之间的区别 ImageView ImageButton Button 三者有啥区别? (1)Button继承自TextView,ImageView继承自View,ImageButton继承自ImageView                                              (2)Button支持android:text属性,而ImageButton和ImageView不支持,但是ImageView和ImageB

JavaScript中this和$(this)之间的区别

jQuery中this和$(this)之间的区别: this返回的是当前对象的html对象,而$(this)返回的是当前对象的jQuery对象 举个正确的Demo实例: $("#textbox").hover( function() { this.title = "Test"; }, fucntion() { this.title = "OK”; } ); 以上的this为html元素即元素textbox,该元素有title属性,因此以上的程序没有错误.如

mysql 中execute、executeQuery和executeUpdate之间的区别

在用纯JSP做一个页面报警功能的时候习惯性的用executeQuery来执行SQL语句,结果执行update时就遇到问题,语句能执行,但返回结果出现问题,另外还忽略了executeUpdate的返回值不是结果集ResultSet,而是数值!特收藏如下一篇文章: JDBCTM中Statement接口提供的execute.executeQuery和executeUpdate之间的区别 Statement 接口提供了三种执行 SQL 语句的方法:executeQuery.executeUpdate 和

VS中生成、清理项目、调试、开始执行(不调试)、Debug 和 Release等之间的区别

一.生成和重新生成 "生成"的时候只对你改动过的文件重新生成没有改动过的文件不会重新生成: "重新生成"是对所有的文件都重新生成. 以cpp为例当你只改动某些.cpp之类的文件的时候可以用生成省了编译没有改动的那些些文件的时间:但是改动了某些.h之类的文件最好用重新生成,因为有可能能有些文件包含.h文件也需要重新编译 选择生成或生成解决方案,将只编译自上次生成以来更改过的那些些项目文件和组件 注意 如果解决方案中包括多个项目,则生成命令将变成生成解决方案. 选择重新

java中的装饰设计模式,浅谈与继承之间的区别

最初接触装饰设计模式,一直搞不懂这么做的意义是什么,看了网上很多的资料,对于与继承的区别并没有很清楚的分析,直到看到这篇博客:http://www.cnblogs.com/rookieFly-tdiitd/p/4914593.html 这篇就很清楚的解释了装饰设计模式与继承之间的区别.下面是我自己的一些理解. 一.概念 装饰模式又称为包装模式,动态地给对象添加功能,是继承关系的一种替代方法. 二.选择 子类通过继承也能增加功能,但是关于装饰模式与继承之间如何选择,请看下面的例子. 假设:煎饼是父