jQueryの.hide（）と表示するCSSの設定の違い：なし

どっちがいいの？.hide()は書き出すよりも速いです.css("display", "none")が、違いは何ですか？また、どちらも実際にHTML要素に対して何をしているのですか？

.hide（）に関するjQueryページから：

「一致した要素はすぐに非表示になり、アニメーションは表示されません。これは.css（ 'display'、 'none'）を呼び出すのとほぼ同じですが、表示プロパティの値がjQueryのデータキャッシュに保存され、後で表示できるようになります。初期値に復元します。要素の表示値がインラインの場合、非表示にして表示すると、要素は再びインラインで表示されます。

したがって、以前の値に戻すことができることが重要である場合は、以前の状態が記憶されるため、displayより適切に使用できhide()ます。それ以外は違いはありません。

$(function() {
    $('.hide').click(function(){
        $('.toggle').hide();
        setDisplayValue();
    });
    $('.show').click(function(){
        $('.toggle').show();
        setDisplayValue();
    });
});

function setDisplayValue() {
    var display = $('.toggle')[0].style.display;
    $('.displayvalue').text(display);
}

div {
    display: table-cell;
    border: 1px solid;
    padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
    <button class="hide">Hide</button>
    <button class="show">Show</button>
</p>

<div class="toggle">Lorem Ipsum</div>

<p>
    The display value of the div is:
    <span class="displayvalue"></span>
</p>

.hide()は、以前の displayプロパティをに設定する直前に保存します。そのため、要素のnone標準displayプロパティでなかった場合は、少し安全ですが、.show()その保存されたプロパティを何に戻るかとして使用します。だから...それはいくつかの余分な仕事をしますが、あなたがたくさんの要素をしているのでなければ、速度の違いは無視できるはずです。

jQueryコードを見ると、次のことが起こります。

hide: function( speed, easing, callback ) {
    if ( speed || speed === 0 ) {
        return this.animate( genFx("hide", 3), speed, easing, callback);

    } else {
        for ( var i = 0, j = this.length; i < j; i++ ) {
            var display = jQuery.css( this[i], "display" );

            if ( display !== "none" ) {
                jQuery.data( this[i], "olddisplay", display );
            }
        }

        // Set the display of the elements in a second loop
        // to avoid the constant reflow
        for ( i = 0; i < j; i++ ) {
            this[i].style.display = "none";
        }

        return this;
    }
},

彼らは同じものです。.hide()jQuery関数を呼び出し、それにコールバック関数を追加できます。したがって、.hide()たとえばアニメーションを追加できます。

.css("display","none")要素の属性をに変更しますdisplay:none。これは、JavaScriptで以下を実行する場合と同じです。

document.getElementById('elementId').style.display = 'none';

.hide()この関数は、明らかに、コールバック関数、スピード、などのためにそれをチェックして実行するために多くの時間がかかります...

両方を使用するのは良い答えです。またはどちらの問題でもありません。

利点の両方を使用したのは、ということであるCSSがすぐに要素を非表示になりますページのロード時。jQuery .hideは、1/4秒間要素をフラッシュしてから非表示にします。

ページの読み込み時に要素を表示しない場合は、CSSを使用してdisplay：noneを設定し、jQuery .hide（）を使用します。要素を切り替える予定の場合は、jQuery toggleを使用できます。

どちらもすべてのブラウザで同じように動作します。ChromeとFirefoxでチェックされ、どちらも要素の属性に追加さdisplay:noneれstyleます。

基本的な非表示メソッドを使用しても違いはありません。しかし、jqueryは、要素に効果を与えるさまざまな非表示メソッドを提供します。詳細な説明については、以下のリンクを参照してください： Jqueryで非表示にするための効果