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

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

(0)

相关推荐

  • 关于jQuery判断元素是否存在的问题示例探讨

    是这样的,最近做jQuery训练时遇到jQuery判断元素是否存在时出现问题. 题目如下:请在"选择按钮3"后面,添加Id=rad4,处于选择状态的,之后文字为"选择按钮4"的HTML控件,只能添加一次(自由选择使用js原生或JQuery实现 function addradio() { if (!document.getElementById("rad4")) { var main = document.getElementById("

  • jQuery判断元素是否显示 是否隐藏的简单实现代码

    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(':visib

  • jQuery 判断元素上是否绑定了事件

    我研究了一下之后发现,jQuery都将事件缓存起来了,其实也是为了防止内存溢出以及页面unload的时候的速度,也包括多函数触发,方便管理等诸多好处,具体可以参考此文. jQuery会在window.unload的时候卸载所有绑定过的事件,释放内存的. OK,言归正传.判断元素上是否绑定过事件用如下语句 复制代码 代码如下: jQuery.data(elem,"events")[type] //老版本也能用 $(elem).data("events")[type]

  • jQuery判断元素上是否绑定了指定事件的方法

    本文实例讲述了jQuery判断元素上是否绑定了指定事件的方法.分享给大家供大家参考.具体如下: 例如下面的代码可以判断id=testdiv的元素是否绑定的click事件,这个判断只针对jQuery绑定的事件有效,普通JS的事件绑定无效. //jQuery event封装支持判断元素上是否绑定了事件,此方法只适用于jQuery绑定的事件 var $events = $("#testdiv").data("events"); if( $events &&

  • jQuery 判断元素整理汇总

    是否含有某 class 在表单提交之前,我们往往要利用 JavaScript 校验用户输入值,如果用户输入有误,那么我们就往该表单元素添加一个 error 的 class,再配合 CSS,该表单元素就显示为红色,以提醒用户. 最后我们还要根据是否有 error 来决定是否提交表单.怎么判断呢?如下: <input type="text" name="username" /> <input type="text" name=&qu

  • jQuery判断元素是否是隐藏的代码

    核心代码: 复制代码 代码如下: if($("#elem_id").is(":hidden")) { } 实例代码1: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title

  • JQuery1.8 判断元素是否绑定事件的方法

    On previous versions, you could call it like for other data : obj.data('events'); In jQuery 1.8, this direct access was removed, so in recent versions you must call it like this : $._data(obj[0],"events") 大概的意思是版本可以使用obj.data('event'); JQuery1.8

  • jQuery判断元素是否存在的可靠方法

    最简单的办法是判断元素匹配长度 譬如HTML代码: 复制代码 代码如下: <div class='mydiv'></div> 通常我们的做法是 复制代码 代码如下: if($('.mydiv').length>0) 比较可靠且不会出错的做法是: 复制代码 代码如下: if($('.mydiv').length && $('.mydiv').length>0)  return true; 使用传统javascript方法,如下: 复制代码 代码如下: if

  • jquery判断元素的子元素是否存在的示例代码

    jquery判断子元素是否存在 一.判断子元素是否存在   //一级子元素 if($("#specialId>img").length==0)     if ($( "#specialId:has(img)" ).length==0)          {      //-----没有img子标记-----     }    else     {      //-------有img子标记------     } 二.选择特定id元素下的特定id子元素   

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

    第一种:使用CSS属性 复制代码 代码如下: var display =$('#id').css('display'); if(display == 'none'){    alert("被你发现了,我是隐藏的啦!"); } 第二种:使用jquery内置选择器 假设我们页面有这么个标签, 复制代码 代码如下: <div id="test"> <p>仅仅是测试所用</p> </div> 那么,我们可以用以下语句来判断id

  • JQuery为元素添加样式的实现方法

    由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").css("css属性名","属性值") 如  $("span").css("color","red") 将标签为span的字体都设为红色的 $("#id")  $("span"

  • java 中HashMap、HashSet、TreeMap、TreeSet判断元素相同的几种方法比较

    java 中HashMap.HashSet.TreeMap.TreeSet判断元素相同的几种方法比较 1.1     HashMap 先来看一下HashMap里面是怎么存放元素的.Map里面存放的每一个元素都是key-value这样的键值对,而且都是通过put方法进行添加的,而且相同的key在Map中只会有一个与之关联的value存在.put方法在Map中的定义如下. V put(K key, V value); 它用来存放key-value这样的一个键值对,返回值是key在Map中存放的旧va

  • jQuery判断是否存在滚动条的简单方法

    利用jQuery控制滚动条滚动,再判断滚动条是否有偏移.如果有,则存在滚动条,相反没有滚动就不存在. <script type="text/javascript"> $(function(){ $("body").scrollTop(10);//控制滚动条下移10px if( $("body").scrollTop()>0 ){ alert("有滚动条"); }else{ alert("没有滚动条&

  • jquery判断单选按钮radio是否选中的方法

    本文实例讲述了jquery判断单选按钮radio是否选中的方法.分享给大家供大家参考.具体如下: html代码如下: <input type="radio" id="d1" name="ra" value="a" checked="checked" /> <input type="radio" id="d2" name="ra"

随机推荐