• 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>
  • 相关阅读:
    Swing 顶层容器
    创建第一个界面程序
    SWING
    通俗解释高中生能听懂的SVM本质和原理
    [初学者入门]任何机器学习套路?逻辑回归是什么?要有哪些未知参数待求解?如何优化?梯度下降是什么?如何用梯度下降
    贝叶斯公式在机器学习中有什么用,实例讲解Python实现朴素贝叶斯分类器
    通俗易懂适合初学者的机器学习实战(1):k- Nearest Neighbor (k个最近的邻居)KNN算法
    Python从0开始实现Numpy矩阵库,拒绝掉包侠,学习造轮子
    99%的人都会忽略的Python易错点总结
    遇到问题,有哪些有效的分析方法?
  • 原文地址:https://www.cnblogs.com/CSU3901130321/p/4834678.html
Copyright © 2020-2023  润新知