jquery - jQueryの:hiddenと:not(:visible)の違い

Question

両方の jQuery セレクターが非表示の要素 (widthまたはheight0, display: none, の親) に一致することを知っており、docsdisplay: noneで同じ結果が得られることを暗示していると思います。

読みやすさの理由から、むしろ使用:hiddenしたいのですが、知りたいのは次のとおりです。

考慮すべき潜在的な落とし穴はありますか?
常にまったく同じ結果が得られますか?
どちらのオプションがより優れたパフォーマンスを発揮しますか?

score 55 · Accepted Answer

EDIT 3/22/2016: 回答に追加: jQuery 1.12/2.2 および 3.0 (*回答の最後を参照)
EDIT 3/8/2016: 回答を強化

要素は、いくつかの理由で非表示と見なされます。

それらの CSSdisplay値はnoneです。
それらは、を持つフォーム要素type="hidden"です。
それらの幅と高さは明示的に 0 に設定されています。
先祖要素は隠されているため、要素はページに表示されません。

visibility: hiddenまたはの要素は、引き続きレイアウト内のスペースを消費するopacity: 0ため、表示されていると見なされます。要素を非表示にするアニメーション中、要素はアニメーションの最後まで表示されていると見なされます。

ドキュメントに含まれていない要素は、表示されているとは見なされません。jQuery には、適用可能なスタイルに依存するため、ドキュメントに追加されたときにそれらが表示されるかどうかを知る方法がありません。

セレクターはセレクターの:hidden反対です:visible。したがって、によって選択されたすべての要素はによって:hidden選択されず:visible、その逆も同様です。

要素を表示するアニメーション中、要素はアニメーションの開始時に表示されていると見なされます。

jQuery 1.3.2 で決定方法:hiddenが変更されました。要素またはその親のいずれかがドキュメント内のスペースを消費しない場合、その要素は非表示であると見なされます。CSS の可視性は考慮されていません

「幅または高さが 0 に等しい」という明確化- 一部のブラウザー (opera) が一部のインスタンスで 0 未満を報告するため、jQuery が<=0内部的に使用するため、厳密には正しくありません。

考慮すべき潜在的な落とし穴はありますか?
常にまったく同じ結果が得られますか?
どちらのオプションがより優れたパフォーマンスを発揮しますか?

1: 私が気づいていない明らかな「落とし穴」以外は、やや主観的なものです。これは、コード内の「ネガティブ」テスト (x または !x 型チェックではない) を回避しようとするためです。これは、等価チェックが私の脳にとってより直感的に理解できるためです。

2: はい、結果は同じはずです

3: Re: パフォーマンスの違い: RE: 1.10.1 バージョン

可視条件チェックは非表示を内部的に使用します:

jQuery.expr.filters.visible = function( elem ) {
    return !jQuery.expr.filters.hidden( elem );
};

したがって、厳密に言えば、「非表示」の状態を回避する「非表示」の方が効率的であると言えます。

内部的には、jQuery は「右から左」のセレクターを使用するため、場合によってはセレクターがより大きな違いを生みます。

パフォーマンスのために、使用

$(selector).filter(':hidden')

また

$(selector).not(':visible')

どちらかではなく

$('selector:not(:visible)')

また

$('selector:hidden')

どうしてこれなの？は jQuery 拡張機能であるため、ネイティブ DOMメソッド:hiddenによって提供されるパフォーマンスの向上を利用できません。querySelectorAll()(どのように発生するかについては、Sizzle エンジンの右から左への解析を参照してください)

セレクターの形状・フォーマット

これは、$('selector:hidden')フォームが選択されるためです (DOM のウォーク)。

すべての隠し要素を最初に、
次に、そのセットからセレクターに一致するものを選択します。最初にセレクターを一致させてから、そのセット内の非表示のものをフィルタリングすることをお勧めします。

内部「isHidden」関数: (jQuery 1.10.1)

function isHidden( elem, el ) {
    // isHidden might be called from jQuery#filter function;
    // in that case, element will be second argument
    elem = el || elem;
    return jQuery.css( elem, "display" ) === "none" || !jQuery.contains( elem.ownerDocument, elem );
}

たとえば、次の.showHideような内部で使用されます。

if ( elem.style.display === "" && isHidden( elem ) ) {

の「非表示」属性defaultPrefilterは次のとおりです。

hidden = elem.nodeType && isHidden( elem ),

スタイルに関する特記事項:

要素 CSS を次のように設定します。

document.getElementById("hide-me").style.visibility = "hidden";

非常に高速です。

これを非常に高速に検出することもできます。

document.getElementById("hide-me").style.visibility  === "hidden";

ただし、要素はまだスペースを占有document.getElementById("hide-me").style.display = "block";しているように見えますが、一部のPARENT が表示されない可能性があるため、要素がまだ「非表示」と見なされる可能性があることに注意してください-jQuery はこれを検出します (上記を参照)。

追加参照: https://api.jquery.com/hidden-selector/

追加情報: jQuery 1.12/2.2 および 3.0 2016 年 3 月 22 日編集

これらのバージョンでは、速度が大幅に向上しています。

この投稿を参照してください: https://github.com/jquery/jquery/issues/2042
関連資料: https://github.com/jquery/sizzle/issues/315#issuecomment-74336936

この変更により、速度が最大1600% 向上します。可能な場合はキャッシングを利用することにより、これらのセレクターでよく発生することがわかりました。この領域で改善が必要な場合や懸念がある場合は、両方でページをテストし、ページ内で頻繁に使用されている場合はユースケースをテストしてください。

その結果、.show()とのパフォーマンスが向上するはずです。.hide()

jQuery 1.12 以降、2.2.0 以降、および 3.0 では、フィルタ:visibleと:hiddenフィルタの意味が変更されています。:visibleレイアウトボックスがある場合、要素は考慮されます。これには、幅や高さがゼロのものが含まれます。セレクターの場合、カウントに注意してください。例: コンテンツのないインライン要素と要素がフィルターbrによって選択されるようになりました。:visible

ページマークアップの例:

<div>
</div>
<span></span>
<br />
<p>
</p>

次のセクターで:

var visibleElementCount = $('body').find(':visible').length;

jQuery 1.11.1 および 2.1.4 では、値 2 を返します。visibleElementCount
jQuery 1.12+ および 2.2.0+ および 3.0 では、に対して 4 を取得しますvisibleElementCount。ページの破壊的変更である可能性があるため、この事実に依存する場合はテストしてください。

score 5 · Accepted Answer

うーん..面白い:)

:hidden = :not(:visible) = css selector 'display: none;'

さて、いくつかの他の事実：

ページ内のcss セレクター'visibility: hidden;' = 'opacity: 0;' = not displayですがoccupy space.

css セレクター'display: none;' = not showing in pageとnot occupying space.

'display: none'jQueryによって、スタイルを持つ要素で遊ぶことができます

HTML の例:

<input type='text' class='display' value='Display' />

CSS の例:

.display{
  display: none;
}

小切手：

alert($('.display').val());// Display

$('.display').val('Hello');

alert($('.display').val());// Hello

jquery - jQueryの:hiddenと:not(:visible)の違い

3 に答える 3

セレクターの形状・フォーマット

スタイルに関する特記事項:

追加情報: jQuery 1.12/2.2 および 3.0 2016 年 3 月 22 日編集

Related

Reference