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

来源：互联网发布：淘宝十字绣回收靠谱么编辑：程序博客网时间：2024/06/08 06:16

通过 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>