Jquery的点击事件，三句代码完成全选事件
先来看一下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中是可以统一给他设置的，无论样式还是事件
Jquery的点击事件，三句代码完成全选事件的更多相关文章
- 用读写锁三句代码解决多线程并发写入文件 z
C#使用读写锁三句代码简单解决多线程并发写入文件时提示“文件正在由另一进程使用,因此该进程无法访问此文件”的问题 在开发程序的过程中,难免少不了写入错误日志这个关键功能.实现这个功能,可以选择使用第三 ...
- Redis总结（五）缓存雪崩和缓存穿透等问题 Web API系列(三)统一异常处理 C#总结（一）AutoResetEvent的使用介绍（用AutoResetEvent实现同步） C#总结（二）事件Event 介绍总结 C#总结（三）DataGridView增加全选列 Web API系列(二)接口安全和参数校验 RabbitMQ学习系列（六）: RabbitMQ 高可用集群
Redis总结(五)缓存雪崩和缓存穿透等问题 前面讲过一些redis 缓存的使用和数据持久化.感兴趣的朋友可以看看之前的文章,http://www.cnblogs.com/zhangweizhon ...
- 【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选
页面点击按钮添加一行 删除一行 全选 反选 全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> & ...
- jquery事件三 -- load(), ready(), resize()以及bind()事件
例子1 ready() DOM加载完毕 load() 元素加载完毕 resize() 浏览器窗口的大小发生变化 <!DOCTYPE html> <html lang="en ...
- C#总结（三）DataGridView增加全选列
最近的一个winform的项目中,碰到datagridview控件的第一列添加全选的功能,通常这个功能,有两种实现方式:1. 为控件添加DataGridViewCheckBoxColumn来实现,但是 ...
- swift 一句代码补全tableView分割线
1.swift实现分割线补全 swift一个大进步,只要设置tableView.separatorInset = UIEdgeInsets.zero即可补全分割线, 2.OC实现分割线补全 而在OC中 ...
- TreeView的三种状态，全选，全不选，半选中
我知道的设置treeview节点的三种状态,如果不是买的控件,那么通过代码,只能设置两种状态,我知道的有三种方法, 第一种是重写treeview,第二种是把三种状态做成小图标,让节点复选框随着不同的状 ...
- vue中两行代码实现全选及子选项全部选中，则全选按钮选中，反之有一个没选中，就取消选中全选按钮
every() 方法使用指定函数检测数组中的所有元素: 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测. 如果所有元素都满足条件,则返回 true. 逻辑 ...
- 基于jquery 全选、反选、各行换色、单击行选中事件实现代码
<script language="javascript"> $(document).ready(function(){ //各行换色 $('table tr:odd' ...
随机推荐
- Linux CentOS 配置JDK环境
一.下载JDK 下载JDK的方式有两种: 1.Linux中使用wget下载 1.使用命令安装wget yum install wget 2.下载 wget 'http://download.oracl ...
- 算法笔记_013:汉诺塔问题（Java递归法和非递归法）
目录 1 问题描述 2 解决方案 2.1 递归法 2.2 非递归法 1 问题描述 Simulate the movement of the Towers of Hanoi Puzzle; Bonus ...
- 让 windows 下的命令行程序 cmd.exe 用起来更顺手
在 Windows 下使用 Larave 框架做开发,从 Composer 到 artisan 总是避免不了和 cmd.exe 打交道,系统默认的命令行界面却是不怎么好看,且每行显示的字符数是做了限制 ...
- 【原创分享·微信支付】C# MVC 微信支付之微信模板消息推送
微信支付之微信模板消息推送 今天我要跟大家分享的是“模板消息”的推送,这玩意呢,你说用途嘛,那还是真真的牛逼呐.原因在哪?就是因为它是依赖微信生存的呀,所以他能不 ...
- ASP.NET Core: You must add a reference to assembly mscorlib, version=4.0.0.0
ASP.NET Core 引用外部程序包的时候,有时会出现下面的错误: The type 'Object' is defined in an assembly that is not referenc ...
- 免费开源的DotNet任务调度组件Quartz.NET（.NET组件介绍之五）
很多的软件项目中都会使用到定时任务.定时轮询数据库同步,定时邮件通知等功能..NET Framework具有“内置”定时器功能,通过System.Timers.Timer类.在使用Timer类需要面对 ...
- Spark读写Hbase的二种方式对比
作者:Syn良子 出处:http://www.cnblogs.com/cssdongl 转载请注明出处 一.传统方式 这种方式就是常用的TableInputFormat和TableOutputForm ...
- 【从零开始学BPM，Day5】报表配置及自定义功能页面开发
[课程主题] 主题:5天,一起从零开始学习BPM [课程形式] 1.为期5天的短任务学习 2.每天观看一个视频,视频学习时间自由安排. [第五天课程] 1.课程概要 Step 1 软件下载:H3 BP ...
- Android Weekly Notes Issue #237
Android Weekly Issue #237 December 25th, 2016 Android Weekly Issue #237 这是本年的最后一篇issue, 感谢大家. 本期内容包括 ...
- [css]实现垂直居中水平居中的几种方式
转自博客 http://blog.csdn.net/freshlover/article/details/11579669 居中方式: 一.容器内(Within Container) 内容块的父容器设 ...