一、事件委託
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>
二、JS的動畫效果
1、顯示與隱藏
- 顯示：show()
- 隱藏：hide()
- 切換顯示隱藏：toggle()
2、滑動效果
- 滑出：slideDown()
- 滑入：slideUp()
- 結合滑入滑出：slideToggle()
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、漸變效果
- 漸入：fadeIn()
- 漸出：fadeOut()
- 結合漸入漸出fadeToggle()
- 到指定透明度停止：fadeTo()
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>