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)
  • 相关阅读:
    hdoj2187:悼念512汶川大地震遇难同胞 (贪心)
    2.0其它之Transform详解,以及UIElement和FrameworkElement的常用属性
    2.0外观之样式, 模板, 视觉状态和视觉状态管理器
    2.0图形之Ellipse, Line, Path, Polygon, Polyline, Rectangle
    2.0控件之ListBox, MediaElement, MultiScaleImage, PasswordBox, ProgressBar, RadioButton
    2.0画笔之SolidColorBrush, ImageBrush, VideoBrush, LinearGradientBrush, RadialGradientBrush
    2.0图形之基类System.Windows.Shapes.Shape
    2.0交互之鼠标事件和键盘事件
    2.0控件之ScrollViewer, Slider, StackPanel, TabControl, TextBlock, TextBox, ToggleButton
    2.0交互之InkPresenter(涂鸦板)
  • 原文地址:https://www.cnblogs.com/l5580/p/6186702.html
Copyright © 2011-2022 走看看