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标签< ...
随机推荐
- Android关于Activity生命周期详解
子曰:溫故而知新,可以為師矣.<論語> 学习技术也一样,对于技术文档或者经典的技术书籍来说,指望看一遍就完全掌握,那基本不大可能,所以我们需要经常回过头再仔细研读几遍,以领悟到作者的思想精 ...
- 【JAVA】eclipse-使用入门及常用快捷键
目录 下载与安装 HelloWorld 新建项目 视图与视窗 快捷键 个性化设置 导入项目 jar包 下载与安装 下载 网址:官网下载 注意: 下载javaee版 注意与本机的java环境相匹配,32 ...
- vue 踩坑之组件传值
Vue 报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the pa ...
- 【知识强化】第三章 存储系统 3.5 双口RAM和多模块存储器
下面我们进入双端口RAM和多模块存储器的学习.这是提高我们的存储器的访存速度的一些措施. 我们之前已经讲过我们的主存和CPU是进行连接的,那么这就导致了一个问题就是说,随着我们现代科技的发展,计算机的 ...
- jieba库的使用
jieba库的使用 jeiba库是一款很优秀的用于中文分词的第三方库,它通过一个汉词词典来确定汉字之间的关联概率,将概率较大的组成分词. 精准模式 把文本精准的分割开来,不存在冗余单词. jieba. ...
- Codeforces Round #392 (Div. 2) - C
题目链接:http://codeforces.com/contest/758/problem/C 题意:给定N*M矩阵的教室,每个位置都有一个学生,Sergei坐在[X,Y],然后老师会问K个问题,对 ...
- 苹果推出了AI手机，打造一款高度个性化的设备
在今年苹果的WWDC 2018上,一些人认为今年会因为软件专注而缺乏新的MacBook和iPad而感到无聊,该公司宣布,iOS12的推出可能是迄今为止最重要的操作系统更新.一系列Siri增强功能,Ap ...
- BZOJ3227 [sdoi2008]红黑树
贪心什么的太神仙了( 老老实实dp于是就是沙茶题了 f[i][d][0/1]表示i个节点bh为d当前节点颜色白/黑[好好读题是真.. 转移一下然后就可以打表了( 由于我们发现这玩意很好卡有很好的性质( ...
- join()、split()
join()用于把数组转化为字符串 var arr=['hello','world','kugou']; document.write(arr.join(''));//helloworldkugou ...
- springboot 操作redis
redis五大类型用法 Redis五大类型:字符串(String).哈希/散列/字典(Hash).列表(List).集合(Set).有序集合(sorted set)五种Controller:@Reso ...