JQ的简单使用(基础)——————JQ_清玖_前端开发者

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>

<!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>

» 本文来自:前端开发者 » 《JQ的简单使用(基础)——————JQ_清玖_前端开发者》
» 本文链接地址:https://www.rokub.com/73352.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!