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 相关文章推荐
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
JS拖动技术 关于setCapture使用
Dec 09 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
iframe子页面获取父页面元素的方法
Nov 05 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 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
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
PHP实现百度人脸识别
2019/05/06 PHP
jquery中对表单的基本操作代码
2010/07/29 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
简单谈谈Python中的闭包
2016/11/30 Python
python分数表示方式和写法
2019/06/26 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
Python map及filter函数使用方法解析
2020/08/06 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
Java基础知识面试题
2014/03/25 面试题
计算机本科生自荐信
2013/10/15 职场文书
syb养殖创业计划书
2014/01/09 职场文书
新郎新娘婚礼答谢词
2014/01/11 职场文书
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书