先来看一下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中是可以统一给他设置的，无论样式还是事件