JQuery के बीच अंतर। हेड () और .cs ("प्रदर्शन", "कोई नहीं")


81

क्या इसमें कोई अंतर है

jQuery('#id').show() and jQuery('#id').css("display","block")

तथा

jQuery('#id').hide() and jQuery('#id').css("display","none")

जवाबों:


95

jQuery ('# id')। css ("डिस्प्ले", "ब्लॉक")

displayसंपत्ति कई संभावित मान है, जो बीच में हैं हो सकता है block, inline, inline-block, और कई और अधिक

.show()विधि यह करने के लिए जरूरी निर्धारित नहीं करता है block, बल्कि क्या आप इसे परिभाषित (यदि सभी में) करने के लिए इसे रीसेट करता है।

JQuery के स्रोत कोड में, आप देख सकते हैं कि वे किस तरह displayसंपत्ति सेट कर रहे हैं "" (एक खाली स्ट्रिंग) यह जांचने के लिए कि यह किसी भी jQuery के हेरफेर से पहले क्या था: छोटा लिंक

दूसरी ओर, छिपाना के माध्यम से किया जाता है display: none;, इसलिए आप किसी बिंदु पर विचार कर सकते हैं .hide()और .css("display", "none")उसके बराबर हो सकते हैं।

यह किसी भी गोचा (प्लस, वे छोटे हैं) से बचने के लिए .show()और .hide()वैसे भी उपयोग करने के लिए अनुशंसित है ।


3
व्यापक चेक शो / छिपाने के प्रदर्शन के कारण, विधियां काफी धीमी हैं। यदि आप विधि को बार-बार कहते हैं, तो आप सीएसएस विधि का उपयोग करना चाह सकते हैं।
Gqqnbig

33

शो () और सीएसएस ({'डिस्प्ले': 'ब्लॉक'}) के बीच अंतर

यह मानते हुए कि शुरुआत में आपके पास यह है:

<span id="thisElement" style="display: none;">Foo</span>

जब तुमने फोन किया:

$('#thisElement').show();

आपको मिल जायेगा:

<span id="thisElement" style="">Foo</span>

जबकि:

$('#thisElement').css({'display':'block'});

कर देता है:

<span id="thisElement" style="display: block;">Foo</span>

हां, हां इसमें अंतर है।

छिपाने के बीच अंतर () और सीएसएस ({'प्रदर्शन': 'कोई नहीं'})

ऊपर के समान लेकिन इन्हें छिपाने () और प्रदर्शन में बदलें: 'कोई नहीं' ......

एक और अंतर जब .hide()प्रदर्शन संपत्ति के मूल्य को jQuery के डेटा कैश में सहेजा .show()जाता है , तो जब कहा जाता है, तो प्रारंभिक प्रदर्शन मूल्य बहाल हो जाता है!


6

: हाँ वहाँ दोनों के प्रदर्शन में एक फर्क है jQuery('#id').show()धीमी गति से है jQuery('#id').css("display","block")प्रदर्शन के रूप में jQuery कैश से प्रारंभिक अवस्था पुन: प्राप्त करने के लिए किया जा रहा है पूर्व के मामले अतिरिक्त काम में के रूप में किया जाता है एक द्विआधारी विशेषता यह हो सकता है नहीं inline, block, none, table, आदि समान के साथ मामला हैhide() विधि के ।

देखें: http://jsperf.com/show-vs-addclass


2
और जब पृष्ठ में बहुत अधिक प्रदर्शन और छिपाने का उपयोग किया जाता है तो प्रदर्शन महत्वपूर्ण हो जाता है।
एक्वासन

4

कोई फर्क नहीं

किसी पैरामीटर के साथ, .hide () विधि किसी तत्व को छिपाने का सबसे सरल तरीका है:

$ ('। लक्ष्य')) छिपाना (); मिलान किए गए तत्वों को तुरंत छिपा दिया जाएगा, जिसमें कोई एनीमेशन नहीं होगा। यह मोटे तौर पर कॉलिंग .css ('डिस्प्ले', 'कोई नहीं') के बराबर है, सिवाय इसके कि डिस्प्ले प्रॉपर्टी की वैल्यू को jQuery के डेटा कैश में सेव किया जाता है ताकि डिस्प्ले को बाद में इसकी शुरुआती वैल्यू पर रिस्टोर किया जा सके। यदि किसी तत्व में इनलाइन का प्रदर्शन मूल्य है, तो उसे छिपाया और दिखाया गया है, इसे एक बार फिर इनलाइन प्रदर्शित किया जाएगा।

शो के बारे में भी


सिवाय इसके कि आप .show()उचित displayसंपत्ति सेट करेंगे , जबकि आपको मैन्युअल रूप से उचित संपत्ति का चयन करना होगा,.css()
Cerbrus

3

हां, वहां एक अंतर है।

jQuery('#id').css("display","block") हमेशा उस तत्व को सेट करेगा जिसे आप ब्लॉक के रूप में दिखाना चाहते हैं।

jQuery('#id').show() वॉट एट है कि यह किस प्रकार का प्रदर्शन शुरू में था, प्रदर्शन: उदाहरण के लिए इनलाइन।

जेकरी डॉक्टर देखें


ध्यान दें कि यह केवल jQuery के बाद के संस्करणों में सच है। उदाहरण के लिए 1.3, इसके लिए सही नहीं है।
ट्रॉय अल्फोर्ड

2

आप स्रोत कोड पर एक नज़र डाल सकते हैं (यहाँ यह v1.7.2 है)।

एनीमेशन हम निर्धारित कर सकते हैं कि के अलावा, यह भी स्मृति में वर्ष प्रदर्शन शैली रखने (जो सभी मामलों में नहीं है block, यह भी हो सकता है inline, table-cell, ...)।


1

देख http://api.jquery.com/show/

कोई मापदंडों के साथ, .show () विधि एक तत्व प्रदर्शित करने का सबसे सरल तरीका है:

$ ('। लक्ष्य')) दिखाओ ();

मिलान किए गए तत्वों को बिना किसी एनीमेशन के तुरंत प्रकट किया जाएगा। यह मोटे तौर पर कॉलिंग .cs ('डिस्प्ले', 'ब्लॉक') के बराबर है, सिवाय इसके कि डिस्प्ले प्रॉपर्टी को जो भी शुरू में बहाल किया जाता है। यदि किसी तत्व में इनलाइन का प्रदर्शन मूल्य है, तो छिपाया और दिखाया गया है, यह एक बार फिर इनलाइन प्रदर्शित किया जाएगा।


अच्छी व्याख्या .. धन्यवाद :)
शशि कान्त
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.