鄙人初学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. Java用webSocket实现tomcat的日志实时输出到web页面

    原文:http://blog.csdn.net/smile326/article/details/52218264 1.场景需求 后台攻城狮和前端攻城狮一起开发时,经常受到前端攻城狮的骚扰,动不动就来 ...

  2. Hbase之插入数据

    /** * Created by similarface on 16/8/17. */ import org.apache.hadoop.conf.Configuration; import org. ...

  3. drupal配置的命名

    简单好记关键字堆砌方便以后查阅不然真的很容易忘了--关键词可以堆砌,比如是block还是page,是什么content type, 内容关键词等等.

  4. 第四章 Python外壳：代码结构

    Python的独特语法: 不使用分号结束语句,而是回车: 通过代码缩进来区分代码块: if.while.for等,都不用括号,但不能没有冒号(:). 如何将一行命令分为多行? >>> ...

  5. dom4j如何解析xml

    简单解析自己定义的xml文件,首先,给解析xml文件的类来个构造方法: public xmlData(File xmlFile) { file = xmlFile; try { saxReader = ...

  6. ASP.NET Core身份识别

    Introduction to Identity 66 of 93 people found this helpful By Pranav Rastogi, Rick Anderson, Tom Dy ...

  7. 精简android4.2

    cd /system/apprm YouTube.*rm Settings.*rm VoiceDialer.*rm Phone.*rm QuickSearchBox.*rm RSSReader.*rm ...

  8. CentOS下更新python版本

    执行#Python或#python -V或#python --version,看到版本号是2.7.5,到官网https://www.python.org/ftp/python/查看了下最新版本都到了2 ...

  9. C# BackgroundWorker的使用 转

    转自http://www.cnblogs.com/tom-tong/archive/2012/02/22/2363965.html  感谢作者详细的介绍 C# BackgroundWorker的使用 ...

  10. Linux基础: 系统加载过程和运行级别含义

    BIOS 有固化代码指向mbr,mbr指向grub(/boot/grub/下有很多引导配置信息),grub里可以配置多种linux内核vmlinux文件. 启动内核以后就开始加载各种驱动模块并进行系统 ...