2021.5.22 Jquery

最新推荐文章于 2021-12-21 15:15:52 发布

置顶景抓马

最新推荐文章于 2021-12-21 15:15:52 发布

阅读量79

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/JINGMaNong/article/details/117172963

版权

Jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery 事件

在这里插入图片描述
jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

$(“p”).click();

下一步是定义什么时间触发事件。可以通过一个事件函数实现：

$(“p”).click(function(){ // 动作触发后执行的代码!! });

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件点击</title>
		<script src="jq/jquery-3.6.0.js"></script>
		<script>
			/*
			$(function(){
				$("#but1").click(function(){
					alert("事件点击");
				})
			});
		   $(document).ready(function(){
			   alert("1.$(document).ready(function) 文档完全加载完后执行函数")
		   });
			  $("but2").dblclick(function(){
				  alert("dblclick(function)双击元素时，会发生 dblclick 事件。")
			  });
		$("#h2").mouseenter(function(){
			alert("mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。")
		});
	   $("#a1").hover(function(){
		   alert("6.hover(function)方法用于模拟光标悬停事件。")
	   });
	  $("#text1").focus(function(){
		  alert("focus(function)当元素获得焦点时，发生 focus 事件。")
	  });
	  */
	 $("#text1").blur(function(){
		 alert("8.blur(function)当元素失去焦点时，发生 blur 事件。")
	 });
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="点击事件" /> <br>
		<input id="but2" type="button" value="点击事件" /> <br>
		<h2 id="h2">测试鼠标进入和移除事件</h2> <br>
		<a href="#" id="a1">光标悬停事件。</a> <br>
		<input id="text1" type="text" value="元素获得焦点元素失去焦点" />
	</body>
</html>

常用的 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 事件。

元素的隐藏和显示动画【就是元素的隐藏和显示】

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>
		<script src="jq/jquery-3.5.1.js"></script>
		<script>
			$(function(){
				var but1=$("#but1");
				but1.click(function(){
					var buttest=but1.val();
					var img1=$("#img1");
					if(buttest=="隐藏"){
						/*
						//hide([毫秒数],[success-function]) 隐藏元素
						img1.hide(5000,function(){
							but1.val("显示");
						});
						*/
					  	//fadeOut([毫秒数],[success-function]) 隐藏元素。	
						/*
					   img1.fadeOut(5000,function(){
							but1.val("显示");
						});
						*/
					 //slideUp([毫秒数],[success-function]) 隐藏元素
					 img1.slideUp(5000,function(){
					 							but1.val("显示");
					 						});
					}else{
						/*
						//show([毫秒数],[success-function]) 显示元素
						img1.show(5000,function(){
							but1.val("隐藏");
						});
						*/
					    //fadeIn([毫秒数],[success-function]) 显示元素。
						/*
					   img1.fadeIn(5000,function(){
					   	but1.val("隐藏");
					   });
					   */
					  //slideDown([毫秒数],[success-function]) 显示元素
					  img1.slideDown(5000,function(){
					  	but1.val("隐藏");
					  });
					}
				});
			});
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="隐藏" />
		<br>
		<img id="img1" src="avatar5.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">
		<title>jQuery 效果- 动画</title>
		<style>
			#flip,#panel,#updiv{
				padding: 5px;
				text-align: center;
				background-color: red;
				border: solid 2px yellow;
			}
			#panel{
				padding: 50px;
				display: none;
			}
			#updiv{
				display: none;
			}
		</style>
		<script src="jq/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">Hellow,world!</div>
		<div id="updiv">点我向上滑动面板</div>
	</body>
</html>

jQuery - 链(Chaining)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery - 链(Chaining)</title>
		<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="jq/jquery-3.5.1.js"></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>jQuery each() 方法</title>
		<script src="jq/jquery-3.6.0.js"></script>
		<script>
			$(function() {
				var parray = $("p");
				/*
				parray.each(function(index,element){
					alert(element);//[object HTMLParagraphElement]
				});
				*/
				parray.each(function(index) {
					var num1 = index * 10 + 20;
					$(this).css("font-size", num1 + "px");
				});
			});
		</script>
	</head>
	<body>
		<p>测试用的p元素1</p>
		<p>测试用的p元素2</p>
		<p>测试用的p元素3</p>
		<p>测试用的p元素4</p>
	</body>
</html>

景抓马

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021.5.22 Jquery

jQuery 事件jQuery 事件方法语法在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。页面中指定一个点击事件：$(“p”).click();下一步是定义什么时间触发事件。可以通过一个事件函数实现：$(“p”).click(function(){ // 动作触发后执行的代码!! });常用的 jQuery 事件方法1.$(document).ready(function) 文档完全加载完后执行函数2.click(function) 方法是当按钮点击事件被
复制链接

扫一扫