jQuery的attr与prop使用介绍


Posted in Javascript onOctober 10, 2013

attribute与property

attribute和property都可以翻译为属性,为了以示区别,通常把这两个单词翻译为属性与特性。

<div id="test">Click Here</div>

上面这段HTML语句中有三个节点,分别是Element “div”、attribute “id”、Text “click here”,我们最常见的attribute正式指的attribute类型节点,在JavaScript有专门处理attribute的函数 .getAttribute(name) / setAttribute(name,value)。当然attribute不只是我们能够在HTML文档上看到的这几个,我们可以自定义attributed加到DOM节点中

<div id="test">123</div>    <script type="text/javascript">
        var t=document.getElementById('test');
        t.setAttribute('class','active');
        t.setAttribute('customizedAttr','customized');
    </script>

这样可以div被修改为

<div id="test" class="active" customizedattr="customized">123</div>

通过方法 setAttribute设置的attribute最终都会反映到元素的attribute类型的节点中

property是DOM对象的字段,跟我们平常使用的一些对象一样,包含很多字段,这些字段就是property,取值或者设置值和普通字段一样通过”对象.字段“的方式。

看起来attribute和property应该没有什么关系才对,怎么会。。。attribute和property容易混?x是因为很多attribute节点还有一个相对应的property属性,比如上面div的”id“ attribute 同样可以用t.id取到(实际上绝大部分人都是这样获取的),通过property更改id后,用getAttibute获取的id是更新后的id。

t.id='test1';
console.log(t.getAttribute('id'));//test1

同样我们也可以自定义property

t.customizedProp='customized prop';

区别

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

jQuery的attr与prop使用介绍

2. 并不是所有的attribute与对应的property名字都一致,比如刚才使用的attribute 的class属性,使用property操作的时候应该是这样className

t.className='active2';

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

<input id="test3" type="checkbox"/>
var t=document.getElementById('test3');
        console.log(t.getAttribute('checked'));//null
        console.log(t.checked);//false;        t.setAttribute('checked','checked');
        console.log(t.getAttribute('checked'));//checked
        console.log(t.checked);//true
        t.checked=false;
        console.log(t.getAttribute('checked'));//checked
        console.log(t.checked);//false

4. 对于一些和路径相关的属性,两者取得值也不尽相同,但是同样attribute取得是字面量,property取得是计算后的完整路径

<a id="test4" href="#">Click</a>

var t=document.getElementById('test4');
        console.log(t.getAttribute('href'));//#
        console.log(t.href);//file:///C:/Users/bsun/Desktop/ss/anonymous.html#

关于浏览器(IE)造成的兼容性问题可以看看IE 混淆了 DOM 对象属性(property)及 HTML 标签属性(attribute),造成了对 setAttribute、getAttribute 的不正确实现

attr和prop

相信看完上面内容,大家就明白为什么jQuery要添加prop方法了,在jQuery API中也有专门解释

Attributes VS. Properties

在一些特殊的情况下,attributes和properties的区别非常大。在jQuery1.6之前,.attr()方法在获取一些attributes的时候使用了property值,这样会导致一些不一致的行为。在jQuery1.6中,.prop()方法提供了一中明确的获取property值得方式,这样.attr()方法仅返回attributes。

比如,selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和defaultSelected应该使用.prop()方法获取/设置值。 在jQuery1.6之前这些不属于attribute的property需要用.attr()方法获取。这几个并没有相应的attibute,只有property。

关于布尔类型 attributes,比如一个这样的HTML标签,它在JavaScript中变量名为elem

<input type="checkbox" checked="checked" />

elem.checked true (Boolean) Will change with checkbox state
$( elem ).prop( "checked" ) true (Boolean) Will change with checkbox state
elem.getAttribute( "checked" ) "checked" (String) Initial state of the checkbox; does not change
$( elem ).attr( "checked" ) (1.6) "checked" (String) Initial state of the checkbox; does not change
$( elem ).attr( "checked" ) (1.6.1+) "checked" (String) Will change with checkbox state
$( elem ).attr( "checked" ) (pre-1.6) true (Boolean) Changed with checkbox state

根据W3C forms specification,checked属性是一个布尔值,这就意味着只要checked属性在HTML中表现出来了,那么相应的property就应该是true,即使checked没有值,这点儿对其它布尔类型的属性一样适用。

然而关于checked 属性需要记住的最重要的一点是:它和checked property并不是一致的。实际上这个attribute和defaultChecked property一致,而且只应该用来设置checkbox的初始值。checked attribute并不随着checkedbox的状态而改变,但是checked property却跟着变。因此浏览器兼容的判断checkebox是否被选中应该使用property

if ( elem.checked ) 
if ( $( elem ).prop( "checked" ) ) 
if ( $( elem ).is( ":checked" ) )

这对其它一些类似于selected、value这样的动态attribute也适用。

在IE9之前版本中,如果property没有在DOM元素被移除之前删除,使用.prop()方法设置DOM元素property(简单类型除外:number、string、boolean)的值会导致内存泄露。为了安全的设置DOM对象的值,避免内存泄露,可以使用.data()方法。

使用场景

其实明白了上面讲的内容,什么时候该使用.attr()什么时候该使用 .prop()就很清楚了,不过还是传一张坊间很流行的图

jQuery的attr与prop使用介绍

Javascript 相关文章推荐
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
JavaScript 数组详解
Oct 10 #Javascript
js导出table数据到excel即导出为EXCEL文档的方法
Oct 10 #Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 #Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 #Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 #Javascript
js切换光标示例代码
Oct 10 #Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 #Javascript
You might like
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
Python向日志输出中添加上下文信息
2017/05/24 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
pytorch 模型可视化的例子
2019/08/17 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
深入了解Python 变量作用域
2020/07/24 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
设计部经理的岗位职责
2013/11/16 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
小学班主任寄语大全
2014/04/04 职场文书
大学毕业寄语大全
2014/04/10 职场文书
创建青年文明号材料
2014/05/09 职场文书
协会周年庆活动方案
2014/08/26 职场文书
2019年工作总结范文
2019/05/21 职场文书
Python函数式编程中itertools模块详解
2021/09/15 Python
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang