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标签< ...
随机推荐
- indexOf与includes的区别
indexOf与includes的区别:https://blog.csdn.net/gtLBTNq9mr3/article/details/78700118 includes和indexOf相比较:相 ...
- 洛谷 P5019 铺设道路 & [NOIP2018提高组]（贪心）
题目链接 https://www.luogu.org/problem/P5019 解题思路 一道典型的贪心题. 假设从左往右填坑,如果第i个深与第i+1个,那么第i+1个就不需要额外填: 如果第i+1 ...
- Ajax —— 服务器端发送JSON数据
重点需要解决的问题:服务器端如何构建JSON数据 思考:JavaBean转JSON数据,集合转JSON数据,普通java对象(String,Number)转JSON数据 一.Gson开源jar包 ...
- 2018-8-10-让-AE-输出-MPEG-
title author date CreateTime categories 让 AE 输出 MPEG lindexi 2018-08-10 19:17:19 +0800 2018-2-13 17: ...
- OtterCTF - Reverse - Msg Me This
原文地址:Msg Me This 题目 Category: Reverse Engineering Points: 500 Solves: 15 Description: Rick created a ...
- 第五节：从一条记录说起——InnoDB记录结构
<MySQL 是怎样运行的:从根儿上理解 MySQL>第五节:从一条记录说起——InnoDB记录结构 准备工作 现在只知道客户端发送请求并等待服务器返回结果. MySQL什么方式来访 ...
- Java二级练习试题一
为保护本地主机,对Applet安全限制中正确的是() A. Applet可加载本地库或方法 B. Applet可读.写本地计算机的文件系统 C. Applet可向Applet之外的任何主机建立网络连接 ...
- centos 6.5 配置网络
编辑 vi /etc/sysconfig/network-scripts/ifcfg-eth0 修改内容 DEVICE="eth0" BOOTPROTO="static& ...
- Debian取消从光盘安装软件的方式（please insert the disc labeled）
与Ubuntu不同,使用apt-get install packages时Debian可能会提示: Media change: please insert the disc labeled 'Debi ...
- solr测试用的配置
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...