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>

巴特西

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

最新文章

热门文章