浅谈attr() 和prop() 函数

作为数聚传媒的一名前端开发人员,会经常使用到jQuery,但是,在使用jQuery中的函数开发效果的时候,总会出现一些细微的小问题,今天我们就来谈谈,jQuery中一些相似却不同的函数的使用方法。以下将会通过attr()和prop()为例,进行详细解析。

很明显,"attr"和"prop"分别是单词"attribute"和"property"的缩写,并且它们均表示"属性"的意思。attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。但不得不说的是,在jQuery中,"attribute"和"property"却是两个不同的概念。attribute表示HTML文档节点的属性,property表示JS对象的属性。比较如下:

1、应用版本不同

attr()是jQuery 1.0版本就有的函数,prop()是jQuery 1.6版本新增的函数。毫无疑问,在1.6之前,你只能使用attr()函数;1.6及以后版本,你可以根据实际需要选择对应的函数。

在jQuery 1.6之前, attr()函数不仅承担了attribute的设置和获取工作,还同时承担了property的设置和获取工作。例如:在jQuery 1.6之前,attr()也可以设置或获取TagName、ClassName、NodeName、NodeType等DOM元素的property。

直到jQuery 1.6新增prop()函数,并用来承担property的设置或获取工作之后,attr()才只用来负责attribute的设置和获取工作。

2、操作对象不同

在jQuery的底层实现中,函数attr()和prop()的功能都是通过JS原生的Element对象实现的。

attr( )函数主要依赖的是Element对象的getAttribute()和setAttribute()两个方法。

prop()函数主要依赖的则是JS中原生的对象属性获取和设置方式。

jQuery对这些操作方式进行了封装,使我们操作起来更加方便(比如:以对象形式同时设置多个属性),并且实现了跨浏览器兼容。

在jQuery中,prop()函数的设计目标是用于设置或获取指定DOM元素(指的是JS对象,Element类型)上的属性(property);attr()函数的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。

例如:

<!-- 这里的id、class、data_id均是该元素文档节点的attribute -->

<div id="message" data_id="123"></div>

<script type="text/javascript">

// 这里的name、age、url均是obj的property

var obj = { name: "CodePlayer", age: 18, url: "http://www.365mini.com/" };

</script>

此外,需要注意的是,虽然prop()针对的是DOM元素的property,而不是元素节点的attribute,但是DOM元素某些属性的更改也会影响到元素节点上对应的属性。例如,property的id对应attribute的“id”,property的className对应attribute的“class”。

3、用于设置的属性值类型不同

由于attr()函数操作的是文档节点的属性,因此设置的属性值只能是String型(字符串类型),如果不是字符串类型,也会调用其toString()方法,将其转为字符串类型。

prop()函数操作的是JS对象的属性,因此设置的属性值可以为包括数组和对象在内的任意类型。

4、其他细节问题

对于表单元素的"checked"、"selected"、"disabled"等属性,在jQuery 1.6之前,attr()获取这些属性的返回值为Boolean类型:如果被选中(或禁用)就返回true,否则返回false。

但是从1.6开始,使用attr()获取这些属性的返回值为String类型,如果被选中(或禁用)就返回"checked"、"selected"或"disabled",否则(即元素节点没有该属性)返回undefined。并且,在某些版本中,这些属性值表示文档加载时的初始状态值,即使之后更改了这些元素的选中(或禁用)状态,对应的属性值也不会发生改变。

因为jQuery认为:attribute的"checked"、"selected"、"disabled"就是表示该属性初始状态的值,property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。因此,在jQuery 1.6及以后版本中,请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它能够用prop()实现的操作,也尽量使用prop()函数。

以上,就是对attr和prop进行的简单对比。

其实,不管是JavaScript 、Jquery还是其他技术,都存在像这样的小问题,只有通过项目实战,不断的进行对比、总结,这样才能不断的提高。

数聚传媒力求高质量高效率完成工作,而作为数聚传媒的一名前端开发人员,更需要不断提升自身技能,以便高效快速的完成项目,达到公司要求。

时间: 2024-10-28 09:21:52

浅谈attr() 和prop() 函数的相关文章

浅谈attr()和prop()

