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. 【第三周读书笔记】浅谈node.js中的异步回调和用js-xlsx操作Excel表格

    在初步学习了node.js之后,我发现他的时序问题我一直都很模糊不清,所以我专门学习了一下这一块. 首先我们来形象地理解一下进程和线程: 进程:CPU执行任务的模块.线程:模块中的最小单元. 例如:c ...

  2. pycharm连接数据库及相应操作

    1.连接数据库 2.pycharm中数据库的操作

  3. ubuntu自带截图工具

    ubuntu自带的截图工具感觉能够满足基本的截图功能,可以不必安装另外的截图软件. 一般用到的截图类型有三种:全屏.当前活动窗口.自定义区域,其中自定义区域截图是最灵活也是我们用的最多的方式.在ubu ...

  4. hdu6393 Traffic Network in Numazu 树链剖分

    题目传送门 题意:给出n个点n条边的无向带权图,再给出两种操作,操作1是将第x条边的边权修改为y,操作2是询问点x到点y的最短路径. 思路:如果是n个点n-1条边,题目就变成了树,修改边权和询问最短路 ...

  5. 如何使用flow进行静态类型检查

    Flow 是 facebook 出品的 JavaScript 静态类型检查⼯具.Vue.js 的源码利⽤了 Flow 做了静态类型检查,所以了解 Flow 有助于我们阅读源码. 为什么⽤ Flow? ...

  6. vue 兄弟组件的传值

    handleLetterClick方法,采用emit 传递给父组件 父组件触发的方法: handleLetterChange方法: 父组件传递给子组件: CityList组件:   兄弟组件的传值可以 ...

  7. windows下 Mysql 8.0.x 数据库简单的导出和导入!!!

    1.首先需要进入到mysql安装目录下的bin目录,执行cmd进入命令窗口. 2.导出(导出某个数据库,也可以针对某张表导出)2.1导出数据结构以及数据的命令: mysqldump -u root - ...

  8. 微信小程序为什么看不到所有的console.log()的日志信息

    记录一个巨傻无比的问题 1.在首页的onLoad()函数里面,加了地理位置的加载,并打印到控制台上,可是今天就是没出现 2.然后纳闷的很久,各种google,发现没有人遇到这个问题 3.再然后,我就看 ...

  9. python 使用字符串

    字符串方法 string.digits:包含数字0-9的字符串 string.letters:包含所有字母(大写或小写)的字符串 string.lowercase:包含所有小写字母的字符串 strin ...

  10. 校园商铺-4店铺注册功能模块-1Dao层之更新店铺

    dao层增加更新店铺的方法 package com.csj2018.o2o.dao; import com.csj2018.o2o.entity.Shop; public interface Shop ...