jquery

最新推荐文章于 2021-12-31 20:11:25 发布

金木君

最新推荐文章于 2021-12-31 20:11:25 发布

阅读量308

点赞数 1

文章标签： java jquery

本文链接：https://blog.csdn.net/JinMujun/article/details/109109377

版权

1.jquery

是一个js库，倡导写最少的代码，做最多的事情

作用：操作dom,动画，事件，ajax异步请求功能

2.jquery安装

第一种:本地安装

先将jquery-3.4.1.min.js 拷贝到js 文件夹

	<!--  本地应用js-->
		<script src="js/jquery-3.4.1.min.js"></script>

引用网络

	<!-- 引用cdn 地址安装
			
			1.每次加载要去网络请求下载
			2.线上应用可以使用cdn
		-->
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

cdn

简称内容分发网络，将服务器的静态资源 放到cdn（各个省会城市的机房）中，便于用户获取

作用：

1.提高用户的响应速度

2.减轻服务器压力

2.jquery语法

$(匿名函数)

当html加载完成时加载

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<!--  本地应用js-->
<!--		<script src="js/jquery-3.4.1.min.js"></script>-->
		
		
		<!-- 引用cdn 地址安装
			
			1.每次加载要去网络请求下载
			2.线上应用可以使用cdn
		-->
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
	</script>
		
	</head>
	<body>
		
		<h1>hello jquery</h1>
		
		
		<script>
			
			// 读到立即执行
			alert("test");
			
			//当 html 加载完成调用
			$(function(){
				alert("html 已加载完成1");
			})
			$(function(){
				alert("html 已加载完成2");
			})
			
			// 和上面量同一个意思 都是在html 记载完成 调用
			$(document).ready(function(){
				alert("html 已加载完成3");
				
				// 同过 jqury id选择器调用 p1
				// 获取到当前 页面 id 为 p1的标签
				// .hide() 隐藏
				$("#p1").hide();
			})
			
			
			alert("test-2");
			
		</script>
		
		<p id="p1"> 三分钟后下课 </p>
		
	</body>

选择器

			
		<script>
			
			// jquery 获取节点
			
			$(function(){
				
				// 根据id 获取节点
				// $("#p1") 返回 一个
//				$("#p1").hide();


				// 根据class 选择节点
				// $(".c2") 返回的是一个或者多个
//              $(".c2").hide();
				
				
				//根据元素选择
				// 返回的是一个或者多个
				$("p").hide()
			})
		</script>
		
		<div>
			
			<p id="p1">窗前明月光</p>
			<p class="c2">疑是地上霜</p>
			<p class="c2">举头望明月</p>
			<p>低头思故乡</p>
			
		</div>

事件

点击事件

				// 为 btn1 节点添加点击事件
			     $("#btn1").click(function(){
			     	alert("单击！！")
			     })
				
				 $("#btn1").dblclick(function(){
				 	alert("双击！！")
				 })

鼠标按下，抬起事件

				 $("#p1").mousedown(function(){
				 	
				 	alert("鼠标按下！！");
				 })
				  $("#p1").mouseup(function(){
				 	
				 	alert("鼠标抬起！！");
				 })

鼠标范围相关事件

				  $("#p1").mouseenter(function(){
				 	
//				 	alert("鼠标进入 p标签范围！！");
					console.log("鼠标进入 p标签范围！！")				
				 })
				  
				   $("#p1").mouseleave(function(){
				 	
				 	alert("鼠标离开 p标签范围！！");
				 	console.log("鼠标离开 p标签范围！！");	
				 })

				
				 $("#p1").hover(function(){
				 	console.log("鼠标进入 p标签范围！！")
				 },function(){
				 	console.log("鼠标离开 p标签范围！！");	
				 })

获取焦点

				 // 只有输入框才能获取焦点
				 // 设置获取焦点事件
				 $("#username").focus(function(){
//				 	$("#username").css("background-color","green")
					
					// 写在当前  焦点回调的方法内 ---指的就是 $("#username")
					$(this).css("background-color","green");
				 })

