开源中文网

您的位置: 首页 > jquery框架 > 正文

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

来源: QISHUANG的博客  作者: QISHUANG

先来看一下Js和Juery的点击事件

举两个简单的例子

复制代码
<!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点击触发的事件

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

看一下运行的效果

点击测试

再点击测试2

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

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

Juery中,是通过个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");
        })
    
复制代码

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

来看一下运行的效果

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

 

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

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

下面再来看一下Juery做全选

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

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

运行的结果

点击全选

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

点击全选

再点击一下

确实是有问题

下面主要来看一下Juery怎么样来做全选,来看一下代码部分

 

复制代码
<!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中是可以统一给他设置的,无论样式还是事件

Tags:事件 代码
关于开源中文网 - 联系我们 - 广告服务 - 网站地图 - 版权声明