zoukankan      html  css  js  c++  java
  • Jquery1.6版本后attr的变化

    Jquery1.6版本后attr的变化

    2012 年 3 月 1 日 阿望 JAVASCRIPT, 0

    认真地去看了官方的最新文档,当中有这样的一段话 = =!

    可见,给YIN了吧。下面发个改动后的效果:
    jquery1.6+版本:

    下文来自www.jquery.com The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.

    elem.checked
    true (Boolean) Will change with checkbox state

    $(elem).prop("checked")
    true (Boolean) Will change with checkbox state

    elem.getAttribute("checked")
    "checked" (String) Initial state of the checkbox; does not change

    $(elem).attr("checked")(1.6)
    "checked" (String) Initial state of the checkbox; does not change

    $(elem).attr("checked")(1.6.1+)
    "checked" (String) Will change with checkbox state

    $(elem).attr("checked")(pre-1.6)
    true (Boolean) Changed with checkbox state

    //勾选后输出:
    //attr('checked'): checked
    //.prop('checked'): true
    //.is(':checked'): true
    
     //取消勾选输出:
    
    //.attr('checked'): undefined
    //.prop('checked'): false
    //.is(':checked'): false

    jquery1.4 版本:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <style>
     5 p { margin: 20px 0 0 }
     6 b { color: blue; }
     7 </style>
     8 <script src="../js/jquery-1.4.4.js"></script>
     9 </head>
    10 <body>
    11
    12 <input id="check1" type="checkbox" checked="checked">
    13 <label for="check1">Check me</label>
    14 <p></p>
    15
    16 <script>
    17 $("input").change(function() {
    18   var $input = $(this);
    19   $("p").html(".attr('checked'): <b>" + $input.attr('checked') + "</b><br>"
    20               + ".is(':checked'): <b>" + $input.is(':checked') ) + "</b>";
    21 }).change();
    22 </script>
    23
    24 </body>
    25 </html>
    勾选后输出:
    //attr('checked'): true
    //.prop('checked') 1.6后版本才有这个方法
    //.is(':checked'): true
    
     取消勾选输出:
    
    //.attr('checked'): false
    //.prop('checked')1.6后版本才有这个方法
    //.is(':checked'): false

     

    结论: attr(‘checked’): 在1.6后版本,所获取的值是 “checked”/”underfined”  ,之前所获得的值是”false”/”true”。截然不同

    //

    $("input").change(function() {
    var $input = $(this);
    $("p").html(".attr('checked'):

    + “.prop(‘checked’): ” + $input.prop(‘checked’) + “

    + “.is(‘:checked’): ” + $input.is(‘:checked’) ) + ““;
    }).change();
    // ]]>

    转自 :http://blog.phpbk.com/2012/03/jquery1-6%E7%89%88%E6%9C%AC%E5%90%8Eattr%E7%9A%84%E5%8F%98%E5%8C%96/

  • 相关阅读:
    使用VC++生成调试信息
    在Xp home上安装Rose 2003
    SkyDrive注册方法
    vsftpd同时使用系统用户和虚拟用户验证
    如何查看linux系统版本
    在RedHat AS中安装SVN
    Vnc & Gdm
    (转)如何:在设备上安装 SQL Server Compact 3.5
    java培训学习笔记一
    因为此版本的应用程序不支持其项目类型(.csproj),若要打开它,请使用支持此类型项
  • 原文地址:https://www.cnblogs.com/luckjason/p/2586014.html
Copyright © 2011-2022 走看看