失去焦点

				 // 只有输入框才能获取焦点
				 // 设置获取焦点事件
				 $("#username").focus(function(){
//				 	$("#username").css("background-color","green")
					
					// 写在当前  焦点回调的方法内 ---指的就是 $("#username")
					$(this).css("background-color","green");
				 })

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
			<script src="js/jquery-3.4.1.min.js"></script>
			
			
		<script>
			
			
			$(function(){// 当html 加载完毕回调
				
				// 为 btn1 节点添加点击事件
//			     $("#btn1").click(function(){
//			     	alert("单击！！")
//			     })
				
				 $("#btn1").dblclick(function(){
				 	alert("双击！！")
				 })
				 
//				 $("#p1").mousedown(function(){
//				 	
//				 	alert("鼠标按下！！");
//				 })
//				  $("#p1").mouseup(function(){
//				 	
//				 	alert("鼠标抬起！！");
//				 })

//				  $("#p1").mouseenter(function(){
//				 	
				 	alert("鼠标进入 p标签范围！！");
//					console.log("鼠标进入 p标签范围！！")				
//				 })
//				  
//				   $("#p1").mouseleave(function(){
//				 	
//				 	alert("鼠标离开 p标签范围！！");
//				 	console.log("鼠标离开 p标签范围！！");	
//				 })

				
				 $("#p1").hover(function(){
				 	console.log("鼠标进入 p标签范围！！")
				 },function(){
				 	console.log("鼠标离开 p标签范围！！");	
				 })
				 
				 
				 // 只有输入框才能获取焦点
				 // 设置获取焦点事件
				 $("#username").focus(function(){
//				 	$("#username").css("background-color","green")
					
					// 写在当前  焦点回调的方法内 ---指的就是 $("#username")
					$(this).css("background-color","green");
				 })
				 
				 // 设置输入框失去焦点
				 $("#username").blur(function(){
				 	$("#username").css("background-color","yellow")
				 })

			})
			
			
			
					
		</script>
			
	</head>
	<body>
		
		
		<button id="btn1"  > 按钮1</button>
		
		
		<p id="p1">
			其实你可能已经猜到，出现上述问题的主要原因是没有使用seed，我们可以在选择字符串从左至右解析完，对解析的结果进行遍历，看是不是seed中的元素如果不是就踢掉，这样就能返回我们以为正确的结果。

作者：安卓app开发零基础入门培训
链接：https://www.imooc.com/article/79338
来源：慕课网
		</p>
		
		
		<form>
			
			username:<input type="text" id="username" />
			
		</form>
	</body>
</html>

3.效果

显示隐藏

$("#btn1").click(function(){//当有人能点击 btn1 得到消息 通知 回调
					$("#p1").show();
				});
				
				$("#btn2").click(function(){//当有人能点击 btn1 得到消息 通知 回调
					// 隐藏  隐藏之后没有占用位置
					$("#p1").hide();
				});

淡入/淡出

	
				$("#btn3").click(function(){
					
					// 淡入  慢慢的显示出来
					// 5000ms 毫秒之内
//					$("#p1").fadeIn(5000);

					// 文字 快速
//					$("#p1").fadeIn("fast");
//					$("#p1").fadeIn("slow");
                    $("#p1").fadeIn(5000,function(){
                    	// 当p1 完全显示出来 执行回调方法
                    	alert("完全显示");
                    	
                    });
				})
				
				$("#btn4").click(function(){
					
					// 淡入  慢慢的淡出出来
					// 5000ms 毫秒之内
//					$("#p1").fadeOut(5000);
					$("#p1").fadeOut(5000,function(){
                    	// 当p1 完全隐藏 执行回调方法
                    	alert("完全消失");
                    	
                    });
                    	
                })
				
				
				$("#btn5").click(function(){
					
					// 淡入淡出 切换
					$("#p1").fadeToggle(5000,function(){
                    	// 当p1 完全隐藏 执行回调方法
                    	alert("淡入淡出 切换");
                    	
                    });
                    	
                })
				
				$("#btn6").click(function(){
					
					// 淡入 到什么程度
					// 5000 时间
					// opacity 0.5 50%透明度
					$("#p1").fadeTo(5000,0.1,function(){
                    	
                    	alert("透明读0.1")
                    });
                    	
                })

