Jquery的点击事件，三句代码完成全选事件

先来看一下Js和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>

<script src="jquery-1.11.2.min.js"></script>

</head>

<body>

<input type="button" value="测试" onclick="test()" />

<input type="button" value="测试2" id = "btn" />

</body>

<script type="text/javascript">

function test()

{

  alert("aa");

}

$(document).ready(function(e) {

    $("#btn").click(function(){

    alert("第二个按钮");    

        })

});

</script>

</html>

aa 是Js点击触发的事件

第二个按钮是Jquery点击触发的事件

看一下运行的效果

点击测试

再点击测试2

再来看一下，从代码上它们有什么区别

Js中，给他们加事件，是在按钮后面加个点击事件

Jquery中，是通过个id找到这个元素，然后点击后才触发的事件

Js中如果要给好几个元素都加事件，需要每句代码后面都要加点击事件，来看一下Juery中

运行的结果

三个按钮都可以弹出同样的一句话

那如果想知道点击了谁该怎么做呢？

来看一下事件部分的代码

这句话的意思就是选取点击它自身的值，来看一下运行的结果

点击测试4

点击测试5

点击测试三也是同样的效果

显示的是他们的value值

再做一个比较有趣的点击事件

先大概讲一下然后再来看他们的代码

有三个按钮，点击单纯点击第二个，是不会弹窗口的，要先点击第一个，再点击第二个才可以，如果再点击第三个，那么再点击第二个，又不行了，等于说给它移除了这个事件

来看一下代码

<input type="button" value="挂事件" id="gua" />

<input type="button" value="测试事件" id="ceshi" />

<input type="button" value="移出事件" id="yichu" />

//点击给测试事件按钮挂上一个事件

  $("#gua").click(function(){

    //bind方法用于挂事件

    $("#ceshi").bind("click",function(){

        alert("挂上了事件");

        });

    })

//点击给测试时间按钮移除点击事件

    $("#yichu").click(function(){

        $("#ceshi").unbind("click");

        })

注意，我只是截取了关键的部分代码，那些引入Jquery包，还有最外层的代码还是需要的

来看一下运行的效果

这时候点击测试事件是不管事的，那就点击挂事件再来点击测试事件看看有什么样的效果

这时候测试事件可以点击了，而且点击多少次都可以，如果点击了移除事件，那么测试事件就不能弹出了

这里有两个关键字要记住，就是加事件和减事件，以后做动态可以用到 bind需要两个参数，unbind需要一个

下面再来看一下Jquery做全选

之前做的全选都是用Js做的，Js做的全选其实有BUG，不知道大家有没有注意，就是如果光点全选按钮的话还是好使的，要是你单独点击某个按钮的话，再点击全选就会出现问题

来看一下Js做全选的部分代码

运行的结果

点击全选

都没有问题，如果单独点击某一项，再来看一下

点击全选

再点击一下

确实是有问题

下面主要来看一下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>

<script src="jquery-1.11.2.min.js"></script>

</head>

<body>

<br />

<div><input type="checkbox" id="qx" onclick="xuan()" /> 全选</div>

<br />

<div>

<input type="checkbox" class="ck" /> 山东

<input type="checkbox" class="ck" /> 淄博

<input type="checkbox" class="ck" /> 张店

<input type="checkbox" class="ck" /> 淄川

<input type="checkbox" class="ck" /> 桓台

</div>

</body>

<script type="text/javascript">

/*function xuan()

{

    var a = document.getElementById("qx");

    var ck = document.getElementsByClassName("ck");

    for(var i=0;i<ck.length;i++)

    {

        if(a.checked)

        {

            ck[i].setAttribute("checked","checked");

        }

        else

        {

            ck[i].removeAttribute("checked");

        }

    }

}*/

$("#qx").click(function(){

    //    var xz = $(this)[0].checked;   //DOM对象

        var xz = $(this).prop("checked");   //Jquery对象

        $(".ck").prop("checked",xz);

    })

</script>

</html>

绿色部分是注释Js做法的

Jquery做起来其实就用三句代码非常简便，而且没有BUG

可以来看一下运行的结果，先来试一下点击单独一项

点击全选

再次点击

没有问题

Jquery中是可以统一给他设置的，无论样式还是事件

巴特西

Jquery的点击事件，三句代码完成全选事件

最新文章

热门文章