jQuery 事件
jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：
$(“p”).click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现：
(
"
p
"
)
.
c
l
i
c
k
(
f
u
n
c
t
i
o
n
(
)
/
/
动
作
触
发
后
执
行
的
代
码
!
!
)
;
∗
∗
常
用
的
j
Q
u
e
r
y
事
件
方
法
∗
∗
1.
("p").click(function(){ // 动作触发后执行的代码!! }); **常用的 jQuery 事件方法** 1.
("p").click(function()//动作触发后执行的代码!!);∗∗常用的jQuery事件方法∗∗1.(document).ready(function) 文档完全加载完后执行函数
2.click(function) 方法是当按钮点击事件被触发时会调用一个函数
3.dblclick(function)双击元素时，会发生 dblclick 事件。
4.mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。
5.mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。
6.hover(function)方法用于模拟光标悬停事件。
7.focus(function)当元素获得焦点时，发生 focus 事件。
8.blur(function)当元素失去焦点时，发生 blur 事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
<script>
$(document).ready(function(){
alert("$(document).ready(function) 文档完全加载完后执行函数");
});
$(document).ready(function(){
$("#but1").click(function(){
alert("click(function) 方法是当按钮点击事件被触发时会调用一个函数");
});
$("#but2").dblclick(function(){
alert("dblclick(function)双击元素时，会发生 dblclick 事件。");
});
$("#h2").mouseenter(function(){
alert("4.mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。");
});
$("#h2").mouseleave(function(){
alert("5.mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。");
});
$("#a1").hover(function(){
alert("6.hover(function)用于模拟光标悬停事件。");
});
$("#text1").focus(function(){
$(this).val("background-color");
});
$("#text1").blur(function(){
alert($(this).val());
});
});
</script>
</head>
<body>
<input id="but1" type="button" value="测试单击事件"><br>
<input id="but2" type="button" value="测试双击事件"><br>
<h2 id="h2">测试鼠标进入和移出事件</h2>
<a id="a1" href="#">测试光标悬停事件</a><br><br><br>
<input id="text1" type="text" value="测试获得焦点和失去焦点事件"><br>
</body>
</html>
-
元素的隐藏和显示动画【就是元素的隐藏和显示】
hide([毫秒数],[success-function]) 隐藏元素
show([毫秒数],[success-function]) 显示元素
fadeIn([毫秒数],[success-function]) 显示元素。
fadeOut([毫秒数],[success-function]) 隐藏元素。
slideDown([毫秒数],[success-function]) 显示元素
slideUp([毫秒数],[success-function]) 隐藏元素
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素的隐藏和显示动画</title>
<!-- 导入jquery的函数库 -->
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
$("#but1").click(function(){
var butvalue=$("#but1").val();
//jQuery hide([毫秒数],[success-function]) 隐藏元素
//jQuery show([毫秒数],[success-function]) 显示元素
/*
if(butvalue=="隐藏"){
//$("#img1").hide();
//$("#img1").hide(5000);
$("#img1").hide(5000,function(){
$("#but1").val("显示");
});
}else{
//$("#img1").show();
//$("#img1").show(5000);
$("#img1").show(5000,function(){
$("#but1").val("隐藏");
});
}
*/
//jQuery fadeIn([毫秒数],[success-function]) 显示元素。
//jQuery fadeOut([毫秒数],[success-function]) 隐藏元素。
/*
if(butvalue=="隐藏"){
//$("#img1").fadeOut();
//$("#img1").fadeOut(5000);
$("#img1").fadeOut(5000,function(){
$("#but1").val("显示");
});
}else{
//$("#img1").fadeIn();
//$("#img1").fadeIn(5000);
$("#img1").fadeIn(5000,function(){
$("#but1").val("隐藏");
});
}
*/
//jQuery slideDown([毫秒数],[success-function]) 显示元素
//jQuery slideUp([毫秒数],[success-function]) 隐藏元素
if(butvalue=="隐藏"){
//$("#img1").slideUp();
//$("#img1").slideUp(5000);
$("#img1").slideUp(5000,function(){
$("#but1").val("显示");
});
}else{
//$("#img1").slideDown();
//$("#img1").slideDown(5000);
$("#img1").slideDown(5000,function(){
$("#but1").val("隐藏");
});
}
});
});
</script>
</head>
<body>
<input id="but1" type="button" value="隐藏">
<br>
<img id="img1" src="imgs/open.png" />
</body>
</html>
jQuery 效果- 动画
jQuery animate() 方法允许您创建自定义的动画。
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性.
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
jQuery 停止动画
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#panel,#flip,#updiv{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
#updiv{
display:none;
}
</style>
<script src="js/jquery-3.5.1.js"></script>
<script>
$(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000,function(){
$("#updiv").show();
});
});
$("#stop").click(function(){
$("#panel").stop();
});
$("#updiv").click(function(){
$("#panel").slideUp(5000,function(){
$("#updiv").hide();
});
});
});
</script>
</head>
<body>
<button id="stop">停止滑动</button>
<div id="flip">点我向下滑动面板</div>
<div id="panel">Hello world!</div>
<div id="updiv">点我向上滑动面板</div>
</body>
</html>
jQuery - 链(Chaining)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#div1{
background-color: red;
width: 200px;
height: 200px;
border-radius: 100px;
}
#div2{
background-color: yellow;
width: 200px;
height: 200px;
border-radius: 100px;
}
</style>
<script src="js/jquery-3.5.1.js"></script>
</script>
<script>
$(function(){
$("#but1").click(function(){
//延迟执行的函数
setTimeout(function(){
for(var i=1;i<=10;i++){
$("#div1").fadeOut(500).fadeIn(500);
}
},0);
setTimeout(function(){
for(var i=1;i<=10;i++){
$("#div2").fadeOut(500).fadeIn(500);
}
},10000);
});
});
</script>
</head>
<body>
<input id="but1" type="button" value="红灯亮"/>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
6.HTML DOM 遍历和修改
jQuery each() 方法
语法
$(selector).each(function(index,element){ })
each函数中的function的
参数1-index–被遍历出的每一个元素在数组中的位置[下标]
参数2-element–被遍历出的每一个元素具体元素【DOM对象】
each函数中的function中没有element时，可以被this代替
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>遍历元素</title>
<!-- 导入jquery的函数库 -->
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
var parray=$("p");
//$(selector).each(function(index,element){ });
//each函数中的function的
//参数1-index--被遍历出的每一个元素在数组中的位置[下标]
//参数2-element--被遍历出的每一个元素具体元素【DOM对象】
//each函数中的function中没有element时，可以被this代替
/*
parray.each(function(index,element){
alert(element);
});
*/
parray.each(function(index){
var size=index*10+20;
$(this).css("font-size",size+"px");
});
});
</script>
</head>
<body>
<p>测试用的p元素1</p>
<p>测试用的p元素2</p>
<p>测试用的p元素3</p>
<p>测试用的p元素4</p>
</body>
</html>
总结:
1.jQuery 选择器
2.jQuery对象与javascriptDOM对象转换
3.jQuery控制html元素内容【text([content]) /html([content]) / val([content]) 】
4.jQuery添加html元素[append()/ after() / before()]
5.jQuery删除html元素[remove()/empty()]
6.jQuery控制css 【css(“css属性名”)
/ css(“css属性名”,”属性值”)
/css({“css属性名”:”属性值”,…})
/addClass(class类型样式)
/removeClass(class类型样式)
7.jQuery控制事件 【jquery对象.事件名称(function(){/* 事件处理动作 */})】
8.jQuery的each方法
9.jQuery的AJAX操作