JQ的简单使用（基础）——————JQ

最新推荐文章于 2021-03-03 15:06:01 发布

⎛⎝陈嗯嗯⎠⎞

最新推荐文章于 2021-03-03 15:06:01 发布

阅读量245

点赞数 2

分类专栏： JQ 文章标签：前端 jq

本文链接：https://blog.csdn.net/weixin_41018304/article/details/93865845

版权

JQ 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JQ基础——JQ的简单使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.w{}
		</style>
	</head>
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	<body>
	1.	弹窗
		<script>
			$(function(){
				alert("JQ超简")
			})
		</script>
	2.	修改文本
		<div>张山</div>
		<script>
			$(function(){
				$("div").html("李四")
			})
		</script>
			
	3.	点击事件
		<button id="btn">点我</button>
		<script>
			$(function(){
				$("#btn").click(function(){
					$("#btn").html("修改成功")
				});
			});		
		</script>
	4.图片显示/隐藏  （自建效果）
	<img src="img/bootstrap-mdo-sfmoma-01.jpg" id="img" width="200px"> <br />
	<button id="btn1">显示</button><button id="btn2">隐藏</button>
<a href="#" id="btn1">显示</a><a href="#" id="btn2">隐藏</a>
	<script>
		$(function(){
			$("#btn1").click(function(){
				$("#img").show(2000);
				$("#img").fadeOut(2000);//渐出
				$("#img").slideDown(2000);//向下出
				
			});
		});
		$(function(){
			$("#btn2").click(function(){
				$("#img").hide(2000);
				$("#img").fadeIn(2000);//渐入
				$("#img").slideUp(2000);//下上藏
			})
		})
		自建效果
		$(function(){
			$("#btn1").click(function(){
			$("#img").animate({
				width: "400px",
				opacity:"0.1" ,
			},3000)
		})
	})
	</script>
	5.Ad广告。定时弹出。
	<img src="img/bootstrap-mdo-sfmoma-01.jpg" id="img" />
	<script>
		$(function(){
			setTimeout("hideAd()",3000);
		});
		function showAd(){
			$("#img").show();
			
		}
		function hideAd(){
			$("#img").hide();
			setTimeout("showAd()",3000);
		}
	</script>
	</body>
</html>

⎛⎝陈嗯嗯⎠⎞

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
JQ的简单使用（基础）——————JQ

JQ基础——JQ的简单使用<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> .w{} </style> </head> <script type="...
复制链接

扫一扫

专栏目录