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