प्रदर्शित करने के लिए jQuery के -hide () और सेटिंग सीएसएस के बीच अंतर: कोई नहीं

Question

मैं कौन सा बेहतर कर रहा हूं? .hide()बाहर लिखने से तेज है .css("display", "none"), लेकिन क्या अंतर है और दोनों वास्तव में HTML तत्व के लिए क्या कर रहे हैं?

Answer 1

.Hide पेज के बारे में .hide () से :

"मिलान किए गए तत्वों को तुरंत छिपा दिया जाएगा, जिसमें कोई एनीमेशन नहीं है। यह लगभग कॉलिंग .css ('डिस्प्ले', 'कोई नहीं') के बराबर है, सिवाय इसके कि प्रदर्शन संपत्ति का मूल्य 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>

Comments

समस्या का उपयोग करते हुए .हाइड को पुनः लोड करने के बाद तत्व 2 सेकंड में दिखने वाला तत्व छिपा देता है

— TM

Answer 2

.hide()पिछली display संपत्ति को इसे स्थापित करने से ठीक पहले संग्रहीत करता है none, इसलिए यदि यह displayउस तत्व के लिए मानक संपत्ति नहीं थी, जो आप थोड़ा सुरक्षित हैं, .show()तो उस संग्रहीत संपत्ति का उपयोग उस पर वापस करने के लिए किया जाएगा। तो ... यह कुछ अतिरिक्त काम करता है, लेकिन जब तक आप तत्वों के टन नहीं कर रहे हैं , गति अंतर नगण्य होना चाहिए।

Answer 3

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;
    }
},

Answer 4

वे एक जैसी ही चीज हैं। .hide()jQuery फ़ंक्शन को कॉल करता है और आपको इसमें कॉलबैक फ़ंक्शन जोड़ने की अनुमति देता है। तो, .hide()आप उदाहरण के लिए एक एनीमेशन जोड़ सकते हैं।

.css("display","none")तत्व की विशेषता को बदलता है display:none। यह वैसा ही है जैसे आप जावास्क्रिप्ट में निम्नलिखित करते हैं:

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

.hide()समारोह स्पष्ट रूप से यह कॉलबैक कार्यों के लिए चेक, गति, आदि के रूप में चलाने के लिए अधिक समय लगता है ...

Answer 5

दोनों का उपयोग करने के लिए का एक अच्छा जवाब है; यह या तो का सवाल नहीं है।

दोनों का उपयोग करने का लाभ यह है कि सीएसएस तत्व को तुरंत छिपा देगा पेज लोड होने पर । JQuery .hide एक सेकंड के एक चौथाई के लिए तत्व को फ्लैश करेगा और फिर इसे छिपाएगा।

उस स्थिति में जब हम चाहते हैं कि तत्व न दिखाए जब पृष्ठ लोड हो जाए तो हम CSS और सेट डिस्प्ले का उपयोग कर सकते हैं: कोई नहीं और jQuery का उपयोग करें। यदि हम उस तत्व को टॉगल करने की योजना बनाते हैं, जिसका उपयोग हम jQuery टॉगल के लिए कर सकते हैं।

Answer 6

दोनों सभी ब्राउज़रों पर एक ही करते हैं, AFAIK। क्रोम और फ़ायरफ़ॉक्स पर जाँच की, दोनों तत्व display:noneकी styleविशेषता के लिए संलग्न हैं ।

Answer 7

देखें कि क्या आप बुनियादी छिपाने की विधि का उपयोग करते हैं तो कोई अंतर नहीं है। लेकिन jquery विभिन्न छिपाने की विधि प्रदान करता है जो तत्व को प्रभाव देते हैं। विस्तृत विवरण के लिए नीचे दिए गए लिंक को देखें: Jquery में छिपाने के लिए प्रभाव