1 jQuery中的事件
1.1 定义元素监听事件
语法:$(选择器).监听事件名称(处理函数);
说明:监听事件名称是 js 事件中去掉 on 后的内容, js 中的 onclick 的监听事件名称是 click
例如:
为页面中所有的 button 绑定 onclick,并关联处理函数 fun1
$("button").click(fun1)
为页面中所有的 tr 标签绑定 onmouseover,并关联处理函数 fun2
$("tr").mouseover(fun2)
1.2 鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件
常见的鼠标事件区别:
方法 | 描述 | 执行时机 |
click( ) | 触发或将函数绑定到指定元素的click事件 | 单击鼠标时 |
mouseover( ) | 触发或将函数绑定到指定元素的mouseover事件 | 鼠标指针移过时 |
mouseout( ) | 触发或将函数绑定到指定元素的mouseout事件 | 鼠标指针移出时 |
mouseenter( ) | 触发或将函数绑定到指定元素的mouseenter事件 | 鼠标指针进入时 |
mouseleave( ) | 触发或将函数绑定到指定元素的mouseleave事件 | 鼠标指针离开时 |
鼠标事件方法的区别:
方法 | 相同点 | 不同点 |
mouseover( ) | 鼠标进入被选元素时会触发 | 鼠标在其被选元素的子元素上来回进入时: 触发mouseover( ) 不触发mouseenter |
mouseenter( ) | ||
mouseout( ) | 鼠标离开被选元素时会触发 | 鼠标在其被选元素的子元素上来回离开时: 触发mouseout 不触发mouseleave |
mouseleave( ) |
1.3 键盘事件
键盘事件
通常在可以获取焦点的元素上触发,比如输入框
方法 | 描述 | 执行时机 |
keydown( ) | 触发或将函数绑定到指定元素的keydown事件 | 按下键盘时 |
keyup( ) | 触发或将函数绑定到指定元素的keyup事件 | 释放按键时 |
keypress( ) | 触发或将函数绑定到指定元素的keypress事件 | 产生可打印的字符时 |
$("input").keydown(function(k){
//在 JavaScript 中,当某个事件被触发时,浏览器会自动生成一个与该事件相关的事件对象(Event 对象),
//并将其作为参数传递给事件处理函数,处理函数可以定义参数(k)接收事件对象。
k.key //获取键盘按下后对应的字符
});
1.4 浏览器事件
通常用于监控浏览器窗口的大小变化,并根据窗口尺寸变化执行相应的操作。
$(window).resize( );
$(window).resize(function() {
console.log("The window has been resized.");
});//在这个例子中,每次调整浏览器窗口大小时,会执行 console.log() 输出消息。
1.4 常见的事件![](https://i-blog.csdnimg.cn/direct/62ce343282464650a615986b8d21c17d.png)
2 事件的绑定与解除绑定
2.1 on绑定事件
在 jQuery 中,on()
方法是一个强大的事件绑定方法,它可以用于给元素绑定一个或多个事件处理程序。它是 jQuery 中较新的绑定事件的方式,取代了老式的如 bind()
、live()
和 delegate()
等方法。
on() 方法在被选元素上添加事件处理程序。该方法给 API 带来很多便利,推荐使用该方法
语法:$(选择器).on(event, childSelector ,data,function)
event
:字符串类型,表示要绑定的事件类型(如"click"
、"mouseover"
等)。childSelector
:可选。表示只为某些子元素绑定事件,常用于事件委托。data
:可选。额外的数据传递给事件处理函数。function
:事件触发时要执行的回调函数。
语法:
jQuery元素对象.on(事件名称,function(){
//逻辑代码
})
其中:事件名称是jQuery的事件方法的方法名称,例如:click、mouseover、mouseout、focus、blur等
示例;
//绑定单个事件
$("#myButton").on("click", function() {
alert("Button clicked!");
});
//绑点多个事件 通过一个对象来传递不同的事件及其对应的处理函数。
$("#myElement").on({
mouseenter: function() {
$(this).css("background-color", "lightblue");
},
mouseleave: function() {
$(this).css("background-color", "");
}
});
//多个事件 一个回调函数
$("#parent").on("click chenge moseover", function() {
alert("Child element clicked!");
});
2.2 off解绑事件
语法:
jQuery元素对象.off(事件名称);
其中:参数事件名称如果省略不写,可以解绑该jQuery对象上的所有事件
移除特定事件:
// 绑定事件
$("#myButton").on("click", function() {
console.log("Button clicked!");
});
// 移除 click 事件
$("#myButton").off("click");
移除多个事件 :
// 绑定多个事件
$("#myButton").on("click mouseover", function() {
console.log("Event triggered!");
});
// 移除 click 和 mouseover 事件
$("#myButton").off("click mouseover");
移除所有事件:
如果你不传入任何参数,off()
方法会移除该元素上所有事件。
// 绑定多个事件
$("#myButton").on("click mouseover", function() {
console.log("Event triggered!");
});
// 移除所有绑定的事件
$("#myButton").off();
移除指定回调函数 :
只有 handleClick
这个回调函数会被移除,其他绑定的 click
事件不会受影响。
function handleClick() {
console.log("Button clicked!");
}
// 绑定 click 事件并指定回调函数
$("#myButton").on("click", handleClick);
// 移除特定回调函数
$("#myButton").off("click", handleClick);
3 复合事件
3.1 hover()方法
hover()方法相当于mouseover与mouseout事件的组合
语法:
hover([over,]out)
其中:
over代表鼠标移入事件触发的函数;
out代表鼠标移出事件触发的函数。
$("#myDiv").hover(function(){
$(this).css("background","green");
},function(){
$(this).css("background","red");
});
3.2 toggle()方法
toggle()方法用于模拟鼠标连续click事件:
该方法允许在单击元素时,依次执行两个回调函数,第一次点击执行第一个回调,第二次点击执行第二个回调依次以此交替切换行为
$("input").toggle(
function(){$("body").css("background","#ff0000");},
function(){$("body").css("background","#00ff00");},
function(){$("body").css("background","#0000ff");}
)
toggle() 方法用于在显示和隐藏元素之间切换
每次调用该方法时,如果元素是可见的,它会被隐藏;如果元素是隐藏的,它会显示。
<body>
<input type="text" />
<p>554455</p>
</body>
$("input").click(function(){$("p").toggle();})
toggleClass( )可以对样式进行切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.st1{
background-color: red;
}
</style>
<body>
<input type="text" />
<p>554455</p>
</body>
<script src="../Test01/practise2/js/jquery-1.12.4.js"></script>
<script>
$("input").click(function(){
$("p").toggleClass("st1");
})
</script>
</html>
4 jQuery动画效果
4.1 显示效果
- 方法
方法名称 | 解释 |
show([speed],[easing],[fn]]) | 显示元素方法 |
hide([speed],[easing],[fn]]) | 隐藏元素方法 |
toggle([speed],[easing],[fn]) | 切换元素方法,显示的使之隐藏,隐藏的使之显示 |
- 参数
参数名称 | 解释 |
speed | 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000) |
easing | 用来指定切换效果,默认是"swing"(摆动),可用参数"linear"(直线) |
fn | 在动画完成时执行的函数,每个元素执行一次 |
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function hideFn(){
$("#showDiv").hide("slow","swing");
}
function showFn(){
$("#showDiv").show("normal","swing");
}
function toggleFn(){
$("#showDiv").toggle(5000,"linear");
}
</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
<div id="showDiv" style="width:300px;height:300px;background:red">
div显示和隐藏
</div>
</body>
</html>
4.2 滑动效果
- 方法
方法名称 | 解释 |
slideDown([speed,[easing],[fn]]) | 向下滑动方法 |
slideUp([speed,[easing],[fn]]) | 向上滑动方法 |
slideToggle([speed],[easing],[fn]) | 切换元素方法,向下使之向下,向下使之向上 |
- 参数
参数名称 | 解释 |
speed | 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000) |
easing | 用来指定切换效果,默认是"swing",可用参数"linear" |
fn | 在动画完成时执行的函数,每个元素执行一次 |
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function hideFn(){
$("#showDiv").fadeOut("slow","swing");
}
function showFn(){
$("#showDiv").fadeIn("normal","swing");
}
function toggleFn(){
$("#showDiv").fadeToggle(5000,"linear");
}
</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
<div id="showDiv" style="width:300px;height:300px;background:red">
div显示和隐藏
</div>
</body>
</html>
4.3 淡入淡出效果
- 方法
方法名称 | 解释 |
fadeIn([s],[e],[fn]) | 淡入方法 |
fadeOut([s],[e],[fn]) | 淡出方法 |
fadeTo([[s],o,[e],[fn]]) | 设置元素的透明度 |
fadeToggle([s,[e],[fn]]) | 淡入淡出之间切换 |
- 参数
参数名称 | 解释 |
speed | 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000) |
easing | 用来指定切换效果,默认是"swing",可用参数"linear" |
fn | 在动画完成时执行的函数,每个元素执行一次 |
opacity | 一个0至1之间表示透明度的数字 |
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function hideFn(){
$("#showDiv").fadeOut(1000);//1秒钟淡出(隐藏)
}
function showFn(){
$("#showDiv").fadeIn(1000);//1秒钟淡入(显示)
}
function toggleFn(){
$("#showDiv").fadeToggle(1000);//1秒钟淡入淡出之间切换
}
function fadeTofn(){
$("#showDiv").fadeTo(2000,0.5);//2秒钟设置div的透明度为50%
}
</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
<input type="button" value="点击按钮设置div透明度" onclick="fadeTofn()">
<div id="showDiv" style="width:300px;height:300px;background:red">
div显示和隐藏
</div>
</body>
</html>