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输出列表实现代码
Sep 12 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
很实用的一个完整email发送程序
2006/10/09 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
python实现电子产品商店
2019/02/26 Python
python区块及区块链的开发详解
2019/07/03 Python
python下载库的步骤方法
2019/10/12 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
python 安装移动复制第三方库操作
2020/07/13 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
linux比较文件内容的命令是什么
2013/03/04 面试题
护士自我评价
2014/02/01 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
Python打包为exe详细教程
2021/05/18 Python