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