jquery中的attr()和prop()

jQuery1.6中新添加了一个prop方法,看起来和用起来都和attr方法一样,这两个方法有什么区别呢?这要从HTMl 的attribute与property区别说起,attr与prop正是这两个东西的缩写。

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容易混倄是因为很多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没有作区分,依然共享自定义属性数据

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。

比如,selectedIndextagNamenodeNamenodeTypeownerDocumentdefaultChecked, 和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()就很清楚了,不过还是传一张坊间很流行的图

时间: 2024-10-24 23:17:31

jquery中的attr()和prop()的相关文章

关于面试jquery中的 .attr() 和 .prop()的区别联系

目测很多人都不太清楚这个,我之前也是,知道这两个东西有点区别,但是却说不清楚,那么这里,我来详细的讲一下 大家都知道,html标签可以在 <> 尖括号里面直接写属性, 例如 <img src="fhc.jpg" alt="hello">, 那么在jquery中,要获取这个图片的地址该怎么做的呢 $('img').attr('src') 或者 $('img').prop('src') 都可以,好像没什么区别 但是有一点大家要注意, 在 html

从一个bug说jquery中的attr和prop

为了方便描述,将问题简化如下: 先上代码 <form> <input type="checkbox">iqiyi</input> <input type="checkbox" checked="checked">letv</input> </form> <button type>showStatus</button> <script> $(

JQuery中关于attr()、prop()两者之间的区别

attr:设置或返回被元素则值 prop:获取在匹配的元素集中的第一个元素的属性值. 区别: 1. prop 如果获取多个被选元素那么只返回第一个被选元素的值: 2.根据JQ源码(可自行查看),attr 是通过原生JS中setAttribute()方法设置或修改:prop则是通过document.getElementById(ele)[name]的方法设置或修改 所以,获取标签的属性,如若标签自带的属性则使用prop方法会来的快些,attr则比较适用于我们自己的设置的属性 原文地址:https:

jquery获取自定义属性(attr和prop)实例介绍

jquery获取自定义属性(attr和prop)实例介绍 作者: 字体:[增加 减小] 类型:转载 jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式 $("form").attr("check"); $("form").prop("check"); 两种都可以,不过新版jquery推荐第二种,两个在其他

Jquery 中 $(&#39;obj&#39;).attr(&#39;checked&#39;,true)失效的几种解决方案

1.$('obj').prop('checked',true) 2. $(':checkbox').each(function(){ this.checked=true; }) 为什么:attr为失效?因为checked属于为原型对象的属性.而attr在remove原型对象时会出错.原型对象指的是自身自带的,无法移除.prop会忽略这个错误.而attr操作的是普通非原型对象(可移除).js 的dom对象属性是可以随意增加的. Jquery 中 $('obj').attr('checked',tr

jQuery属性选择器.attr()和.prop()两种方法

在判断表单单选框是否被选中时,通常会想到使用$('#checkbox').attr('checked')来判断,但在一些情况下,你会发现这种方法并不管用,得到的是undefined. 原来jQuery在1.6版本以后对属性选择器做了一些调整,分为.attr()和.prop()两种方法.为的是区分元素attributes和properties之间模棱两可的东西. 那么它们之间有什么区别呢? 官方的解释是: Attributes vs. Properties The difference betwe

jQuery中使用attribute,prop获取,设置input的checked值

1.prop方法获取.设置checked属性 当input控件checkbox设置了checked属性时,无论checked=""或 checked="checked",$(obj).prop("checked")的结果都是true: 当input控件checkbox没设置checked属性时,$(obj).prop("checked")的结果是false. 设置$("input[name='checkboxall'

jQuery中使用attribute,prop获取,设置input的checked值【转】

1.prop方法获取.设置checked属性 当input控件checkbox设置了checked属性时,无论checked=""或 checked="checked",$(obj).prop("checked")的结果都是true: 当input控件checkbox没设置checked属性时,$(obj).prop("checked")的结果是false. 设置$("input[name='checkboxall'

jquery中的attr方法

1.根据参数个数不同,作用不同 attr 作用:获取或者设置属性结点的值 可以传递一个参数也可以传递两个参数 如果传递一个参数代表获取属性结点的值 如果传递两个参数代表设置属性结点的值 注意:如果是获取,无论找到多少个元素都只会返回第一个元素指定的属性结点的值 如果是设置,找到多少个元素就会设置多少个元素的值 如果是设置,设置的属性结点不存在,系统会自动新增 removeAttr 作用:删除属性结点 注意:会删除所有找到元素指定的属性结点 那么是否有跟attr()相似的属性呢?jquery中va