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 相关文章推荐
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
javascript中检测变量的类型的代码
Dec 28 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 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函数scandir排除特定目录
2014/06/12 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
用js实现in_array的方法
2013/11/05 Javascript
js使用心得分享
2015/01/13 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
深入理解Javascript中的this关键字
2015/03/27 Python
python 默认参数问题的陷阱
2016/02/29 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
python 读入多行数据的实例
2018/04/19 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
python获取交互式ssh shell的方法
2019/02/14 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
美国知名艺术画网站:Art.com
2017/02/09 全球购物
即兴演讲稿
2014/01/04 职场文书
动员大会主持词
2014/03/20 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js
实战Python爬虫爬取酷我音乐
2022/04/11 Python
Python基本的内置数据类型及使用方法
2022/04/13 Python
python 学习GCN图卷积神经网络
2022/05/11 Python
mysql sql常用语句大全
2022/06/21 MySQL