JQuery

最新推荐文章于 2024-10-18 17:51:23 发布

javaEE初学者日常分享

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量194

点赞数 1

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_73050509/article/details/126609607

版权

1、框架JQuery

是js框架，其中封装了js的操作，可以更加简单的操作DOM，事件，CSS，ajax交互

为什么要学？！因为要用！！！

1.1JQuery的导入使用

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

下载：Download jQuery | jQuery

1.将jQuery.js复制粘贴到项目的js文件夹下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MzOCSUbB-1661853408344)(D:\千峰上课\Every Day Stage2\day35\code\day35_jq.assets\image-20220829093338706.png)]

2.引入jq.js[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nhN6pgfw-1661853408345)(D:\千峰上课\Every Day Stage2\day35\code\day35_jq.assets\image-20220829093530409.png)]

3.使用js代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RpqM4sHW-1661853408346)(D:\千峰上课\Every Day Stage2\day35\code\day35_jq.assets\image-20220829094036479.png)]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入jq -->
		<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
	</head>
	<body>
		<button id="btn-1">点击隐藏div</button>
		<button id="btn-2">点击显示div</button>
		<div id="box" style="width: 300px;height: 300px;background-color: red;"></div>
	</body>
	<!-- 使用jquery -->
	<script type="text/javascript">
		// 获得btn-1对象,绑定点击事件,设置响应函数
		$("#btn-1").click(function(){
			$("#box").hide(); // 获得div对象,将其隐藏
		})
		$("#btn-2").click(function(){
			$("#box").show() // 获得div对象,将其展现
		})
	</script>
</html>

2、JQuery语法【重点】

2.1选择器

语法格式：

$("选择器").事件函数
//id		#名字
//class		.名字
//选择标签	标签名

//组合选择器		加,即可
$("选择器,选择器")
// 属性选择器
$("input[type='password']")

3、事件【重点】

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

常见事件

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

事件	js事件	JQuery事件
单击	onclick	click
获得焦点	onfocus	focus
…	…	…

事件绑定

$("选择器").事件(响应函数)

演示

鼠标事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div-1" style="width: 300px;height: 300px;border: 2px red solid;margin: auto;">
			
		</div>
		<div id="div-2" style="width: 300px;height: 300px;border: 2px green solid;margin: auto;">
			
		</div>
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
	<script type="text/javascript">
			$("#div-1").mouseenter(function(){
				console.log("鼠标进入")
			});
			$("#div-1").mouseleave(function(){
				console.log("鼠标离开")
			})
			$("#div-1").mousemove(function(){
				console.log("鼠标移动")
			})
			// =========== 链式调用===========================
			//  链式调用(推荐)
			$("#div-2").mouseenter(function(){
				console.log("鼠标进入2")
			}).mouseleave(function(){
				console.log("鼠标离开2")
			}).mousemove(function(){
				console.log("鼠标移动2")
			})
	</script>
</html>

键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input id="i1" />
		<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
		<script type="text/javascript">
			$("#i1").keydown(function(){
				// console.log("键盘按下")
			}).keyup(function(){
				// console.log("键盘弹起")
			})
			// 事件触发回调函数中,有参数,是事件对象
			// 事件对象中有,很对属性
			$("#i1").keydown(function(event){
				// console.log("键盘按下")
				// console.log(event)
				if(event.keyCode == 13) {
					console.log("提交表单登录")
				}
			})
		</script>
	</body>
</html>

表单事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input id="i1">
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			
			$("#i1").focus(function(){
				console.log("获得焦点")
			}).blur(function(){
				console.log("失去焦点")
			})
		</script>
	</body>
</html>

页面加载事件

jquery对象.load()事件,已经在jquery1.8版本后已经废弃

现在使用ready()函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#d1").click(function(){
					console.log("点击div")
				})
			})
			// 一般情况下,上面代码会简写成
			$(function(){
				$("#d1").click(function(){
					console.log("点击div222")
				})
			})
		</script>
	</head>
	<body>
		<div id="d1">块</div>
		
	</body>
</html>

4、JQuery的效果

4.1显示隐藏

show()				//显示
hide()				//隐藏
toggle()			//切换显示和隐藏

4.2淡入淡出

//回调函数可不写

fadeIn()			//淡入
					//(速度，回调函数)
- 速度,指定毫秒,多长时间完成这个动作
- 回调函数,指淡入==动作完成==后触发的函数

fadeOut()			//淡出
					//（速度，回调函数）
- 速度,指定毫秒,多长时间完成这个动作
- 回调函数,指淡入==动作完成==后触发的函数

fadeToggle()		//淡入淡出切换

4.3滑入划出

//回调函数可不写

slideDown()			//向下滑入
					//(速度，回调函数)
- 速度,指定毫秒,多长时间完成这个动作
- 回调函数,指淡入==动作完成==后触发的函数

slideUp()			//向上划出
					//（速度，回调函数）
- 速度,指定毫秒,多长时间完成这个动作
- 回调函数,指淡入==动作完成==后触发的函数

slideToggle()		//滑入滑出切换

4.3动画

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

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

【纵横居中代码】

position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
# 4.3动画

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

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

# 【纵横居中代码】

```css
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);