jquery 改变标签可见状态的几种方式
第一种:
$(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 改变标签可见状态的几种方式的更多相关文章
- JavaScript和jQuery改变标签内容
HTML: <div id="mazey">content</div> JavaScript: var mazey=document.getElementB ...
- 为input标签绑定事件的几种方式
为input标签绑定事件的几种方式 1.JavaScript原生态的方式,直接复制下面的代码就会有相应的效果 <!DOCTYPE html><html><head> ...
- 盘点用jQuery框架实现“for循环”的四种方式！
摘要:分享在jQuery高级开发中对元素标签体的遍历常用的几种方法. 本文分享自华为云社区<盘点用jQuery框架实现"for循环"的四种方式!>,原文作者:灰小猿 . ...
- C# 如何通过mailto标签和SMTP协议两种方式发送邮件
本文主要讲解如何通过如现mailto标签和SMTP协议两种方式发送邮件,下面就直入主题 方法一.通过mailto标签发送邮件 通过mailto不是正真意义上的发送邮件,它只是会自动调用我们本地默认的邮 ...
- jQuery异步获取json数据的2种方式
jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本篇体验使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: ...
- jquery全局加载函数的几种方式;
1.使用javascript方式(function(){})(); 2.使用jQuery(function($) {}); 3.使用$(document).ready(function(){}); 其 ...
- JQuery中阻止事件冒泡的两种方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- (11)Web程序保存状态的几种方式，Application，Session，Cookie，ViewState
WEb程序保存状态的方式有这样几种: 1.Application:保存在Application中的数据是全局有效的:Application里面存放的应该是访问多修 改较少并且是全局至少大部分 ...
- jQuery中的事件绑定的几种方式
jQuery目前有on(),bind(),delegate(),live()四种绑定方式,但是随着版本的不断更新,有的方式也相应的被淘汰掉 [band()方式绑定] 3.0版本之前的绑定方式比较常用的 ...
随机推荐
- 打乱式排序的Java版实现
项目中涉及到对大批量的数据进行打乱式排序,大概原理如下: 输入源数据:1,1,2,3,3,3,4,4 输出结果: 1,2,3,4,1,3,4,3 实现代码如下,采用递归的思想: static &l ...
- Powershell(1)
PowerShell cmdlets: Verb-Noun的命令形式, Verb一般是set, get, start, stop, invoke, 使用get-verb显示所有的动词 通过别名机制, ...
- js弹出页面
建立一个HTML文件,输入以下代码就能弹出页面 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- oracle用分隔符分割字段,并转为多行
作用:当判断是否满足条件,而条件字段又是用","分割的时候. 如果数据库中一个字段插入数据,并且以","分割.有点像行转列 4804510101,4946645 ...
- ios 开发常用函数
rand() ----随机数 abs() / labs() ----整数绝对值 fabs() / fabsf() / fabsl() ----浮点数绝对值 floor() / floorf() / f ...
- maven课程 项目管理利器-maven 3-2 maven自动建立目录骨架
使用cmd创建maven目录的两种方式: 使用archetype插件 1 按照提示进行选择 步骤: a 进入指定目录 b mvn archetype:generate --创建项目目录 c ente ...
- Hibernate课程 初探多对多映射2-4 测试
package com.ddwei.test; import org.hibernate.Session; import org.hibernate.Transaction; import com.d ...
- Android - 开发页面需了解的dip，sp，px知识，以及它们的转换
工作中,时常会有任务要求开发新页面,这时一般的流程是产品经理确定要开发的页面和功能,然后设计师提供设计稿,之后由我们开发人员完成开发工作. 通常,设计师提供的设计稿尺寸标注会很详细,例如涉及到字时,字 ...
- u-boot分析（七）----内存初始化
u-boot分析(七) 上篇博文我们按照210的启动流程,分析到了时钟初始化,今天我们继续按照u-boot的启动流程对内存的初始化进行分析. 今天我们会用到的文档: 1. 2440芯片手 ...
- RabbitMQ基本用法、消息分发模式、消息持久化、广播模式
RabbitMQ基本用法 进程queue用于同一父进程创建的子进程间的通信 而RabbitMQ可以在不同父进程间通信(例如在word和QQ间通信) 示例代码 生产端(发送) import pika c ...