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

时间:2022-05-24 07:18:08

先来看一下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点击触发的事件

看一下运行的效果

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

点击测试

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

再点击测试2

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

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

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

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

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

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

运行的结果

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

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

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

来看一下事件部分的代码

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

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

点击测试4

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

点击测试5

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

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

显示的是他们的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包,还有最外层的代码还是需要的

来看一下运行的效果

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

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

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

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

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

下面再来看一下Jquery做全选

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

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

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

运行的结果

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

点击全选

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

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

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

点击全选

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

再点击一下

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

确实是有问题

下面主要来看一下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的点击事件,三句代码完成全选事件

再次点击

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

没有问题

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