刚开始学JQ的时候 ,看到attr()和prop()这两个属性的时候感觉很迷茫,而且配合官方给出的推荐使用图: prop()可以做到的attr()完全都可以,而且做不到的attr()也可以做到.何用?  然后我就把它丢掉了...直到.. 今天切一个页面,在checkbox判断的方面上除了问题,就是通过jquery设置选中的时候,发现checked和disabled属性已经设置上去了,而且一旦手动点掉checked或者选中的时候,就无法再次做判断 if($('#d1').attr('disable

浅谈reverse_iterator的base()函数

非原创,原文链接:http://blog.csdn.net/shuchao/article/details/3705252 调用reverse_iterator的base成员函数可以产生"对应的"iterator,但这句话有些辞不达意.举个例子,看一下这段代码,我们首先把从数字1-5放进一个vector中,然后产生一个指向3的reverse_iterator,并且通过reverse_iterator的base初始化一个iterator: vector<int> v; v.r

浅谈jquery中prop()和attr()

我们都知道,一般在jquery中设置属性时要用到attr()方法,现在我们有一个效果,点击按钮切换复选框的选中状态,下面贴出html代码: <input type="checkbox" id="check"> <label>复选框</label> <input type="button" value="切换" id="btn"> js代码: <scrip

浅谈Kotlin中的函数

本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/UV23Uw_969oVhiOdo4ZKAw作者:连凌能 Kotlin,已经被Android官方宣布 kotlin first 的存在,去翻 Android 官方文档的时候,发现提供的示例代码已经变成了 Kotlin.Kotlin的务实作风,提供了很多特性帮助开发者减少冗余代码的编写,可以提高效率,也能减少异常. 本文简单谈下Kotlin中的函数,包括表达式函数体,命名参数,默认参数,顶层函数

浅谈DB2在线分析处理函数

最近碰到一个测试需求,使用到了在线分析处理(OLAP),现总结记录一下,也希望能帮到有相关问题的朋友. 1. 测试环境是DB2,通过ETL(数据抽取,数据转换,数据加载)技术将数据源数据加载到目标数据仓库. 2. 需求大概意思:验证能否将包含制定商品编码的订单从数据源加载到目标数据库. 3. 目标数据来源于7个不同的应用数据库,每个应用数据库都存储商品编码组相应的订单,其中的50个商品编码相关的订单需要加载到目标仓库. 分析需求后我们得到测试的方法: 1. 在源数据库查询样本订单数据,取得其中所

浅谈一类积性函数的前缀和(转载)

本文转自:http://blog.csdn.net/skywalkert/article/details/50500009 另外,莫比乌斯反演和杜教筛其他可转到 http://blog.leanote.com/post/totziens/%E8%8E%AB%E6%AF%94%E4%B9%8C%E6%96%AF%E5%8F%8D%E6%BC%94 写在前面 笔者在刷题过程中遇到一些求积性函数前缀和的问题,其中有一类问题需要在低于线性时间复杂度的算法,今天就来浅析一下这类问题的求解方法,当作以后讲课

浅谈 php 采用curl 函数库获取网页 cookie 和 带着cookie去访问 网页的方法!!!!

由于近段时间帮朋友开发一个能够查询正方教务系统的微信公众平台号.有所收获.这里总结下个人经验. 开讲前,先吐槽一下新浪云服务器,一个程序里的   同一个函数  在PC测试可以正常运行,在它那里就会挂的现象. 老样子,我将在代码里注释清楚.使用下面的函数,将会获得两种形式的 cookie,一种保存在文件中,一种直接以变量的形式返回, 经验提示: 有时候,在不同的代码运行环境中,带着文件cookie 去访问会成功,而变量却失败,有时候却想法.不过, 目前,这两种方法总有一种会成功. 1 functi

浅谈swift中的函数类型和闭包

在讲swift的函数类型之前,我们先回忆一下我们以前学的定义一个swift的函数 func add(a: Int,b: Int) -> Int { return a + b } 好了, 我们开始我们函数类型的讲解 上面这个函数的类型是(Int ,Int)->Int 使用函数类型 我们都知道, 在swift中 , 函数类型就像其他数据类型一样,也就意味着我们可以给一个函数的常量或者是变量赋值 var f2: (Int,Int)-> Int = add f2(2,3) //结果为5 好了,接

浅谈JavaScript中的函数问题

前面的话:JavaScript可运行在所有主要平台的主流浏览器上,也可运行在每一个主流操作系统的服务器端上.所以呢,要想成为一名优秀的全栈工程师,必须懂得JavaScript语言.这是我整理的JS的部分函数问题,供大家参考借阅,有不妥的地方也请多多指教. 1.函数的三要素    1.1 函数的功能   1.2 函数的参数 a. 形参——定义函数的时候,没有实际的值,给实参占位 b. 实参——调用函数的时候,有实际的值: c. 当调用函数的时候会把实参复制一份传递给函数 d. 函数调用的时候,实参