jQuery中操作属性的方法attr与prop的区别

attr 与 prop 都可以对某个属性进行获取和设置的操作，二者的用法相同：

<script src = 'jQuery.js'></script>
<script>

    
    // attr:
    // 设置单个属性
    $(element).attr(name,value);

    // 设置多个属性
    $(element).attr(obj);

    // 获取属性
    $(element).attr(name);


    // prop:
    // 设置单个属性
    $(element).prop(name,value);

    // 设置多个属性
    $(element).prop(obj);

    // 获取属性
    $(element).prop(name);
</script>

用处和区别却是不一样的，对于返回值是布尔类型的属性，如：disabled, checked只能使用 prop 进行操作，当然更大的区别在于，attr 操作的是写在元素内的字面属性，而 prop 操作的是元素的 DOM 属性：

<body>

    // 以访问网站的形式打开页面

    // 例：假设文件在C盘中，上层主目录文件夹为 folder-min
    <img id="img" src="/folder/image.jpg" />

    <input id="check1" type="checkbox" checked="checked" />

    <input id="check2" type="checkbox" />
<script>
    $( '#img' ).attr( 'src' );  // 控制台输出："/folder/image.jpg"
    $( '#check' ).prop( 'src' );  // "http://folder-min/folder/image.jpg"

    $( '#check1' ).attr( 'checked' );  // checked
    $( '#check1' ).prop( 'checked' );  // true 或 false 取决于复选框状态

    $( '#check2' ).attr( 'checked' );  // undefined
    $( '#check2' ).prop( 'checked' );  // true 或 false 取决于复选框的状态
</script>
</body>

 

posted @ 2020-05-05 01:35  有火光  阅读(475)  评论(0)    收藏  举报