在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素，以及使用 toggle() 方法能够切换 hide() 和 show() 方法。

　　隐藏例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>jquey隐藏显示</title>

      <!--     jquery文件自己下载引用近来即可，我这里是1.12.0的压缩版 -->

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

     <script type="text/javascript">

         $(document).ready(function(){

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

                $(this).hide();

            })

         })

     </script>

 </head>

 <body>

       <p>点我，消失</p>

       <p>点我，我也消失</p>

 </body>

 </html>

　　通过 jQuery，还可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jquey隐藏显示</title>

    <style>

          div{width:100px;height:100px;border:1px solid red;}

    </style>

     <!--     jquery文件自己下载引用近来即可，我这里是1.12.0的压缩版 -->

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

    <script type="text/javascript">

        $(document).ready(function(){

           $('.show1').click(function(){

               $('div').show(1000);

           })

           $('.hide1').click(function(){

               $('div').hide(1000);

           })

        })

    </script>

</head>

<body>

    <button class="show1">显示</button>

    <button class="hide1">隐藏</button>

      <div>

          <p>点我，消失</p>

      <p>点我，我也消失</p>

      </div>

</body>

</html>

　　通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

　　例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>jquey隐藏显示</title>

     <style>

           div{width:100px;height:100px;border:1px solid red;}

     </style>

      <!--     jquery文件自己下载引用近来即可，我这里是1.12.0的压缩版 -->

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

     <script type="text/javascript">

         $(document).ready(function(){

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

             $("div").toggle("slow");

             });

          });

     </script>

 </head>

 <body>

     <button class="show1">显示&隐藏</button>

       <div>

           <p>点我，消失</p>

       <p>点我，我也消失</p>

       </div>

 </body>

 </html>

jQuery的显示和隐藏的更多相关文章

  1. jQuery学习-显示与隐藏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Jquery的显示与隐藏

    $(selector).hide(speed,callback); $(selector).show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:&q ...

  3. jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏

    jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggl ...

  4. jquery统计显示或隐藏的元素个数

    统计显示的checkbox的数量: 统计隐藏的checkbox数量:

  5. 7.jQuery之显示与隐藏效果

    这里用到三个函数方法:show()   hide()  toggle() 注意点是三个方法里面的两个参数的使用,前一个参数是时间,表示显示速度:后一个参数是回调函数,只有前面的动画执行完之后,回调函数 ...

  6. jquery实现显示和隐藏toggle（）方法的使用

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. toggle显示与隐藏切换

    jQuery中显示与隐藏切换toggle方法 show与hide是一对互斥的方法.需要对元素进行显示隐藏的互斥切换,通常情况是需要先判断元素的display状态,然后调用其对应的处理方法.比如显示的元 ...

  8. js 与JQuery显示及隐藏方法

    虽然以后两种方式都能让文本信息隐藏和显示 第一种文本隐藏以后还是会占居位置, 第二种则不会占位置. <p id="p1">这是一段文本.</p> <i ...

  9. jQuery判断当前元素显示状态并控制元素的显示与隐藏

    1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible');   //true为显示,false为隐藏 $("#id") ...

随机推荐

  1. flutter Slider滑块组件

    滑块,允许用户通过滑动滑块来从一系列值中选择. import 'package:flutter/material.dart'; class SliderDemo extends StatefulWid ...

  2. Flutter页面跳转返回数据

    Dart中的异步请求和等待和ES6中的方法很像,直接使用async...await就可以实现. 核心代码: _navigateToAddress(BuildContext context) async ...

  3. 【转载】 【Tensorflow】卷积神经网络中strides的参数

    原文地址: https://blog.csdn.net/TwT520Ly/article/details/79540251 http://blog.csdn.net/TwT520Ly -------- ...

  4. postman内置脚本说明

    1. 清除一个全局变量 Clear a global variable 对应脚本: postman.clearGlobalVariable("variable_key"); 参数: ...

  5. python-learning-第二季-数据处理numpy

    https://www.bjsxt.com/down/8468.html numpy-科学计算基础库 例子: import numpy as np #创建数组 a = np.arange() prin ...

  6. spring AOP的基本概念

    AOP的概念和使用原因 现实中有一些内容并不是面向对象(OOP)可以解决的,比如数据库事务,它对于企业级的Java EE应用而言是十分重要的,又如在电商网站购物需要经过交易系统.财务系统,对于交易系统 ...

  7. C#操作IIS程序池及站点的创建配置实现代码

    首先要对Microsoft.Web.Administration进行引用,它主要是用来操作IIS7: using System.DirectoryServices;using Microsoft.We ...

  8. Traking-Learning-Detection TLD经典论文部分翻译

    摘要 本文研究视频流中未知目标的长期跟踪问题.在第一帧,通过选定位置和大小定义跟踪目标.在接下来的每一帧中,跟踪任务是确定目标的位置和大小或者说明目标不存在.我们提出了一种新颖的跟踪框架(TLD),明 ...

  9. python 爬虫实例（三）

    问题描述 爬取博客园的首页数据URL[https://home.cnblogs.com/blog/page/1/],之后写到自己的Excel里面 环境: OS:Window10 python:3.7 ...

  10. jira7.3.6 linux安装及破解

    一.环境准备 jira7.3的运行是依赖java环境的,也就是说需要安装jdk并且要是1.8以上版本,如下: http://www.oracle.com/technetwork/java/javase ...