jquery判断元素是否隐藏的多种方法


Posted in Javascript onMay 06, 2014

第一种:使用CSS属性

var display =$('#id').css('display');

if(display == 'none'){

   alert("被你发现了,我是隐藏的啦!");

}

第二种:使用jquery内置选择器

假设我们页面有这么个标签,

<div id="test">

<p>仅仅是测试所用</p>

</div>

那么,我们可以用以下语句来判断id为"test"的标签是否隐藏:
if($("#test").is(":hidden")){...} //前提是已经将jQuery的库导进来了

这样,我们就能够很简单地判断一个元素是否隐藏,并根据其状态来设置动画,比如:
if($("#test").is(":hidden")){

       $("#test").show();    //如果元素为隐藏,则将它显现

}else{

      $("#test").hide();     //如果元素为显现,则将其隐藏

}

jQuery判断元素是否显示 是否隐藏

var node=$('#id');

第一种写法
if(node.is(':hidden')){//如果node是隐藏的则显示node元素,否则隐藏


node.show(); 
}else{

node.hide();
}

第二种写法
if(!node.is(':visible')){//如果node是隐藏的则显示node元素,否则隐藏


node.show(); 
}else{

node.hide();
}
if(node.is(':visible')){
//如果node是显示的则隐藏node元素,否则显示

node.hide();
}else{

node.show();
}

jQuery判断对象是否显示或隐藏

Js代码

// jQuery("#tanchuBg").css("display")  

// jQuery("#tanchuBg").is(":visible")  

// jQuery("#tanchuBg").is(":hidden") 

Js代码

$(element).is(":visible") // Checks for display:[none|block], ignores visible:[true|false] 

Js代码

$('element:hidden')  

$('element:visible') 

Js代码

$(".item").each(function()  

{  

    if ($(this).css("visibility") == "hidden")  

    {  

        // handle non visible state  

    }  

    else  

    {  

        // handle visible state  

    }  

}) 

Js代码

ar isVisible = $('#myDiv').is(':visible');  

var isHidden = $('#myDiv').is(':hidden'); 

Js代码

if( $(this).css("display") == 'none' ){  

  

    /* your code here*/  

}  

else{  

  

    /*  alternate logic   */  

} 
Javascript 相关文章推荐
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
微信小程序基础教程之echart的使用
Jun 01 Javascript
JQuery调用WebServices的方法和4个实例
May 06 #Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 #Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 #Javascript
使用jQuery重置(reset)表单的方法
May 05 #Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 #Javascript
Js操作树节点自动折叠展开的几种方法
May 05 #Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 #Javascript
You might like
SONY SRF-40W电路分析
2021/03/02 无线电
PHP中的traits简单使用实例
2015/05/13 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
javascript 禁止复制网页
2009/06/11 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
django 环境变量配置过程详解
2019/08/06 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
python如何保证输入键入数字的方法
2019/08/23 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
2014年社区工会工作总结
2014/12/18 职场文书
详解Python函数print用法
2021/06/18 Python