jQuery 详解！！！

最新推荐文章于 2023-08-12 10:47:33 发布

一个很懒的人

最新推荐文章于 2023-08-12 10:47:33 发布

阅读量500

点赞数 1

分类专栏： Java 文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_43715360/article/details/113759864

版权

jQuery DOM操作动画效果事件处理选择器

关键词由CSDN通过智能技术生成

Java 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

jQuery

1.简介

jQuery概述：

jQuery特点：

jQuery使用原因：

2.安装

直接引用

CDN引用

常见CDN

下载连接
jquery与bootstrap所需要文件.

3.jQuery语法

1、基本使用

2、jQuery选择器

3、jQuery事件

语法

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #res{width: 600px; heigth:200px; font-size: 50px; font-weight: bold; line-height: 200px;background-color:red;}
    </style>
</head>
<!--基本使用-->
<body>
	<!--//注册jQuery-->
	<script src="jquery-3.4.1.min.js"></script>
	
    <button id="btn">填充数据</button>
    <div id="res">
    	这里！！！！
    </div>

    <script type="text/javascript">   	
	    function fun(){	    	
	    	$("#res").hide();	    	
	    }
	    
		//第一种绑定方法
		$("#btn").click(fun);
		//第二种绑定方法
		$("#res").mouseenter(function(){
			alert("触发了mouseleave 事件！！");
		});

    </script>
</body>
</html>

4.jQuery效果

1、jQuery隐藏

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #res{width: 600px; heigth:200px; font-size: 50px; font-weight: bold; line-height: 200px;background-color:red;}
    </style>
</head>
<!--显示和隐藏-->
<body>
	<!--//注册jQuery-->
	<script src="jquery-3.4.1.min.js"></script>
	
    <button id="btn1">隐藏按钮</button>
    <button id="btn2">显示按钮</button>
    <button id="btn3">切换按钮</button>
    <div id="res">
    	这里是测试区域！！！！
    </div>

    <script type="text/javascript">   	
    	$(function(){
    		//隐藏按钮
	    	function fun(){	    	
		    	$("#res").hide();	    	
		    }	    
			//第一种绑定方法
			$("#btn1").click(fun);
			
			//显示按钮
			$("#btn2").click(function(){
				$("#res").show();
			});
			
			//切换按钮
			$("#btn3").click(function(){
				$("#res").toggle(1000,function(){
					alert("finshed!!!");
				});
			});
    	});

    </script>
</body>
</html>

2、jQuery淡入/淡出

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #res{width: 600px; heigth:200px; font-size: 50px; font-weight: bold; line-height: 200px;background-color:red;}
    </style>
</head>
<!--测试淡入/淡出-->
<body>
	<!--//注册jQuery-->
	<script src="jquery-3.4.1.min.js"></script>
	
    <button id="btn1">淡入按钮</button>
    <button id="btn2">淡出按钮</button>
    <button id="btn3">切换按钮</button>
    <div id="res">
    	这里是测试区域！！！！
    </div>

    <script type="text/javascript">   	
    	$(function(){
    		//淡入按钮
	    	function fun(){	    	
		    	$("#res").fadeIn(3000);    	
		    	//设置透明度
		    	$("#res").fadeTo(1000,0.9);
		    }	    
			//第一种绑定方法
			$("#btn1").click(fun);
			
			//淡出按钮
			$("#btn2").click(function(){
				$("#res").fadeOut(3000);
			});
			
			//切换按钮
			$("#btn3").click(function(){
				$("#res").fadeToggle(1000,function(){
					alert("finshed!!!");
				});
			});
    	});

    </script>
</body>
</html>

3、jQuery滑动

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #res{width: 600px; heigth:200px; font-size: 50px; font-weight: bold; line-height: 200px;background-color:red;}
    </style>
</head>
<!--测试滑动-->
<body>
	<!--//注册jQuery-->
	<script src="jquery-3.4.1.min.js"></script>
	
    <button id="btn1">向上滑动</button>
    <button id="btn2">向下滑动</button>
    <button id="btn3">切换滑动</button>
    <div id="res">
    	这里是测试区域！！！！
    </div>

    <script type="text/javascript">   	
    	$(function(){
    		//淡入按钮
	    	function fun(){	    	
		    	$("#res").slideUp(1000);    	
		    	
		    }	    
			//第一种绑定方法
			$("#btn1").click(fun);
			
			//淡出按钮
			$("#btn2").click(function(){
				$("#res").slideDown();
			});
			
			//切换按钮
			$("#btn3").click(function(){
				$("#res").slideToggle(1000,function(){
					alert("finshed!!!");
				});
			});
    	});

    </script>
