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标签< ...
随机推荐
- jvm 这我就能会了 擦
最近老有人问jvm,恕我直言,完蛋了,不会,慢慢学吧,开始第一个学习,后续补充,走起... 我看的他的https://www.cnblogs.com/dingyingsi/p/3760447.html ...
- 常见样式问题七、word-break、word-wrap、white-space区别
常见样式问题七.word-break.word-wrap.white-space区别:https://blog.csdn.net/c11073138/article/details/79534394 ...
- js实现千位符分隔
前几天面试做保险项目的公司,被问到了一道实现千位符分割方法的题,乍一看挺简单,但做起来最后却没给出来一个合适的解决方法.回来自己琢磨了一个还行的答案. var num = 3899000001, ar ...
- java实现mysql数据库从一张表插入数据到另一张表
创建两张表: create table employee( id ), name ), email ), gender ) ); create table copyEmployee( id ), na ...
- stl（set和pair）
D - 4 Gym - 100989D In this cafeteria, the N tables are all ordered in one line, where table number ...
- python学习三十八天常用内置函数分类汇总
python给我们提供丰富的内置函数,不用去写函数体,直接调用就可以运行,很方便快速给我提供开发所需要的函数. 1,查内存地址 id() 变量的内存地址 id() 2,输入输出 input() pr ...
- C#面试 笔试题 二
1.using关键字有什么用?什么是IDisposable? using可以声明namespace的引入,还可以实现非托管资源的释放,实现了IDisposiable的类在using中创建,using结 ...
- RestController和Controller的区别
知识点:@RestController注解相当于@ResponseBody + @Controller合在一起的作用. 1) 如果只是使用@RestController注解Controller,则Co ...
- ASE "黄金点游戏"
问题定义 黄金点游戏是源于经济学家Richar Thaler构思的在1997年伦敦金融时报进行了一次公开竞猜活动.MSRA-ASE课程的第一次结对编程中,我们写了一个AI Bot来与大家玩儿这个游戏. ...
- EBCDIC 870 Poland
Characters are shown with their equivalent Unicode codes.