jQuery的attr方法和prop方法使用区别

最新推荐文章于 2024-07-15 10:23:38 发布
最新推荐文章于 2024-07-15 10:23:38 发布
阅读量2.6k 收藏 4
点赞数 3
分类专栏： javascript 文章标签： attr prop jQuery attr jQuery.prop javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013356907/article/details/82721121
版权

jQuery的attr方法和prop方法使用区别

在一次面试中，被问到这样一个问题:

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <input type="text"  id="inn" value="100" />
        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            document.getElementById("inn").value="1000";
            $("#inn").attr("value")//结果是多少？ 
        </script>
    </body>
</html>

通过js来改变value的值1000，我们在界面上看到的值也是改变了，但实际是$(“#inn”).attr(“value”)还是100.

我们都知道attr是attribute缩写，prop是property的缩写，字面意思都是指属性。具体的区别可能分的不是很清楚。在经历此次面试之后我又看了一下jQuery的源代码(jQuery版本3.3.1)。

Attr 方法源码


$.fn.attr = function( name, value ) {
        return access( this, jQuery.attr, name, value, arguments.length > 1 );
    }
jQuery.attr = $.attr = function( elem, name, value ) {

        var ret, hooks,
            nType = elem.nodeType;
        // Don't get/set attributes on text, comment and attribute nodes
        if ( nType === 3 || nType === 8 || nType === 2 ) {
            return;
        }
        // Fallback to prop when attributes are not supported
        if ( typeof elem.getAttribute === "undefined" ) {
            return jQuery.prop( elem, name, value );
        }
        // Attribute hooks are determined by the lowercase version
        // Grab necessary hook if one is defined
        if ( nType !== 1 || !jQuery.isXMLDoc( elem ) ) {
            hooks = jQuery.attrHooks[ name.toLowerCase() ] ||
                ( jQuery.expr.match.bool.test( name ) ? boolHook : undefined );
        }
        if ( value !== undefined ) {
            if ( value === null ) {
                jQuery.removeAttr( elem, name );
                return;
            }
            if ( hooks && "set" in hooks &&
                ( ret = hooks.set( elem, value, name ) ) !== undefined ) {
                return ret;
            }
            elem.setAttribute( name, value + "" );
            return value;
        }
        if ( hooks && "get" in hooks && ( ret = hooks.get( elem, name ) ) !== null ) {
            return ret;
        }
        ret = jQuery.find.attr( elem, name );
        // Non-existent attributes return null, we normalize to undefined
        return ret == null ? undefined : ret;
    }

    jQuery.find.attr = Sizzle.attr = function( elem, name ) {

    // Set document vars if needed
    if ( ( elem.ownerDocument || elem ) !== document ) {
        setDocument( elem );
    }
    var fn = Expr.attrHandle[ name.toLowerCase() ],
        // Don't get fooled by Object.prototype properties (jQuery #13807)
        val = fn && hasOwn.call( Expr.attrHandle, name.toLowerCase() ) ?
            fn( elem, name, !documentIsHTML ) :
            undefined;
    return val !== undefined ?
        val :
        support.attributes || !documentIsHTML ?
            elem.getAttribute( name ) :
            (val = elem.getAttributeNode(name)) && val.specified ?
                val.value :
                null;
}

Prop方法源码

$.fn.prop = function( name, value ) {
        return access( this, jQuery.prop, name, value, arguments.length > 1 );
    },
prop: function( elem, name, value ) {
        var ret, hooks,
            nType = elem.nodeType;
        // Don't get/set properties on text, comment and attribute nodes
        if ( nType === 3 || nType === 8 || nType === 2 ) {
            return;
        }
        if ( nType !== 1 || !jQuery.isXMLDoc( elem ) ) {
            // 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;
            }
            return ( elem[ name ] = value );
        }
        if ( hooks && "get" in hooks && ( ret = hooks.get( elem, name ) ) !== null ) {
            return ret;
        }
        return elem[ name ];
    }

jQuery.fn.attr方法和 jQuery.fn.prop方法源码共同调用公共方法 access

// Multifunctional method to get and set values of a collection
// The value/s can optionally be executed if it's a function
var access = function( elems, fn, key, value, chainable, emptyGet, raw ) {
    var i = 0,
        len = elems.length,
        bulk = key == null;
    // Sets many values  设置多个值$.fn.attr({'width':'50px','height':'50px'})
    if ( toType( key ) === "object" ) {
        chainable = true;
        for ( i in key ) {
            access( elems, fn, i, key[ i ], true, emptyGet, raw );
        }
    // Sets one value  设置一个值$.fn.attr('width','50px')
    } else if ( value !== undefined ) {
        chainable = true;
        if ( !isFunction( value ) ) {
            raw = true;
        }
        if ( bulk ) {
            // Bulk operations run against the entire set
            if ( raw ) {
                fn.call( elems, value );
                fn = null;
            // ...except when executing function values
            } else {
                bulk = fn;
                fn = function( elem, key, value ) {
                    return bulk.call( jQuery( elem ), value );
                };
            }
        }
        if ( fn ) {
            for ( ; i < len; i++ ) {
                fn(elems[ i ], key, raw ?
                    value :
                    value.call( elems[ i ], i, fn( elems[ i ], key ) )
                );
            }
        }
    }
    if ( chainable ) {return elems;}
    // Gets
    if ( bulk ) {return fn.call( elems );}
    return len ? fn( elems[ 0 ], key ) : emptyGet;
};

