事件
jQuery事件是对JavaScript事件的封装,常用事件分类
基础事件
鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件
鼠标事件方法的区别
键盘事件
用户每次按下或者释放键盘上的键时都会产生事件,常用键盘事件
window事件
调整窗口大小时,完成页面特效$(selector).resize( );
绑定事件与移除事件
绑定事件
使用on绑定一个事件,不仅可以绑定一个事件也可以绑定多个事件
<style>
div{
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
$(function(){
//使用on绑定一个事件
$('div').on('mouseover',function(){
$(this).css('background-color','#ccc')
});
//使用on绑定多个事件
$('div').on({
'mouseover':function(){
$(this).css('background-color','#ccc')
},
'mouseout':function(){
$(this).css('background-color','#f00')
}
});
// 使用off()移除div元素上的所有事件
// $('div').off();
//使用off()移除div元素上的鼠标移出事件
$('div').off('mouseout','')
});
</script>
移除事件
使用off()移除div元素上的所有事件
$('div').off();
使用off()移除div元素上的鼠标移出事件
$('div').off('mouseout','')
复合事件
鼠标光标悬停
hover()方法相当于mouseover与mouseout事件的组合
hover(enter,leave);
<script>
$(function(){
$('div').hover(function(){
$('div').css('background-color','#ccc');
},function(){
$('div').css('background-color','')
})
});
</script>
鼠标连续点击事件
toggle()方法用于模拟鼠标连续click事件
toggle(fn1,fn2,...,fnN);(使用时需要考虑到jQuery版本的问题,1.8是可以支持的)
$("input").toggle(
function(){$("body").css("background","#ff0000");},
function(){$("body").css("background","#00ff00");},
function(){$("body").css("background","#0000ff");}
)
toggle()方法不带参数,与show( )和hide( )方法作用一样
toggle( ); $("input").click(function(){$("p").toggle();})
toggleClass( )可以对样式进行切换
$("input").click(function(){$("p").toggleClass("red");})
toggle( )和toggleClass( )总结
toggle( fn1,fn2...)实现单击事件的切换,无须额外绑定click事件
toggle( )实现事件触发对象在显示和隐藏状态之间切换
toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换
<body>
<p>我是恁爹!</p>
<button>显示/隐藏</button>
</body>
<script>
$(function(){
//获取button元素并添加点击事件
$('button').click(function(){
//获取p元素
$('p').toggle();
});
});
</script>
动画
控制元素显示与隐藏
show() 控制元素的显示,hide( )控制元素的隐藏
$(selector).show([speed],[callback])
$(selector).hide([speed],[callback])
speed:可选。表示速度,默认为“0”,可能值:毫秒(如1000)、slow、normal、fast
callback:可选。show函数执行完之后,要执行的函数
改变元素的透明度
fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果
$(selector).fadeIn([speed],[callback])
$(selector).fadeOut([speed],[callback])
speed:可选。表示速度,默认为“0”,可能值:毫秒(如1000)、slow、normal、fast
callback:可选。show函数执行完之后,要执行的函数
改变元素高度
slideDown() 可以使元素逐步延伸显示 $(selector).slideDown ([speed],[callback])
slideUp()则使元素逐步缩短直至隐藏 $(selector).slideUp ([speed],[callback])
<style>
header{
width: 200px;
height: 100px;
}
div {
width: 200px;
height: 100px;
background-color: #f00;
}
</style>
</head>
<body>
<header>
<div></div>
</header>
<button class="hidee">隐藏div</button>
<button class="fadee">淡入div</button>
<button class="minii">缩小div</button>
</body>
<script>
$(function () {
$('.hidee').click(function () {
$('div').hide(2000, function () {
$('div').show(500,1000);
});
});
$('.fadee').click(function () {
$('div').fadeOut(2000, function () {
$('div').fadeTo(2000,1)
})
});
$('.minii').click(function () {
$('div').slideUp(2000, function () {
$('div').slideDown(500);
});
});
});
</script>
自定义动画
$(selector). animate({params},speed,callback) animate:必须,定义形成动画的CSS属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.6.0.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
position: absolute;
}
.box1 {
background-color: red;
}
.box2 {
background-color: rgb(8, 8, 86);
top: 148px;
}
.box3 {
background-color: green;
top: 248px;
}
</style>
</head>
<body>
<header>
<button class="fadee">1</button>
<button class="sidee">2</button>
<button class="action">3</button>
</header>
<hr />
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
<script>
$(function () {
$('.fadee').click(function () {
$('.box1').fadeOut(2000, function () {
$('.box1').fadeIn(2000);
});
$('.box2').fadeOut(2000, function () {
$('.box2').fadeTo(2000, 0.3);
});
$('.box3').fadeTo(2000, 0.2);
});
$('.sidee').click(function () {
$('.box2').slideUp(2000, function () {
$('.box2').slideDown(500);
});
});
$('.action').click(function () {
$('.box1').animate({ height: '300px', opacity: '0.4' }, 1500);
$('.box1').animate({ width: '300px', opacity: '0.8' }, 1500);
$('.box1').animate({ height: '100px', opacity: '0.4' }, 1500);
$('.box1').animate({ width: '100px', opacity: '0.8' }, 1500);
$('.box2').animate({ left:'600px' ,width: '300px'}, 1500);
$('.box2').animate({ top:'500px',height: '300px'}, 1500);
$('.box2').animate({ left:'8px',width: '100px' }, 1500);
$('.box2').animate({ top:'148px',height: '100px' }, 1500);
});
});
</script>
</html>