JQuery --- 第三期 (jQuery事件相关)
程序员文章站
2022-07-02 12:06:29
个人学习笔记 1.JQuery事件绑定 2.JQuery事件解绑 3.JQuery事件冒泡和默认行为和事件的自动触发 4.JQuery自定义事件 5.JQuery事件的命名空间 6.JQuery事件委托 7.JQuery事件委托练习 8.JQuery的事件移入和移出 9.移入移出练习一 10.移入移 ......
个人学习笔记
1.jquery事件绑定
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery事件绑定</title>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
alert("hello");
// jquery中有两种绑定方式
/**
* 1. eventname(fn)
* 编码效率略高,但是部分时间jquery没有实现,所以不能实现
* 可以为元素绑定多个相同或不相同的事件,事件之间不会相互覆盖
*/
$(".button1").click(function () {
alert("click1");
});
$(".button1").click(function () {
alert("click2");
});
$(".button2").mouseenter(function () {
alert("mouseenter");
});
$(".button2").mouseleave(function () {
alert("mouseleave");
});
/**
* 2. on(eventname,fn)
* 编码效率略低,但是所有js事件都可以添加
* 可以为元素绑定多个相同或不相同的事件,事件之间不会相互覆盖
*/
$(".button3").on("click",function () {
alert("click3");
});
$(".button3").on("click",function () {
alert("click4");
});
$(".button4").on("mouseenter",function () {
alert("mouseenter");
});
$(".button4").on("mouseleave",function () {
alert("mouseleave");
});
});
</script>
</head>
<body>
<button class="button1">按钮1</button>
<button class="button2">按钮2</button>
<button class="button3">按钮3</button>
<button class="button4">按钮4</button>
</body>
</html>
2.jquery事件解绑
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>事件解绑</title>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
function click1() {
alert("click1");
};
function click2() {
alert("click2");
};
function mouseenter1() {
alert("mouseenter");
};
function mouseleave1() {
alert("mouseleave");
};
$(".button1").click(click1);
$(".button1").click(click2);
$(".button2").mouseenter(mouseenter1);
$(".button2").mouseleave(mouseleave1);
//移除事件
/**
* 适用off方法进行事件移除
* 如果不传递任何参数,则会移除全部事件
*/
$(".button2").off();
/**
* 如果传递一个参数,则会移除这一类事件
*/
$(".button1").off("click");
/**
* 如果传递两个参数,则会移除这类事件的某个事件
*/
$(".button1").off("click",click1);
});
</script>
</head>
<body>
<button class="button1">按钮1</button>
<button class="button2">按钮2</button>
</body>
</html>
3.jquery事件冒泡和默认行为和事件的自动触发
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery事件冒泡和默认行为和事件的自动触发</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: green;
}
.son{
width: 100px;
height: 100px;
background: blue;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
/*
什么是事件冒泡
怎样阻止事件冒泡
什么是默认行为
怎样阻止默认行为
*/
$(".father").click(function () {
alert("father");
});
$(".son").click(function (event) {
alert("son");
// return false;//阻止事件冒泡 方法一
// event.stoppropagation();//阻止事件冒泡 方法二
});
$(".a").click(function (event) {
alert("阻止跳转!");
// return false;//阻止默认事件 方法一
event.preventdefault();
});
$(".sub").click(function (event) {
alert("阻止跳转!");
// return false;//阻止默认事件 方法一
event.preventdefault();
});
/**
* 自动触发事件,方法一,触发事件的同时会触发冒泡事件或者默认行为
* 特别的,当想将a标签设置自动触发和触发默认事件的时候,需要在a中将a的内容进行包裹,然后触发a的内容
*/
$(".son").trigger("click");
/**
* 自动触发事件,方法二,触发事件的同时不会触发冒泡事件或者默认行为
*/
$(".son").triggerhandler("click");
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.baidu.com" class="a">我是百度</a>
<form action="http://www.taobao.com">
<input type="text">
<input type="submit" class="sub">
</form>
</body>
</html>
4.jquery自定义事件
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery自定义事件</title>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
/**
* 自定义事件必须满足两个条件
* 1.事件必须是通过on绑定的
* 2.事件必须通过trigger来触发(必须设置为trigger方式的自动触发)
*/
$("button").on("myclick", function () {
alert("myclick");
});
$("button").trigger("myclick");
});
</script>
</head>
<body>
<button>按钮</button>
</body>
</html>
5.jquery事件的命名空间
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery事件的命名空间</title>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
/**
* 想要事件的命名空间有效,必须满足两个条件
* 1.事件是通过on来绑定
* 2.通过trigger或者triggerhandler来触发事件
*
* 注意
* 1.利用trigger触发子元素的带命名空间的事件,那么父元素带相同命名空间的事件也会被触发,而父元素
* 没有带命名空间的事件不会被触发
* 2.利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的
* 事件都会被触发(不管带不带命名空间)
*/
$("button").on("click.xw", function () {
alert("click1");
});
$("button").on("click.moti", function () {
alert("click2");
});
// $("button").trigger("click.xw");
$("button").trigger("click.moti");
});
</script>
</head>
<body>
<button>按钮</button>
</body>
</html>
6.jquery事件委托
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery事件委托</title>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
/*
什么是事件委托?
请别人帮忙,然后将做完的结果反馈给我们
*/
$("button").click(function () {
$("ul").append("<li>我是新增的li</li>");
});
/**
* 在jquery中,如果通过核心函数找到的元素不止一个,那么在添加事件的时候,jquery会遍历所有找的元素
* 给所有找到的元素添加事件
* 找不到新增的li,无法添加事件
*/
// $("ul>li").click(function () {
// console.log($(this).html());
// });
/**
* 使用事件委托:找到一个在入口函数执行之前就有的元素来监听动态添加元素的某些事件
* 有事件冒泡的原理
*/
$("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>
7.jquery事件委托练习
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery事件委托练习</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
.mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0,0,0,0.5);
}
.login{
width: 400px;
height: 300px;
margin: 100px auto;
background: green;
position: relative;
}
.p{
padding-top: 20%;
font-size: 58px;
}
button {
position: absolute;
width: 50px;
height: 30px;
right: 0;
top: 0;
background: red;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
$("a").click(function () {
var $mask = $("<div class=\"mask\">\n" +
" <div class=\"login\">\n" +
" <button>关闭</button>\n" +
" <p class=\"p\">hello!</p>\n" +
" </div>\n" +
"</div>");
$("body").append($mask);
$("body").delegate(".login>button", "click",function () {
$mask.remove();
});
return false;
});
});
</script>
</head>
<body>
<a href="http://www.baidu.com">点击登录</a>
</body>
</html>
8.jquery的事件移入和移出
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery事件的移入和移除</title>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
/*
1.mouseover/mouseover
注意:子元素被移入和移除也会触发父元素事件
*/
$(".father").mouseover(function () {
console.log("father被移入了");
});
$(".father").mouseover(function () {
console.log("father被移出了");
});
/*
2.mouseenter/mouseleave(推荐使用)
注意:子元素被移入和移除不会会触发父元素事件
*/
$(".father").mouseenter(function () {
console.log("father被移入了");
});
$(".father").mouseleave(function () {
console.log("father被移出了");
});
/**
* 3.hover方法
* 注意:子元素被移入和移除不会会触发父元素事件
* 接收两个方法参数:
* 第一个参数是被移入的时候执行的回调函数
* 第二个参数是被移出的时候执行的回调函数
*/
$(".father").hover(function () {
console.log("father被移入了");
},function () {
console.log("father被移出了");
});
/**
* 接收一个方法参数:同时监听移入和移出,执行相同的回调函数
*/
$(".father").hover(function () {
console.log("被移入或者移出了!");
});
});
</script>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
9.移入移出练习一
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery事件移入移出练习</title>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
$("li").hover(function () {
$(this).addclass("current");
},function () {
$(this).removeclass("current");
});
});
</script>
<style>
*{
margin: 0;
padding: 0;
}
.box{
margin: 50px auto;
width: 300px;
height: 500px;
border: 1px solid #000;
}
.box>h1{
font-size: 35px;
line-height: 35px;
color: palevioletred;
padding-left: 120px;
}
ul{
margin-top: 20px;
}
ul>li{
list-style: none;
padding: 5px 5px;
border: 1px dashed #000;
}
.content>img{
width: 100px;
height: 100px;
background: darkturquoise;
float: left;
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
}
.content>p{
font-size: 40px;
margin-top: 30px;
}
.content{
overflow: hidden;
display: none;
}
.current>div{
display: block;
}
</style>
</head>
<body>
<div class="box">
<h1>莫提</h1>
<ul>
<li>1
<div class="content">
<img /> <p>hello</p>
</div>
</li>
<li>2
<div class="content">
<img /> <p>hello</p>
</div>
</li>
<li>3
<div class="content">
<img /> <p>hello</p>
</div>
</li>
<li>4
<div class="content">
<img /> <p>hello</p>
</div>
</li>
</ul>
</div>
</body>
</html>
10.移入移出练习二
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery事件移入移出练习2</title>
<script src="../jquery-1.12.4.js"></script>
<script>
/*
第一种方法,效果不好,推荐用第二种方法
*/
// $(function () {
// $(".nav>li").hover(function () {
// $(this).addclass("current");
// var indexin =$(this).index();
// $(".content>li").eq(indexin).addclass("show");
// },function () {
// $(this).removeclass("current");
// var indexout =$(this).index();
// $(".content>li").eq(indexout).removeclass("show");
// });
// });
/*
第二种方法,使用siblings方法,获得没有被选中的同级别的其他元素
*/
$(function () {
$(".nav>li").mouseenter(function () {
$(this).addclass("current");
$(this).siblings().removeclass("current");
$(".content>li").eq($(this).index()).addclass("show");
$(".content>li").eq($(this).index()).siblings().removeclass("show");
});
});
</script>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 400px;
border: 1px solid #000;
margin: 50px auto;
}
.nav>li{
width: 100px;
height: 50px;
list-style: none;
text-align: center;
line-height: 50px;
float: left;
background: orange;
}
.nav>.current{
background: gray;
}
.content>li{
background: green;
width: 500px;
height: 400px;
list-style: none;
display: none;
}
.content>.show{
display: block;
}
.content>li>p{
text-align: center;
font-size: 50px;
line-height: 250px;
}
</style>
</head>
<body>
<div class="box">
<ul class="nav">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="content">
<li class="show"><p>第一张图片</p></li>
<li><p>第二张图片</p></li>
<li><p>第三张图片</p></li>
<li><p>第四张图片</p></li>
<li><p>第五张图片</p></li>
</ul>
</div>
</body>
</html>
下一篇： vue实现登录类型切换