鄙人初学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. hdu 2256 好神奇的矩阵！

    这题自己一开始硬是不会处理√6 前面的系数,直到看了别人的博客后才知道是怎么解得,不多说,先付上一张图: 推出这个关系后,就很容易了. #include<cstdio> #include& ...

  2. ZendStudio的配置导出

    File(文件)->Export(导 出),再弹出Export窗口中点击"General(常规)",选择"Preferences(首选项)" 点击&quo ...

  3. 在Spring Data JPA 中使用Update Query更新实体类

    对于 Spring Data JPA 使用的时间不长,只有两年时间.但是踩过坑的却不少. 使用下列代码 @Modifying @Query("update User u set u.firs ...

  4. C++常量(C++数值常量、字符串常量、符号常量)

    http://see.xidian.edu.cn/cpp/biancheng/view/104.html 字符串常量 用双撇号括起来的部分就是字符串常量,如"abc"," ...

  5. Webservice接口和Http接口

    WebService又是一种高级应用,与之前学习的Struts.Spring.Hibernate等框架不同.WebService是面向服务的架构(SOA),看起来像是比SSH框架要大.那么它到底是做什 ...

  6. Vbs脚本经典教材(转)

    Vbs脚本经典教材(最全的资料还是MSDN) —为什么要使用Vbs? 在Windows中,学习计算机操作也许很简单,但是很多计算机工作是重复性劳动,例如你每周也许需要对一些计算机文件进行复制.粘贴.改 ...

  7. python语法笔记（二）

    1. 循环对象 循环对象是一类特殊的对象,它包含一个next()方法(在python3中是 __next__()方法),该方法的目的是进行到下一个结果,而在结束一系列结果之后,举出 StopItera ...

  8. nosql简述

    1.NoSQL数据库概念 NoSQL数据库是非关系型数据库,主要是针对关系型数据库而言,它主要是用来解决半结构化数据和非机构化数据的存储问题. 2.为什么使用NoSQL数据库? (1)对数据库的高并发 ...

  9. VB6 GDI+ 入门教程[3] 笔、刷子、矩形、椭圆绘制

    http://vistaswx.com/blog/article/category/tutorial/page/2 VB6 GDI+ 入门教程[3] 笔.刷子.矩形.椭圆绘制 2009 年 6 月 1 ...

  10. Windows菜单

    目录 第1章 Windows菜单    1 1.1 窗口菜单和弹出菜单    1 1.2 使用SetMenu    2 1.3 使用TrackPopupMenu    4 第1章 Windows菜单 ...