前端-jQuery-事件操作
############### jQuery事件-给未来元素绑定事件 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>on绑定事件 点击在表格最后添加一条记录</title>
</head>
<body>
<table border="1" id="t1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小强</td>
<td>吃冰激凌</td>
<td>
<button class="delete">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>二哥</td>
<td>Girl</td>
<td>
<button class="delete">删除</button>
</td>
</tr>
</tbody>
</table>
<button id="b1">添加一行数据</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
//绑定事件现在有四种方法了
//1，标签内部写onclick=foo(this);
//2，原生的dom的js绑定，dom对象.onclick=function(){...}
//3，jQuery绑定事件，jQuery对象.click=function(){...}
//4，下面就是第四种也是jQuery绑定的方法，
// 4.1 jQuery对象.on("click",function(){...})
// 4.2 jQuery对象.on("click","选择器",function(){...}) 适用于给未来元素绑定事件，就是从前面的jQuery对象去找选择器，然后绑定事件，
// 以后绑定事件都使用on的方式去绑定，
// 绑定事件
$("#b1").on("click", function () {
// 生成要添加的tr标签及数据
var trEle = document.createElement("tr");
$(trEle).html("<td>3</td>" +
"<td>小东北</td>" +
"<td>社会摇</td>" +
"<td><button class='delete'>删除</button></td>");
// 把生成的tr插入到表格中
$("#t1").find("tbody").append(trEle);
});
// 每一行的删除按钮绑定事件
$("tbody").on("click", ".delete", function () {//为什么给tbody绑定删除事件，因为会有一层一层的事件捕获，tbody是一刷新页面就存在的，所以给以使用这标签
console.log(this);
$(this).parent().parent().remove();
});
</script>
</body>
</html>
############### jQuery键盘相关事件-批量操作 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>键盘相关事件</title>
</head>
<body>
<table border="1" id="t1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>小强</td>
<td>吃冰激凌</td>
<td>
<select>
<option value="0">下线</option>
<option value="1">上线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>二哥</td>
<td>Girl</td>
<td>
<select>
<option value="0">下线</option>
<option value="1">上线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>二哥</td>
<td>Girl</td>
<td>
<select>
<option value="0">下线</option>
<option value="1">上线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>二哥</td>
<td>Girl</td>
<td>
<select>
<option value="0">下线</option>
<option value="1">上线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>二哥</td>
<td>Girl</td>
<td>
<select>
<option value="0">下线</option>
<option value="1">上线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
</tbody>
</table>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 确保绑定事件的时候DOM树是生成好的
$(document).ready(function () {
var mode = false;
var $bodyEle = $("body");
// 给文档绑定 监听键盘按键被按下去的事件，keydown是键盘按下的事件
$bodyEle.on("keydown", function () {
//
console.log(event.keyCode);
if (event.keyCode === 17) {
// 进入批量操作模式
mode = true;
console.log(mode);
}
});
// 按键抬起来的时候,退出批量操作模式，keyup 是键盘按下的事件
$bodyEle.on("keyup", function () {
//
console.log(event.keyCode);
if (event.keyCode === 17) {
// 进入批量操作模式
mode = false;
console.log(mode);
}
});
$("select").on("change", function () {
// 取到当前select的值
var value = $(this).val();
var $thisCheckbox = $(this).parent().siblings().first().find(":checkbox");
// 判断checkbox有没有被选中
if ($thisCheckbox.prop("checked") && mode) {
// 真正进入批量操作模式
var $checkedEles = $("input[type='checkbox']:checked");
for (var i = 0; i < $checkedEles.length; i++) {
// 找到同一行的select
$($checkedEles[i]).parent().siblings().last().find("select").val(value);
}
}
})
});
</script>
</body>
</html>
############### jQuery简单动画 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>简单动画效果演示</title>
</head>
<body>
<img width="600" src="http://img.diudou.com/file/news/yuwen/2016-08-07/db2cd785cd6ad8f05be167f18975253c.jpg" alt="">
<div>菜单一</div>
<div class="menu-items">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("img").hide(5000);//5秒隐藏，逐渐的缩小高度和宽度
$("img").toggle(5000);//逐渐展示出来
//滑动
$(".menu-items").slideUp(3000); //往上滑动
$(".menu-items").slideDown(3000); //往下滑动
$(".menu-items").slideToggle(3000);
$("img").fadeTo(5000);//这是5秒之内透明度变成0
$("img").fadeTo(5000,0.3);//这是5秒之内透明度变成0.3
/*
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
* */
</script>
</body>
</html>
############### jQuery中的each操作 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>each循环示例</title>
</head>
<body>
<div>111</div>
<div>222</div>
<div>333</div>
<div>444</div>
<div>555</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("div").each(function () {//jQuery提供了一个循环读取的方法，使用原生的需要进行for循环
console.log(this)//this是每一个div标签，
console.log(this.innerText)//this是每一个div标签，
})
//each的另外一种用法
var a1 = [11, 22, 33, 44, 55]
$.each(a1, function (k, v) {//如果只有一个参数，就是只打印的索引，
console.log(k, v)//k是索引，v是值
})
//如何退出each循环
var a1 = [11, 22, 33, 44, 55]
$.each(a1, function (k, v) {//如果只有一个参数，就是只打印的索引，
console.log(k, v)//k是索引，v是值
if (v === 22) {
//后续的循环不进行了,使用return false
// return false
// 如果是跳过本次循环，而不是整个循环，使用return
return;
}
})
</script>
</body>
</html>
############### jQuery中的data操作 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>周末作业讲解</title>
<style>
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #616161;
opacity: 0.4;
z-index: 998;
}
.modal {
height: 200px;
width: 300px;
background-color: white;
position: absolute;
margin-top: -100px;
margin-left: -150px;
top: 50%;
left: 50%;
z-index: 1000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="add">新增</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>街舞</td>
<td>
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Alex</td>
<td>烫头</td>
<td>
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
<tr>
<td>3</td>
<td>苑局</td>
<td>日天</td>
<td>
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
</tbody>
</table>
<div id="myCover" class="cover hide"></div>
<div id="myModal" class="modal hide">
<div>
<p>
<label for="modal-name">姓名</label>
<input type="text" id="modal-name">
</p>
<p>
<label for="modal-hobby">爱好</label>
<input type="text" id="modal-hobby">
</p>
<p>
<button id="modal-submit">提交</button>
<button id="modal-cancel">取消</button>
</p>
</div>
</div>
<script src="./jquery-3.2.1.min.js"></script>
<script>
// 定义一个弹出模态框的函数
function showModal() {
$("#myCover,#myModal").removeClass("hide");
}
// 关闭模态框
function closeModal() {
// 1. 清空模态框中的input
$("#myModal").find("input").val("");
$("#myCover,#myModal").addClass("hide");
}
// 给新增按钮绑定事件
$("#add").on("click", function () {
// 把模态框弹出!
// $("#myCover").removeClass("hide");
// $("#myModal").removeClass("hide");
showModal()
});
// 模态框中的取消按钮绑定事件
$("#modal-cancel").on("click", function () {
// 2. 隐藏模态框
closeModal();
});
// 模态框中的提交按钮绑定事件
$("#modal-submit").on("click", function () {
// 1. 取到 用户 填写的 input框的值
var name = $("#modal-name").val(); // 把用户在模态框里输入的姓名获取到,保存在name变量中
var hobby = $("#modal-hobby").val(); // 把用户在模态框里输入的爱好获取到,保存在hobby变量中
var $myModalEle = $("#myModal");
// 判断,按需操作
var $currentTrEle = $myModalEle.data("currentTr");
if ($currentTrEle !== undefined) {
// 说明是编辑状态
$currentTrEle.children().eq(1).text(name);
$currentTrEle.children().eq(2).text(hobby);
// 清空之前保存的当前行
$myModalEle.removeData();
} else {
// 创建tr标签把数据填进去
var trEle = document.createElement("tr");
var number = $("tr").length;
$(trEle).html("<td>" + number + "</td>" +
"<td>" + name + "</td>" +
"<td>" + hobby + "</td>" +
'<td><button class="edit-btn">编辑</button> <button class="delete-btn">删除</button></td>'
);
// 把创建好的tr添加到tbody中
$("tbody").append(trEle);
}
// 隐藏模态框
closeModal();
});
// 2. 根据是编辑 还是新增 做不同的操作
// 2.1 如果是新增操作,就生成一条新的tr,加到table的最后
// 2.2 如果是编辑操作, 根据先前 编辑 按钮那一行
// 难点在于 如何确定 编辑的是哪一行? --> 利用data()可以存具体的jQuery对象
// 给每一行的编辑按钮绑定事件
// 要使用事件委托,基于已经存在的元素(页面加载完之后存在的标签)绑定事件
$("tbody").on("click", ".edit-btn", function () {
// 把模态框弹出来
showModal();
// 把原来的数据填写到模态框中的input
var $currentTrEle = $(this).parent().parent();
// 把当前行的jQuery对象保存起来
$("#myModal").data("currentTr", $currentTrEle);
var name = $currentTrEle.children().eq(1).text();
var hobby = $currentTrEle.children().eq(2).text();
// 填
$("#modal-name").val(name);
$("#modal-hobby").val(hobby);
});
// 给每一行的删除按钮绑定事件
$(