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版本之前的绑定方式比较常用的 ...
随机推荐
- jqGrid方法整理
一.colModel 表体结构配置 name 必要的属性,具有唯一标识性,如在弹出的editform窗体中,将作为input的name属性 index 为排序用,最方便的是设为数据库字段 ...
- hdu 4123 树形DP+单调队列
http://acm.hust.edu.cn/vjudge/problem/25790 这题基本同poj 3162 要注意mx,mx2,vx,vx2每次都要初始化 #include <iostr ...
- XHTML教会我的一些东西-2
不知道写些什么,每次看完视频之后都按照里面的方法把相应的代码写了一遍.感觉问题不大,可能是我没去写那些复杂的代码,没有去思考其他一些新颖的架构. 在自己写代码和看视频的过程中,我明白了,一定要注意每一 ...
- ansible软件相关模块丶计划任务,剧本
软件相关模块 yum rpm 和yum 的区别 rpm:redhat package manager yum可以解决依赖关系 yum 源配置 [epel] name=Extra Packages fo ...
- php cur错误：SSL错误 unable to get local issuer certificatebool
采集https链接时出现的问题 办法:跳过SSL证书检查 curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($ch, CURLO ...
- 栅格那点儿事（四E）
栅格金字塔 如果上面的部分都已经看过了,那么如何在ArcMap中更好的渲染一个栅格数据你已经知道了.可仅展示好一个栅格数据是不够的,我们还需要知道如何快速的展示一个栅格数据. 讲金字塔之前,先解释 ...
- Shader学习笔记整理
1.常用矩阵 UNITY_MATRIX_V 视口矩阵 UNITY_MATRIX_P 投影矩阵 UNITY_MATRIX_MV 模型矩阵 * 视口矩阵 UNITY_MATRIX_MVP 模型矩阵 * 视 ...
- bootstrap-table之通用方法（ 时间控件，导出，动态下拉框， 表单验证 ，选中与获取信息）
1.bootstrap-table 单击单行选中 $('#gzrwTable').on('click-row.bs.table', function(e, row, $element) { $('.s ...
- PHP：substr和mb_substr的区别
substr和mb_substr函数都是获取字符串中的某个部分 那么,它们的区别在哪儿呢? 区别: substr :全部是英语.数字就正常:但有一些的字元是占用多个位元的,substr()就得不到你预 ...
- 在windows bat脚本(batch)中延时
编写bat脚本时,有事我们希望在指令和指令之间,加入延时.例如当一条指令执行后,windows需要一定时间来响应的情况. 以下是一种实现方法,通过ping 指令来实现,5表示ping5次,就是延时5秒 ...