day035--JQ

最新推荐文章于 2024-09-12 14:28:05 发布

hai_qi

最新推荐文章于 2024-09-12 14:28:05 发布

阅读量209

点赞数

文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/hai_qi/article/details/126593125

版权

1.JQuery

1.1JQuery的特点

是js框架（各大浏览器支持,各个项目的前端技术要使用）

封装了js的操作,可以更加简单操作DOM,事件,CSS,ajax交互

jQuery是第三方框架,使用时引入到当前项目。

下载： Download jQuery | jQuery

项目中引入

将jQuery.js复制粘贴到项目的js文件夹下
在需要使用jq的页面中引入jq.js

1.2JQuery的语法【重点】

1.2.1选择器【重点】

类型	语法
标签名选择器	$(“标签名”).事件函数
id选择器	$(“#id”).事件函数
class选择器	$(“.class”).事件函数
组合选择器	$(“#p-id-1,.p-c-1”)多个属性
属性选择器	$(“input[type=‘属性’]”)
获得所有	$(“*”)

2.事件

事件,发生在浏览器上的事情,键盘,鼠标,表单,页面加载等事件

常见事件

键盘事件,鼠标事件,表单事件等,与js中所学几乎一致,唯一不同就是事件名称少了on

鼠标事件

事件	js事件	JQuery事件
单击	onclick	click
双击	ondbclick	dbclick
当鼠标指针移动到元素上时触发	onmousedown	mousedown
当鼠标指针移动到元素上时触发	onmousemove	mousemove
当鼠标指针移出元素时触发	onmouseout	mouseout
当鼠标指针移动到元素上时触发	onmouseover	mouseover
当鼠标滚轮正在被滚动时触发	onmousewheel	mousewheel
当在元素上释放鼠标按钮时触发	onmouseup	mouseup

`keyboard`事件

键盘输入触发该事件

事件	js事件	JQuery事件
在用户按下按键时触发	onkeydown	keydown
当用户释放按键时触发	onkeyup	keyup
在用户敲击按钮时触发	onkeypress	keypress

`form`事件

由 html 表单内的动作触发的事件（应用到几乎所有 html 元素，但最常用在 form 元素中）

事件	js事件	JQuery事件
文档解析完成且所有的子资源都加载完成触发	onreset	reset
文档解析完成触发	onselect	select
文档解析完成且所有的子资源都加载完成触发	onsubmit	submit
文档解析完成触发	onchange	change
元素失焦时触发	onblur	blur
元素聚焦时触发	onfocus	focus

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
		<style>
			#d1{
				width: 300px;
				height: 200px;
				background-color: red;
				margin: auto;
			}
			#d2{
				width: 200px;
				height: 20px;
				background-color: aqua;
				/* margin: auto; */
			}
			#d3{
				width: 200px;
				height: 20px;
				background-color: aqua;
				/* margin: auto; */
			}
			#d4{
				width: 300px;
				height: 200px;
				background-color: deeppink;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div id = "d1"></div>
		<div id = "d4"></div>
		<input type="text" id = "d2">
		<select name="#" id="d3">
			<option value="郑州">
				郑州
			</option>
			<option value="武汉">
				武汉
			</option>
		</select>
		<script type="text/javascript">
			$("#d1").mouseenter(function(){
				
				console.log("聚焦");
			})
			$("#d1").mouseleave(function(){
				console.log("失去焦点");
			})
			$("#d1").mousemove(function(){
				console.log("移动");
			})
			$("#d4").mouseenter(function(){
					
					console.log("聚焦");
				}).mouseleave(function(){
				console.log("失去焦点");
			}).mousemove(function(){
				console.log("移动");
			})
		</script>
		<form action="#">
			<script type="text/javascript">
				$("#d2").focus(function(){
					console.log("表单一");
				})
				$("#d2").blur(function(){
					console.log("表单二");
				})
				$("#d3").change(function(){
					console.log("表单三");
				})
				
			</script>
		</form>
	</body>
</html>

3.JQuery的效果

