jquery_基础简介2

最新推荐文章于 2024-05-13 15:40:07 发布

H之一

最新推荐文章于 2024-05-13 15:40:07 发布

阅读量116

点赞数

分类专栏：前端 jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/H_zhiyi/article/details/108624002

版权

前端同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

jQuery

3 篇文章 0 订阅

订阅专栏

jQuery 效果- 隐藏和显示

1. javascript控制隐藏和显示
通过控制css样式的display属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		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>
	<body>
		<input type="button" id="but1" value="隐藏" /><br>
		<img id="img1" src="avatar5.png"  style="display: block;">
	</body>
</html>

在这里插入图片描述 2. jquery控制隐藏和显示
jQuery hide() 和 show()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="jquery-3.5.1.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#but2").click(function(){
				var buttext=$("#but2").val();
				if(buttext=="隐藏"){
					$("#img2").hide(5000,function(){
						$("#but2").val("显示");
					});
				}
				if(buttext=="显示"){
					$("#img2").show(2000,function(){
						$("#but2").val("隐藏");
					});
				}
			});
		});
	</script>
	<body>
		<input type="button" id="but2" value="隐藏" /><br>
		<img  id="img2" src="avatar5.png" >
	</body>
</html>

在这里插入图片描述 jQuery 效果 - 淡入淡出
jQuery fadeIn() 用于淡入已隐藏的元素。
jQuery fadeOut() 方法用于淡出可见元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<script>
			$(function(){
				$("#but3").click(function(){
					var buttext=$("#but3").val();
					if(buttext=="淡出"){
						$("#img3").fadeOut(3000,function(){
							$("#but3").val("淡入");
						});					   
					}
					if(buttext=="淡入"){
						$("#img3").fadeIn(3000,function(){
							$("#but3").val("淡出");
						});
					}
				});
			});
		</script>
	</head>
	<body>
		<input  id="but3" type="button" value="淡出"/><br>
		<img  id="img3" src="avatar5.png" >
	</body>
</html>

在这里插入图片描述 jQuery 效果 - 滑动
jQuery slideDown() 方法用于向下滑动元素。
jQuery slideUp() 方法用于向上滑动元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.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>
		<input  id="but4" type="button" value="滑出"/><br>
		<img  id="img4" src="avatar5.png" >
	</body>
</html>

在这里插入图片描述 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="jquery-3.5.1.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					$("#div1").animate({left:"300px",top:"300px",width:"200px",height:"200px"},5000,function(){
						alert("动画执行结束");
					});
				});
			});
		</script>
	</head>
	<body>
		<h1>jQuery animate() 方法允许您创建自定义的动画。</h1>
		<h2>语法：$(selector).animate({params},speed,callback);</h2>
		<h2>必需的 params 参数定义形成动画的 CSS 属性.</h2>
		<h2>可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。</h2>
		<h2>可选的 callback 参数是动画完成后所执行的函数名称。</h2>
		<input id="but1" type="button"  value="开始动画"/>
		<div id="div1" style="background:#98bf21;height:100px;width:100px;position:absolute;">
		</div>
	</body>
</html>

在这里插入图片描述 jQuery 停止动画
jQuery stop() 方法用于停止动画或效果，在它们完成之前。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css"> 
#panel,#flip,#updiv{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}
#updiv{
	display:none;
}
</style>
<script src="jquery-3.5.1.js"></script>
<script> 
$(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000,function(){
		 $("#updiv").show();
	});
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
  
  $("#updiv").click(function(){
    $("#panel").slideUp(5000,function(){
		 $("#updiv").hide();
	});
  });
});
</script>
 
</head>
<body>
	<button id="stop">停止滑动</button>
	<div id="flip">点我向下滑动面板</div>
	<div id="panel">Hello world!</div>
	<div id="updiv">点我向上滑动面板</div>
</body>
</html>

在这里插入图片描述 jQuery - 链(Chaining)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	#div1{
		background-color: red;
		width: 200px;
		height: 200px;
		border-radius: 100px;
	}
	#div2{
		background-color: yellow;
		width: 200px;
		height: 200px;
		border-radius: 100px;
	}
</style>
<script src="jquery-3.5.1.js"></script>
</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="jquery-3.5.1.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					//alert($("#div1").text());
					//alert($("#but1").text()); //错误
					//alert($("#text1").text());//错误
					alert($("#div1").html());
					alert($("#but1").val());
				});
			});			
		</script>
	</head>
	<body>
		 <h1>jQuery获取元素的值  text()、html() 以及 val()</h1>
		 <h2>text()---返回所选元素的文本内容</h2>
		 <h2>html()--返回所选元素的内容（包括 HTML 标记）</h2>
		 <h2>val()----返回表单字段的值</h2>
		 <hr>
		 <input id="but1"  type="button" value="测试" />
		  <input id="text1"  type="text" value="测试text" />
		 <div id="div1">
			  <h1>测试jQuery获取元素的值1</h1>
			  <h1>测试jQuery获取元素的值2</h1>
		 </div>	 
	</body>
</html>

在这里插入图片描述

2.jQuery设置元素的值
text(value)、html(value) 以及 val(value)
text(value)—设置所选元素的文本内容
html(value)–设置所选元素的内容（包括 HTML 标记）
val(value)----设置表单字段的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<script>
			$(function(){
				$("#but2").click(function(){
					$("#div2").html("<h1>hello,world</h1>");
					$("#but1").val("测试jqueryh获取元素值");
				});
			});			
		</script>
	</head>
	<body>
		 <input id="but2"  type="button" value="测试" />
		 <div id="div2"></div>	
	</body>
</html>

在这里插入图片描述

H之一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery_基础简介2

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

扫一扫

专栏目录