zoukankan      html  css  js  c++  java
  • attr和prop

    attr和prop都是jQuery提供的可以获取或者时添加属性和属性值的函数,但是二者有什么区别呢?

    官方给出的解释是当属性值可以通过true或者false来表示时就使用prop,其他的使用attr,但是在实际中还有一种情况要使用attr而不能使用prop,就是获取的属性不是标签默认的属性,而是我们自己添加的,就要使用attr,如果使用了prop则会返回undefined。

    例如:

     <a href="##" disabled target="_blank">aaa</a>

    在这个a标签中,href、target就是a标签默认的属性,还有class,title,style和id等全局属性都是可以通过prop来获取的,但是这里有一个disabled,设置是否被禁用的属性,这个属性是一个表单属性,并不是a标签默认的属性,通过prop获取到的结果是undefined,但是可以通过attr来获取。

    $(function(){
       alert($("a").prop("disabled"));
       alert($("a").attr("disabled")); 
    })

    运行的结果是第一个会输出undefined,第二个会输出disabled。

    另一种情况是当属性值可以通过false和true来表示。

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body>
        <form>
            <input id="c1" type="checkbox" checked/>this is a
            <input id="c2" type="checkbox"/>this is b
        </form>
    </body>
    <script>
        $(function () {
            console.log($("#c1").attr("checked"));
            console.log($("#c1").prop("checked"));
            
            console.log($("#c2").attr("checked"));
            console.log($("#c2").prop("checked"));
        })
    </script>
    </html>

    在这段代码中定义了两个复选框,其中的一个定义了checked。通过attr获取checked的值时,输出的结果是checked,通过prop获取时,输出结果是true。也就是说attr会直接输出属性值,而prop会用true来表示。但是当通过attr来输出c2的disabled时会输出undefined,因为我们并没有为其添加这个属性,但是prop的输出结果是false。

    总结:

      使用prop的情况:

      1.当属性是HTML标签默认的属性时。

      2.当属性值可以是true和false时。

      3.其他情况均使用attr。

  • 相关阅读:
    poj 1328 Radar Installation (贪心)
    hdu 2037 今年暑假不AC (贪心)
    poj 2965 The Pilots Brothers' refrigerator (dfs)
    poj 1753 Flip Game (dfs)
    hdu 2838 Cow Sorting (树状数组)
    hdu 1058 Humble Numbers (DP)
    hdu 1069 Monkey and Banana (DP)
    hdu 1087 Super Jumping! Jumping! Jumping! (DP)
    必须知道的.NET FrameWork
    使用记事本+CSC编译程序
  • 原文地址:https://www.cnblogs.com/Hlong-ZY/p/7266318.html
Copyright © 2011-2022 走看看