Jquery取属性值(复选框、下拉列表、单选按钮)、做全选按钮、JSON存储、去空格

1.jquery取复选框的值

复制代码
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <!--引入jquery包-->
 7 <script src="../jquery-1.11.2.min.js"></script><!--引入的jquery一定是在最上面的-->
 8 <style type="text/css">
 9 </style>
10 </head>
11 <body>
12 <input type="checkbox" value="01" class="ck" />
13 <input type="checkbox" value="02" class="ck" />
14 <input type="checkbox" value="03" class="ck" />
15 <input type="checkbox" value="04" class="ck" />
16 <input type="checkbox" value="05" class="ck" />
17 <input type="button" value="取选中" id="btn" />
18 
19 <script type="text/jscript">
20 //取复选框的选中值
21 $("#btn").click(function(){
22     
23         var ck = $(".ck");
24         for(var i=0;i<ck.length;i++)
25         {
26             //判断选中
27             /*if(ck[i].checked)
28             {
29                 alert(ck[i].value);//js方法
30             }*/
31             if(ck.eq(i).prop("checked"))//prop判断是否选中
32             {
33                 alert(ck.eq(i).val());
34             }
35                 
36         }
37     
38     })
39 </script>
40 
41 </body>
42 </html>
复制代码

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

复制代码
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <!--引入jquery包-->
 7 <script src="../jquery-1.11.2.min.js"></script><!--引入的jquery一定是在最上面的-->
 8 <style type="text/css">
 9 </style>
10 </head>
11 <body>
12 <select id="sel">
13     <option value="1111">1111</option>
14     <option value="2222">2222</option>
15     <option value="3333">3333</option>
16 </select>
17 <input type="button" value="取下拉" id="b1" />
18 
19 <script type="text/jscript">
20     $("#b1").click(function(){
21         
22             alert($("#sel").val());
23         
24         })
25 </script>
26 
27 </body>
28 </html>
复制代码

3.取单选钮的属性值

复制代码
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <!--引入jquery包-->
 7 <script src="../jquery-1.11.2.min.js"></script><!--引入的jquery一定是在最上面的-->
 8 <style type="text/css">
 9 </style>
10 </head>
11 <body>
12 <input class="ck" type="radio" value="01" class="rd" name="a" />
13 <input class="ck" type="radio" value="02" class="rd" name="a" />
14 <input class="ck" type="radio" value="03" class="rd" name="a" />
15 <input class="ck" type="radio" value="04" class="rd" name="a" />
16 <input class="ck" type="radio" value="05" class="rd" name="a" />
17 
18 <input type="button" value="取单选" id="b2" />
19 
20 <script type="text/jscript">
21     $("#b2").click(function(){
22     var ck = $(".ck");
23         for(var i=0;i<ck.length;i++)
24         {
25             if(ck.eq(i).prop("checked"))//prop判断是否选中
26             {
27                 alert(ck.eq(i).val());
28             }
29                 
30         }
31     
32     })
33 </script>
34 
35 </body>
36 </html>
复制代码

4.jquery做全选按钮

复制代码
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <!--引入jquery包-->
 7 <script src="../jquery-1.11.2.min.js"></script><!--引入的jquery一定是在最上面的-->
 8 <style type="text/css">
 9 </style>
10 </head>
11 <body>
12 <input type="checkbox" id="qx" />全选
13 <input type="checkbox" value="01" class="ck" />
14 <input type="checkbox" value="02" class="ck" />
15 <input type="checkbox" value="03" class="ck" />
16 <input type="checkbox" value="04" class="ck" />
17 <input type="checkbox" value="05" class="ck" />
18 
19 <script type="text/jscript">
20 
21 $("#qx").click(function(){
22         
23         /*if($(this)[0].checked)
24         {
25             $(".ck").attr("checked","checked")
26         }
27         else
28         {
29             $(".ck").removeAttr("checked");
30         }*///标记的这段代码中存在bug,不能用来做全选,要记住。用下面2行代码。
31       var xz = $(this).prop("checked")//xz接收的值是true(选中)或者flase(未选中)
32       $(".ck").prop("checked",xz)//如果是选中,就是true
33         })
34 
35 
36 </script>
37 
38 </body>
39 </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.去空格

1 var str= "    hello ";
2 str = str.trim();//不加取空格输出的长度是10,包含空格的长度。去掉空格输出的长度为5.
3 alert(str.length)

 

posted @   陈山河z  阅读(615)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示