zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    自写简单弹出框
    eclipse中debug模式不能启动运行,run运行模式却能启动运行!
    事务特性简单理解
    Java虚拟机4:内存溢出
    Java虚拟机3:常用JVM命令参数
    Java虚拟机2:Java内存区域及对象
    Eclipse技巧
    js常用的原生方法
    JavaScript调试小技巧
    html 锚点的使用
  • 原文地址:https://www.cnblogs.com/schuan/p/12829206.html
Copyright © 2011-2022 走看看