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 继承实现例子
Aug 12 Javascript
js 分栏效果实现代码
Aug 29 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
原生js实现下拉选项卡
Nov 27 Javascript
JavaScript Event Loop相关原理解析
Jun 10 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 进度条实现代码
2009/03/10 PHP
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
php采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
拖动时防止选中
2017/02/03 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
Python序列类型的打包和解包实例
2019/12/21 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
给学校的建议书范文
2014/05/15 职场文书
双拥工作宣传标语
2014/06/26 职场文书
代理人委托书
2014/09/16 职场文书
2016新年致辞
2015/08/01 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸
Java 写一个简单的图书管理系统
2022/04/26 Java/Android