01-绑定事件处理函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: #00BFFF;
}
.box2 {
width: 200px;
height: 200px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
<script type="text/javascript">
// 1. on('事件类型', '回调函数') //绑定多个事件
$(function() {
$('.box').on('click mouseover', function() {
alert('111')
})
//2.绑定不同的事件 on({事件:fun,事件:fun})
$('.box2').on({
click: function() {
alert('222')
},
mouseover: function() {
alert('222')
}
})
})
/*
.on('事件类型', '子选择器','回调函数')
子选择器:指定子选择器,绑定在儿子身上(用于事件委托)
*注意:因为有冒泡,所以出了这个机制
*
on()的优点:
1.绑定多个事件
2.实现事件委托
3.未来动态创建的元素绑定事件
*/
</script>
</html>
02-一次性事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: #00BFFF;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
<script type="text/javascript">
// 1. one('事件','函数') //一次性事件
$(function() {
$('.box').one('click',function () {
alert('111')
})
})
</script>
</html>
03-自动触发事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: #00BFFF;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
<script type="text/javascript">
// 1. trigger(type) //自动触发事件
$(function() {
$('.box').click(function () {
alert('111')
}).trigger('click')
})
/*
自动触发:
1. .click()
2. .trigger()
3. .triggerHandler('事件') //不会触发元素的默认行为
*/
</script>
</html>
04-移除事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: #00BFFF;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
<script type="text/javascript">
// 1.off('事件类型') //移除单个事件
//不写参数,默认移除所有
//$('ul').off('click','li') //解绑事件委托
$(function() {
$('.box').click(function () {
alert('111')
})
$('.box').off();
})
</script>
</html>
05-其他事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
width: 300px;
}
</style>
</head>
<body>
<img src="./img/微信图片_20220329191810.jpg" >
<br>
<img src="img/微信图片_20220329191815.jpg" >
</body>
</html>
06-JQ的动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background-color: #00BFFF;
}
</style>
</head>
<body>
<button type="button" >显示</button>
<button type="button" >隐藏</button>
<button type="button">切换</button>
<div class="box"></div>
</body>
<script type="text/javascript">
$(function () {
//显示
$('button').first().click(function () {
$('.box').show(1000)
})
//隐藏
$('button').eq(1).click(function () {
$('.box').hide(1000)
})
//切换
$('button').last().click(function () {
$('.box').toggle(1000)
})
})
/*
1.
show([speed],[easing],[fun]) //显示元素
speed: 动画执行的时长(1000) slow(600) fast(200)
easing: 动画的样式
swing //开始和结束比较慢
linear //匀速运动
fun: 回调函数
2.
hide([speed],[easing],[fun]) //隐藏元素
speed: 动画执行的时长(1000) slow(600) fast(200)
easing: 动画的样式
swing //开始和结束比较慢
linear //匀速运动
fun: 回调函数
3.
toggle([speed],[easing],[fun]) //切换显示和隐藏
speed: 动画执行的时长(1000) slow(600) fast(200)
easing: 动画的样式
swing //开始和结束比较慢
linear //匀速运动
fun: 回调函数
*/
</script>
</html>
07-滑动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background-color: #00BFFF;
}
</style>
</head>
<body>
<button type="button" >滑下</button>
<button type="button" >滑上</button>
<button type="button">切换</button>
<div class="box"></div>
</body>
<script type="text/javascript">
$(function () {
//滑下
$('button').first().click(function () {
$('.box').slideDown(1000)
})
//滑上
$('button').eq(1).click(function () {
$('.box').slideUp(1000)
})
//切换
$('button').last().click(function () {
$('.box').slideToggle(1000)
})
})
/*
1.
slideDown([speed],[easing],[fun]) //滑下
speed: 动画执行的时长(1000) slow(600) fast(200)
easing: 动画的样式
swing //开始和结束比较慢
linear //匀速运动
fun: 回调函数
2.
slideUp([speed],[easing],[fun]) //滑上
speed: 动画执行的时长(1000) slow(600) fast(200)
easing: 动画的样式
swing //开始和结束比较慢
linear //匀速运动
fun: 回调函数
3.
slideToggle([speed],[easing],[fun]) //切换
speed: 动画执行的时长(1000) slow(600) fast(200)
easing: 动画的样式
swing //开始和结束比较慢
linear //匀速运动
fun: 回调函数
*/
</script>
</html>
08-停止动画排队
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background-color: #00BFFF;
}
</style>
</head>
<body>
<button type="button" >显示</button>
<button type="button" >隐藏</button>
<button type="button">切换</button>
<div class="box"></div>
</body>
<script type="text/javascript">
$(function () {
//滑下
$('button').first().click(function () {
$('.box').stop().slideDown(1000)
})
//滑上
$('button').eq(1).click(function () {
$('.box').stop().slideUp(1000)
})
//切换
$('button').last().click(function () {
$('.box').stop().slideToggle(1000)
})
})
/*
.stop() //停止动画排队
/*注意:必须写到动画前面
*/
</script>
</html>
09-淡入淡出效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background-color: #00BFFF;
}
</style>
</head>
<body>
<button type="button" >淡入</button>
<button type="button" >淡出</button>
<button type="button">切换</button>
<button type="button">修改透明度</button>
<div class="box"></div>
</body>
<script type="text/javascript">
$(function () {
//淡入
$('button').first().click(function () {
$('.box').fadeIn(1000)
})
//淡出
$('button').eq(1).click(function () {
$('.box').fadeOut(1000)
})
//切换
$('button').eq(2).click(function () {
$('.box').fadeToggle(1000)
})
//渐进的方式调整到指定的不透明度
$('button').last().click(function () {
$('.box').fadeTo(200,0.5)
})
})
/*
1.
fadeIn([speed],[easing],[fun]) //淡入
speed: 动画执行的时长(1000) slow(600) fast(200)
easing: 动画的样式
swing //开始和结束比较慢
linear //匀速运动
fun: 回调函数
2.
fadeOut([speed],[easing],[fun]) //淡出
speed: 动画执行的时长(1000) slow(600) fast(200)
easing: 动画的样式
swing //开始和结束比较慢
linear //匀速运动
fun: 回调函数
3.
fadeToggle([speed],[easing],[fun]) //切换
speed: 动画执行的时长(1000) slow(600) fast(200)
easing: 动画的样式
swing //开始和结束比较慢
linear //匀速运动
fun: 回调函数
4.
.fadeTo([speed],opcity,[easing],[fun]) //渐进的方式调整到指定的不透明度
speed:必写
opcity: 必写 0-1
*/
</script>
</html>
10-自定义动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body{
position: relative;
}
.box{
width: 300px;
height: 300px;
background-color: #00BFFF;
position: absolute;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script type="text/javascript">
$(function () {
$('.box').click(function () {
$(this).animate({
top: 500,
left: 500
})
})
})
/*
//自定义动画
animate({属性},[speed],[easing],[fun])
*/
</script>
</html>
11-案例–返回顶部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div{
width: 1000px;
height: 600px;
margin: 0 auto;
}
div:nth-child(even){
background-color: pink;
}
div:nth-child(odd){
background-color: deepskyblue;
}
.back{
width: 50px;
height: 50px;
background-color: aqua;
position: fixed;
left: 20px;
bottom: 100px;
font-size: 18px;
text-align: center;
cursor: pointer;
/* display: none; */
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="back">返回顶部</div>
</body>
<script type="text/javascript">
$(function () {
//1.监听window的滚动距离
$(window).scroll(function () {
if($(this).scrollTop()>800){
$('.back').fadeIn(1000);
}else{
$('.back').fadeOut(1000);
}
})
//2.给back添加点击事件
//监听html的scrollTop
$('.back').click(function () {
$('html').animate({
scrollTop:0
},1000)
})
})
</script>
</html>
12-案例–跳楼机
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.header,
.banner,
.main1,
.main2,
.main3,
.main4,
.footer {
width: 1200px;
margin: 0 auto;
}
/* 头部 */
.header {
height: 400px;
background-color: pink;
}
.banner {
height: 500px;
background-color: skyblue;
}
.main1 {
height: 500px;
background-color: #BDB76B;
}
.main2 {
height: 500px;
background-color: skyblue;
}
.main3 {
height: 500px;
background-color: #EE9900;
}
.main4 {
height: 500px;
background-color: mediumturquoise;
}
.footer {
height: 500px;
border: 1px solid green;
}
.side-bar {
width: 80px;
position: fixed;
bottom: 40%;
left: 10px;
/* 初始楼层不显示 */
display: none;
}
.side-bar>div {
height: 50px;
border: 1px solid #666;
text-align: center;
line-height: 50px;
}
.side-bar .active {
background-color: orangered;
}
</style>
</head>
<body>
<div class="header">头部区域</div>
<div class="banner">广告区域</div>
<!-- 主体 -->
<div class="main1 floor">主体区域1-女装</div>
<div class="main2 floor">主体区域2-男装</div>
<div class="main3 floor">主体区域3-童装</div>
<div class="main4 floor">主体区域4-化妆品</div>
<div class="footer">底部区域</div>
<!-- 侧边栏 -->
<div class="side-bar">
<div class="bar1 item active">女装</div>
<div class="bar2 item">男装</div>
<div class="bar3 item">童装</div>
<div class="bar4 item">化妆品</div>
</div>
</body>
<script type="text/javascript">
$(function () {
//判断在页面中间刷新是让跳楼机出现
if($(window).scrollTop()>=$('.main1').offset().top){
$('.side-bar').fadeIn(1000);
}else{
$('.side-bar').fadeOut(1000);
}
//1.判断让楼层导航显示
$(window).scroll(function () {
if($(window).scrollTop()>=$('.main1').offset().top){
$('.side-bar').fadeIn(1000);
}else{
$('.side-bar').fadeOut(1000);
}
//2.判断让跳楼机进行排他(获取内容区的集合和跳楼机的集合)
$('.floor').each(function (index,value) {
//如果window的滚动距离>楼层距离顶部的偏移量
if($(window).scrollTop()>=$(value).offset().top){
//跳楼机切换(排他)
//获取所有的楼层导航集合,用.eq(index)值可以找到对应的楼层
$('.item').eq(index).addClass('active').siblings().removeClass('active');
}
})
})
})
</script>
</html>