1、事件委托
其实就是给对象绑定一个事件，但是委托给它所属的每一个子对象了，因此每一个子对象都具有添加进的功能
书写格式如下：
$("ul").on("click","li",function () {
alert(23333);
})
2、页面载入
意思就是等整个页面都加载完了以后再去启动script的内容
格式如下：
$(function(){
$("ul li").html(12345);
})
3、练习代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托</title>
<script src="jquery-3.4.1.js"></script>
<script>
//页面载入：意思就是等整个页面都加载完了以后再去启动script的内容
// $(document).ready(function () {
// $("ul li").html(12345); //这样即使放在ul和li的前面也能查询到它们
// });
//简写
// $(function(){
// $("ul li").html(12345);
// })
//事件委托:其实就是给ul绑定事件，但是委托给它所属的每一个li了，因此每一个li都具有alert(23333)的功能
$("ul").on("click","li",function () {
alert(23333);
})
//按顺序增加标签
$(".b1").click(function() {
var $ele=$("<li>"); //创建一个li标签，
var len=$("ul li").length; //将len赋值为ul列表的长度
$ele.html((len+1)*1111);
$("ul").append($ele);
})
</script>
</head>
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
<button class="b1">点我</button>
</body>
</html>
1、显示与隐藏
2、滑动效果
3、练习代码（显示隐藏、滑动）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画效果</title>
<style>
.div1{
height: 200px;
width: 100%;
background-color: tomato;
}
</style>
</head>
<body>
<div class="div1">How amazing!</div>
<!--<button class="b1">显示</button>-->
<!--<button class="b2">隐藏</button>-->
<!--<button class="b3">切换</button>-->
<button class="b1">滑入</button>
<button class="b2">滑出</button>
<button class="b3">滑动</button>
<script src="jquery-3.4.1.js"></script>
<script>
//显示与隐藏
// $(".b1").click(function () {
// $("div").show(1000); //用1000毫秒事件完成动作
// })
//
// $(".b2").click(function(){
// $("div").hide(1000);
// })
//
// //toggle结合了show和hide，如果显示则隐藏，如果隐藏则显示
// $(".b3").click(function(){
// $("div").toggle(1000);
// })
//slideDown滑出，slideUp滑入，slideToggle结合划入划出
$(".b1").click(function () {
$("div").slideUp(1000); //用1000毫秒事件完成动作
})
$(".b2").click(function(){
$("div").slideDown(1000);
})
//slideToggle结合了slideUp和slideDown
$(".b3").click(function(){
$("div").slideToggle(1000);
})
</script>
</body>
</html>
4、渐变效果
5、练习代码（渐变效果）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐入渐出</title>
<style>
.div1{
height: 200px;
width: 100%;
background-color: tomato;
}
</style>
</head>
<body>
<div class="div1">How amazing!</div>
<button class="b1">渐入</button>
<button class="b2">渐出</button>
<button class="b3">渐变</button>
<button class="b4">渐停</button>
<script src="jquery-3.4.1.js"></script>
<script>
//fadeIn渐入，fadeOut渐出，fadeToggle结合渐入渐出，fadeTo到指定透明度停止
$(".b1").click(function () {
$("div").fadeIn(1000,function () { //第二个参数是回调函数，表示在动画效果执行结束后会触发的操作
alert("已渐渐出现！");
}); //用1000毫秒事件完成动作
})
$(".b2").click(function(){
$("div").fadeOut(1000,function(){
alert("已渐渐隐藏！");
});
})
//fadeToggle结合了fadeIn和fadeOut
$(".b3").click(function(){
$("div").fadeToggle(1000,function () {
alert("已完成渐变效果！")
});
})
$(".b4").click(function(){
$("div").fadeTo(1000,0.5,function () {
alert("已实现渐变效果并停止！")
}); //表示1000毫秒的动画效果，停止在透明度为0.5的时候
})
</script>
</body>
</html>
简单来说就自定义函数来实现特定的功能
1、格式
//扩展自定义插件Myprint
$.extend({
Myprint:function(){
alert("我是自定义的动作！");
}
})
//调用自定义插件
$.Myprint();
2、练习代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展插件</title>
</head>
<body>
<p>1111</p>
<p>2222</p>
<p>3333</p>
<p>4444</p>
<script src="jquery-3.4.1.js"></script>
<script>
// //扩展自定义插件Myprint
// $.extend({
// Myprint:function(){
// alert("我是自定义的动作！");
// }
// })
// //调用自定义插件
// $.Myprint();
//定义一个获取文本的插件Gettext
$.fn.extend({
Gettext:function(){
console.log($(this).html()); //获取每一个标签的文本
}
})
//调用：用jQuery循环each来遍历每一个p标签
$("p").each(function() {
$(this).Gettext();
})
</script>
</body>
</html>