非 jQuery 等价于：在 ​​JavaScript 中可见？

Posted 2023-02-21

【中文标题】非 jQuery 等价于：在 ​​JavaScript 中可见？

【英文标题】：non-jQuery equivalent of :visible in JavaScript?

【发布时间】：2012-03-27 03:11:57

【问题描述】：

所以 jQuery 提供了这个很棒的伪来在 DOM 中查询 ':visible'，不幸的是，它与 jQuery 和 Sizzle（或您可能使用的任何引擎）的核心紧密相关。当只知道给定元素时，纯 javascript 中是否有很好的等价物？

关于 jQuery 的提醒：可见规则：

它们的 CSS 显示值为 none。 它们是 type="hidden" 的表单元素。 它们的宽度和高度明确设置为 0。

祖先元素被隐藏，因此该元素不会显示在页面上。

注意：仅检查给定元素的样式并不总是有效：可能会隐藏父元素，而不是隐藏所有子元素。

【问题讨论】：

如果你有 jquery 为什么还要麻烦？

visibility: hidden; 不是等式的一部分吗？不知道等价物，但这是一个很短的函数。 -- @yes123 有时你需要一个函数而不是所有的核心框架作为开销。

Here jQuery 检查一个元素是否通过了选择器。

【参考方案1】：

您可以从source code获取相关代码：

jQuery.expr.filters.hidden = function( elem ) 
    var width = elem.offsetWidth,
        height = elem.offsetHeight;

    return ( width === 0 && height === 0 ) ||
           (!jQuery.support.reliableHiddenOffsets &&
           ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");
;

jQuery.css 可以替换为 getComputedStyle（或 .currentStyle 用于 IE）。 jQuery.support.reliableHiddenOffsets 是一个变量，用于确定属性是否可靠（IE8-）。

【讨论】：

@yes123 当元素不可见时，ofsetWidth 和 offsetHeight 属性为零。当父元素不可见时，元素也不可见。

【参考方案2】：

我只是先看看 jquery，因为它是 JavaScript。以下是实际代码：

if ( jQuery.expr && jQuery.expr.filters ) 

    // here is the real guts of it
    jQuery.expr.filters.hidden = function( elem ) 

        // plain old JavaScript determining offset
        var width = elem.offsetWidth,
        height = elem.offsetHeight;

        // if any of these are "true" then its "invisible"
        return ( width === 0 && height === 0 ) || 
        (!jQuery.support.reliableHiddenOffsets && 
        ((elem.style && elem.style.display) || 
        jQuery.css( elem, "display" )) === "none");
    ;

    // this is just checking for not hidden
    jQuery.expr.filters.visible = function( elem ) 
        return !jQuery.expr.filters.hidden( elem );
    ;

“reliableHiddenOffsets”代码是在此之前定义的，您可以在下面看到它

isSupported = ( tds[ 0 ].offsetHeight === 0 );

tds[ 0 ].style.display = "";
tds[ 1 ].style.display = "none";

// Check if empty table cells still have offsetWidth/Height
// (IE <= 8 fail this test)
support.reliableHiddenOffsets = isSupported && ( tds[ 0 ].offsetHeight === 0 );

真正的教训是这些东西不是火箭科学。破解打开 jQuery 看看。 jQuery 的真正瑰宝在于它经过了如此艰苦的测试和敲击，以至于您可能不会发现它有任何问题。除了出色的选择器引擎和抽象之外，这还很有价值。不要害怕实际看。你会在这个过程中学到一些东西作为一个很好的副作用。

【参考方案3】：

我建议您至少使用一些可以为您工作的选择器库。否则，您只是在无缘无故地进行了测试并证明成功的事情上浪费了您的精力，而且您在最初的几次尝试中甚至可能会出错。

例如，Sizzle 在压缩/gzip 压缩后只有 4kb，所以我认为几乎没有理由不使用它。

【讨论】：

我几乎确定 Sizzle 不支持 :visible。