jQuery中attr和prop方法的区别

之前看网上对比两者的文章，更是列出一个表来区分什么标签下使用prop，什么标签下使用attr，原谅我是懒惰的人，最害怕要背的东西，所以只有自己想想办法了。

既然我们想知道他们两的区别，最好就看看他们的源代码，不要被代码长度所吓到，我们只看关键的几句：

attr方法代码（jQuery版本1.8.3）

 代码如下 复制代码

attr: function( elem, name, value, pass ) {
    var ret, hooks, notxml,
        nType = elem.nodeType;

     // don't get/set attributes on text, comment and attribute nodes
    if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
        return;
    }

     if ( pass && jQuery.isFunction( jQuery.fn[ name ] ) ) {
        return jQuery( elem )[ name ]( value );
    }

     // Fallback to prop when attributes are not supported
    if ( typeof elem.getAttribute === "undefined" ) {
        return jQuery.prop( elem, name, value );
    }

     notxml = nType !== 1 || !jQuery.isXMLDoc( elem );

     // All attributes are lowercase
    // Grab necessary hook if one is defined
    if ( notxml ) {
        name = name.toLowerCase();
        hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook );
    }

     if ( value !== undefined ) {

         if ( value === null ) {
            jQuery.removeAttr( elem, name );
            return;

         } else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) {
            return ret;

         } else {
            elem.setAttribute( name, value + "" );
            return value;
        }

     } else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) {
        return ret;

     } else {

         ret = elem.getAttribute( name );

         // Non-existent attributes return null, we normalize to undefined
        return ret === null ?
            undefined :
            ret;
    }
}attr: function( elem, name, value, pass ) {
    var ret, hooks, notxml,
        nType = elem.nodeType;

    // don't get/set attributes on text, comment and attribute nodes
    if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
        return;
    }

    if ( pass && jQuery.isFunction( jQuery.fn[ name ] ) ) {
        return jQuery( elem )[ name ]( value );
    }

    // Fallback to prop when attributes are not supported
    if ( typeof elem.getAttribute === "undefined" ) {
        return jQuery.prop( elem, name, value );
    }

    notxml = nType !== 1 || !jQuery.isXMLDoc( elem );

    // All attributes are lowercase
    // Grab necessary hook if one is defined
    if ( notxml ) {
        name = name.toLowerCase();
        hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook );
    }

    if ( value !== undefined ) {

        if ( value === null ) {
            jQuery.removeAttr( elem, name );
            return;

        } else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) {
            return ret;

        } else {
            elem.setAttribute( name, value + "" );
            return value;
        }

    } else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) {
        return ret;

    } else {

        ret = elem.getAttribute( name );

        // Non-existent attributes return null, we normalize to undefined
        return ret === null ?
            undefined :
            ret;
    }
}

prop方法代码（jQuery版本1.8.3）

 代码如下 复制代码

prop: function( elem, name, value ) {
    var ret, hooks, notxml,
        nType = elem.nodeType;

     // don't get/set properties on text, comment and attribute nodes
    if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
        return;
    }

     notxml = nType !== 1 || !jQuery.isXMLDoc( elem );

     if ( notxml ) {
        // Fix name and attach hooks
        name = jQuery.propFix[ name ] || name;
        hooks = jQuery.propHooks[ name ];
    }

     if ( value !== undefined ) {
        if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
            return ret;

         } else {
            return ( elem[ name ] = value );
        }

     } else {
        if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {
            return ret;

         } else {
            return elem[ name ];
        }
    }
}prop: function( elem, name, value ) {
    var ret, hooks, notxml,
        nType = elem.nodeType;

    // don't get/set properties on text, comment and attribute nodes
    if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
        return;
    }

    notxml = nType !== 1 || !jQuery.isXMLDoc( elem );

    if ( notxml ) {
        // Fix name and attach hooks
        name = jQuery.propFix[ name ] || name;
        hooks = jQuery.propHooks[ name ];
    }

    if ( value !== undefined ) {
        if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
            return ret;

        } else {
            return ( elem[ name ] = value );
        }

    } else {
        if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {
            return ret;

        } else {
            return elem[ name ];
        }
    }
}

attr方法里面，最关键的两行代码，elem.setAttribute( name, value + “” )和ret = elem.getAttribute( name )，很明显的看出来，使用的DOM的API setAttribute和getAttribute方法操作的属性元素节点。
而prop方法里面，最关键的两行代码，return ( elem[ name ] = value )和return elem[ name ]，你可以理解成这样document.getElementById(el)[name] = value，这是转化成JS对象的一个属性。

既然明白了原理是这样，我们来看看一个例子：

 代码如下 复制代码

<input type="checkbox" id="test" abc="111" /><input type="checkbox" id="test" abc="111" />
$(function(){
    el = $("#test");

     console.log(el.attr("style"));  //undefined
    console.log(el.prop("style"));  //CSSStyleDeclaration对象
    console.log(document.getElementById("test").style); //CSSStyleDeclaration对象
});$(function(){
    el = $("#test");

    console.log(el.attr("style"));  //undefined
    console.log(el.prop("style"));  //CSSStyleDeclaration对象
    console.log(document.getElementById("test").style); //CSSStyleDeclaration对象
});1.el.attr(“style”)

