1.绑定事件
语法：bind(type,[date],fn);
type:事件类型，主要包括click，mouseover，mouseout等基础事件，
此外还可以是自定义事件
date:可选函数
fn:处理函数
2.移除事件使用unbind()方法
语法：unbind([type],[fn])
type:事件类型，主要包括：布鲁日，focus，click，mouseout等基础事件
fn:处理函数
注意：当unbind()不带参数时，表示移除所绑定的全部事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>div</div>
<button>点击我解绑事件</button>
<script src="../plugins/jQuery/jquery-3.6.0.js"></script>
<script>
$(function() {
$('div').click(function() {
}).mouseenter(function() {
})
复合事件
hover()
//当多个事件的处理是同样的逻辑时，事件名中间使用 空格 分开
// $('div').bind('click mouseenter', function() {
// alert(1)
// })
//当多个事件有分开的逻辑处理时
$('div').bind({
click: function() {
alert(1)
},
mouseenter: function() {
alert(2)
}
})
$('button').click(function(){
//解绑指定的事件
// $('div').unbind('mouseenter')
//不给参数 则解绑指定元素上的所有事件
$('div').unbind()
})
})
</script>
</body>
</html>
3.复合事件
hover()
hover()方法相当于mouseover与mouseout事件的组合
语法：hover(enter,leave)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> ul{ display: none; } </style> </head> <body> <div> toggle() 方法 <p>测试项</p> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <script src="../plugins/jQuery/jquery-3.6.0.js"></script> <script> $(function(){ //hover事件 是一个复合事件 就是相当于 mouseover和mouseout的结合体 $('div').hover( //当鼠标进入时触发该方法 function(){ $('ul').show() } //当鼠标移出时 触发该方法 ,function(){ $('ul').hide() }) }) </script> </body> </html>
toggle()方法
toggle()方法用于模拟鼠标连续点击click事件
语法：toggle(fn1,fn2,...,fnN);
toggle()方法不带参数，与show()和hide()方法作用一样
语法：toggle();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>toggle 模拟鼠标的多次点击</title>
</head>
<body>
<div>123</div>
<script src="../plugins/jQuery/jquery-1.8.3.min.js"></script>
<!-- <script src="../plugins/jQuery/jquery-3.6.0.js"></script> -->
toggle(fn1,fn2,....)此方法在jQuery1.9及以上被移除 不可再用
<script>
$(function(){
// 模拟鼠标多次点击的toggle 仅限于jQuery版本在1.9以下
$('div').toggle(function(){
$(this).css('background','red')
},
function(){
$(this).css('background','orange')
},
function(){
$(this).css('background','yellow')
},
function(){
$(this).css('background','green')
},
function(){
$(this).css('background','red')
},
function(){
$(this).css('background','blue')
},
function(){
$(this).css('background','purple')
},
function(){
$(this).css('background','black')
}
)
})
</script>
</body>
</html>toggleClass()可对样式进行切换
语法：toggleClass(className);
toggle()和toggleClass()总结
toggle(fn1,fn2...)实现单击事件的切换，无需额外绑定click事件
toggle()实现事件触发对象在显示和隐藏状态之间切换
toggleClass()实现事件触发对象在加载某个样式和移除某个样式之间切换
注意：toggle(fn1,fn2...)此方法在JQuery1.9及以上被移除不可再用
