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

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

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

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

下面是两个截图：

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

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

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

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

 <script text="text/javascript" src="js/jquery-1.10.2.min.js"></script>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <html>

     <script type="">

         $("document").ready(function(){

             $("button").click(function(){

                 $("p").hide();

             });

         });

     </script>

     <body>

         <p>我要消失</p>

         <p>我也要消失</p>

         <button onclick="test()">click</button>

     </body>

 </html>

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

 <script text="text/javascript" src="js/jquery-1.10.2.min.js"></script>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <html>

     <script type="">

         function test(){

             $("p").hide();

         }

     </script>

     <body>

         <p>我要消失</p>

         <p>我也要消失</p>

         <button onclick="test()">click</button>

     </body>

 </html>

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

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

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

 <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <html>

     <script type="text/javascript">

         $("document").ready(function(){

             //这下方函数表示的意思是标签为p的标签被点击就会使这个标签被隐藏

             $("p").click(function(){

                 $(this).hide();

             });

         });

         function test(){

             //$("p").show();的方法也是可行的，但不能单独提取出自己想要的东西

             $("#first").show();

             $("#second").show();

         }

     </script>

     <body>

         <p id="first">我要消失</p>

         <p id="second">我也要消失</p>

         <button onclick="test()">click</button>

     </body>

 </html>

JQery w3school学习第一章 标签的隐藏和显示的更多相关文章

  1. web学习第一章

    web学习第一章   我是大概9月10日开始走上IT之路的,一开始学习了小段时间的自动化办公软件, 昨天我开始学习客户端网页编程,我了解什么是WEB,一些比较老古董的计算模式和发展历史,印象最让我深刻 ...

  2. oracle学习 第一章 简单的查询语句 ——03

    1.1最简单的查询语句 例 1-1 SQL> select * from emp; 例 1-1 结果 这里的 * 号表示全部的列.它与在select 之后列出全部的列名是一样的.查询语句以分号( ...

  3. js基础--浏览器标签页隐藏或显示状态 visibility详解

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...

  4. Html中 <tr> 标签的隐藏与显示

    TR标签的隐藏与显示:block(显示)和none(隐藏) <tr  style="display:none"> <tr id="sample" ...

  5. Asp.Net MVC4 + Oracle + EasyUI 学习 第一章

    Asp.Net MVC4 + Oracle + EasyUI  第一章 --操作数据和验证 本文链接:http://www.cnblogs.com/likeli/p/4234238.html 文章集合 ...

  6. Java基础知识二次学习-- 第一章 java基础

    基础知识有时候感觉时间长似乎有点生疏,正好这几天有时间有机会,就决定重新做一轮二次学习,挑重避轻 回过头来重新整理基础知识,能收获到之前不少遗漏的,所以这一次就称作查漏补缺吧!废话不多说,开始! 第一 ...

  7. Intel汇编语言程序设计学习-第一章 基本概念

    第一章基本概念 1.1  简单介绍 本书着重讲述MS-Windows平台上IA-32(Intel Architecture 32bit,英特尔32位体系架构)兼容微处理器的汇编语言程序设计,可以使用I ...

  8. swift系统学习第一章

    第一节:变量,常量,类型推断,字符,字符串 //swift学习第一节 /* 变量 常量 类型推断 字符 字符串 */ import UIKit //变量 var str = "swift&q ...

  9. Ruby学习-第一章

    第一章 字符串,数字,类和对象 为了证明Ruby真的好用,hello world也能写的如此简洁: puts 'hello world' 1.输入/输出 print('Enter your name' ...

随机推荐

  1. table和div设置height:100%无效的完美解决方法

    刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢 ...

  2. C# Socket编程(5)使用TCP Socket

    TCP 协议(Transmission Control Protocol,传输控制协议)是TCP/IP体系中面向连接(connection oriented)的传输层(transport layer) ...

  3. Hbase之更新单条数据

    import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; impo ...

  4. javascript的语句和函数

    1.for-in语句:是一种精准的迭代语句,可以用来枚举对象的属性. 2.label语句:在代码中添加标签,以便将来使用,由break和continue语句调用. 3.with语句:将代码的作用域设置 ...

  5. 坑爹的对GBK编码的字符进行url编码

    url编码又叫百分号编码 现在的url编码十分混乱,都没有按照新标准来 对汉字都按照不同的编码后再进行url编码 2005年1月发布的RFC 3986,强制所有新的URI必须对未保留字符不加以百分号编 ...

  6. Qt之绘制闪烁文本

    简述 根据之前的二位绘图,我们可以很轻松的进行文本的绘制,如果需要一些特效,比如:文本闪烁.我们就必须借助其它辅助类来完成. 简述 原理 实现 效果 源码 原理 主要涉及两个辅助类: QFontMet ...

  7. alpha发布（技术随笔）

    昨天是班级里面每个小组要进行alpha演示,大家都很努力的去做自己的项目.我们nice!组没有演示自己的项目,只一点很惭愧,身为组员没有协助组长按时完成项目,这一点自己也感觉很抱歉,虽然每天感觉自己都 ...

  8. java之多线程（Thread）

    package DEMO; //主线程 public class Example12_2 { public static void main(String [] args ) { Thread myd ...

  9. 131. 132. Palindrome Partitioning *HARD* -- 分割回文字符串

    131. Palindrome Partitioning Given a string s, partition s such that every substring of the partitio ...

  10. Druid：一个用于大数据实时处理的开源分布式系统

    Druid是一个用于大数据实时查询和分析的高容错.高性能开源分布式系统,旨在快速处理大规模的数据,并能够实现快速查询和分析.尤其是当发生代码部署.机器故障以及其他产品系统遇到宕机等情况时,Druid仍 ...