一、事件委托
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>