滑动

				$("#btn7").click(function(){
					
					// 上划
					$("#p1").slideUp(3000);
                    	
                })
				
				$("#btn8").click(function(){
					
					// 下拉
					$("#p1").slideDown(3000);
                    	
                })
				
				$("#btn9").click(function(){
					
					// 下拉/上划
					$("#p1").slideToggle(3000,function(){
						alert("qianfeng")
					});
                    	
                })

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="js/jquery-3.4.1.min.js"></script>

		<script>
			
			$(function(){
				
				$("#btn1").click(function(){//当有人能点击 btn1 得到消息 通知 回调
					$("#p1").show();
				});
				
				$("#btn2").click(function(){//当有人能点击 btn1 得到消息 通知 回调
					// 隐藏  隐藏之后没有占用位置
					$("#p1").hide();
				});
				
				$("#btn3").click(function(){
					
					// 淡入  慢慢的显示出来
					// 5000ms 毫秒之内
//					$("#p1").fadeIn(5000);

					// 文字 快速
//					$("#p1").fadeIn("fast");
//					$("#p1").fadeIn("slow");
                    $("#p1").fadeIn(5000,function(){
                    	// 当p1 完全显示出来 执行回调方法
                    	alert("完全显示");
                    	
                    });
				})
				
				$("#btn4").click(function(){
					
					// 淡入  慢慢的淡出出来
					// 5000ms 毫秒之内
//					$("#p1").fadeOut(5000);
					$("#p1").fadeOut(5000,function(){
                    	// 当p1 完全隐藏 执行回调方法
                    	alert("完全消失");
                    	
                    });
                    	
                })
				
				
				$("#btn5").click(function(){
					
					// 淡入淡出 切换
					$("#p1").fadeToggle(5000,function(){
                    	// 当p1 完全隐藏 执行回调方法
                    	alert("淡入淡出 切换");
                    	
                    });
                    	
                })
				
				$("#btn6").click(function(){
					
					// 淡入 到什么程度
					// 5000 时间
					// opacity 0.5 50%透明度
					$("#p1").fadeTo(5000,0.1,function(){
                    	
                    	alert("透明读0.1")
                    });
                    	
                })
				
				
				
				$("#btn7").click(function(){
					
					// 上划
					$("#p1").slideUp(3000);
                    	
                })
				
				$("#btn8").click(function(){
					
					// 下拉
					$("#p1").slideDown(3000);
                    	
                })
				
				$("#btn9").click(function(){
					
					// 下拉/上划
					$("#p1").slideToggle(3000,function(){
						alert("qianfeng")
					});
                    	
                })
				$("#btn10").click(function(){
					
					// 下拉/上划
					$("#p1").slideUp(3000).slideDown(3000);
                    	
                })
			})
		</script>
	
	</head>
	<body>
		
		
		
		
		<button id="btn1">显示</button>
		<button id="btn2">隐藏</button>
		<hr />
		<button id="btn3">淡入</button>
		<button id="btn4">淡出</button>
		<button id="btn5">淡入/淡出</button>
		<button id="btn6">淡入透明程度</button>
		<hr />
		<button id="btn7">上划</button>
		<button id="btn8">下拉</button>
		<button id="btn9">上划/下拉</button>
		
		<button id="btn10">上划-下拉</button>
		<hr />
		<p id="p1">
			续梅说，经过这5年的建设，我们也看到了相关的建设学校不断汇聚优质的资源，不断加强内涵建设，也取得了一定的阶段性的成果，“但是我们也要清醒地看到，我们国家高等教育的整体实力和世界一流大学相比，还有不小的差距。”她指出，尤其是要实现到本世纪中叶，一流的大学、一流的学科，无论是从质量上还是从数量上都要进入世界的前列的目标，我们还有很长的路要走，还有相当多的工作要做，还有很艰巨的任务，所以对此我们要有清醒的认识。
		</p>
		<h1>qianfeng</h1>
		
	</body>
</html>

动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		
		<style>
			
			#div1{
				width: 300px;
				height: 100px;
				border: solid 20px green;
					
			}
		</style>
		<script src="js/jquery-3.4.1.min.js"></script>
		
		<script>
			$(function(){
				
				$("#btn1").click(function(){
					
					// 第一个参数 对象
					// 5000 动画完成的时间
					// 第三个参数 回调函数
//					$("#div1").animate({
//						width:"100px",
//						height:"300px"
//						
//					},5000,function(){
//						alert("动画完成")
//					})
					
					// a += 1;
					// +=100px 在原来宽度的基础上 夹100px
					$("#div1").animate({
						width:"+=100px",
						height:"+=100px",
						// css border-width: ;
						//  borderWidth
						borderWidth:"50px",
						marginLeft:"50px",
						marginTop:"300px"
					},8000,function(){
//						alert("动画完成")
					}).animate({
						marginLeft:"100px",
						marginTop:"150px"
						
					},5000)
					
				})
				
				$("#btn2").click(function(){
					
					// 第一个动画立即停止，第二动画继续执行
//					$("#div1").stop()
					// clearQuenue  清除动画队列
					// jumptoEnd  跳到动画结束
					$("#div1").stop(false,false)
				})
				
				
				
			})
		</script>
	
	</head>
	<body>
		
		<button id="btn1"> 开始动画</button>
		<button id="btn2"> 停止动画</button>
		
		<div id="div1"></div>
		
	</body>
</html>

链式调用

	// 下拉/上划
					$("#p1").slideUp(3000).slideDown(3000);

金木君

关注

1
点赞
踩
1

收藏

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

1.jquery是一个js库，倡导写最少的代码，做最多的事情作用：操作dom,动画，事件，ajax异步请求功能2.jquery安装第一种:本地安装先将jquery-3.4.1.min.js 拷贝到js 文件夹  <script src="js/jquery-3.4.1.min.js"></script>引用网络 <!-- 引用cdn 地址安装 1.每次加载要去网络请求下载 2.线上应用可以使用c
复制链接

扫一扫