</body>
</html>

4、jQuery动画

创建动画

格式

停止动画

链式编程

回调函数

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div{width: 300px;height: 100px;border: solid 5px #f00;}
		</style>
	</head>
	<!--jQuery动画演示-->
	<body>
		<!--引用jQuery-->
		<script src="jquery-3.4.1.min.js"></script>
		
		<script type="text/javascript">
			$(function(){
				//为启动动画按钮绑定事件
				$("#btn1").click(function(){
					//添加动画
					$(".div").animate({
						width:'105px',
						height:'+=50px',
						borderWidth:'+=10px'
					},3000,function(){
						alert("动画加载成功！！");
					});
				});
				
				//为停止动画按钮添加事件
				$("#btn2").click(function(){
					//停止动画
					$(".div").stop();
				});
				
			});
			
		</script>
		
		<button id="btn1">启动动画</button>
		<button id="btn2">停止动画</button>
		<div id="div" class="div"></div>
	</body>
</html>

5、jQuery DOM操作

参考我另一篇博客: jQuery DOM操作.

6、jQuery AJAX操作

参考我另一篇博客: jQuery AJAX操作.

7、jQuery 遍历

遍历祖先

遍历孩子

遍历兄弟

过滤遍历

遍历示例代码1；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#d1{width:300px; height: 300px; border: solid 10px #f00;}
			#d21{width:300px; height: 100px; background-color: #ff0;}
			#d22{width:300px; height: 100px; background-color: #00f;}
			#d23{width:300px; height: 100px; background-color: #0f0;}
			#d3{width:100px; height: 100px; background-color: #999; margin-left: 100px;}
		</style>
	</head>
	<!--遍历-->
	<body>
		<script src="jquery-3.4.1.min.js"></script>
		
		<script type="text/javascript">
			$(function(){
				//parent 直接父节点
				//$("#d3").parent().css("backgroundColor","#111");
				
				//parents 所有父节点
				//$("#d3").parents().css("border","dotted 3px #f00");
				
				//parents 部分父节点1
				//$("#d3").parents("#d1").css("border","dotted 3px #f00");
				
				//parents 部分父节点2
				//$("#d3").parentsUntil("#d1").css("border","dotted 3px #f00");
				
				//children() 所有直接子孙
				//$("#d1").children().css("border","solid 5px #ccc")
				
				//find() 选定的直接子孙
				$("#d1").find("#d22").css("border","solid 5px #ccc");;
				
			});
			
		</script>
		
		<div id="d1">
			<div id="d21">
				<div id="d3"></div>
			</div>
			<div id="d22"></div>
			<div id="d23"></div>
		</div>
		
	</body>
</html>

遍历示例代码2；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			#d{width: 500px; height: 500px; border: 5px solid #f00;}
			#d1{width:500px; height:100px; background-color: #ff0;}
			#d2{width:500px; height:100px; background-color: #0f0;}
			#d3{width:500px; height:100px; background-color: #00f;}
			#d4{width:500px; height:100px; background-color: #0ff;}
			#d5{width:500px; height:100px; background-color: #ccc;}
		</style>
	</head>
	<!--遍历同胞节点-->
	<body>
		<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				//$("#d2").siblings().html("siblings");
				//$("#d2").next().html("next");
				//$("#d2").nextAll().html("nextAll");
				//$("#d2").nextUntil("#d5").html("nextUntil");
				//$("#d2").prev().html("prev");
				//$("#d5").prevAll().html("prevAll");
				//$("#d5").prevUntil("#d3").html("preUntil");
				//$("#d").children().first().html("first");
				//$("#d").children().last().html("last");
				//$("#d").children().eq(1).html("second");
				//$("#d").children().filter("#d3").html("d3");
				//$("#d").children().not("#d3").html("not d3");
			})
		</script>
		<div id="d">
			<div id="d1"></div>
			<div id="d2"></div>
			<div id="d3"></div>
			<div id="d4"></div>
			<div id="d5"></div>
		</div>
	</body>
</html>

8、jQuery noConflict方法

一个很懒的人

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery 详解！！！

jQuery1.简介jQuery概述：jQuery特点：jQuery使用原因：2.安装直接引用CDN引用常见CDN下载连接jquery与bootstrap所需要文件.3.jQuery语法1、基本使用2、jQuery选择器3、jQuery事件语法示例代码<!DOCTYPE html><html lang="en"><head> <meta charset.
复制链接

扫一扫