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

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)
时间: 2024-08-04 00:08:42

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

jQuery实现checkbox(复选框)选中、全选反选代码

谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr("checked")) 会提示您是true而不是checked 所以很多朋友判断  if($("#id").attr("checked")=="true") 这个是错误的,其实应该是 if($("#id").attr

jQuery_review之jQuery实现多选框的反选、全选、全不选

有几个非常常见的知识点,需要重点关注一下.如何显示多选框呢?<input type="checkbox" name="name" value="value1"><input type="checkbox" name="name" value="value2">.这样就能表示两个多选框,他们具有同样的name值,在JSP中,传到后台的时候,可以使用request.g

11月8日上午Jquery的基础语法、选取元素、操作元素、加事件、挂事件及移除事件

jquery基础知识 1.jquery文件的引入,所有的js代码要写在下面那段代码下面. <script src="../jquery-1.11.2.min.js"></script><!--引入的jquery一定是在最上面的,也要在其它引入的jquery文件上面--> 2.写jquery代码的位置 和js一样,jquery代码也是写在<script>开始和结束标签之间. <script type="text/javasc

jQuery对复选框(checkbox)的全选,全不选,反选等的操作

效果截图: HTML代码: <body><ul id="list"> <li><label><input type="checkbox" name="items" value="1"> 1.时间都去哪儿了</label></li> <li><label><input type="checkbox"

11月3日下午数据库的封装和引用 数据的分页

一.数据库的封装和引用 之前写代码都是通过mysql取结果写的,这样写的缺点是每次要用数据时都需要写sql参数,并且要写很多份,而且当数据库换了,或者密码改了就需要修改每一个文件里的和mysql有关的参数,结果会很复杂.下面就把数据库的操作封装成一个类,每一次操作的时候去调用封装的类. 以后就用封装类的方法写,防止换数据库.换电脑.或者是放到服务器上以后直接从封装的类里面更改数据库名称,用户名.密码等.就不需要改页面里的内容了. 1.查询语句 第1步:建一个封装类的文件DBDA.class.ph

11月10日下午 ajax做显示信息以后用ajax、Bootstrp做弹窗显示信息详情

1.用ajax做弹窗显示信息详情 nation.php <!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> <me

11月18日下午权限管理2:不同的登录者显示登陆者有的功能

1.做一个登录页面login.php <!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-e

2014年7月19日——比赛题取石头问题1

参考地址: http://blog.csdn.net/abcjennifer/article/details/5922699 River Hopscotch Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 2433   Accepted: 1064 Description Every year the cows hold an event featuring a peculiar version of hopscotch

学习笔记(11月06日) --类

四周一次课(11月6日) 一.类的一般形式 创建类我们一般用class关键字来创建一个类,class后面跟类名字,可以自定义,最后以冒号结尾,如下所示: class ClassName: '''类的说明''' 类的内容 类的内容可以写类的全局变量,方法等 例子: class ren(object):     '''this is a new class'''     name = 'meinv'     sex = 'woman' a = ren() print(type(a)) print(a