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 相关文章推荐
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
js数组的操作指南
Dec 28 Javascript
JavaScript构建自己的对象示例
Nov 29 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
jQuery复合事件用法示例
Jun 10 jQuery
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
PHP连接access数据库
2008/03/27 PHP
php中的三元运算符使用说明
2011/07/03 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
精通Javascript系列之数值计算
2011/06/07 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
Python线程中对join方法的运用的教程
2015/04/09 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
python实现多进程通信实例分析
2019/09/01 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
python中删除某个元素的方法解析
2019/11/05 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
python实现处理mysql结果输出方式
2020/04/09 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
试述DBMS的主要功能
2016/11/13 面试题
工商企业管理应届生求职信
2014/05/04 职场文书
齐云山导游词
2015/02/06 职场文书