$ (Document.body) और $ ('बॉडी') के बीच अंतर

104

मैं एक jQuery शुरुआत कर रहा हूँ और कुछ कोड उदाहरणों के माध्यम से जा रहा हूँ जो मैंने पाया:

$(document.body) तथा $('body')

क्या इन दोनों में कोई अंतर है?

jquery document document-body

1

एक तेज है, हालांकि यह देखते हुए कि कभी भी एक पृष्ठ पर कुछ समय से अधिक नहीं बुलाया जाएगा, दोनों के बीच का अंतर बहुत छोटा है।

— केविन बी

$(body)के लिए काम नहीं करता है .on('click'..., घटनाओं, जबकि $(document.body)और $(document)दोनों काम करते हैं।

— rybo111

3

उपर्युक्त कथन गलत है और प्रदर्शन में भी छोटा अंतर है, $ (document.body) के पक्ष में लगभग 10%। आप तुलना यहाँ देख सकते हैं साइट पॉइंट

— body-

77

वे एक ही तत्व को संदर्भित करते हैं, अंतर यह है कि जब आप कहते document.bodyहैं कि आप तत्व को सीधे jQuery से पास कर रहे हैं। वैकल्पिक रूप से, जब आप स्ट्रिंग को पास करते हैं 'body', तो jQuery चयनकर्ता इंजन को यह पता लगाने के लिए स्ट्रिंग की व्याख्या करनी होती है कि वह किस तत्व (ओं) को संदर्भित करता है।

व्यवहार में या तो काम मिल जाएगा।

यदि आप रुचि रखते हैं, तो jQuery फ़ंक्शन के लिए प्रलेखन में अधिक जानकारी है ।

— जस्टिन एथियर
स्रोत

1

पहला बयान पूरी तरह से सही नहीं है। वे एक ही तत्व को संदर्भित कर सकते हैं। आमतौर पर भी। लेकिन हमेशा नहीं :)। नीचे मेरा जवाब देखें।

— jvenema

18

यहां उत्तर वास्तव में पूरी तरह से सही नहीं हैं । बंद करें, लेकिन एक किनारे का मामला है।

अंतर यह है कि $ ('बॉडी') वास्तव में टैग नाम से तत्व का चयन करता है, जबकि document.body दस्तावेज़ पर प्रत्यक्ष ऑब्जेक्ट का संदर्भ देता है।

इसका मतलब है कि यदि आप (या एक दुष्ट स्क्रिप्ट) डॉक्यूमेंट को ओवरराइट कर देते हैं। तत्व (शर्म!) $ ('बॉडी') अभी भी काम करेगा, लेकिन $ (डॉक्यूमेंट.बॉडी) नहीं होगा। तो परिभाषा के अनुसार वे समकक्ष नहीं हैं।

मैं यह अनुमान लगाने का उपक्रम करूंगा कि अन्य एज केस (जैसे आईई में विश्व स्तर पर आइडेंट एलिमेंट्स हैं) जो दस्तावेज़ ऑब्जेक्ट पर एक अधिलेखित बॉडी एलिमेंट को कितनी मात्रा में ट्रिगर करेंगे, और वही स्थिति लागू होगी।

— jvenema
स्रोत

मुझे नहीं लगता कि संभवतः इसके document.bodyअलावा किसी अन्य के लिए सेट करना संभव है <body>: i.imgur.com/unJVwXy.png

— एमपीएन

अब हल किया जा सकता है। एक समय था जब एफएफ और आईई आपको ऐसा करने देगा, और / या "बॉडी" की आईडी के साथ वस्तुओं से भ्रमित हो जाएगा (मुझे जो त्रुटि हुई वह एक प्लास्टिक सर्जन की साइट पर हमारी स्क्रिप्ट का उपयोग करने वाला ग्राहक था जिसे एक तस्वीर के साथ टैग किया गया था आईडी "शरीर")। उम्मीद है कि अब कोई मुद्दा नहीं है :)

— jvenema

12

मैंने अपने ब्राउज़र में परीक्षण करते समय समय में एक बहुत बड़ा अंतर पाया है।

मैंने निम्नलिखित स्क्रिप्ट का उपयोग किया:

चेतावनी: इसे चलाने से आपका ब्राउज़र थोड़ा मुक्त हो जाएगा, यहां तक कि दुर्घटना भी हो सकती है।

var n = 10000000, i;
i = n;
console.time('selector');
while (i --> 0){
    $("body");
}

console.timeEnd('selector');

i = n;
console.time('element');
while (i --> 0){
    $(document.body);
}

console.timeEnd('element');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

स्निपेट का विस्तार करें

मैंने 10 मिलियन इंटरैक्शन किए, और वे परिणाम (Chrome 65) थे:

चयनकर्ता: 19591.97509765625ms
तत्व: 4947.8759765625ms

चयनकर्ता को पास करने की तुलना में तत्व को सीधे पास करना लगभग 4 गुना तेज है।

— Phiter
स्रोत

7

आप सिर्फ "तीर संकेतन" के लिए एक उत्थान प्राप्त करते हैं, आप गाल फुलाते हैं!

— KlaymenDK

1

मैंने इसके बारे में कहीं पढ़ा था और मैं इसे तुरंत XD

— Phiter

हां, लेकिन - क्या आप वास्तव में 10 मिलियन बार ऐसा करने जा रहे हैं? इस तरह का विश्लेषण क्यों नहीं किया जाता है जहां यह मायने रखता है?

— स्क्रेनी

@ उन प्रदर्शन परीक्षण वास्तविक उपयोग के मामलों के बारे में नहीं हैं। इस तरह के तत्व पर 10 मिलियन ऑपरेशन करना काफी दुर्लभ है। लेकिन ओपी अंतर जानना चाहते थे और मैंने देखा कि प्रदर्शन में अंतर है, इसलिए मुझे लगता है कि यह ध्यान देने योग्य है।

— Phiter

9

$(document.body)documentएक संदर्भ पाने के लिए वैश्विक संदर्भ का उपयोग कर रहा है body, जबकि $('body')एक चयनकर्ता है जिसमें jQuery के <body>तत्व पर संदर्भ मिलेगा document।

कोई बड़ा अंतर जो मैं देख सकता हूं, न कि एक से दूसरे पर ध्यान देने योग्य प्रदर्शन लाभ।

— Gabe
स्रोत

9

$(document.body)इस लेख के अनुसार औसत रूप से तेज़ है: sitepoint.com/jquery-body-on-document-on

— स्टीव हैरिसन

6

इसमें कोई अंतर नहीं होना चाहिए, शायद पहले थोड़ा अधिक प्रदर्शन करने वाला है, लेकिन मुझे लगता है कि यह तुच्छ है (आपको इस बारे में चिंता नहीं करनी चाहिए, वास्तव में)।

दोनों के साथ आप <body>टैग को एक jQuery ऑब्जेक्ट में लपेटते हैं

— निकोला पेलुचेती
स्रोत

3

आउटपुटवाइज दोनों बराबर हैं। हालांकि दूसरी अभिव्यक्ति DOM रूट से एक शीर्ष डाउन लुकअप के माध्यम से जाती है। आप अतिरिक्त ओवरहेड (हालांकि यह हो सकता है कि माइनसक्यूल) से बचना चाहते हैं, यदि आपके पास पहले से ही दस्तावेज़ है। कोई भी वस्तु JQuery के ऊपर लपेटने के लिए हाथ में है। Http://api.jquery.com/jQuery/ #Selector प्रसंग देखें

— santon
स्रोत