输出undefined，因为attr是获取的这个对象属性节点的值，很显然此时没有这个属性节点，自然输出undefined
2.el.prop(“style”)输出CSSStyleDeclaration对象，对于一个DOM对象，是具有原生的style对象属性的，所以输出了style对象
3.至于document.getElementById(“test”).style和上面那条一样
我们接着看：

 代码如下 复制代码

el.attr("abc","111")
console.log(el.attr("abc")); //111
console.log(el.prop("abc")); //undefinedel.attr("abc","111")
console.log(el.attr("abc")); //111
console.log(el.prop("abc")); //undefined首先用attr方法给这个对象添加abc节点属性，值为111，可以看到html的结构也变了

1.el.attr(“abc”)输出结果为111，再正常不过了
2.el.prop(“abc”)输出undefined，因为abc是在这个的属性节点中，所以通过prop是取不到的

我们再接着来：

 代码如下 复制代码

el.prop("abc", "222");
console.log(el.attr("abc")); //111
console.log(el.prop("abc")); //222el.prop("abc", "222");
console.log(el.attr("abc")); //111
console.log(el.prop("abc")); //222

我们再用prop方法给这个对象设置了abc属性，值为222，可以看到html的结构是没有变化的。输出的结果就不解释了。

上面已经把原理讲清楚了，什么时候用什么就可以自己把握了。

提一下，在遇到要获取或设置checked,selected,readonly和disabled等属性时，用prop方法显然更好，比如像下面这样：

 代码如下 复制代码

<input type="checkbox" id="test" checked="checked" /><input type="checkbox" id="test" checked="checked" />
console.log(el.attr("checked")); //checked
console.log(el.prop("checked")); //true
console.log(el.attr("disabled")); //undefined
console.log(el.prop("disabled"));  //falseconsole.log(el.attr("checked")); //checked
console.log(el.prop("checked")); //true
console.log(el.attr("disabled")); //undefined
console.log(el.prop("disabled"));  //false

显然，布尔值比字符串值让接下来的处理更合理。

PS一下，如果你有JS性能洁癖的话，显然prop的性能更高，因为attr需要访问DOM属性节点，访问DOM是最耗时的。这种情况适用于多选项全选和反选的情况。

时间： 2024-11-27 00:35:09

jQuery中attr和prop方法的区别的相关文章

jQuery中attr() 和 prop() 方法对比

一直都在用 jQuery 1.8.3 的版本,没有尝试过 jQuery 1.9.0 的版本. 于是,开始调试代码,在 1.9.0 的版本中:  代码如下 复制代码 <input type="checkbox" /> <script> $(function() {         $('input').click(function() {             $(this).attr('checked');         });     }); </s

jquery中attr和prop的区别分析

 这篇文章主要介绍了jquery中attr和prop的区别分析的相关资料,需要的朋友可以参考下     在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 上面的描述也许有点模糊,举几个例子就知道了.

jQuery中attr()与prop()函数用法实例详解(附用法区别)_jquery

本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式. 1. attr(属性名) //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined ) 2.

jQuery中live与bind方法的区别

 本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用   live的缺点就是,运行完以后不释放空间,太多的使用会占用更多的内存,bind()则点击完以后释放空间   区别一:   Click here   可以给这个元素绑定一个简单的click事件:   $('.clickme').bind('click', function() { $('body

jquery中attr和prop的区别详解（非常完整)

关于它们两个的区别,网上的答案很多 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 相比attr,prop是1.6.1才新出来的,两者从中文意思理解,都是获取/设置属性的方法(attributes和properties).只是,window或document中使用.attr()方法在jQuery1.6之前不能正常运行,因为window和document中不能有attributes.prop应运而生了.

jQuery中attr和prop的区别

  attribute(特性),是我们赋予某个事物的特质或对象,而attribute是我们通过设置HTML标签而给之赋予的特性, property(属性),是早已存在的不需要外界赋予的特质,property是DOM对象自身就拥有的属性.   在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: 对于HTML元素本身就带有的固有属性,在处理时,使用pro

jQuery中attr()和prop()在修改checked属性时的区别_jquery

在做复选框全选按钮的时候,出现了一个问题,使用语句$.attr('checked',true),将复选框的属性改为被选中,在chrome浏览器中第一次点击有效后面就不行了,IE8倒是没有问题. 百度了很久找到原因是HTML的属性分为attribute和property,暂且将后者称为特性. checked属性即分为attribute->checked,和property->true,false. 对于一个checkbox,若未定义checked="checked",aler

JS中attr和prop属性的区别以及优先选择示例介绍_基础知识

相比attr,prop是1.6.1才新出来的,两者从中文意思理解,都是获取/设置属性的方法(attributes和properties).只是,window或document中使用.attr()方法在jQuery1.6之前不能正常运行,因为window和document中不能有attributes.prop应运而生了. 既然我们想知道他们两的区别,最好就看看他们的源代码,不要被代码长度所吓到,我们只看关键的几句: attr: function( elem, name, value, pass )

关于jQuery中.attr()和.prop()的问题探讨_jquery

话说写了几句代码在ie8上能正常运行,chrome和ff却不行,朋友说这就是RP啊,郁闷! 其实功能需求是这样的,两个radio:男和女,一个button:重置.启动页面默认选中男,在用户选择女之后又点击重置按钮,需要恢复到默认状态. 复制代码 代码如下: <input type="radio" id="hRdMale" checked="checked" name="sex" value="male"