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版本之前的绑定方式比较常用的 ...
随机推荐
- NET平台4.0 发布网站流程及出错总结
1.进入IIS设置,在控制面板中选择“管理工具”,进入后选择 “Internet 信息服务(IIS)管理器” 2.点击[添加]应用程序池,根据版本选择framework 3.添加网站 ,右击网站,添加 ...
- SpringBoot如何集成Jedis
添加jedis依赖 在项目pom.xml文件中添加依赖 <!-- 添加jedis依赖 --> <dependency> <groupId>redis.clients ...
- bundle绑定资源表
1.注册绑定资源表 在application_Start函数中: (注意不要加拓展名,否则压缩时出问题) BundleTable.Bundles.Add(new ScriptBundle(" ...
- Vue.js基础语法（三）
vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 1过滤器filte ...
- 轻松完成excel读写操作- 基于POI的框架BingExcel的使用(2)
在进行 类转换时候,系统默认注册了一些转换器,当然你也可以自定局部或者全局的转换器.下面进行具体使用说明 java类说明 对应的java实体类,其属性必须要有__@CellConfig__注解,此注 ...
- c++ 处理utf-8字符串
c++的字符串中的每一个元素都是一个字节.所以在装入utf8字符串的时候,其实是按照一定的规则编码的. 字符的8位中 如果0开头 则自己就是一个单位. 1字节 0xxxxxxx 2字节 110xxx ...
- selenium profile remotedriver
使用 FirefoxProfile FirefoxProfilefp = new FirefoxProfile(); // set something on the profile... Desire ...
- 概念：RPG游戏中两个兵种互相攻击的逻辑
直接上题目: 解析题目: 根据题目的解析,进行代码的实现: 输出结果: 心得: (1) 当我们面对‘公式结果不是我们想要的’时,应该在脑海里将一个完整的攻击流程进行想象,就会对流程有个更清晰的思路 ( ...
- CRUD全栈式编程架构之MVC的扩展设计
MVC执行流程 路由的扩展 我理解的路由作用有以下几个 Seo优化,用“/”分开的url爬虫更爱吃 物理和逻辑文件分离,url不再按照文件路径映射 Controller,Action的选择 MVC路由 ...
- 并查集，是否成树,Poj(1308)
思路: 对于每一条新的边的两个端点,是否是属于一颗树,要是的话,就不是一颗树.否则,就合并. 这里要注意的是,不能是森林,我这里WA了两次了.只不过在最后,查看每个节点的祖先是否是同一个就可以了. # ...