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 相关文章推荐
jqTransform form表单美化插件使用方法
Jul 05 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
javascript实现日期格式转换
Dec 16 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
浅析微信扫码登录原理(小结)
Oct 29 Javascript
超简单的微信小程序轮播图
Nov 22 Javascript
详解TypeScript的基础类型
Feb 18 Javascript
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
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
PHP中break及continue两个流程控制指令区别分析
2011/04/18 PHP
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
php cookie 详解使用实例
2016/11/03 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
php7 新增功能实例总结
2020/05/25 PHP
js用闭包遍历树状数组的方法
2014/03/19 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
柏林通行证:Berlin Pass
2018/04/11 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
四风问题对照检查材料
2014/09/22 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
学习心得体会
2019/06/20 职场文书
nginx服务器的下载安装与使用详解
2021/08/02 Servers
配置Kubernetes外网访问集群
2022/03/31 Servers