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版本之前的绑定方式比较常用的 ...
随机推荐
- IT方面书籍下载整理
最近翻看Redis相关的中文书籍时,发现了很多错误,包括翻译错误及理论错误,因此想搜集一些相关的外文书籍看看.以下几个链接,内容大同小异,均可免费下载相关的英文书籍PDF版,内容涵盖了IT的方方面面. ...
- Day6上 括号匹配专项
滑稽的题 T1 #include<iostream> #include<cstring> #include<queue> #include<algorithm ...
- #与javascript:void(0)的区别
#"包含了一个位置信息 默认的锚点是#top 也就是网页的上端 而javascript:void(0) 仅仅表示一个死链接 这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首 而 ...
- Spring课程 Spring入门篇 4-3 Spring bean装配（下）之Autowired注解说明2 集合运用
课程链接: 本节主要讲了以下几块内容 1 注解相关解析 2 代码演练 集合for循环的使用 2.1 list集合应用 2.2 map集合应用 2.3 集合排序(只对list有效,对map无效(list ...
- thinkphp 创建数据对象之data方法
创建数据对象:data()方法 1.功能:给模型对象$data赋值,将模型对象转化为数据对象 tip:模型对象与数据对象之间就差一个赋过值的$data; 2.方法:data()其源码如下: tip:源 ...
- Java笔记 —— 初始化
Java笔记 -- 初始化 h2{ color: #4ABCDE; } a{ text-decoration: none !important; } a:hover{ color: red !impo ...
- 分析一点python源代码
偶然看了一下python的部分源代码,感觉python的作者写的代码真心很美,简洁美观,学习之. 举几个例子抛砖引玉一下: def removedirs(name): ""&quo ...
- 使用 Satis 搭建私有的 Composer 包仓库
简述 iBrand 产品立项时是商业性质的项目,但是在搭建架构时考虑后续的通用性,因此每个模块都设计成一个 Package,作为公司内部用,因此这些包并不能提交到 packagist.org 上去. ...
- PHP：如果正确加载js、css、images等静态文件
日常中,我们想要把一些静态页面放在框架上或者是进行转移时,那么静态页面上的原url加载js.css.images都会失效,那么我们应该怎么进行修改捏? 现在仓鼠做个笔记哈 这里有几个注意项: 1.路径 ...
- Invalid MyEclipse License - Discontinuing this MyEclipse operation. 出现这个错误怎么改正？
Invalid MyEclipse License - Discontinuing this MyEclipse operation这句话的意思是无效的许可证-停用此MyEclipse操作入门就是你的 ...