通常当检查某物是否可见时, 您会立即直接去做其他事情。 jQuery 链条让事情变得容易。

所以,如果您有一个选择器, 并且只有显示或隐藏时才想要对它执行某些动作, 您可以使用filter(":visible")或filter(":hidden")然后用您想要采取的行动链绑住它。

所以,而不是一个if语句, 像这样的语句 :

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

或更有效率,但更丑陋:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

你可以单行完成所有任务:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

如果您想要检查页面上是否可见某个元素, 取决于其父的可见度, 您可以检查是否width和height本要素的数值均等于0.

jj 查询

$element.width() === 0 && $element.height() === 0

香草香草

element.clientWidth === 0 && element.clientHeight === 0

或

element.offsetWidth === 0 && element.offsetHeight === 0

只需检查布林值, 即可检查可见度, 例如 :

if (this.hidden === false) {
    // Your code
}

我为每个函数使用此代码。 否则您可以使用is(':visible')检查某一要素的可见度。

缩略:visible根据j 查询文档:

• 他们有一个CSSdisplay价值的数值none.
• 它们是构成元素的构成元素,type="hidden".
• 它们的宽度和高度明确定为0。
• 隐藏了祖先元素,所以该元素不在页面上显示。

具有下列要素的要件要件:visibility: hidden或opacity: 0认为是可见的,因为它们仍在布局中消耗空间。

在某些情况中,这有用,而在另一些情况中则无用,因为如果你想检查该元素是否可见(如果您想检查该元素是否可见) 。display != none无视家长的能见度 你会发现.css("display") == 'none'不仅速度更快,而且还会正确返回可见度检查。

如果您要检查可见度而不是显示, 您应该使用 :.css("visibility") == "hidden".

也考虑到附加 jQuery 注释:

因为:visible是 jQuery 扩展名,不属于 CSS 规格的一部分,使用:visible无法利用本地DOM提供的绩效提升querySelectorAll()方法。在使用:visible选择元素,首先使用纯 CSS 选择器选择元素,然后使用.filter(":visible").

而且,如果你对工作表现很关心,你应该检查一下现在你看到我... 表现/隐藏表现(2010-05-04)。并使用其他方法显示和隐藏元素。

如何如何元素可见度和jQuery 工作;

元素可以隐藏display:none, visibility:hidden或opacity:0这些方法之间的差异:

• display:none隐藏元素,且不占用任何空间;
• visibility:hidden隐藏元素,但它在布局中仍然占据空间;

• opacity:0将元素隐藏为“ 可见性: 隐藏” , 它仍然占载着布局的空间; 唯一的区别在于不透明让一个元素部分透明;

  if ($('.target').is(':hidden')) {
    $('.target').show();
  } else {
    $('.target').hide();
  }
  if ($('.target').is(':visible')) {
    $('.target').hide();
  } else {
    $('.target').show();
  }
  
  if ($('.target-visibility').css('visibility') == 'hidden') {
    $('.target-visibility').css({
      visibility: "visible",
      display: ""
    });
  } else {
    $('.target-visibility').css({
      visibility: "hidden",
      display: ""
    });
  }
  
  if ($('.target-visibility').css('opacity') == "0") {
    $('.target-visibility').css({
      opacity: "1",
      display: ""
    });
  } else {
    $('.target-visibility').css({
      opacity: "0",
      display: ""
    });
  }
  

  有用的 jQuery 切换方法 :

  $('.click').click(function() {
    $('.target').toggle();
  });
  
  $('.click').click(function() {
    $('.target').slideToggle();
  });
  
  $('.click').click(function() {
    $('.target').fadeToggle();
  });
  

要检查它是否不可见, 我使用它!:

if ( !$('#book').is(':visible')) {
    alert('#book is not visible')
}

或以下是 sam, 将 jQuery 选择器保存在一个变量中, 以便在您需要它多次时有更好的性能 :

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}