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 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
DIV菜单层实现代码
Nov 19 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
使用angular写一个hello world
Jan 23 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
详解element上传组件before-remove钩子问题解决
Apr 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实现将GB编码转换为UTF8
2006/11/25 PHP
PHP 变量类型的强制转换
2009/10/23 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
python GUI计算器的实现
2020/10/09 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
毕业自我鉴定范文
2013/11/06 职场文书
管理建议书范文
2014/05/13 职场文书
开学典礼策划方案
2014/05/28 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
感谢信的格式
2015/01/21 职场文书
银行招聘自荐信
2015/03/06 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python