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 相关文章推荐
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 Javascript
Vue.js表单控件实践
Oct 27 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
理解 JavaScript EventEmitter
Mar 29 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 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句法规则详解 入门学习
2011/11/09 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
Java中final关键字详解
2015/08/10 PHP
JQUERY获取form表单值的代码
2010/07/17 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
python+pygame实现坦克大战
2019/09/10 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
python的sys.path模块路径添加方式
2020/03/09 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
使用django自带的user做外键的方法
2020/11/30 Python
python飞机大战游戏实例讲解
2020/12/04 Python
怎么写好自荐信
2013/10/30 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
保护动物的标语
2014/06/11 职场文书
爱国口号
2014/06/19 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
盗窃案辩护词
2015/05/21 职场文书
docker-compose部署Yapi的方法
2022/04/08 Servers