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 相关文章推荐
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
原生js实现获取form表单数据代码实例
Mar 27 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 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正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
php实现websocket实时消息推送
2018/03/30 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
Python线程的两种编程方式
2015/04/14 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
python 日志 logging模块详细解析
2020/03/31 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
市场营销战略计划书
2014/05/06 职场文书
端午节活动总结报告
2015/02/11 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python