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标签< ...
随机推荐
- Struts2之获取ServletAPI
1.通过ServletActionContext类 //获取request对象 HttpServletRequest request = ServletActionContext.getRequest ...
- javascript判断chrome浏览器的方法
var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1; if (isChrome) { alert( ...
- Linux筛选数据
grep命令:在文件中查找关键字,并显示所在行(Globally search a Regular Expression and Print) grep text file:在file文件中搜索tex ...
- 分页插件 Bootstrap Paginator
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态 ...
- elasticsearch 基础 —— Get API
Get API get API允许根据其id从索引中获取指定类型的JSON文档.以下示例从名为twitter的索引获取JSON文档,该索引类型名为_doc,id值为0: GET twitter/_do ...
- 解决git status中文路径乱码
这个问题就放一张图吧: 不过需要注意,这样设置了之后对 git status 命令输出的路径就不做转义处理了,当路径中有空格等被terminal视为特殊字符的内容时不要直接复制粘贴使用.
- python如何获取变量的变量名
假设现在存在一个值为1变量名为a的变量,如何通过一个函数获取该变量的变量名a? 上面这个需求来源于某群友的一个要求,希望能有一个这样的函数来方便打印. 这个需求很扯淡啊,为什么不用格式化输出?它回复到 ...
- vue之路由传参三种基本方式
现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click= ...
- hive之压缩
对数据进行压缩可以节约磁盘空间,提高系统吞吐量和性能,但是压缩和解压缩会增加CPU的开销. 1.hive的压缩编/解码器 BZip2和GZip压缩率高,但是需要消耗较多的CPU开销.LZO和Snapp ...
- javaScript的关键字与保留字
JavaScript 关键字: break case catch continue default delete do else finally for function if in instance ...