鄙人初学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. 转：Jeff Atwood倾情推荐——程序员必读之书

    Jeff Atwood倾情推荐——程序员必读之书 英文版:<Code Complete 2>中文版:<代码大全(第二版)>作者:Steve McConnell译者:金戈  汤凌 ...

  2. android 内存泄露之jni local reference table overflow (max=512)

    在android项目中要实现一个需求 为了性能的要求只能用c代码来实现功能. 这样就牺牲了java跨平台性. 通过加载.so的方式,把用c实现的模块集成到app中. android提供jni层,作为一 ...

  3. 应用 Middleware

    主要应用场景:过滤HTTP请求 laravel本身自带了几个Middleware在app/http/middleware目录下面 然后在app/http/kernel.php中注册 自定义一个midd ...

  4. CMD和AMD探秘

    踏上前端这条道路以来,我一直以为自己就是个娴熟的切图工,每天只需要做着重复的劳动,切图,做网站.然而,技术的发展是日新月异的,切图工早就面临淘汰.随着浏览器功能越来越完善,前端项目越来越大,代码越来越 ...

  5. 解决requestAnimationFrame的兼容问题

    写法: window.requestAnimFrame = (function () { return window.requestAnimationFrame || window.webkitReq ...

  6. IOS下移除按钮原生样式 -webkit-appearance

    IOS环境下的按钮都是经过美化的,但通常我们在设计web app的时候不需要这些看上去老土的样式,所以,去除这些显得很有必要. 下面这句代码就是重置这些样式的: -webkit-appearance: ...

  7. python 练习 15

    #!/usr/bin/python # -*- coding: UTF-8 -*- for i in range(1,10): for j in range(1,10): result = i * j ...

  8. robotframework笔记10

    循环和条件 for循环 *** Settings *** Library BuiltIn Library Collections *** Test Cases *** TestCase01 My Ke ...

  9. HTML5自学笔记[ 16 ]canvas绘图基础3

    canvas还提供提供了一些动态方法,使图像可以旋转.缩放和移动,与css3中的方法一样. 移动:translate(x,y),x和y为横竖方向的偏移量 旋转:rotate(弧度),弧度=角度*Mat ...

  10. hdu---(3779)Railroad(记忆化搜索/dfs)

    Railroad Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...