实例讲解Jquery中隐藏hide、显示show、切换toggle的用法

本文实例为大家分享了jquery中show()、hide()和toggle()用法实例，供大家参考，具体内容如下

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>初识jQuery</title>
<script src="http:/www.jb51.net/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<!--引用这个jquery库--> 

<style>
#test{
  display:none;
  width:120px;
  height:50px;
  border:1px solid blue;
   }
</style>
</head> 

  <body>
    <div id="test">Hello world!</div>
    <!--设置三个按钮，每次点击调用特定的函数-->
    <button onclick="sayHello()">点我打开！</button>
    <button onclick="sayGoodbye()">点我关闭！</button>
    <button onclick="change()">点我切换！</button> 

    <script type="text/javascript">
      function sayHello(){
        $("#test").show(5000);
      <!--设参数5000，表示用5000ms的时间完成这个动作-->
      } 

       function sayGoodbye(){
        $("#test").hide();
      <!--不设置，默认速度-->
      } 

       function change(){
        $("#test").toggle("slow");
      <!--设置以slow的速度打开-->
      }
    </script>
  </body>
</html>

效果图：

以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery实现的导航条切换可显示隐藏

    jQuery实现的导航条切换可显示隐藏

    用jQuery实现一些导航条切换,显示隐藏,主要运用的技术有slideToggle( ),toggeClass( ),toggle( ): 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航条在项目中的应用</title> <script language="javascript" type="

  • Jquery实现点击切换图片并隐藏显示内容(2种方法实现)

    我们的电脑屏幕大小是固定的,那么如何在有限的空间放更多的内容呢? 我们应该给用户足够的选择权,当他们想要看某些内容的时候可以很快的看到,不想看的时候就把他隐藏.于是就有了题目说的这个问题. 其实这个问题很简单,那么,之所以拿出来跟大家分享,一方面我们大家相互交流,另一方面,也是对自己的学习的一种总结. 这里我想到了两种方法,给大家分享一下. 好了不多说,下面看代码: 第一种,是常规的方法: [javascript] 复制代码 代码如下: $(function(){ var images = ['

  • jQuery实现切换隐藏与显示同时切换图标功能

    HTML代码: <!doctype html> <html> <head> <meta charset=" utf-8"> <title>jq隐藏显示图标切换</title> <!--引入jq文件--> <script type="text/javascript" scr="./js/jquery.min.js"></script> <

  • 用jQuery实现一些导航条切换,显示隐藏的实例代码

    代码如下: 复制代码 代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>导航条在项目中的应用</title>    <script language="javascript" type="text/javascript" src="Jscript/jquery-1.4.2

  • jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换

    jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换

    已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼. 路是一步一步走出来的,知识是一点一滴积累的,记录是笔财富,来吧,一起学着总结做笔记. 这几天在写后台文章的一些页面,为了能得到更好的交互性,需要做一些效果,js无疑使不二之选,但由于浏览器的兼容性一直差强人意,所以选用jquery框架,通过css样式.dom节点以及自身所带函数就可以实现比较好的用户体验,此案例有三个功能

  • jQuery控制元素显示、隐藏、切换、滑动的方法总结

    jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 复制代码 代码如下: $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); hide() 和 show() 都可以设置两个可选参数:speed 和 callba

  • jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)

    实例 通过使用滑动效果,在显示和隐藏状态之间切换 <p> 元素: 复制代码 代码如下: $(".btn1").click(function(){ $("p").slideToggle(); }); 定义和用法 slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态. 如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素. 语法 $(selector).slideToggle(speed,callback)参

  • jQuery通过改变input的type属性实现密码显示隐藏切换功能

    一般我们做登录注册的时候都会提供一个让用户选择自己输入的密码是否显示的需求, 这种需求我们肯定会想到只要动态改变input的type属性不就好了(text显示/password隐藏): 于是我用了$(''#id).attr('type', 'password')这个API 然而结果并不是我想的那样,出错了 HTML 代码 Uncaught Error: type property can't be changed 意思大概就是这个属性不能被修改. 于是我就googl一手. 然而我得到的结果是这样

  • 实例讲解Jquery中隐藏hide、显示show、切换toggle的用法

    实例讲解Jquery中隐藏hide、显示show、切换toggle的用法

    本文实例为大家分享了jquery中show().hide()和toggle()用法实例,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>初识jQuery</title> <script src="http:/www.jb51.net/

  • 实例讲解jquery中mouseleave和mouseout的区别

    本文详细的介绍了关于jQuery中mouseleave和mouseout的区别,分享给大家供大家参考,具体内容如下 很多人在使用jQuery实现鼠标悬停效果时,一般都会用到mouseover和mouseout这对事件.而在实现过程中,可能会出现一些不理想的状况. 先看下使用mouseout的效果: <p>先看下使用mouseout的效果:</p> <div id="container" style="width: 300px;">

  • 实例讲解JQuery中this和$(this)区别

    平时很少在jquery中用到this.查看代码时发现用到了,就调试出this的值,心想原来如此.还是挺有用的.这里总结一下this与$(this)的区别和使用. $(this)生成的是什么? $()生成的是什么呢?实际上$()=jquery(),就是说返回的是一个jquery的对象. 通常我们为了简便直接使用$().实际上,该函数省略了一个参数context.根据选择器选取匹配的对象即$(selector, context),以jQuery包装集的形式返回. context可以是Dom对象集合或

  • 实例讲解jQuery中对事件的命名空间的运用

    用 jQuery 绑定和解绑事件监听器都是非常简单的.但是当你为一个元素的一个事件绑定了多个监听器时,怎样精确地解绑其中一个监听器?我们需要了解一下事件的命名空间. 看下面这段代码: $("#element") .on("click", doSomething) .on("click", doSomethingElse); 像上面这样绑定事件监听器,当元素被点击时,doSomething 和 doSomethingElse 这两个监听器都会被触发

  • 实例讲解Java中random.nextInt()与Math.random()的基础用法

    实例讲解Java中random.nextInt()与Math.random()的基础用法

    1.来源 random.nextInt() 为 java.util.Random类中的方法: Math.random() 为 java.lang.Math 类中的静态方法. 2.用法 产生0-n的伪随机数(伪随机数参看最后注解): // 两种生成对象方式:带种子和不带种子(两种方式的区别见注解) Random random = new Random(); Integer res = random.nextInt(n); Integer res = (int)(Math.random() * n)

  • 实例讲解C#中的职责链模式

    大家好,欢迎来到老胡的博客,今天我们继续了解设计模式中的职责链模式,这是一个比较简单的模式.跟往常一样,我们还是从一个真实世界的例子入手,这样大家也对这个模式的应用场景有更深刻的理解. 一个真实的栗子 作为上班族,相信大家对请假都不陌生,每个公司都有自己请假的流程,稍微讲究点的公司还会有细致的规定,比如,3天以内的假期,小组长有权力批准,3天以上的假期就要找更高级别的领导批准.这种制度就是典型的权力越大职责越大--毕竟,批长假的职责只在高级主管那里存在. 除了规定出这样细致的要求之外,大部分公司

  • JQuery实现隐藏和显示动画效果

    JQuery实现隐藏和显示动画效果

    本文为大家分享了JQuery实现隐藏和显示动画效果的具体代码,供大家参考,具体内容如下 隐藏和显示 语法 $(selector).fadeIn([speed,callback]); $(selector).fadeOut([speed,callback]); $(selector).fadeToggle([speed,callback]); 参数说明: 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒. 可选的 call

  • 实例讲解Java中的synchronized

    一.使用场景 在负责后台开发的时候,很多时候都是提供接口给前端开发人员去调用,会遇到这样的场景: 需要提供一个领奖接口,每个用户名只能领取一次,我们可以将成功领取的用户在数据库用个标记保存起来.如果这个用户再来领取的时候,查询数据库看该用户是否领取过. 但是问题来了,假设用户手速很快,极短时间内点了两次领奖按钮(前端没有进行控制,我们也不能依赖前端去控制).那么可能掉了两次领奖接口,而且有可能第二次调用的时候查询数据库的时候,第一次领奖还没有执行完成更新领奖标记. 这种场景就可以使用到synch

  • jquery中attr、prop、data区别与用法分析

    本文实例讲述了jquery中attr.prop.data区别与用法.分享给大家供大家参考,具体如下: 在高版本的jquery中获取标签的属性,可以使用attr().prop().data(),那么这些方法有什么区别呢? 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. .data()看作是存取data-xxx这样DOM附加信息的方法 上面的描述也许有点模糊,举几个例子就知道了. <a href="h

随机推荐