1. 目前为止学过的绑定事件的方式
  1. 在标签里面写 onclick=foo(this);
  2. 原生DOM的JS绑定 DOM对象.onclick=function(){...}
  3. jQuery版的绑定事件 jQuery对象.click(function(){...})

2. 我们今后要用的jQuery绑定事件的方式
  .on("click", function(){...})

  $("#t1").on("click", "选择器", function(){...})
  适用于 给未来的元素(页面生成的时候还没有的标签) 绑定事件 (事件委托)

  事件冒泡和事件捕获
  利用事件冒泡,给已经存在的标签绑定事件,用来捕获后代标签的事件.

3. 事件之间
  1. 阻止后续事件的执行
    显式的写 return false;
  2. for循环,退出当前循环 ---> 用break;
  4. 补充一个键盘事件
    示例:批量操作的

  5. DOM加载完之后执行

    $(document).ready(function(){
      // 写绑定事件的具体操作
    });
  6. 动画(了解即可)

3. jQuery补充
  1. .each循环
    1. $.each(a1, function(){...})
    2. $("div").each(function(){
      console.log(this); --> this指的是每次进入循环的标签
    })
  2. .data
    1. 可以存字符串
    2. 可以存数字
    3. 可以存jQuery对象
  3. 插件机制
    1. 给具体的jQuery对象添加扩展
      $.fn.extend({
        "s9": function(){
          ...
        }
      })

    2. 给jQuery添加全局扩展
      $.extend({
        "s9": function(){
          ...
        }
      })

因为许多元素是通过js或者jQuery添加的,可以看成是未来元素,在触发按钮的时候,这些元素还没有,所以无法提前绑定事件。

既然这些未来元素暂时不存在,那么就可以通过现有的元素来给未来元素绑定事件。

table、table里面的tbody,页面一加载就存在,尽量选择靠近未来元素所在位置的标签,让页面查询速度快一些。

<script src="../../jquery-3.2.1.min.js"></script>
<script>
$("#b1").on("click",function () {
//生成要添加的数据
var tr = document.createElement("tr");
$(tr).html("<td>3</td><td>小红</td><td>瓜子</td><td><button class=\"delete\">删除</button></td>");
// language=JQuery-CSS
$("#t1").find("tbody").append(tr);
})
$(".delete").on("click",function () {
$(this).parent().parent().remove();
})
</script>

写成这样就可以解决:

$("tbody").on("click",".delete",function () {
$(this).parent().parent().remove();
})

批量操作:在表格中勾选多个checkbox时,然后对select进行操作,select选中哪一个,所有被勾选的checkbox同时和某一个选中的一致。(有点复杂)

这里涉及到键盘事件的处理,以按下ctrl键进入批量为例,ctrl数字17代表(第一段小程序可以判断键盘代表数字几)。

大致思路就是,通过select找到checkbox的位置,然后用被选中的checkbox来控制select中的value一致。

还要注意键盘按下进入批量操作,键盘抬起退出批量操作,这两个定义为两个事件。

在控制台中获取键盘数字是多少,或者直接百度。

var $body = $("body");
$body.on("keydown", function (event) {
console.log(event);
//ctrl键
});
  $("select").on("change", function () {
//取到当前select的值
var value = $(this).val();
//点击select找到checkbox
var $thisCheckbox = $(this).parent().siblings().first().find(":checkbox");
console.log($thisCheckbox[0]);
//判断checkbox是否被选中
if ($thisCheckbox.prop("checked") && mode) {
//真正进入批量模式
//找到所有被选中的checkbox,注意check一般都要用循环取
var $checked = $("input[type='checkbox']:checked");
for (var i = 0; i < $checked.length; i++) {
//找到同一行的select
$($checked[i]).parent().siblings().last().find("select").val(value);
}
}
})

  

完整代码:

<table border="1" id="t1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>小强</td>
<td>冰淇淋</td>
<td>
<select>
<option value="0">上线</option>
<option value="1">下线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>小明</td>
<td>香蕉</td>
<td>
<select>
<option value="0">上线</option>
<option value="1">下线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>小明</td>
<td>香蕉</td>
<td>
<select>
<option value="0">上线</option>
<option value="1">下线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>小明</td>
<td>香蕉</td>
<td>
<select>
<option value="0">上线</option>
<option value="1">下线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
</tbody>
</table>
<script src="../../jquery-3.2.1.min.js"></script>
<script>
var mode = false;
var $body = $("body");
$body.on("keydown", function (event) {
console.log(event);
//ctrl键
if (event.keyCode === 17) {
//进入批量操作模式
mode = true;
}
}); //当按键抬起来的时候,退出批量操作模式
$body.on("keyup", function (event) {
console.log(event);
//ctrl键
if (event.keyCode === 17) {
//进入批量操作模式
mode = false;
}
}) $("select").on("change", function () {
//取到当前select的值
var value = $(this).val();
//点击select找到checkbox
var $thisCheckbox = $(this).parent().siblings().first().find(":checkbox");
console.log($thisCheckbox[0]);
//判断checkbox是否被选中
if ($thisCheckbox.prop("checked") && mode) {
//真正进入批量模式
//找到所有被选中的checkbox,注意check一般都要用循环取
var $checked = $("input[type='checkbox']:checked");
for (var i = 0; i < $checked.length; i++) {
//找到同一行的select
$($checked[i]).parent().siblings().last().find("select").val(value);
}
}
})
</script>

