第一种:

$(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. machine learning 线性回归实战

    matlab 线性回归实战 统一 输入时列向量 输出也是列向量 中间的过程可以出现行向量或者列向量,但是不能影响输入和输出为列向量 参数运算的输入都不会只是一个实数,要么是列向量,要么是一个矩阵 对于 ...

  2. LCS与打印路径

    /* LCS */ #include<bits/stdc++.h> using namespace std; const int maxn = 1000; int dp[maxn][max ...

  3. [精校版]The Swift Programming Language--语言指南--字符串和字符 （转）

    今天装了10.10.马上就可以实际编写swift了.还是很兴奋啊. 哈哈.字符串和字符是大家最容易打交道的.今天就转一下讲解swift中字符串和字符的文章.希望对大家有帮助. 原文地址:http:// ...

  4. wamp的安装

    1.下载wamp. 2.如果安装了apache,先卸载. 进入到你的apache的bin目录,输入指令 httpd.exe -k stop停止服务,再输入httpd.exe -k uninstall. ...

  5. web worker技术-js新线程

    web worker的小例子,用来入门很合适,建议启动服务来开发.可以使用node的anywhere. <!DOCTYPE html> <html lang="en&quo ...

  6. [学习心得][Introduction to ASP.NET Core 1.0]4-1 Creating a Form

    原视频地址https://mva.microsoft.com/en-US/training-courses/introduction-to-asp-net-core-1-0-16841?l=eYlqd ...

  7. 信息无缝滚动效果marquee

    横向滚动.纵向滚动 1. 解决滚动的空白 向左向右滚动的话,可以根据父级定位left,每次加或者减可以使物体向左或右运动,用top也可以实现向上或向下运动 上下滚动实现无缝滚动1. innerHTML ...

  8. 安卓开发：Please ensure that adb is correctly located at……问题解决方案

    话不多说,每一个开发安卓的菜鸟都会遇到这种问题. Please ensure that adb is correctly located at 'E:\种子下载\adt-bundle-windo... ...

  9. Angular JS + Express JS入门搭建网站

    3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外 ...

  10. WINCC runtime连接SIMOTION simulator SIMOSIM

    测试使用的软件版本 TIA Portal V14sp1 Windows7 sp1 (professional) Scout 5.1(integrated in TIA 集成项目) VMware wor ...