天天看点

jquery学习笔记----隐藏、显示、切换,滑动,淡入淡出,以及动画

通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});      

隐藏<p>标签:

<head>
    <title>jquery1.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
	<script src="jquery-1.10.2.min.js">
	</script>	
    <script  language="javascript" type="text/javascript">
	$(document).ready(
	function(){
		$("p").click(
		function(){
		$(this).hide();
		});
	});
    </script>
  </head> 
  <body>
     <p>如果你点我,我就消失1</p>
	 <p>如果你点我,我就消失2</p>
	 <p>如果你点我,我就消失3</p>
  </body>
           
<title>jquery2.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
	<script src="jquery-1.10.2.min.js">
	</script>	
    <script  language="javascript" type="text/javascript">
	$(document).ready(function(){
	  $(".ex .hide").click(function(){
		$(this).parents(".ex").hide("slow");
	  });
	});
	</script>
	<style type="text/css"> 
	div.ex
	{
	background-color:#e5eecc;
	padding:7px;
	border:solid 1px #c3c3c3;
	}
	</style>
  </head> 
  <body>
    <h3>中国办事处</h3>
	<div class="ex">
	<button class="hide" type="button">隐藏</button>
	<p>联系人:张先生<br /> 
	北三环中路 100 号<br />
	北京</p>
	</div>

	<h3>美国办事处</h3>
	<div class="ex">
	<button class="hide" type="button">隐藏</button>
	<p>联系人:David<br /> 
	第五大街 200 号<br />
	纽约</p>
	</div>
           

通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:

<head>
    <title>jquery3.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
	<script src="jquery-1.10.2.min.js">
	</script>	
    <script  language="javascript" type="text/javascript">
	$(document).ready(function(){
	  $("#hide").click(function(){
	  $("p").hide();
	  });
	  $("#show").click(function(){
	  $("p").show();
	  });
	});
    </script>
  </head> 
  <body>
	<p id="p1">如果点击“隐藏”按钮,我就会消失。</p>
	<button id="hide" type="button">隐藏</button>
	<button id="show" type="button">显示</button>
  </body>
           

继续阅读