zoukankan      html  css  js  c++  java
  • 11.8 开课二个月零四天 (Jquery取属性值,做全选,去空格)

    1.jquery取复选框的值

    复制代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <!--引入jquery包-->
    <script src="../jquery-1.11.2.min.js"></script><!--引入的jquery一定是在最上面的-->
    <style type="text/css">
    </style>
    </head>
    <body>
    <input type="checkbox" value="01" class="ck" />
    <input type="checkbox" value="02" class="ck" />
    <input type="checkbox" value="03" class="ck" />
    <input type="checkbox" value="04" class="ck" />
    <input type="checkbox" value="05" class="ck" />
    <input type="button" value="取选中" id="btn" />
    <script type="text/jscript">
    复制代码
    //取复选框的选中值
    $("#btn").click(function(){
        
            var ck = $(".ck");
            for(var i=0;i<ck.length;i++)
            {
                //判断选中
                /*if(ck[i].checked)
                {
                    alert(ck[i].value);//js方法
                }*/
                if(ck.eq(i).prop("checked"))//prop判断是否选中
                {
                    alert(ck.eq(i).val());
                }
                    
            }
        
        })
    </script>
    复制代码
    </body>
    </html>
    复制代码

    2.取下拉列表里面的属性值

    复制代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <!--引入jquery包-->
    <script src="../jquery-1.11.2.min.js"></script><!--引入的jquery一定是在最上面的-->
    <style type="text/css">
    </style>
    </head>
    <body>
    <select id="sel">
        <option value="1111">1111</option>
        <option value="2222">2222</option>
        <option value="3333">3333</option>
    </select>
    <input type="button" value="取下拉" id="b1" />
    复制代码
    <script type="text/jscript">
        $("#b1").click(function(){
            
                alert($("#sel").val());
            
            })
    </script>
    复制代码
    </body>
    </html>
    复制代码

    3.取单选钮的属性值

    复制代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <!--引入jquery包-->
    <script src="../jquery-1.11.2.min.js"></script><!--引入的jquery一定是在最上面的-->
    <style type="text/css">
    </style>
    </head>
    <body>
    <input class="ck" type="radio" value="01" name="a" />
    <input class="ck" type="radio" value="02" name="a" />
    <input class="ck" type="radio" value="03" name="a" />
    <input class="ck" type="radio" value="04" name="a" />
    <input class="ck" type="radio" value="05" name="a" />
    
    <input type="button" value="取单选" id="b2" />
    复制代码
    <script type="text/jscript">
        $("#b2").click(function(){
        var ck = $(".ck");
            for(var i=0;i<ck.length;i++)
            {
                if(ck.eq(i).prop("checked"))//prop判断是否选中
                {
                    alert(ck.eq(i).val());
                }
                    
            }
        
        })
    </script>
    复制代码
    </body>
    </html>
    复制代码

    4.jquery做全选按钮

    复制代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <!--引入jquery包-->
    <script src="../jquery-1.11.2.min.js"></script><!--引入的jquery一定是在最上面的-->
    <style type="text/css">
    </style>
    </head>
    <body>
    <input type="checkbox" id="qx" />全选
    <input type="checkbox" value="01" class="ck" />
    <input type="checkbox" value="02" class="ck" />
    <input type="checkbox" value="03" class="ck" />
    <input type="checkbox" value="04" class="ck" />
    <input type="checkbox" value="05" class="ck" />
    <script type="text/jscript">
    复制代码
    $("#qx").click(function(){
            
            /*if($(this)[0].checked)
            {
                $(".ck").attr("checked","checked")
            }
            else
            {
                $(".ck").removeAttr("checked");
            }*///标记的这段代码中存在bug,不能用来做全选,要记住。用下面2行代码。
          var xz = $(this).prop("checked")//xz接收的值是true(选中)或者flase(未选中)
          $(".ck").prop("checked",xz)//如果是选中,就是true
            })
    复制代码
    
    
    </script>
    </body>
    </html>
    复制代码

    5.js或jquery里面有数据存储方式

      存储数据的名字叫做JSON

    var json = {code:"n001",name:"张三",js:{c:"p001",n:"回族"}};//定义方式。定义比较随便,可以往里面放任意数据。
            
        //取值
        //alert(json.code)//取值方式
        //alert(json.js.n)
        //alert(json["name"])

    6.去空格

    var str= "    hello ";
    str = str.trim();//不加取空格输出的长度是10,包含空格的长度。去掉空格输出的长度为5.
    alert(str.length)
  • 相关阅读:
    mysql数据库安装,启动和关闭
    python学习笔记(xlsxwriter模块使用)
    redis集群搭建
    gpasswd 命令详解
    linux CPU使用率过高或负载过高的处理思路
    Django模型(ORM)
    Django模板层(template)
    Windows下安装node.js(npm) git+vue
    Sublime Text 3:3114的安装(目前最新),插件emmet的安装
    opacity在IE6~8下无效果,解决的办法
  • 原文地址:https://www.cnblogs.com/l5580/p/6186702.html
Copyright © 2011-2022 走看看