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实现的切换面板实例代码
Jun 17 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
浅析Node.js 中 Stream API 的使用
Oct 23 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 Javascript
electron踩坑之remote of undefined的解决
Oct 06 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 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
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
Python编写Windows Service服务程序
2018/01/04 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
python匿名函数用法实例分析
2019/08/03 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
电气自动化大学生求职信
2013/10/16 职场文书
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
大学生职业生涯规划书前言
2014/01/09 职场文书
11月红领巾广播稿
2014/01/17 职场文书
创业资金计划书
2014/02/06 职场文书
结婚保证书范文
2014/04/29 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
工程部部长岗位职责
2015/02/12 职场文书
java executor包参数处理功能 
2022/02/15 Java/Android