码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-11-15 11:10:44      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:html   move   name   doc   列表   jquery   att   rip   复选框   

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" class="rd" name="a" />
<input class="ck" type="radio" value="02" class="rd" name="a" />
<input class="ck" type="radio" value="03" class="rd" name="a" />
<input class="ck" type="radio" value="04" class="rd" name="a" />
<input class="ck" type="radio" value="05" class="rd" 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)

 

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

标签:html   move   name   doc   列表   jquery   att   rip   复选框   

原文地址:http://www.cnblogs.com/sq45711478/p/6064431.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!