3、jQuery事件操作
delmarks 2020-05-17
一、事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>24-jQuery事件绑定</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 编写jQuery相关代码
/*
jQuery中有两种绑定事件方式
1.eventName(fn);
编码效率略高/ 部分事件jQuery没有实现,所以不能添加
2.on(eventName, fn);
编码效率略低/ 所有js事件都可以添加
注意点:
可以添加多个相同或者不同类型的事件,不会覆盖
*/
// $("button").click(function () {
// alert("hello lnj");
// });
// $("button").click(function () {
// alert("hello 123");
// });
// $("button").mouseleave(function () {
// alert("hello mouseleave");
// });
// $("button").mouseenter(function () {
// alert("hello mouseenter");
// });
$("button").on("click", function () {
alert("hello click1");
});
$("button").on("click", function () {
alert("hello click2");
});
$("button").on("mouseleave", function () {
alert("hello mouseleave");
});
$("button").on("mouseenter", function () {
alert("hello mouseenter");
});
});
</script>
</head>
<body>
<button>我是按钮</button>
</body>
</html>二、事件移除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>25-jQuery事件移除</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
function test1() {
alert("hello lnj");
}
function test2() {
alert("hello 123");
}
// 编写jQuery相关代码
$("button").click(test1);
$("button").click(test2);
$("button").mouseleave(function () {
alert("hello mouseleave");
});
$("button").mouseenter(function () {
alert("hello mouseenter");
});
// off方法如果不传递参数, 会移除所有的事件
// $("button").off();
// off方法如果传递一个参数, 会移除所有指定类型的事件
// $("button").off("click");
// off方法如果传递两个参数, 会移除所有指定类型的指定事件
$("button").off("click", test1);
});
</script>
</head>
<body>
<button>我是按钮</button>
</body>
</html>三、jQuery事件冒泡和默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>26-jQuery事件冒泡和默行为</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 编写jQuery相关代码
/*
1.什么是事件冒泡?
2.如何阻止事件冒泡
3.什么是默认行为?
4.如何阻止默认行为
*/
/*
$(".son").click(function (event) {
alert("son");
// return false;
event.stopPropagation();
});
$(".father").click(function () {
alert("father");
});
*/
$("a").click(function (event) {
alert("弹出注册框");
// return false;
event.preventDefault();
});
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.baidu.com">注册</a>
<form action="http://www.taobao.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>四、jQuery事件自动触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>27-jQuery事件自动触发</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 编写jQuery相关代码
$(".son").click(function (event) {
alert("son");
});
$(".father").click(function () {
alert("father");
});
// $(".father").trigger("click");
// $(".father").triggerHandler("click");
/*
trigger: 如果利用trigger自动触发事件,会触发事件冒泡
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡
*/
// $(".son").trigger("click");
// $(".son").triggerHandler("click");
$("input[type=‘submit‘]").click(function () {
alert("submit");
});
/*
trigger: 如果利用trigger自动触发事件,会触发默认行为
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发默认行为（a标签比较特殊）
*/
// $("input[type=‘submit‘]").trigger("click");
// $("input[type=‘submit‘]").triggerHandler("click");
$("span").click(function () {
alert("a");
});
// $("a").triggerHandler("click");
$("span").trigger("click");
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.baidu.com"><span>注册</span></a>
<form action="http://www.taobao.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>五、jQuery自定义事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 编写jQuery相关代码
// $(".son").myClick(function (event) {
// alert("son");
// });
/*
想要自定义事件, 必须满足两个条件
1.事件必须是通过on绑定的
2.事件必须通过trigger来触发
*/
$(".son").on("myClick", function () {
alert("son");
});
$(".son").triggerHandler("myClick");
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.baidu.com"><span>注册</span></a>
<form action="http://www.taobao.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>六、jQuery事件命名空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>26-jQuery事件冒泡和默行为</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
$(".father").on("click.ls", function () {
alert("father click1");
});
$(".father").on("click", function () {
alert("father click2");
});
$(".son").on("click.ls", function () {
alert("son click1");
});
/*
利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发
利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发
*/
// $(".son").trigger("click.ls");
$(".son").trigger("click");
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.baidu.com"><span>注册</span></a>
<form action="http://www.taobao.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>七、事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>31-jQuery事件委托</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
/*
1.什么是事件委托?
请别人帮忙做事情, 然后将做完的结果反馈给我们
*/
$("button").click(function () {
$("ul").append("<li>我是新增的li</li>");
})
/*
在jQuery中,如果通过核心函数找到的元素不止一个, 那么在添加事件的时候,jQuery会遍历所有找到的元素,给所有找到的元素添加事件
*/
// $("ul>li").click(function () {
// console.log($(this).html());
// });
/*
以下代码的含义, 让ul帮li监听click事件
之所以能够监听, 是因为入口函数执行的时候ul就已经存在了, 所以能够添加事件
之所以this是li,是因为我们点击的是li, 而li没有click事件, 所以事件冒泡传递给了ul,ul响应了事件, 既然事件是从li传递过来的,所以ul必然指定this是谁
*/
$("ul").delegate("li", "click", function () {
console.log($(this).html());
});
});
</script>
</head>
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
<button>新增一个li</button>
</body>
</html>八、jQuery移入移出事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>33-jQuery移入移出事件</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 编写jQuery相关代码
/*
mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件
*/
/*
$(".father").mouseover(function () {
console.log("father被移入了");
});
$(".father").mouseout(function () {
console.log("father被移出了");
});
*/
/*
mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件
推荐大家使用
*/
/*
$(".father").mouseenter(function () {
console.log("father被移入了");
});
$(".father").mouseleave(function () {
console.log("father被移出了");
});
*/
/*
$(".father").hover(function () {
console.log("father被移入了");
},function () {
console.log("father被移出了");
});
*/
$(".father").hover(function () {
console.log("father被移入移出了");
});
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>九、jQuery显示和隐藏动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>39-jQuery显示和隐藏动画</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background: red;
display: none;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 编写jQuery相关代码
$("button").eq(0).click(function () {
// $("div").css("display", "block");
// 注意: 这里的时间是毫秒
$("div").show(1000, function () {
// 作用: 动画执行完毕之后调用
alert("显示动画执行完毕");
});
});
$("button").eq(1).click(function () {
// $("div").css("display", "none");
$("div").hide(1000, function () {
alert("隐藏动画执行完毕");
});
});
$("button").eq(2).click(function () {
$("div").toggle(1000, function () {
alert("切换动画执行完毕");
});
});
});
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
</body>
</html>十、jQuery展开和收起动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>41-jQuery展开和收起动画</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 300px;
background: red;
display: none;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 编写jQuery相关代码
$("button").eq(0).click(function () {
$("div").slideDown(1000, function () {
alert("展开完毕");
});
});
$("button").eq(1).click(function () {
$("div").slideUp(1000, function () {
alert("收起完毕");
});
});
$("button").eq(2).click(function () {
$("div").slideToggle(1000, function () {
alert("收起完毕");
});
});
});
</script>
</head>
<body>
<button>展开</button>
<button>收起</button>
<button>切换</button>
<div></div>
</body>
</html> 
相关推荐
EdwardSiCong 0喜欢 / 0评论 2020-11-23
85477104 0喜欢 / 0评论 2020-11-17
hhanbj 0喜欢 / 0评论 2020-11-17
81427005 0喜欢 / 0评论 2020-11-11
seoppt 0喜欢 / 0评论 2020-09-13
honeyth 0喜欢 / 0评论 2020-09-13
WRITEFORSHARE 0喜欢 / 0评论 2020-09-13
84483065 0喜欢 / 0评论 2020-09-11
momode 0喜欢 / 0评论 2020-09-11
85477104 0喜欢 / 0评论 2020-08-15
83510998 0喜欢 / 0评论 2020-08-08
82550495 0喜欢 / 0评论 2020-08-03
tthappyer 0喜欢 / 0评论 2020-08-03
84901334 0喜欢 / 0评论 2020-07-28
tthappyer 0喜欢 / 0评论 2020-07-25
TONIYH 0喜欢 / 0评论 2020-07-22
tztzyzyz 0喜欢 / 0评论 2020-07-20
83510998 0喜欢 / 0评论 2020-07-18
81463166 0喜欢 / 0评论 2020-07-17
tztzyzyz 0喜欢 / 0评论 2020-07-05
tthappyer 0喜欢 / 0评论 2020-07-04
87281248 0喜欢 / 0评论 2020-07-04
87281248 0喜欢 / 0评论 2020-07-04
82244951 0喜欢 / 0评论 2020-06-28
delmarks 0喜欢 / 0评论 2020-06-28
89510194 0喜欢 / 0评论 2020-06-27
89510194 0喜欢 / 0评论 2020-06-27
wcqwcq 0喜欢 / 0评论 2020-06-26
88570299 0喜欢 / 0评论 2020-06-26
小仙儿 0喜欢 / 0评论 2020-06-25
88570299 0喜欢 / 0评论 2020-06-18
delmarks 0喜欢 / 0评论 2020-06-14
牵手白首 0喜欢 / 0评论 2020-06-14
83510998 0喜欢 / 0评论 2020-06-14
ppsurcao 0喜欢 / 0评论 2020-06-14
tianzyc 0喜欢 / 0评论 2020-06-13
82244951 0喜欢 / 0评论 2020-06-12
89510194 0喜欢 / 0评论 2020-06-11
83510998 0喜欢 / 0评论 2020-06-11
开心就好 0喜欢 / 0评论 2020-06-10
tthappyer 0喜欢 / 0评论 2020-06-07
delmarks 0喜欢 / 0评论 2020-06-07
牵手白首 0喜欢 / 0评论 2020-06-07