第一种:

$(selector).show(); //立即显示指定标签
$(selector).hide();//立即隐藏指定标签

第二种:

$(selector).fadeIn(ms);//在指定毫秒内渐现
$(selector).fadeOut(ms);//在指定毫秒内渐隐

第三种:

$(selector).toggle();//改变标签的可见状态,如果隐藏则显示,反之则隐藏

另外:

$(selector).is(":hidden");//可以判断指定元素是否隐藏 返回值为布尔值

例子:

一个完整的demo:

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>demo-show/hide</title>

</head>

<style>

#out-part{

  margin: 0 auto;

  width: 400px;

  background-color: bisque;

  overflow: hidden;

}

#in-part{

  margin: 100px auto;

  width:200px;

  height: 200px;

  background-color: purple;

}

button{

  display: block;

  width: 100px;

  float: left;

  margin-left: 10px;

}

</style>

<body>

  <!-- 测试部分 -->

  <div id="out-part">

    <div id="in-part"></div>

  </div>

  <br>

  <!-- 按钮部分 -->

  <button id="show">显示</button>

  <button id="hide">隐藏</button>

  <button id="fadeIn">渐现</button>

  <button id="fadeOut">渐隐</button>

  <button id="show-hide">显示/隐藏</button>

</body>

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>

<script>

  $('#show').on('click',function () {//显示

    $('#out-part').show();

  })

  $('#hide').on('click',function () {//隐藏

    $('#out-part').hide();

  })

  $('#fadeIn').on('click',function () {//渐现

    $('#out-part').fadeIn(1000);

  })

  $('#fadeOut').on('click',function () {//渐隐

    $('#out-part').fadeOut(500);

  })

  $('#show-hide').on('click',function () {//显示/隐藏

    //第一种

    // $('#out-part').toggle();

    //第二种

    if($('#out-part').is(":hidden")){//判断是否隐藏

        $('#out-part').fadeIn(1000);//渐现

      }else{

        $('#out-part').hide();

      }

  })

</script>

</html>

jquery 改变标签可见状态的几种方式的更多相关文章

  1. JavaScript和jQuery改变标签内容

    HTML: <div id="mazey">content</div> JavaScript: var mazey=document.getElementB ...

  2. 为input标签绑定事件的几种方式

    为input标签绑定事件的几种方式 1.JavaScript原生态的方式,直接复制下面的代码就会有相应的效果 <!DOCTYPE html><html><head> ...

  3. 盘点用jQuery框架实现“for循环”的四种方式！

    摘要:分享在jQuery高级开发中对元素标签体的遍历常用的几种方法. 本文分享自华为云社区<盘点用jQuery框架实现"for循环"的四种方式!>,原文作者:灰小猿 . ...

  4. C# 如何通过mailto标签和SMTP协议两种方式发送邮件

    本文主要讲解如何通过如现mailto标签和SMTP协议两种方式发送邮件,下面就直入主题 方法一.通过mailto标签发送邮件 通过mailto不是正真意义上的发送邮件,它只是会自动调用我们本地默认的邮 ...

  5. jQuery异步获取json数据的2种方式

    jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本篇体验使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: ...

  6. jquery全局加载函数的几种方式;

    1.使用javascript方式(function(){})(); 2.使用jQuery(function($) {}); 3.使用$(document).ready(function(){}); 其 ...

  7. JQuery中阻止事件冒泡的两种方式及其区别

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...

  8. (11)Web程序保存状态的几种方式，Application，Session，Cookie，ViewState

    WEb程序保存状态的方式有这样几种: 1.Application:保存在Application中的数据是全局有效的:Application里面存放的应该是访问多修      改较少并且是全局至少大部分 ...

  9. jQuery中的事件绑定的几种方式

    jQuery目前有on(),bind(),delegate(),live()四种绑定方式,但是随着版本的不断更新,有的方式也相应的被淘汰掉 [band()方式绑定] 3.0版本之前的绑定方式比较常用的 ...

随机推荐

  1. Apache-ant安装以及环境变量配置、验证

    (一)安装 ant 下载地址: http://ant.apache.org/     根据自己电脑下载对应版本 下载完成以后,可自行解压到自己常用的盘中,但是要记住解压到哪里了,以便后续的环境变量配置 ...

  2. 文件夹选择之FolderBrowserDialog控件

    应用程序可能只允许用户选择文佳夹而非文件,例如在播放MP3时,用户可能把所有的MP3放在一个文佳夹内,在添加时,只要选择添加这个文佳夹,将会把在这个文件内的所有MP3添加的播放器里.在这里对播放器来说 ...

  3. java 多线程操作（锁）

    1.对象的加锁及其操作 程序中单独的并发线程对同一对象进行操作的代码段,成为临界区.java语言中的临界区可以是一个语句块 或者方法,使用关键字synchronized进行标识. 对象锁:java平台 ...

  4. intellijidea课程 intellijidea神器使用技巧2-1 无处不在的跳转

    idea快捷键(基于windows平台) 1 书签跳转 Ctrl alt [ ]   ==> 项目之间的跳转 Ctrl shift E ==> 文件之间的跳转(最近编辑的文件) Ctrl ...

  5. Objective-C #define 用法解析 （转）

    原文地址: http://blog.csdn.net/kindazrael/article/details/8108868 Objective-C : #define 用法解析 在 C 语言中,预处理 ...

  6. 使用min-content实现容器宽度自适应于内部元素

    前言 设计师可以分为如下两类: 先做好设计,然后将内容放入静态框架中 优秀的设计师充分考虑内容的各个方面及其上下文,并创建适合于内容的设计 HTML原生就是响应式的(HTML内容在视口内流式的分布). ...

  7. php一种面向对象的语言，那么什么是面向对象呢？

    php一种面向对象的语言,那么什么是面向对象呢? 传统的面向过程的编程思想: 相信很多人第一次接触编程都是c语言,c语言就是非常典型的面向过程的编程语言,将要实现的功能描述为一个从开始到结束的连续的“ ...

  8. Design Pattern ->Composite

    Layering & Contract Philosophy With additional indirection class CComponent { ; ; ; public: virt ...

  9. Javascript基础--函数(Function对象)

    1.函数是一段可执行的代码,函数可多次调用,模块化管理. 2.使用function语句,function funName([arg1][,arg2]....[,argn]){代码块}.所有版本可用,一 ...

  10. C++常用字符串分割方法（转）

    1.用strtok函数进行字符串分割 原型: char *strtok(char *str, const char *delim); 功能:分解字符串为一组字符串. 参数说明:str为要分解的字符串, ...