jquery判断元素是否隐藏的多种方法

作者:junjie 时间:2024-04-19 10:23:51 

第一种:使用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   */ 

标签:jquery,隐藏
0
投稿

猜你喜欢

  • 蚁群算法js版

    2008-10-08 10:15:00
  • javascript创建数组的最简代码

    2013-09-01 21:43:04
  • Python 实现毫秒级淘宝抢购脚本的示例代码

    2023-05-10 19:50:10
  • 解析PHP观察者模式Observer

    2023-07-08 13:38:58
  • 关于Python dict存中文字符dumps()的问题

    2022-08-22 17:53:17
  • Python输出各行命令详解

    2021-12-03 05:29:18
  • linux采用binary方式安装mysql

    2024-01-27 19:40:18
  • JavaScript中的对象的extensible属性介绍

    2024-06-05 09:30:38
  • Go语言操作Excel利器之excelize类库详解

    2024-04-28 09:12:47
  • python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警

    2022-01-13 09:48:25
  • python实现逻辑回归的方法示例

    2021-07-27 17:04:24
  • python单向循环链表原理与实现方法示例

    2023-10-07 08:39:06
  • Python实现网络自动化eNSP

    2021-01-18 00:48:04
  • pyinstaller将含有多个py文件的python程序做成exe

    2021-03-04 21:02:22
  • python和pyqt实现360的CLable控件

    2021-07-19 13:31:11
  • Python实现线程状态监测简单示例

    2023-12-07 20:31:25
  • 使用postman进行接口测试的方法(测试用户管理模块)

    2023-03-13 15:59:11
  • Python Tkinter 简单登录界面的实现

    2021-01-10 20:45:03
  • TensorFlow安装及jupyter notebook配置方法

    2022-09-11 01:05:23
  • 浅析MySQL的WriteSet并行复制

    2024-01-18 04:28:11
  • asp之家 网络编程 m.aspxhome.com