1. 事件
常用事件：
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keydown(function(){...})
keyup(function(){...})
1.1 我们今后要用的jQuery绑定事件的方式
1.1.1 点击的标签对象.on("click", function(){...})
1.1.2 父对象.on("click", "点击的标签对象的id、classname、tagname等等", function(){...})
优点：
1.适用于 给未来的元素(页面生成的时候还没有的标签) 绑定事件 (事件委托)，
子元素无法处理的，委托给父元素处理。
2.事件冒泡
子元素无法处理的，委托给父元素处理，父元素无法处理的，委托给爷爷元素处理。
把事件向上级汇报处理。
3.事件捕获
利用事件冒泡,给已经存在的标签绑定事件,用来捕获后代标签的事件.
示例：新增一行，并且可以删除这一行。
$("table").on("click", ".delete", function () {
// 删除按钮绑定的事件
})
1.2 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: red;
color: white;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.son {
position: absolute;
top: 40px;
right: 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>购物车
<p class="son">
空空如也...
</p>
</li>
</ul>
</div>
<script src="jquery-3.4.1.min.js"></script>
<script>
$(".nav li").hover(
function () {
$(this).addClass("hover");
},//两函数使用逗号隔开
function () {
$(this).removeClass("hover");
}
);
</script>
</body>
</html>
1.3 阻止后续事件执行
return false; // 常见阻止表单提交等
1.4 移除事件
.off("click", function(){...})
1.5 页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
两种写法：
$(document).ready(function(){
// 在这里写你的JS代码...
})
简写：
$(function(){
// 你在这里写你的代码
})
示例：
<body>
<script>
function foo() {
// 在这里写你的JS代码...
}
// 文档树就绪后执行
$(document).ready( function () { foo(); } );
</script>
</body>
2. 动画效果
// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]]) // o是opacity透明度
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])
2.1 基本示例：图片展示和隐藏
<img src="1.jpg" alt="">
$('img').show(5000); //图片在5秒内从小到大展示完成
$('img').hide(5000); //图片在5秒内从打到小隐藏完成
$('img').toggle(5000); //图片在5秒内，有图片就隐藏，没有图片就展示出来
2.2 滑动示例：菜单隐藏
<div>菜单一</div>
<div>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
$('ul').slideUp(1000); //向上滑动隐藏
$('ul').slideDown(1000); //向下滑动展示
$('ul').slideToggle(1000); //展示变隐藏，隐藏变展示
2.3 淡入淡出：图片展示和隐藏
<img src="1.jpg" alt="">
$('img').fadeIn(5000); //图片在5秒内淡入展示
$('img').fadeOut(5000); //图片在5秒内淡出隐藏
$('img').fadeToggle(5000); //图片在5秒内，有图片就淡出，没有图片就淡入
$('img').fadeTo(3000,0.3); //图片在3秒内，透明度变为0.3
2.4 自定义
示例：点赞特效。有个问题，每次点击都增加一个i标签。
<!DOCTYPE html>
<html lang="zh-CN">
<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>点赞动画示例</title>
<style>
div {
position: relative;
display: inline-block;
}
div>i {
display: inline-block;
color: red;
position: absolute;
right: -16px;
top: -5px;
opacity: 1;
}
</style>
</head>
<body>
<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
opacity: 0
}, 1000)
})
</script>
</body>
</html>
3. each循环
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>001</div>
<div>002</div>
<div>003</div>
<div>004</div>
<div>005</div>
<script src="jquery-3.4.1.min.js"></script>
<script>
var $divEles = $('div');
for (var i = 0; i < $divEles.length; i++) {
console.log($divEles[i].innerText)
}
//上下两个循环结果一样
//jquery对象的循环
$divEles.each(function () { //each是指$divEles对象的每一个元素
console.log($(this).text()); //$(this)就是$divEles，写一个this语句就行
});
//数组的循环
var a1 = [11,22,33,44,55];
$.each(a1,function (index,value) {
if(value===22){return false}//断开each循环
console.log(index+':'+value);
});
//0:11
$.each(a1,function (index,value) {
if(value===22){return}//退出当前这一次循环
console.log(index+':'+value);
});
//0:11
//2:33
//3:44
//4:55
//对象的循环
var dict = {'name':'tom','age':18};
$.each(dict,function(key,value){
console.log(key,value)
})
</script>
</body>
</html>
4. data：最重要的用法是：保存点击过的jQuery对象，方便后面找到它使用。详见示例：表格、新增、编辑、删除、each、data、事件委托
jQuery对象可以存放 数字、字符串和jQuery对象
示例：
<div id="d1">迈腾2020</div>
<img src="1.jpg" alt="">
4.1 数字：
$('#d1').data('age',18);
$('#d1').data('age'); //结果是18
4.2 字符串：
$('#d1').data('name','maiteng');
$('#d1').data('name'); //'maiteng'
4.3 jQuery对象
var $imgEle = $('img');
$('#d1').data('img',$imgEle); //找到一个对象$('#d1')(任意jQuery对象都可以)，保存jQuery对象$imgEle。
$('#d1').data('img'); //获取$imgEle对象
$('#d1').data('img').attr('src','4.jpg') //属性修改
4.4 data传参
<div data-name="tom" data-age="18"></div> //把键值对{‘name’："tom"，‘age’：18}保存在div标签里面。
<button id="btn">获取数据</button>
<button id="btn1">设置数据</button>
$(function () {
$('#btn').on('click',function () {
// 获取数据
console.log($('div').data('name')); //tom
console.log($('div').data('age')); //18
});
$('#btn1').on('click',function () {
// 设置数据
$('div').data('name','marry');
$('div').data('age','20');
//$('div').data({'name':'marry','age':'20'});可以使用键值对设置，更加方便
});
});
5. 插件：自定义新函数jQuery.extend({键值对});
示例：
<script>
jQuery.extend({
min: function(a, b){return a < b ? a : b;}, // {}里面是键值对
max: function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5
</script>
-----------------------------------------------------------------------------------------------------
示例：表格、新增、编辑、删除、each、data、事件委托
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格</title>
<style>
th,td {
text-align: center;
}
.cover{
background-color:rgba(0,0,0,0.4);
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
}
.modal-new,.modal-modify{
background-color:white;
width:300px;
height:200px;
position:fixed;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-150px;
}
.hide{display:none;}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>tom</td>
<td>18</td>
<td>
<input type="button" value="编辑" class="modify"> <input type="button" value="删除" class="cancel">
</td>
</tr>
<tr>
<td>2</td>
<td>marry</td>
<td>20</td>
<td>
<input type="button" value="编辑" class="modify"> <input type="button" value="删除" class="cancel">
</td>
</tr>
<tr>
<td>3</td>
<td>alex</td>
<td>38</td>
<td>
<input type="button" value="编辑" class="modify"> <input type="button" value="删除" class="cancel">
</td>
</tr>
</tbody>
</table>
<input type="button" id="new" value="新增">
<div class="cover hide"></div>
<form class="modal-new hide" action="">
<p>新增数据</p>
<p>
<label for="newName">姓名</label>
<input type="text" id="newName">
</p>
<p>
<label for="newAge">年龄</label>
<input type="text" id="newAge">
</p>
<p>
<input type="button" value="确定" id="newSure">
<input type="button" value="退出" id="newExit">
</p>
</form>
<form class="modal-modify hide" action="">
<p>修改数据</p>
<p>
<label for="modifyName">姓名</label>
<input type="text" id="modifyName">
</p>
<p>
<label for="modifyAge">年龄</label>
<input type="text" id="modifyAge">
</p>
<p>
<input type="button" value="确定" id="modifySure">
<input type="button" value="退出" id="modifyExit">
</p>
</form>
<script src="jquery-3.4.1.min.js"></script>
<script>
//把经常使用的对象存放在变量里面。
var $tbodyEles = $('tbody');
//------------------新增开始---------------------------------
//1.新增一行
//1.1 点击新增，弹出模态框：cover和modal-new
$('#new').on('click',function () {
$('.cover,.modal-new').removeClass('hide');
//1.2 创建tr和td标签。
var trEles = document.createElement('tr');
$(trEles).html('<td></td>'+'<td></td>'+'<td></td>'+'<td><input type="button" value="编辑" class="modify"> <input type="button" value="删除" class="cancel"></td>');
$tbodyEles.append(trEles);
//1.3 第一个td标签添加序号。
//1.3.1 先找到tbody有多少个tr，tr的个数就是序号。
var num = $('tbody tr').length;
$(trEles).children().first().text(num);
});
//2.点新增弹出来的模态框的确定，获取姓名和年龄的值，赋予新创建的td。
$('#newSure').on('click',function () {
$tbodyEles.children().last().children().eq(1).text($('#newName').val());
$tbodyEles.children().last().children().eq(2).text($('#newAge').val());
});
//3.点新增弹出来的模态框的退出，就清空姓名和年龄的值，然后隐藏模态框
$('#newExit').on('click',function () {
$('#newName').val('');
$('#newAge').val('');
$('.cover,.modal-new').addClass('hide');
});
//------------------新增结束---------------------------------
//------------------编辑开始---------------------------------
//4.点编辑，要使用事件委托来绑定事件
//4.1弹出模态框：cover和modal-modify
$tbodyEles.on('click','.modify',function () {
$('.cover,.modal-modify').removeClass('hide');
//4.2把当前编辑的jQuery对象$modify保存到tbody标签里面，方便后面使用。
var $modify = $(this);//this是当前点击的DOM对象，$(this)是jQuery对象
$tbodyEles.data('currentModify',$modify);
//4.3获取表格里面姓名和年龄的值，填写到表单的姓名和年龄里面去。
var name = $modify.parent().parent().children().eq(1).text();
var age = $modify.parent().parent().children().eq(2).text();
$('#modifyName').val(name);
$('#modifyAge').val(age);
});
//5.点编辑弹出来的表单modal-modify，修改了姓名和年龄之后，按确定，
//触发事件：把姓名和年龄的值，赋予跟当前编辑同一行的姓名和年龄。
//$tbodyEles.data('currentModify')就是上面保存的当前编辑的jQuery对象$modify。
$('#modifySure').on('click',function () {
var mName = $('#modifyName').val();
var mAge = $('#modifyAge').val();
$tbodyEles.data('currentModify').parent().parent().children().eq(1).text(mName);
$tbodyEles.data('currentModify').parent().parent().children().eq(2).text(mAge);
});
//6.点编辑弹出来的模态框的退出，就清空姓名和年龄的值，然后隐藏模态框
$('#modifyExit').on('click',function () {
$('#modifyName').val('');
$('#modifyAge').val('');
$('.cover,.modal-modify').addClass('hide');
});
//------------------编辑结束---------------------------------
//------------------删除开始---------------------------------
//7.删除一行，要用事件委托
$tbodyEles.on('click','.cancel',function () {
//7.1 先找到当前行的tr对象
var $TrEles = $(this).parent().parent();
//7.2 当前行的tr对象后面所有的tr的序号都要减一，
// 当前行下面的所有对象$TrEles.nextAll()进行each循环，
//$(this)就是$TrEles.nextAll()，而each会对$(this)的每一个对象循环。
$TrEles.nextAll().each(function () {
//each先找到第一个文本，然后减一,接着再找下一个
var trNum = $(this).children().first().text();
$(this).children().first().text(trNum-1);
});
//使用for循环也可以：
// for(var i = 0 ; i<$TrEles.nextAll().length; i++){
// var trNum1 = $($TrEles.nextAll()[i]).children().first().text();
// $($TrEles.nextAll()[i]).children().first().text(trNum1-1);
// }
//7.3 删除当前行，要最后进行，如果放在前面删除了，就无法找到当前对象了。
$TrEles.remove();
});
//------------------删除结束---------------------------------
</script>
</body>
</html>