hide() 隐藏

show() 展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "btn-3" style="width: 300px;height: 300px;background-color: red;"></div>
		<button id = "btn-1">影藏</button>
		<button id = "btn-2">展现</button>
		<button id = "btn-4">切换</button>
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
	<script type="text/javascript">
		$("#btn-1").click(function(){
			$("#btn-3").hide();
		})
		$("#btn-2").click(function(){
			$("#btn-3").show();
		})
		$("#btn-4").click(function(){
			$("#btn-3").toggle();
		})
	</script>
	
</html>

淡入淡出

fadeIn 淡入

fadeIn(速度,回调函数):

fadeOut()淡出

fadeOut(速度,回调函数)

速度,指定毫秒,多长时间完成这个动作
回调函数,指淡入动作完成后触发的函数

fadeToggle()

在淡入和淡出之间切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "btn-1" style="width: 200px;height: 200px;background-color: aqua;margin: auto;"></div>
		<button id = "btn-2">淡入</button>
		<button id="btn-3">淡出</button>
		<button id = "btn-4">切换</button>
		<button id = "btn-5">透明度</button>
		<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
		<script type="text/javascript">
			$("#btn-2").click(function(){
				$("#btn-1").fadeIn(3000);
			})
			$("#btn-3").click(function(){
				$("#btn-1").fadeOut(3000);
			})
			$("#btn-4").click(function(){
				$("#btn-1").fadeToggle(3000);
			})
			$("#btn-5").click(function(){
				$("#btn-1").fadeTo(3000,0.1);
			})
		</script>
	</body>
</html>

滑入滑出

slideDown(时间,回调函数) 向下滑动进入

- 时间,多长时间完成滑入
- 回调函数,滑入完成后触发的函数

slideUp(时间,函数) 向上滑出

时间,多长时间完成滑入
回调函数,滑入完成后触发的函数

slideToggle()

在滑入和滑出之间切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<div id = "btn-1" style="width: 400px;height: 400px;background-color: cornflowerblue;margin: auto;"></div>
		<button id = "btn-2">滑出</button>
		<button id="btn-3">滑入</button>
		<button id = "btn-4">切换</button>
		<!-- <button id = "btn-5">透明度</button> -->
		<script type="text/javascript">
			$("#btn-2").click(function(){
				$("#btn-1").slideDown();
			})
			$("#btn-3").click(function(){
				$("#btn-1").slideUp();
			})
			$("#btn-4").click(function(){
				$("#btn-1").slideToggle();
			})
		</script>
	</body>
</html>

动画

对象.animate(参数1,参数2,参数3)

参数1,是指定css属性,用{},示例 {“color”:“red”,“width”:“500px”}
需要注意,有些css属性,例如margin-left,需要写成marginLeft
参数2,时间,多长时间完成效果
参数3,回调函数,完成效果后触发的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box{
				width: 300px;
				height: 300px;
				background-color: aqua;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
	</head>
	<body>
		<div id="box">
		</div>
		<button id = "btn-1">启动</button>
		<button id = "btn-2">终止</button>
		<script type="text/javascript">	
		var btn;
				$("#btn-1").click(function(){
					btn =  setInterval(function(){
						$("#box").animate({marginLeft:"800px"});
						$("#box").animate({marginLeft:"800px",marginTop:"400px"});
						$("#box").animate({marginLeft:"800px",marginTop:"400px",marginLeft:"0px"});
						$("#box").animate({marginLeft:"800px",marginTop:"400px",marginLeft:"0px",marginTop:"0px"});					
					},3000)	
				})				
				$("#btn-2").click(function(){
					clearInterval(btn);
				})		
		</script>
	</body>
</html>

inTop:“400px”});
$(“#box”).animate({marginLeft:“800px”,marginTop:“400px”,marginLeft:“0px”});
$(“#box”).animate({marginLeft:“800px”,marginTop:“400px”,marginLeft:“0px”,marginTop:“0px”});
},3000)
})
$(“#btn-2”).click(function(){
clearInterval(btn);
})

```