当前位置： 移动技术网 > IT编程>开发语言>Jquery > jQuery中操作属性的方法attr与prop的区别

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

2020年05月05日  | 移动技术网IT编程  | 我要评论

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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网