07_jQuery对象初识(五)事件(非常重要)
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对象初识(五)事件(非常重要)的更多相关文章
- 从零开始学习jQuery (五) 事件与事件对象
本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- CSS 伪类和伪对象选(五)
一.伪选择器 伪选择器包括:伪类选择器和伪对象选择器,以冒号(:)作为前缀,冒号后紧跟伪类或者伪对象名称,冒号前后没有空格,否则解析为包含选择器 如: div:hover{ font-size:12p ...
- 简单总结焦点事件、Event事件对象、冒泡事件
每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...
- DOM中的事件对象和IE事件对象
DOM中的事件对象 IE事件对象 属性/方法 类型 读/写 说明 属性/方法 类型 读/写 说明 bubles Boolean 只读 表明事件是否冒泡 cancleBubble Boolean ...
- Java中创建(实例化)对象的五种方式
Java中创建(实例化)对象的五种方式1.用new语句创建对象,这是最常见的创建对象的方法. 2.通过工厂方法返回对象,如:String str = String.valueOf(23); 3.运用反 ...
- onblur 对象失去焦点事件
onblur 对象失去焦点事件 一.总结 1.几乎所有的控件都支持onblur事件 二.简介 onblur 事件 Event 对象 定义和用法 onblur 事件会在对象失去焦点时发生. 语法 onb ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- winform练习-通过遍历Control容器中的对象统一委托事件-楼盘选择器
1.窗体布局如下,一个label标签内容如下,一个btnSave按钮,用于保存,其他九个按钮用于选择楼盘. 2. 按钮存于Control容器中,编写方法遍历容器中的button,通过条件过滤掉不是bu ...
随机推荐
- JS函数 函数调用 函数定义好后,是不能自动执行的,需要调用它,直接在需要的位置写函数名。
函数调用 函数定义好后,是不能自动执行的,需要调用它,直接在需要的位置写函数名. 第一种情况:在<script>标签内调用. <script type="text/java ...
- ECharts (mark)
首页 文档 下载 实例 社区 工具 关于 2.0 EN ECharts 特性 特性 丰富的可视化类型 多种数据格式无需转换直接使用 千万数据的前端展现 移动端优化 多渲染方案,跨平台使用! 深度的交互 ...
- RAKsmart新出香港服务器的优势
RAKsmart为了更好地服务用户,所以最近RAKsmart新推出得香港服务器又带给了用户更多的选择,那这次RAKsmart新推出香港服务器有哪些优势呢? 1.带宽更大可升至10Mpbs 香港服务器的 ...
- android studio 一个项目如何打包多个apk
1.修改app的build.gradle文件 假设我们同一套代码编译2个app:demo1和demo2 android { ... productFlavors { // demo1 demo1 { ...
- CSIC_716_20191108【文件的操作,以及彻底解决编码问题的方案】
关于编码的问题: 在平时编写代码,涉及到打开文件时,常常遇到字符编码的报错, 通过总结,得出以下规律 如果在操作过程中涉及到调用文本文档,一定要在文本文档开头申明编码方式(# coding:XXXX ...
- git连接gitee笔记
#首先参照 https://blog.csdn.net/zhangyu4863/article/details/80427289 #然后需要注意,在办公室无法使用 git remote add ori ...
- WPF 新突破
刘琦告诉我 需要改变哪个属性哪个属性就需要实现InotifyPropertyChanged 董秀伟告诉我 界面改变会立即传输到属性上,并不需要实现InotifyPropertyChanged,只有 ...
- Python 学习杂项
#print("Hello World!") #name = "nihfjkds" age = 454 num1 = 1 num2 = 2 #print(nam ...
- 阿里云图数据库GraphDB上线,助力图数据处理
GraphDB简介 GraphDB图数据库适用于存储,管理,查询复杂并且高度连接的数据,图库的结构特别适合发现大数据集下数据之间的共性和特性,特别善于释放蕴含在数据关系之间的巨大价值.GraphDB引 ...
- Android Matrix理论与应用详解
转:http://zensheno.blog.51cto.com/2712776/513652 Matrix学习——基础知识 以前在线性代数中学习了矩阵,对矩阵的基本运算有一些了解,前段时间在使用GD ...