鄙人初学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. golang type 和断言 interface{}转换

    摘要 类型转换在程序设计中都是不可避免的问题.当然有一些语言将这个过程给模糊了,大多数时候开发者并不需要去关 注这方面的问题.但是golang中的类型匹配是很严格的,不同的类型之间通常需要手动转换,编 ...

  2. JavaScript：引用js文件时的编码格式问题

    JavaScript:引用js文件时的编码格式问题 如果js文件的编码格式是utf-8,并且含有中文,那么按照正常的方法引用,就会出现乱码的情况. 方法/步骤   如果js文件的编码格式是utf-8, ...

  3. hiho_1061_beautiful_string

    题目大意 题目连接:beautiful string     写代码之前,考虑清楚流程,以及需要维护的变量.... 实现 #include<iostream> #include<st ...

  4. 微信jssdk

    http://203.195.235.76/jssdk/?from=timeline&isappinstalled=0

  5. Python装饰模式实现源码分享

    1.一般来说,通过继承可以获得父类的属性,还可以通过重载修改其方法. 2.装饰模式可以不以继承的方式而动态地修改类的方法. 3.装饰模式可以不以继承的方式而返回一个被修改的类. 4.基本实现 程序演示 ...

  6. 【转】 FPGA设计的四种常用思想与技巧

    本文讨论的四种常用FPGA/CPLD设计思想与技巧:乒乓操作.串并转换.流水线操作.数据接口同步化,都是FPGA/CPLD逻辑设计的内在规律的体现,合理地采用这些设计思想能在FPGA/CPLD设计工作 ...

  7. 【C#】获取当前系统桌面、我的照片、我的文档等路径

    获取当前系统桌面.我的照片.我的文档等路径   using System; using System.Collections.Generic; using System.ComponentModel; ...

  8. 【CITE】C#入门学习-----简单画图程序

    版权声明:本文为博主原创文章,未经博主允许不得转载. 欢迎大家提出意见,一起讨论! 转载请标明是引用于 http://blog.csdn.net/chenyujing1234 通过本实例了解如何在窗体 ...

  9. font-face字体文件引入方式

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. Django开发博客- 页面美化

    css是一种用来描述某种标记语言写的web站点的样式语言.这里我们并不想展开讨论,关于CSS我在这里推荐一个很不错的资源: Codeacademy HTML & CSS course 不想从头 ...