jQuery2

最新推荐文章于 2022-04-01 12:37:39 发布

270年前

最新推荐文章于 2022-04-01 12:37:39 发布

阅读量75

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_49344258/article/details/108629862

版权

一.jQuery效果

1.jQuery隐藏和显示

1.1 javascript控制隐藏和显示

通过CSS样式的display属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				document.getElementById("but1").onclick=function(){
					var buttext=document.getElementById("but1").value;
					if(buttext=="隐藏"){
						//控制图片的隐藏
						document.getElementById("img1").style.display="none";
						document.getElementById("but1").value="显示";
					}
					if(buttext=="显示"){
						document.getElementById("img1").style.display="block";
						document.getElementById("but1").value="隐藏";
					}
				}
			}
		</script>
	</head>
	<body>
		<input  id="but1" type="button" value="隐藏"/><br>
		<img id="img1" src="imgs/avatar.png" style="display: block;"/>
	</body>
</html>

1.2 jQuery控制和显示

jQuery -hide()和show()


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="E:\网星学习\JQ\jquery-3.5.1.min.js"></script>
		<script>
			$(document).ready(function(){
				$("#hide").click(function(){
					$("p").hide();
				});
			$("#show").click(function(){
				$("p").show();
			});
			});
		</script>
	</head>
	<body>
		<p>helloworld</p>
		<button id="hide">隐藏</button>
		<button id="show">显示</button>
	</body>
</html>

2.jQuery效果淡出和淡入

jQuery fadeIn() 用于淡入已隐藏的元素

jQuery fadeOut() 用于淡出可见元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="E:\网星学习\JQ\jquery-3.5.1.min.js"></script>
		<script>
			$(document).ready(function(){
				$("button").click(function(){
					$("div1").fadeIn();
					$("#div2").fadeIn("slow");
					$("#div3").fadeIn(3000);
				});
			});
		</script>
	</head>
	<body>
		<p>以下实例演示了fadeIn()使用了不同参数的效果。</p>
		<button>点击淡入div元素。</button>
		<br><br>
		<div id="div1" style="width: 100px;height: 100px;display: none;background-color: green;"></div><br>
		<div id="div2" style="width: 100px;height: 100px;display: none;background-color: violet;"></div><br>
		<div id="div3" style="width: 100px;height: 100px;display: none;background-color: royalblue;"></div>
		
	</body>
</html>

3.jQuery效果滑动

jQuery slideDown()方法用于向下滑动元素

jQuery slideUp()方法用于向上滑动元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script  src="E:\网星学习\JQ\jquery-3.5.1.min.js"></script>
		<script>
			$(function(){
			$("#but4").click(function(){
				var buttext=$("#but4").val();
				if(buttext=="滑出"){
					$("#img4").slideUp(3000);
					$("#but4").val("滑入");	
			    } 
				if(buttext=="滑入"){
					$("#img4").slideDown(3000);
					$("#but4").val("滑出");
				}	
			});
		});	
		</script>
	</head>
	<body>
		<!--<button id="but4">滑出</button><br>-->
		<input id="but4" type="button" value="滑出" /><br>
		<img id="img4" src="E:\网星学习HtML课件\20200916Jquery(2)\code\imgs/avatar5.png"/>
	</body>

4.jQuery效果动画

jQuery animate()方法允许您创建自定义的动画。

语法：

$(selector) animate({params},speed,callback);。

必需的 params 参数定义形成动画的 css 属性。

可选的 speed 参数规定效果的时长。它可以取的值为："slow","fast",或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="E:\网星学习\JQ\jquery-3.5.1.min.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					$("#div1").animate({left:"300px",width:"200px",height:"200px"},5000,function(){
						alert("GameOver");
					});
				});
			});
		</script>
	</head>
	<body>
		<h1>jQuery animate()方法允许创建自定义动画</h1>
		<h2>语法$(selector).animate({params},speed,callback);</h2>
		<h2>必选speed参数规定定义形成动画的CSS属性</h2>
		<h2>可选的speed参数规定效果的时长。它可以取以下值："slow","fast",或毫秒</h2>
		<input id="but1" type="button" value="GO" />
		<div id="div1" style="background-color: aquamarine;width: 100px;height: 100px;position: absolute;" >
		</div>
	</body>
</html>

5.jQuery 停止动画效果

jQuery stop() 方法用于停止动画或者效果，在它们完成之前。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#panel,#flip,#updiv{
				padding: 5px;
				text-align: center;
				background-color: red;
				border: solid 1px  red;
			}
			#panel
			{
				padding: 50px;
				display: none;
			}
			#updiv{
				display: none;
			}
		</style>
		<script src="E:\网星学习\JQ\jquery-3.5.1.min.js"></script>
		<script>
			$(function(){
				$("#flip").click(function(){
					$("#panel").slideDown(2000,function(){
						$("#updiv").show();
					});
				});
				$("#stop").click(function(){
					$("#panel").stop();
				});
			    $("#updiv").click(function(){
					$("#panel").slideUp(2000,function(){
						$("#updiv").hide();
					});
				});
			});	
		</script>
	</head>
	<body>
		<button id="stop">停止滑动</button>
		<div id="flip">点我向下滑动面板</div>
		<div id="panel"><font size="7" color="black">恭喜发财</font></div>
		<div id="updiv">点我向上滑动面板</div>
	</body>
</html>

6.jQuery 链

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1{
				background-color: red;
				width: 200px;
				height: 200px;
				border-radius: 100px;
			}
			#div2{
				background-color: green;
				width: 200px;
				height: 200px;
				border-radius: 100px;
			}
		</style>
		<script src="E:\网星学习\JQ\jquery-3.5.1.min.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>

二.jQuery HTML

1.jQuery获取/设置元素的值

jQuery获取元素的值 text()、html()、val()。

text() 返回所选元素的文本内容。

html() 返回所选元素的内容（包括HTML标记）。

val() 返回表单字段的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="E:\网星学习\JQ\jquery-3.5.1.min.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					//alert($("#div1").text());
					//alert($("#but1").text());--false
					//alert($("#text1").text());--false
					//alert($("#div1").html());
					//alert($("#but1").val());
				});
				$("#but2").click(function(){
					//$("#div2").text("GameOver");
					//$("#div2").text("<h1>GameOver<h1>");--false
					$("#div2").html("<h1>GameOver<h1>");
					$("#but1").val("测试jquery获取元素值");
				});
			});
		</script>
	</head>
	<body>
		<h1>jQuery获取元素的值 text(),html(),以及val()</h1>
		<h2>text()--返回所选元素的文本内容</h2>
		<h2>html()--返回所选元素的内容（包括HTML标记）</h2>
		<h2>val()--返回表单字段的1值</h2>
		<hr>
		<input id="but1" type="button" value="测试" />
		<input id="text1" type="text" value="测试text" />
		<div id="div1">
			<h1>测试jQuery获取元素的值</h1>
			<h1>测试jQuery获取元素的值</h1>
		</div>
		<input id="but2" type="button" value="测试" />
		<div id="div2"></div>
	</body>
</html>

270年前

关注

0
点赞
踩
0

收藏

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

一.jQuery效果1.jQuery隐藏和显示1.1 javascript控制隐藏和显示通过CSS样式的display属性<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> window.onload=function(){ document.getElementById("b
复制链接

扫一扫