Jquery效果

最新推荐文章于 2022-01-05 18:53:43 发布

勇哥聊IT

最新推荐文章于 2022-01-05 18:53:43 发布

阅读量431

点赞数

分类专栏： jQuery 文章标签： jquery function fun div button

本文链接：https://blog.csdn.net/wodwl/article/details/7834597

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

隐藏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
	src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("div").click(function() {
			$(this).hide();
		})
		$("#all").click(function() {
			$("div").show();
		})
	})
</script>
<style type="text/css">
div {
	width: 100px;
	height: 100px;
	float: left;
	margin: 10px;
}
</style>
</head>

<body>
	<div style="background: red;"></div>
	<div style="background: green;"></div>
	<div style="background: blue;"></div>
	<br />
	<span id="all">显示所有</span>
</body>

</html>

带延迟和回调函数的隐藏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
	src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
	function fun1(){
		alert("hidden");
	}
	$(document).ready(function() {
		$("div").click(function() {
			$(this).hide(2000,fun1($(this)));
		})
		$("#all").click(function() {
			$("div").show();
		})
	})
	
</script>
<style type="text/css">
div {
	width: 100px;
	height: 100px;
	float: left;
	margin: 10px;
}
</style>
</head>

<body>
	<div id="red" style="background: red;"></div>
	<div id="green" style="background: green;"></div>
	<div id="blue" style="background: blue;"></div>
	<br />
	<span id="all">显示所有</span>
</body>

</html>

显示和隐藏切换

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
	src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
	function fun1(){
		alert("toggle");
	}
	$(document).ready(function() {
		$("#all").click(function() {
			$("div").toggle(2000,fun1($(this)));
		})
	})
	
</script>
<style type="text/css">
div {
	width: 100px;
	height: 100px;
	margin: 10px;
}
</style>
</head>

<body>
	<div id="red" style="background: red;"></div>
	<div id="green" style="background: green;"></div>
	<div id="blue" style="background: blue;"></div>
	<br />
	<input type="button" id="all" value="切换">
</body>

</html>