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版本之前的绑定方式比较常用的 ...
随机推荐
- 浅谈SQL Server中的三种物理连接操作(Nested Loop Join、Merge Join、Hash Join)
简介 在SQL Server中,我们所常见的表与表之间的Inner Join,Outer Join都会被执行引擎根据所选的列,数据上是否有索引,所选数据的选择性转化为Loop Join,Merge J ...
- css3之移动平台资源
随着移动端越来越普及,前端技术也是百花齐放,但目前移动平台的技术已经趋向于成熟,记得刚实习的时候就是接触的移动端,但现在2年多来,期间遇到了很多莫名其妙的问题,见证了手机用户量的突飞猛进,兴喜的是更多 ...
- better-scroll 遇到的问题 3 （transition-group 相关）
今天在使用vue动画 transition-group 和 better-scroll 的时候,出现了下拉列表不能滚动的问题. 问题描述: 我写了一个scroll的基础组件,组件接受一个data参数, ...
- java右移>> 无符号右移>>>
>>>是无符号右移,在高位补零 >>是带符号的右移,如果是正数则在高位补零,负数则补1 int a = -1; System.out.println(a>>1 ...
- ecommerce学习
http://blog.csdn.net/dhx20022889/article/details/8977121
- 域名指向新的服务器IP后不能访问的解决办法
不能访问是因为本地DNS缓存,缓存清除方法:dos命令窗口输入ipconfig/flushdns ,回车即可.
- 中兴ZXR10 6905核心交换机配置案例
Connecting to 192.168.0.254:23...Connection established.To escape to local shell, press 'Ctrl+Alt+]' ...
- 双击易语言没有反应，按住shift再双击可解决
参考资料:http://tieba.baidu.com/p/2987732743 的7楼.
- 2016 Multi-University Training Contest 4 - 1005 (hdu5768)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5768 题目大意:给你区间[L,R],问你[L, R]中有多少个数字x满足x%7=0且x%p[i]≠a[ ...
- BZOJ 2735: 世博会 主席树+切比雪夫距离转曼哈顿距离
2735: 世博会 Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 124 Solved: 51[Submit][Status][Discuss] D ...