zoukankan      html  css  js  c++  java
  • Python学习第87天(jQuery属性操作、循环方法)

    一、属性操作

      1.属性

        $(" ").attr( );      主要用于获取用户自主设定的属性数据,如果设定两个参数,则是将原属性参数修改为第二个属性参数。

        $(" ").removeAttr( );

        $(" ").prop( );         主要用于获取固有属性数据,参数形式和attr一样。

        $(" ").removeProp( );
      2.CSS类

        $(" ").addClass(class|fn);    增加节点类名

        $(" ").removeClass([class|fn]);  删除节点类名

      3.HTML代码/文本/值

        $(" ").html([val|fn]);      等同于JavaScript中的innerHTML

        $(" ").text([val|fn]);      等同于JavaScript中的innerTEXT

        $(" ").val([val|fn|arr]);     获取固有参数属性的value值

      4.属性设置

        $(" ").css("color","red");    设定节点属性,设置多个属性的时候

        $(" ").css({"color":"red" ,"backgroundcolor” :"red" ’});

    <input id="chk1" type="checkbox" />是否可见
    <input id="chk2" type="checkbox" checked="checked" />是否可见
    <script>
    
    //对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
    //对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
    //像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此
    //需要使用prop方法去操作才能获得正确的结果。
    
    
    //    $("#chk1").attr("checked")
    //    undefined
    //    $("#chk1").prop("checked")
    //    false
    
    //  ---------手动选中的时候attr()获得到没有意义的undefined-----------
    //    $("#chk1").attr("checked")
    //    undefined
    //    $("#chk1").prop("checked")
    //    true
    
        console.log($("#chk1").prop("checked"));//false
        console.log($("#chk2").prop("checked"));//true
        console.log($("#chk1").attr("checked"));//undefined
        console.log($("#chk2").attr("checked"));//checked
    </script>
    
    attr和prop

      二、循环方式

    jquery循环的两种方式
                     方式一
                     li=[10,20,30,40]
                     dic={name:"yuan",sex:"male"}
                     $.each(li,function(i,x){
                         console.log(i,x)
                     })
    
                     方式二
                     $("tr").each(function(){
                         console.log($(this).html())
                      })

      现在用jQuery的方式写一下正反选的问题

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-1.11.3.min.js"></script>
        <script>
    
                 function selectall(){
    
                     $("table :checkbox").prop("checked",true)
                 }
                 function cancel(){
    
                     $("table :checkbox").prop("checked",false)
                 }
    
                 function reverse(){
    
        </script>
    </head>
    <body>
    
         <button onclick="selectall();">全选</button>
         <button onclick="cancel();">取消</button>
         <button onclick="reverse();">反选</button>
    
         <table border="1">
             <tr>
                 <td><input type="checkbox"></td>
                 <td>111</td>
             </tr>
             <tr>
                 <td><input type="checkbox"></td>
                 <td>222</td>
             </tr>
             <tr>
                 <td><input type="checkbox"></td>
                 <td>333</td>
             </tr>
             <tr>
                 <td><input type="checkbox"></td>
                 <td>444</td>
             </tr>
         </table>
    </body>
    </html>

      以上就是今天所有内容。。。

  • 相关阅读:
    LVS的DR模式测试案例<仅个人记录>
    awk命令小结
    iptables命令提取总结,包含扩展模块<取自朱双印博客>
    如何配置nginx屏蔽恶意域名解析指向《包含隐藏nginx版本号》
    CentOS升级OpenSSL至OpenSSL 1.1.0f版本<其中有遇到libcrypto.so的问题>
    U-Mail企业邮箱如何导入授权文件
    Linux花生壳使用篇
    windows远程桌面连接时,显示发生身份验证错误,给函数提供的身份无效
    批量屏蔽符合条件的IP地址,支持添加白名单,IP段,增量,大于指定次数的IP
    rsync 定时备份<crontab+backrsync.sh> 简陋版
  • 原文地址:https://www.cnblogs.com/xiaoyaotx/p/12953402.html
Copyright © 2011-2022 走看看