绑定方式有两种:
.eventName(fn)
方式绑定。
$('button').click(function () { alert('hello tzk') })on(eventName,function)
方式绑定
$('button').on('click', function () { alert('hello tzk') })注意:以上两种绑定方式均不会被覆盖,并且可以添加多个事件。
$('button').click(function () {
alert('hello tzk')
})
$('button').click(function () {
alert(123)
})
$('button').mouseleave(function () {
alert(mouseleave)
})
事件解绑只有一个方法off()
,只需要用需要解绑的元素调用此方法即可。
function test1() {
alert('hello tzk')
}
function test2() {
alert('hello 123')
}
$('button').click(test1)
$('button').click(test2)
$('button').mouseleave(function () {
alert('mouseleave')
})
$('button').mouseenter(function () {
alert('mouseenter')
})
对于以上事件绑定:
return false
或者event.stopPropagation()
$('.son').click(function (event) { alert('son') // return false event.stopPropagation() })阻止事件冒泡一定要在子级添加。事件自动触发有两个方法,参数传入为字符串形式的事件名称。
a标签的默认行为
对a标签设置自动事件时,无法触发其默认行为。
$('a').click(function () {
alert('a')
})
$('a').trigger('click')
如果想要触发其默认行为则需要如下更改:
<a href="http://baidu.com" target="_blank"><span>注册</span></a>
$('span').click(function () {
alert('a')
})
$('span').trigger('click')
自定义事件需要满足的条件:
on
绑定事件
$('.son').on('myClick', function () { alert('son') })trigger
触发
$('.son').trigger('myclick')想要使事件的命名空间有效,必须满足两个条件
面试题(细节)
将li
的点击事件委托给ul
元素监听。
$('ul').delegate('li', 'click', function () {
console.log($(this).html())
})
利用事件委托完成弹出框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.mask {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
position: fixed;
left: 0;
top: 0;
}
.login {
width: 570px;
/* height: 290px; */
margin: 100px auto;
position: relative;
}
.login>span {
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
$(function () {
$('a').click(function () {
var $mask = $('<div class="mask"><div class= "login" ><img src="https://ae01.alicdn.com/kf/U0acca6abe69449398ddbe1f56f032ecaw.jpg" alt=""><span></span></div>')
$('body').append($mask)
$('body').delegate('.login>span', 'click', function () {
$mask.remove()
})
return false
})
})
</script>
</head>
<body>
<!-- <div class="mask">
<div class="login">
<img src="https://ae01.alicdn.com/kf/U0acca6abe69449398ddbe1f56f032ecaw.jpg" alt="">
<span></span>
</div>
</div> -->
<a href="https://www.baidu.com">注册</a>
<div>
我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落
</div>
</body>
</html>
移入事件mouseover
移出事件mouseout
。这种方法 子元素被移入移出也会触发父元素的事件。
$(function () {
$('.father').mouseover(function () {
console.log('鼠标移入了')
})
$('.father').mouseout(function () {
console.log('鼠标移出了')
})
})
为了解决以上问题,jQuery提供了另外两个方法:鼠标移入mouseenter
和鼠标移出mouseleave
。
同时监听移入与移出
使用的方法为hover
,这个方法可以接收一个或两个参数,并且不会子元素被移入移出也会触发父元素的事件。
实现思路
直译方式
$('li').mouseenter(function () {
$(this).addClass('current')
})
$('li').mouseleave(function () {
$(this).removeClass('current')
})
简化方式1
$('li').hover(function () {
$(this).addClass('current')
}, function () {
$(this).removeClass('current')
})
简化方式2
$('li').hover(function () {
$(this).toggleClass('current')
})
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 450px;
margin: 50px auto;
border: 1px solid #000;
}
.box>h1 {
font-size: 20px;
line-height: 35px;
color: deeppink;
padding-left: 10px;
border-bottom: 1px dashed #ccc;
}
ul>li {
list-style: none;
padding: 5px 10px;
border: 1px dashed #ccc;
}
ul>li:nth-child(-n+3) span {
background-color: deeppink;
}
ul>li>span {
display: inline-block;
height: 20px;
width: 20px;
background: #ccc;
text-align: center;
line-height: 20px;
margin-right: 10px;
}
.content {
overflow: hidden;
margin-top: 5px;
display: none;
}
.content>img {
width: 80px;
height: 120px;
float: left;
}
.content>p {
width: 180px;
height: 120px;
float: right;
font-size: 12px;
line-height: 20px;
}
.current .content {
display: block;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
$(function () {
$('li').hover(function () {
$(this).toggleClass('current')
})
// $('li').mouseenter(function () {
// $(this).addClass('current')
// })
// $('li').mouseleave(function () {
// $(this).removeClass('current')
// })
// $('li').hover(function () {
// $(this).addClass('current')
// }, function () {
// $(this).removeClass('current')
// })
})
</script>
</head>
<body>
<div class="box">
<h1>电影排行榜</h1>
<ul>
<li><span>1</span>电影名称
<div class="content">
<img
src="https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile2@latest/2020/06/16/d0efe1580ab93f0e6b1a04bb07a8259f.png">
<p>测试文字哈哈哈</p>
</div>
</li>
<li><span>2</span>电影名称<div class="content">
<img
src="https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile2@latest/2020/06/16/d0efe1580ab93f0e6b1a04bb07a8259f.png">
<p>测试文字哈哈哈</p>
</div>
</li>
<li><span>3</span>电影名称<div class="content">
<img
src="https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile2@latest/2020/06/16/d0efe1580ab93f0e6b1a04bb07a8259f.png">
<p>测试文字哈哈哈</p>
</div>
</li>
<li><span>4</span>电影名称<div class="content">
<img
src="https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile2@latest/2020/06/16/d0efe1580ab93f0e6b1a04bb07a8259f.png">
<p>测试文字哈哈哈</p>
</div>
</li>
<li><span>5</span>电影名称<div class="content">
<img
src="https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile2@latest/2020/06/16/d0efe1580ab93f0e6b1a04bb07a8259f.png">
<p>测试文字哈哈哈</p>
</div>
</li>
</ul>
</div>
</body>
</html>
实现思路
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 440px;
height: 298px;
margin: 50px auto;
border: 1px solid #000;
}
.nav>li {
list-style: none;
width: 110px;
height: 50px;
background: orange;
text-align: center;
float: left;
line-height: 50px;
}
.nav>.current {
background: #ccc;
}
.content>li {
list-style: none;
display: none;
text-align: center;
}
.content>.show {
display: block;
}
.content>li>img {
width: 240px;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
$(function () {
/*
// 1. 监听选项卡的移入事件
$('.nav>li').mouseenter(function () {
// 1.1 修改被移入选项卡的背景颜色
$(this).addClass('current')
// 1.2 获取当前移入选项卡的索引
var index = $(this).index()
console.log(index)
// 1.3 根据索引找到对应的图片
var $li = $('.content>li').eq(index)
// 1.4 显示找到的图片
$li.addClass('show')
})
// 1. 监听选项卡的移出事件
$('.nav>li').mouseleave(function () {
// 1.1 还原被移入选项卡的背景颜色
$(this).removeClass('current')
// 1.2 获取当前移出选项卡的索引
var index = $(this).index()
// 1.3 根据索引找到对应图片
var $li = $('.content>li').eq(index)
// 1.4 隐藏图片
$li.removeClass('show')
})
*/
// 1. 监听选项卡的移入事件
$('.nav>li').mouseenter(function () {
// 1.1 修改被移入选项卡的背景颜色
$(this).addClass('current')
// 1.2 还原其他兄弟选项卡的颜色
$(this).siblings().removeClass('current')
// 1.3 获取当前移入选项卡的索引
var index = $(this).index()
// 1.4 根据索引找到对应的图片
var $li = $('.content>li').eq(index)
// 1.5 隐藏兄弟图片
$li.siblings().removeClass('show')
// 1.6 显示找到的图片
$li.addClass('show')
})
})
</script>
</head>
<body>
<div class="box">
<ul class="nav">
<li class="current">123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<ul class="content">
<li class="show">
<img src="https://ae02.alicdn.com/kf/U5303870feaa24803b2a9debcfb260c79T.jpg">
</li>
<li>
<img src="https://ae02.alicdn.com/kf/U3e7e3e14488d431b9b1178ddddc1fdd4T.jpg">
</li>
<li>
<img src="https://ae01.alicdn.com/kf/U0b5025b6d75b45c1a2590c1fdc6d5bcbq.jpg">
</li>
<li>
<img src="https://ae01.alicdn.com/kf/U7015657127cf4f8dbd19d9f03fd38636F.jpg">
</li>
</ul>
</div>
</body>
</html>