JQery w3school学习第一章 标签的隐藏和显示

鄙人初学JQuery，最关键的是JQuery获取标签对象的方式

 

 这一章学习的是点击按钮让所有标签的文字以及标签栏的位置隐藏起来，因为单纯的隐藏文字，还是会有空格和空行的影响

这里最关键的代码就是 $("p").hide();

这里用p表示是获取了所有p标签的对象，再将它们一起隐藏。

下面是两个截图：

 

 

 

 

点击按钮之后上方文字就被隐藏了

 

 

先是根据w3school的方式写的代码

这里采用了$("document").ready(function(){};}的方式保证页面加载准备好了ready当中的方法

没有外面的ready，你点击了按钮也是找不到对应的方法的。

 1 <script text="text/javascript" src="js/jquery-1.10.2.min.js"></script>
 2 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 3 <html>
 4     <script type="">
 5         $("document").ready(function(){
 6             $("button").click(function(){
 7                 $("p").hide();
 8             });
 9         });
10     </script>
11     <body>
12         <p>我要消失</p>
13         <p>我也要消失</p>
14         <button onclick="test()">click</button>
15     </body>
16 </html>

 

后来自己改了比较简洁易懂的代码

 1 <script text="text/javascript" src="js/jquery-1.10.2.min.js"></script>
 2 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 3 <html>
 4     <script type="">
 5         function test(){
 6             $("p").hide();
 7         }
 8         
 9     </script>
10     <body>
11         <p>我要消失</p>
12         <p>我也要消失</p>
13         <button onclick="test()">click</button>
14     </body>
15 </html>

自己改后的代码，很容易理解的是，点击按钮click会触发test()事件，然后利用JQery的方式隐藏<p>标签

 

之后从标签的隐藏转到将标签内容显示出来：

标签显示的函数是.show();

 1 <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
 2 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 3 <html>
 4     <script type="text/javascript">
 5         $("document").ready(function(){
 6             //这下方函数表示的意思是标签为p的标签被点击就会使这个标签被隐藏
 7             $("p").click(function(){
 8                 $(this).hide();
 9             });
10         });
11 
12         function test(){
13             //$("p").show();的方法也是可行的，但不能单独提取出自己想要的东西
14             $("#first").show();
15             $("#second").show();
16         }
17     </script>
18     <body>
19         <p id="first">我要消失</p>
20         <p id="second">我也要消失</p>
21         <button onclick="test()">click</button>
22     </body>
23 </html>

 

 posted on 2015-09-24 11:12  Love风吟  阅读(396)  评论(0)  编辑  收藏  举报