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 相关文章推荐
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
js实现图片360度旋转
Jan 22 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 Javascript
javascript使用canvas实现饼状图效果
Sep 08 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使用数组实现队列
2012/02/05 PHP
Zend的MVC机制使用分析(一)
2013/05/02 PHP
CI框架Session.php源码分析
2014/11/03 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
JQuery从头学起第一讲
2010/07/04 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
Python获取远程文件大小的函数代码分享
2014/05/13 Python
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
python实现FTP服务器服务的方法
2017/04/11 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
个人公开承诺书
2014/03/28 职场文书
青春寄语大全
2014/04/09 职场文书
任命书格式
2014/06/05 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
书法社团活动总结
2015/05/07 职场文书
音乐之声观后感
2015/06/04 职场文书
国庆阅兵观后感
2015/06/15 职场文书
详解非极大值抑制算法之Python实现
2021/06/28 Python