从源代码中可以看到attr方法中获取属性是通过ele.getAttribute去获取对应的属性值 即获取dom文档节点的属性，而prop方法是通过是通过ele[name]或者ele.name来获取属性值 即获取dom文档节点对应的js对象的属性。dom文档节点与dom节点对应的js对象是相同，一个发生变化另一个随之而变。在浏览器通过jQuery获取input查看各个对应的js属性，我们可以看到元素对应的js对象属性（下图）
这里写图片描述
这里写图片描述

我只截取部分需要的属性值，有需要的各位可以自己在浏览器查看。
对应的文档节点属性我们可以在浏览器端的控制台的Elements查看到。
这里写图片描述

通过attr方法添加的属性我们都可在浏览器的Elements查看到,通过prop添加的属性，无法直接在对应的文档节点上看到，只能通过获取到文档节点对应的js对象来查看获取

   $("#inn").attr('self-attr','selfAttr');//下图第一张的结果释义
   $("#inn").prop('self-prop','selfProp');//下图第二张的结果释义

attr
prop

忘于江湖-CJF
关注
专栏目录
JS中attr和prop属性的区别以及优先选择示例介绍
12-08
相比attr，prop是1.6.1才新出来的，两者从中文意思理解，都是获取/设置属性的方法（attributes和properties）。只是，window或document中使用.attr()方法在jQuery1.6之前不能正常运行，因为window和document中不能有attributes。prop应运而生了。 既然我们想知道他们两的区别，最好就看看他们的源代码，不要被代码长度所吓到，我们只看关键的几句： attr: function( elem, name, value, pass ) { var ret, hooks, notxml, nType = elem.nodeType
jquery中关于attr和prop的区别！
Java&Develop的博客
06-13 4497
昨天这两个方法搞混了,被公司大佬说了下，虽然没说什么，但还是挺尴尬的。重点是大佬说你可以用attr方法，我特么第一句话就是怎么用呢。原谅我使用vue之后太依赖框架的东西了，以至于以前jquery玩的也挺溜的我，慢慢淡忘了 jquery。罪过罪过呢！jquery还是一款很优秀的函数库，哎 不说了 继续码代码了。 $().attr() 允许我们往元素上加上自定义属性 我们也可以用attr 获取提前定义好的在上面的 自定义属性值 当然 也可以获取到 元素 自带的一些属性 那么 attr 是获取和设置 属性的
jQuery 参考指南（二）
最新发布
龙哥盟
07-15 976
原文：zh.annas-archive.org/md5/0AC785FD3E3AB038A029EF6BA3FEE889。
JS中attr 和 prop 的区别
weixin_49199038的博客
11-06 4773
attr : 设置或返回被选元素的属性值. prop : 获取在匹配的元素集中的第一个元素的属性值。 attr 和 prop 的本质 attr 是 attribute 的缩写,prop 是 property 的缩写，都有属性的意思，只不过 attr 是操作 html 文档节点属性，prop 是操作 js 对象属性. attr 在 js 中使用的是 setAttribute 和 getAttribute 而 prop 直接使用原生 js 的 element[value] 和 element[value]=ke
prop和attr的区别
wxqwxq123444的博客
06-09 3104
prop和attr的选择
jQuery attr() 方法和 prop() 方法区别
zcc的博客
12-07 3959
jQueryattr()方法 定义和用法 attr() 方法设置或返回被选元素的属性和值。 当该方法用于返回属性值，则返回第一个匹配元素的值。 当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。 jQueryprop()方法 定义和用法 prop() 方法设置或返回被选元素的属性和值。 当该方法用于返回属性值时，则返回第一个匹配元素的值。 当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。 注意：prop() 方法应该用于检索属性值，例如 DO...
jquery中attr和prop的区别分析
10-24
在jQuery中，`attr` 和 `prop` 是两个用于获取和设置HTML元素属性的方法，但它们之间存在着重要的差异。理解这两个方法的区别对于高效且准确地操作DOM至关重要。 首先，`attr` 方法主要用于处理HTML元素的自定义...
jquery中prop()方法和attr()方法的区别浅析
10-26
在jQuery中，`attr()`和`prop()`方法都是用来处理元素的属性（attributes）和特性（properties），但它们之间存在一些关键的区别。了解这些差异对于编写高效、无误的JavaScript代码至关重要。 首先，属性...
关于jquery中attr()和prop()方法的区别
10-18
在jQuery中，`attr()` 和 `prop()` 都是用来处理元素属性的方法，但它们之间存在重要的差异，这些差异主要体现在处理DOM元素的状态和属性值上。以下是对这两个方法的详细解释和对比： **attr() 方法** `attr()` ...
(转）jquery中的attr和prop
jackyrongvip的专栏
04-29 192
http://www.365mini.com/page/jquery-attr-vs-prop.htm 在jQuery中，attr()函数和prop()函数都用于设置或获取指定的属性，它们的参数和用法也几乎完全相同。 但不得不说的是，这两个函数的用处却并大不相同。下面我们来详细介绍这两个函数之间的区别。 1、操作对象不同 很明显，attr和prop分别是单词attribut...
jquery中attr和prop的区别
m0_47720236的博客
03-12 3342
一，获取属性的区别 ● attr() 操作标签上的属性 ● prop() 操作Boolean类型的属性和有特性(class id name)的属性 attr可以操作HTML标签中的属性，不管是固有属性，还是添加的自定义属性。都可以通过attr来设置。 prop同样可以操作HTML中的固有属性，但对于自定义属性便无能为力了 下图可见 对于标签的固有属性，建议用prop方法。 如 id,class,width; 获取标签属性。 对于标签的自定义属性，建议使用attr方法。 二，获取属性值为boolean类型
jQuery中attr()与prop()函数用法实例详解(附用法区别)
jingshaozhi的博客
09-21 652
本文实例讲述了jQuery中attr()与prop()函数用法。分享给大家供大家参考，具体如下： 一、jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()，attr()有4个表达式。 1. attr(属性名) //获取属性的值（取得第一个匹配元素的属性值
jquery中元素属性的操作以及attr()和prop()区别
weixin_52512511的博客
06-29 434
4. prop是从属性对象中取值，属性对象中有多少属性，就能获取多少值，不需要在页面中显示定义。attr('要设置的属性名','要设置的属性值') 传递两个参数的时候设置。prop('要设置的属性名','要设置的属性值') 传递两个参数的时候设置。2. prop 可以获取 元素自带的属性 但是不可以获取到 自定义的属性。所有的属性都会显示在标签上（原生属性和自定义属性都会在结构里显示)attr('要读取的属性名') 传递一个参数的时候读取。prop('要读取的属性名') 传递一个参数的时候读取。
jQuery中attr与prop
m0_52228992的博客
05-14 884
attr与prop非常相似，均可访问元素的属性值和设置属性值，但prop多用于设置（访问）DOM属性，attr没有限制,HTML、DOM均可 语法： 获取属性值：元素.attr("属性") 或者 元素.prop("属性") 设置属性值：元素.attr("属性","属性值") 或者 元素.prop("属性","属性值") 设置获取属性时，需要注意的是，这里的属性必须能够直接在html标签内写出，类似（<img src"XXX" width="100px">），这里的width可以访问并设.
jQuery中attr()和prop()的区别与使用(转载）
weixin_46048542的博客
11-03 339
这个例子里元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，元素本身是没有这个属性的。使用prop方法取值和设置属性值时，都会返回undefined值。这个例子里元素的DOM属性有“href、target和class"，这些属性就是元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。是从属性对象中取值，属性对象中有多少属性，就能获取多少值，本身就带有的固有属性。
attr()和prop()的区别
qq_42988963的博客
09-11 710
1、在jQuery中attr()和prop()两种方法都可以获取和操作元素的节点属性和属性。attr操作元素的节点属性，prop操作元素的属性，但是两者在使用时也存在差别。 2、attr()方法操作节点属性，attr()可以传入字符串也可以传入对象。 - 传入一个字符串参数时表示获取元素对应的属性，例如：("div").attr("class");表示获取("div").attr("clas...
JQuery中attr()和prop()用法和区别
高靖博的博客
11-10 1620
jquery attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()，attr()有4个表达式。 1. attr(属性名) //获取属性的值（取得第一...
前端提高篇(八十五)：jQuery的属性与特性，prop与attr
安之ccy的博客
03-29 2313
1.属性分为两种： 一种是特性（固有属性），如id、class、src、value、href、alt、title等等； 一种是新增属性（自定义属性） 2.prop()只能获取固有属性，attr()可以获取所有属性，包括新增属性 <div id="test" class="myTest" myAttribute="ccy">div1</div> <script src="./jQuery/jquery-3.6.0.js"></script> <script
JavaScript--prop和attr的用法
m0_74293254的博客
08-05 2145
在JavaScript中，prop和attr()是jQuery库提供的一个方法，用于获取或设置DOM元素的属性值。prop()prop()方法用于获取或设置HTML元素的属性值。通过prop()方法可以设置HTML元素的固有属性（如checked、disabled等）以及自定义属性。其中，selector为选择器，可以是元素的标签名、类名、id等；propertyName为属性名称；value为要设置的属性值。attr()attr()方法用于获取或设置HTML元素的属性值。通过attr()
jQuery prop() 方法详解与实例
与`attr()`方法不同，`prop()`更适合处理这些与元素状态相关的属性，而`attr()`通常用于处理那些不直接影响元素行为的属性。 `prop()`方法的基本语法如下： ```javascript $(selector).prop(name, value) ``` - `...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值