Day 56 jquery
一 、事件委托实例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>事件委托示例</title>
</head>
<body> <input type="button" value="添加新数据" id="add">
<table border="">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>金老板</td>
<td><input type="button" value="删除" class="delete"></td>
</tr>
<tr>
<td></td>
<td>景女神</td>
<td><input type="button" value="删除" class="delete"></td>
</tr>
<tr>
<td></td>
<td>隔壁老王</td>
<td><input type="button" value="删除" class="delete"></td>
</tr>
</tbody>
</table> <script src="jquery-3.3.1.js"></script> <script>
// 点击添加按钮添加一条新数据
// 1. 找到按钮绑定点击事件
$("#add").on("click", function () {
// 当添加按钮被点击之后要做的事儿
// 1. 创建一个新的tr
var trEle = document.createElement("tr");
trEle.innerHTML = '<td>4</td> <td>哪吒</td> <td><input type="button" value="删除" class="delete"></td>';
// 2. 把创建好的tr追加到tbody里面
$("tbody").append(trEle);
}); // 点击每一行的删除按钮,把当前行删除掉
// 1. 找到每一行的删除按钮,绑定点击事件
$("table").on("click", "input.delete", function () {
// 给table标签绑定事件,监听我子子孙孙里面有delete样式类的标签如果被点击了,我就做下面的事儿
// 当每一行的删除按钮被点击后要做的事儿
// 1. 删除当前被点击的按钮的这一行
console.log(this);
$(this).parent().parent().remove();
})
</script>
</body>
</html>
二 、hover事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hover示例</title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
height: 40px;
width: 100%;
background-color: #3d3d3d;
position: fixed;
top: 0;
} .nav ul {
list-style-type: none;
line-height: 40px;
} .nav li {
float: left;
padding: 0 10px;
color: #999999;
position: relative;
}
.nav li:hover {
background-color: #0f0f0f;
color: white;
} .clearfix:after {
content: "";
display: block;
clear: both;
} .son {
position: absolute;
top: 40px;
left: 0;
height: 50px;
width: 100px;
background-color: #00a9ff;
display: none;
} .hover .son {
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul class="clearfix">
<li>登录</li>
<li>注册</li>
<li class="hover">购物车
<p class="son">
空空如也...
</p>
</li>
</ul>
</div> <script src="jquery-3.3.1.js"></script>
<script> $(".nav li").hover(
function () {
// 鼠标移上去
$(this).addClass("hover");
},
// 鼠标移走
function () {
$(this).removeClass("hover");
}
)
</script>
</body>
</html>
三、keydown和keyup事件组合示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title> 按住shift批量操作</title>
</head>
<body> <table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Egon</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Alex</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Yuan</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>EvaJ</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Gold</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
</tbody>
</table> <script src="jquery-3.3.1.js"></script>
<script>
// 定义一个全局的变量,保存shift有没有被按下的状态
var flag = false; // 给window绑定按键被按下的事件
$(window).on("keydown", function (e) {
console.log(e.keyCode);
if (e.keyCode === 16){
// 表示shift被按下!!!
flag = true;
}
}); // 给window绑定按键被抬起的事件
$(window).on("keyup", function (e) {
if (e.keyCode === 16){
// 表示shift被按下!!!
flag = false;
}
}); // select标签的值发生变化之后,触发事件
$("select").on("change", function () {
// 1. 判断shift有没有被按下
// 2. 判断当前行有没有被选中
var isChecked = $(this).parent().parent().find(":checkbox").prop("checked");
if (flag && isChecked) {
// 按下就进入批量编辑模式
// 1. 取到select变化之后的值
var value = $(this).val();
// 2. 找到所有的选中的checkbox,把对应的select设置成上面能取到的值
$("input:checked").parent().parent().find("select").val(value);
}
// 没有被按下,啥都不做
})
</script>
</body>
</html>
Day 56 jquery的更多相关文章
- day 56 jQuery学习
1.补充:each 描述:一个通用的迭代函数,它可以用来无缝迭代对象和数组.数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1.其他对象通过其属性名 ...
- JQuery EasyUI之DataGrid列名和数据列分别设置不同对齐方式(转)
需求如下 现有数据列三列 Name,Age,CreateDate 数据 张三,18,2000-12-09 :12:34:56 李四,28,2000-12-09 :12:34:56 王麻子,38,200 ...
- jQuery 第二章 实例方法 DOM操作选择元素相关方法
进一步选择元素相关方法: .get() .eq() .find() .filter() .not() .is() .has() .add()集中操作 .end()回退操作 .get() $(&qu ...
- 150个JS特效脚本
收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...
- php知识点集合
--------------------------------------------------------- PHP知识大全 ------------------------ ...
- PHP知识大全
--------------------------------------------------------- PHP知识大全 ---------------------------------- ...
- PHP笔试题和面试题
1.不用新变量直接交换现有两个变量的值 (1)list($a,$b)=array($b,$a); (2)a=a+b,b=a-b,a=a-b 2.PHP数字金额转大小格式,同时说明思路 function ...
- JS 循环遍历JSON数据 分类： JS技术 JS JQuery 2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如：{"options":"[{
JS 循环遍历JSON数据 分类: JS技术 JS JQuery2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{"options&q ...
- jQuery的61种选择器
The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...
随机推荐
- Mysql 实现基于binlog的主从同步
工作原理 1.主节点必须启用二进制日志,记录任何修改了数据库数据的事件.2.从节点开启一个线程(I/O Thread)把自己扮演成 mysql 的客户端,通过 mysql 协议,请求主节点的二进制日志 ...
- jvm学习（3）方法区、堆、对象存储位置
方法区 方法区,Method Area, 对于习惯在HotSpot虚拟机上开发和部署程序的开发者来说,很多人愿意把方法区称为“永久代”(Permanent Generation),本质上两者并不等价, ...
- 10: Django + Uwsgi + Nginx 的生产环境部署
1.1 一些重要概念 1.Web协议介绍 Web协议出现顺序: CGI -> FCGI -> WSGI -> uwsgi 1. CGI: 最早的协议 2. FCGI: 比CGI快 ...
- [fw]Linux下tty/pty/pts/ptmx详解
基本概念: 1> tty(终端设备的统称):tty一词源于Teletypes,或者teletypewriters,原来指的是电传打字机,是通过串行线用打印机键盘通过阅读和发送信息的东西,后来这东 ...
- 你创不出伟大的事业，因为……
你认为自己是对的,而别人都不了解.你忙著实现自己的梦想,却不管你的梦想对这世界有什么意义.你成天想著自己的问题,对别人的问题却提不起任何兴趣. 你活在自己的世界 你认为自己是对的,而别人都不了解.你忙 ...
- 135-基于TMS320C6678、FPGA XC5VSX95T的2路Full模式Camera Link输入双目视觉处理平台
基于TMS320C6678.FPGA XC5VSX95T的2路Full模式Camera Link输入双目视觉处理平台 一.板卡概述 本板卡由我公司自主研发,基于CPCI架构,符合CPCI2.0标准,采 ...
- 一、dynamic
一.dynamic使用: 从一直使用动态类型写接口 返回动态类型出现情况 1.返回接口每次不知道包含那些列(实体类解决) 2.操作的数据类型 不可知(参与数值计算-实体类解决明确类型) Dynamic ...
- java Arrays工具类的操作
package java08; /* java.util.Arrays是一个与数组相关的工具类,里面提供了大量的静态方法,用来实现数组常见的操作 public static String toStri ...
- Centos 安装.NET Core环境
https://dotnet.microsoft.com/learn/dotnet/hello-world-tutorial/install 一.概述 本篇讨论如何把项目发布到Linux环境,主要包括 ...
- python输出转义字符
转义字符在字符串中不代表自己,比如\n代表回车,不代表\n字符,那我想输入转义字符本身呢? 答:在字符串前面加个r 如print(“aa\nbb”) 会输出aa bb 如print(r"aa ...