07_jQuery对象初识(五)事件(非常重要)的更多相关文章

  1. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  2. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  3. CSS 伪类和伪对象选(五)

    一.伪选择器 伪选择器包括:伪类选择器和伪对象选择器,以冒号(:)作为前缀,冒号后紧跟伪类或者伪对象名称,冒号前后没有空格,否则解析为包含选择器 如: div:hover{ font-size:12p ...

  4. 简单总结焦点事件、Event事件对象、冒泡事件

    每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...

  5. DOM中的事件对象和IE事件对象

    DOM中的事件对象 IE事件对象 属性/方法 类型 读/写 说明 属性/方法 类型 读/写 说明  bubles Boolean 只读  表明事件是否冒泡  cancleBubble Boolean ...

  6. Java中创建(实例化)对象的五种方式

    Java中创建(实例化)对象的五种方式1.用new语句创建对象,这是最常见的创建对象的方法. 2.通过工厂方法返回对象,如:String str = String.valueOf(23); 3.运用反 ...

  7. onblur 对象失去焦点事件

    onblur 对象失去焦点事件 一.总结 1.几乎所有的控件都支持onblur事件 二.简介 onblur 事件 Event 对象 定义和用法 onblur 事件会在对象失去焦点时发生. 语法 onb ...

  8. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  9. winform练习-通过遍历Control容器中的对象统一委托事件-楼盘选择器

    1.窗体布局如下,一个label标签内容如下,一个btnSave按钮,用于保存,其他九个按钮用于选择楼盘. 2. 按钮存于Control容器中,编写方法遍历容器中的button,通过条件过滤掉不是bu ...

随机推荐

  1. Eclipse中普通java项目转成Web项目

    在eclipse导入一个myeclipse建的web项目后,在Eclipse中显示的还是java项目,按下面的步骤可以将其转换成web项目. 1.找到项目目录下的.project文件 2.编辑.pro ...

  2. mantis 添加新状态配置方法

    在mantis的状态栏中一般只有:新建.反馈.认可.已确认.已分派.已解决.已关闭,七个选项,如果想在其中加入新的状态怎么做? 我要加入的状态为:重新打开 1.添加状态信息 打开config_defa ...

  3. 【模板篇】A* 寻路算法

    上次在做k短路的时候说到了A*, 但是并没有仔细的研究A*寻路, 毕竟k短路中的A*也不怎么标准… A*寻路的过程网上还是有很多的, 讲得也很清楚, 不妨跟着里面的图示自己动手操作一下, 基本一遍就能 ...

  4. 既然 start() 方法会调用 run() 方法,为什么我们调用 start() 方法,而不直接调用 run() 方法?

    当你调用 start() 方法时,它会新建一个线程然后执行 run() 方法中的代码.如果直接调用 run() 方法,并不会创建新线程,方法中的代码会在当前调用者的线程中执行

  5. 查看收到的邮件的来源ip以及包信息

    有时我们需要知道收到的邮件是从哪台服务器发送过来的,或者想知道该邮件的报文头是怎样的.以下以网易邮箱为例介绍如果抓取这些信息. 首先我们需要知道网易邮箱的访问服务器(拉协议),由于SMTP是推的协议, ...

  6. [转]Ubuntu安装rabbitMq

    笔者ubuntu版本为Ubuntu 15.10,查看ubuntu当前版本命令:cat /etc/issue. 由于rabbitMq需要erlang语言的支持,在安装rabbitMq之前需要安装erla ...

  7. mysql 监控及优化——转载自http://www.cnblogs.com/suansuan/

    1.Mysql连接数 Mysql默认最大连接数为100. 设置Mysql的最大连接数,在Mysql的配置文件中增加: max_connections = 1000   #Mysql的最大连接数,默认如 ...

  8. leetcode-421-数组中两个数的最大异或值*(前缀树)

    题目描述: 方法一: class Solution: def findMaximumXOR(self, nums: List[int]) -> int: root = TreeNode(-1) ...

  9. SpringCloud网关无法加载权限及IP黑名单白名单

    启动springcloud服务注册中心base,再启动网关远程调用base的接口读取权限等数据,控制台出现加载null权限ERROR提示.在远程调用处打断点,先进入代理,找到抛出异常的原因是reque ...

  10. [HEOI 2018]一双木棋

    题意:求对抗分数差值最大. 思路:状压dp,维护一条轮廓线,最大化分差.可以发现上一行的棋子个数永远比这一行多. #include<bits/stdc++.h> using namespa ...