jQuery属性: attr()和prop()

最新推荐文章于 2025-04-18 09:36:44 发布

原创最新推荐文章于 2025-04-18 09:36:44 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了jQuery中attr()和prop()方法的区别与用法，包括如何获取和设置DOM元素的属性，如id、class等固有属性及自定义属性，并探讨了两者在处理不同属性类型时的行为差异。

attr()类似js中的attribute:
设置使用setAttribute
获取使用getAttribute
prop()类似js中的property

属性:
固有属性(特性): id class title href src alt type value
新增属性: 自定义属性

        <div id="oDiv" class="iDiv" student='enoch'>Hi, I'm Div.</div>
<script>
        console.log( $('div').attr('id') );         // 返回oDiv
        console.log( $('div').prop('id') );         // 返回oDiv

        console.log( $('div').attr('class') );      // 返回iDiv
        console.log( $('div').prop('class') );      // 返回iDiv

        console.log( $('div').attr('student') );    // 返回enoch
        console.log( $('div').prop('student') );    // 返回undefined
</script>

arrt()可获取固有特性和新增属性
prop()只能取固有特性类似js中的.id操作
// console.log( oDiv.className ); // class是关键字,要使用className
// console.log( oDiv.getAttribute('id') ); // Attribute可以使用class

设置属性:

attr可以添加特性和自定义属性，prop只可以添加特性。

        <div id="oDiv1">Hi, I'm Div.</div>
<p id="oP1">Hi, I'm D.</p>
<script>
    $('div').attr('id', 'oDiv');   // 可设置上id='oDiv'
    $('p').prop('id', 'oP');       // 可设置上id='oP'  类似oP.id = 'text'
                // var oP = document.getElementsByTagName('p')[0];
                // oP.id = 'text1';
    $('div').attr('student', 'enoch');   // 可设置上自定义属性student
    $('p').prop('student', 'enoch');     // 不能设置上自定义属性
</script>

设置多个元素属性:

attr可以给多个元素添加特性和自定义属性，prop只可以添加特性。

        <div id="oDiv1">Hi, I'm Div.</div>
<div id="oDiv2">Hi, I'm Div.</div>
<p id="oP1">Hi, I'm D.</p>
<p id="oP2">Hi, I'm D.</p>
<script>
    $('div').attr({
         class: 'oDiv1',     // 两个div都遍历添加上了class
         student: 'enoch'    // 两个div都遍历添加上了自定义属性student
        })
    $('p').prop({
         class: 'oP',        // 两个p都遍历添加上了class
         student: 'enoch'    // 两个p都没有添加上自定义属性student
        })
</script>

取多个元素属性:

attr和prop均返回第一个值。

        <div id="oDiv1">Hi, I'm Div.</div>
<div id="oDiv2">Hi, I'm Div.</div>
<p id="oP1">Hi, I'm D.</p>
<p id="oP2">Hi, I'm D.</p>
<script>
    console.log( $('div').attr('id') );  // 只返回第一个id的值
    console.log( $('p').prop('id') );  // 只返回第一个id的值
</script>

获取没有设置的值:

attr获取未设置的属性均返回undefined, prop获取未设置的特性,返回空。

        <div>Hi, I'm Div.</div>
<script>
    console.log( $('div').attr('class') );    // 返回undefined
    console.log( $('div').prop('class') );    // 返回空值
    console.log( $('div').prop('student') );  // 通过手动设置自定义属性返回undefined,即使有该属性
                                              // 通过prop()可以设置,但不会对应到DOM中
</script>

removeAttr()和removeProp():

removeAttr():

removeAttr可删除特性和自定义属性。

        <div id="oDiv" class="iDiv" student='enoch'>Hi, I'm Div.</div>
<script>
   $('div').removeAttr('id');          // 可删除特性
   $('div').removeAttr('student');     // 可删除自定义属性
</script>

removeProp():

removeProp 只能删除通过prop()自定义的属性。

        <div>Hi, I'm Div.</div>
<script>
    $('div').prop('student', 'enoch');          // 可以设置 但不能对应到DOM中
    console.log( $('div').prop('student') );    // 返回enoch
    $('div').removeProp('student');             // 删除自定义属性
    console.log( $('div').prop('student') );    // 返回undefined

    $('div').prop('id','oDiv2');                   // 设置id
    console.log( $('div').prop('id') );            // 返回id值 oDiv2
    $('div').removeProp('id');                     // id是自带的特性 removeProp删除不了 可以设置false 或者 空值
    console.log( $('div').prop('id') );            // 返回id值 oDiv2
</script>