• 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>
  • 相关阅读:
    VMworld 2015 感受:VMware “Ready For Any”
    理解 OpenStack 高可用(HA)(1):OpenStack 高可用和灾备方案 [OpenStack HA and DR]
    Nova 操作汇总(限 libvirt 虚机) [Nova Operations Summary]
    理解 OpenStack 高可用(HA)(5):RabbitMQ HA
    [转]linux sort 命令详解
    [转]linux awk命令详解
    linux sftp 安全文件传输命令
    C++ Jsoncpp源代码编译与解析Json
    linux找不到动态链接库 .so文件的解决方法
    C++ Explicit Constructors(显式构造函数)
  • 原文地址:https://www.cnblogs.com/CSU3901130321/p/4834678.html
Copyright © 2020-2023  润新知