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

时间 2020-05-06

标签 jquery 属性方法 attr prop 区别栏目 JQuery 繁體版

原文原文链接

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 属性：spa

<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>