先来看一下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的点击事件，三句代码完成全选事件的更多相关文章

  1. 用读写锁三句代码解决多线程并发写入文件 z

    C#使用读写锁三句代码简单解决多线程并发写入文件时提示“文件正在由另一进程使用,因此该进程无法访问此文件”的问题 在开发程序的过程中,难免少不了写入错误日志这个关键功能.实现这个功能,可以选择使用第三 ...

  2. Redis总结（五）缓存雪崩和缓存穿透等问题 Web API系列(三)统一异常处理 C#总结（一）AutoResetEvent的使用介绍（用AutoResetEvent实现同步） C#总结（二）事件Event 介绍总结 C#总结（三）DataGridView增加全选列 Web API系列(二)接口安全和参数校验 RabbitMQ学习系列（六）: RabbitMQ 高可用集群

    Redis总结(五)缓存雪崩和缓存穿透等问题   前面讲过一些redis 缓存的使用和数据持久化.感兴趣的朋友可以看看之前的文章,http://www.cnblogs.com/zhangweizhon ...

  3. 【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选

    页面点击按钮添加一行    删除一行   全选   反选  全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> & ...

  4. jquery事件三 -- load(), ready(), resize()以及bind()事件

    例子1 ready() DOM加载完毕 load() 元素加载完毕 resize() 浏览器窗口的大小发生变化 <!DOCTYPE html> <html lang="en ...

  5. C#总结（三）DataGridView增加全选列

    最近的一个winform的项目中,碰到datagridview控件的第一列添加全选的功能,通常这个功能,有两种实现方式:1. 为控件添加DataGridViewCheckBoxColumn来实现,但是 ...

  6. swift 一句代码补全tableView分割线

    1.swift实现分割线补全 swift一个大进步,只要设置tableView.separatorInset = UIEdgeInsets.zero即可补全分割线, 2.OC实现分割线补全 而在OC中 ...

  7. TreeView的三种状态，全选，全不选，半选中

    我知道的设置treeview节点的三种状态,如果不是买的控件,那么通过代码,只能设置两种状态,我知道的有三种方法, 第一种是重写treeview,第二种是把三种状态做成小图标,让节点复选框随着不同的状 ...

  8. vue中两行代码实现全选及子选项全部选中，则全选按钮选中，反之有一个没选中，就取消选中全选按钮

    every() 方法使用指定函数检测数组中的所有元素: 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测. 如果所有元素都满足条件,则返回 true. 逻辑 ...

  9. 基于jquery 全选、反选、各行换色、单击行选中事件实现代码

    <script language="javascript"> $(document).ready(function(){ //各行换色 $('table tr:odd' ...

随机推荐

  1. Android 获取meta-data中的数据

    在 Android 的 Mainfest 清单文件中,Application,Activity,Recriver,Service 的节点中都有这个的存在.很多时候我们可以通过 meta-data 来配 ...

  2. JavaScript 对象属性介绍

    本篇主要介绍JS中对象的属性,包括:属性的分类.访问方式.检测属性.遍历属性以及属性特性等内容. 目录 1. 介绍:描述属性的命名方式.查找路径以及分类 2. 属性的访问方式:介绍'.'访问方式.'[ ...

  3. Android业务组件化之现状分析与探讨

    前言: 从个人经历来说的话,从事APP开发这么多年来,所接触的APP的体积变得越来越大,业务的也变得越来越复杂,总来来说只有一句话:这是一个APP臃肿的时代!所以为了告别APP臃肿的时代,让我们进入一 ...

  4. 问题记录：EntityFramework 一对一关系映射

    EntityFramework 一对一关系映射有很多种,比如主键作为关联,配置比较简单,示例代码: public class Teacher { public int Id { get; set; } ...

  5. Vertica 数据库知识汇总篇

    Vertica 数据库知识汇总篇(更新中..) 1.Vertica 集群软件部署,各节点硬件性能测试 2.Vertica 创建数据库,创建业务用户测试 3.Vertica 数据库参数调整,资源池分配 ...

  6. “fixed+relative==absolute”——对BFC的再次思考

    好久没写博客了,刚好今天跨年夜没约到什么妹子,在家宅着不如写点东西好了. 需求 昨天晚上,给公司年会做一个移动端的投票页面,遇到一个UI优化的问题: · 正文内容少于一屏时,投票提交按钮固定显示在页面 ...

  7. 我理解的MVC

    前言 前一阶段对MVC模式及其衍生模式做了一番比较深入的研究和实践,这篇文章也算是一个阶段性的回顾和总结. 经典MVC模式 经典MVC模式中,M是指业务模型,V是指用户界面,C则是控制器,使用MVC的 ...

  8. Android—基于GifView显示gif动态图片

    android中显示gif动态图片用到了开源框架GifView 1.拷GifView.jar到自己的项目中. 2.将自己的gif图片拷贝到drawable文件夹 3.在xml文件中设置基本属性: &l ...

  9. Mysql 忘记root密码处理办法

    一.更改my.cnf配置文件 1.用命令编辑/etc/my.cnf配置文件,即:vim /etc/my.cnf 或者 vi /etc/my.cnf 2.在[mysqld]下添加skip-grant-t ...

  10. Ubuntu 16.04 安装 arm-linux-gcc 嵌入式交叉编译环境 问题汇总

    闲扯: 实习了将近半年一直在做硬件以及底层的驱动,最近要找工作了发现了对linux普遍要求很高,而且工作岗位也非常多,所以最近一些时间在时不时地接触linux. 正文:(我一时兴起开始写博客,准备不充 ...