मैं jQuery वस्तु और DOM तत्व के बीच संबंधों को समझना चाहूंगा।
जब jQuery एक तत्व देता है तो यह [object Object]एक चेतावनी के रूप में दिखाता है । जब getElementByIDकोई तत्व वापस आता है तो यह दिखाई देता है [object HTMLDivElement]। इसका सबसे सही मतलब क्या है? मेरा मतलब है कि वे दोनों एक अंतर वाली वस्तु हैं?
इसके अलावा क्या तरीकों jQuery वस्तु बनाम डोम तत्व पर काम कर सकते हैं? क्या कोई एकल jQuery ऑब्जेक्ट कई DOM तत्वों का प्रतिनिधित्व कर सकता है?
जवाबों:
मैं jQuery वस्तु और DOM तत्व के बीच संबंध को समझना चाहूंगा
एक jQuery वस्तु एक सरणी जैसी वस्तु है जिसमें DOM तत्व (s) होते हैं। एक jQuery ऑब्जेक्ट में आपके द्वारा उपयोग किए जाने वाले चयनकर्ता के आधार पर कई DOM तत्व हो सकते हैं।
इसके अलावा क्या तरीकों jQuery वस्तु बनाम डोम तत्व पर काम कर सकते हैं? क्या कोई एकल jQuery ऑब्जेक्ट कई DOM तत्वों का प्रतिनिधित्व कर सकता है?
jQuery फ़ंक्शंस (एक पूरी सूची वेबसाइट पर है) jQuery ऑब्जेक्ट्स पर संचालित होती है न कि DOM तत्वों पर। आप .get()सीधे इच्छित सूचकांक पर तत्व का उपयोग करके या एक jQuery फ़ंक्शन के अंदर DOM तत्वों का उपयोग कर सकते हैं:
$("selector")[0] // Accesses the first DOM element in this jQuery object
$("selector").get(0) // Equivalent to the code above
$("selector").get() // Retrieve a true array of DOM elements matched by this selector
दूसरे शब्दों में, आपको निम्न परिणाम प्राप्त करने चाहिए:
<div id="foo"></div>
alert($("#foo")[0]);
alert($("#foo").get(0));
alert(document.getElementById("foo"));
JQuery ऑब्जेक्ट के बारे में अधिक जानकारी के लिए, दस्तावेज़ देखें । इसके लिए दस्तावेज़ीकरण भी देखें.get()
जब आप DOM तत्व प्राप्त करने के लिए jQuery का उपयोग करते हैं, तो jQuery ऑब्जेक्ट रिटर्न में तत्व का संदर्भ होता है। जब आप एक देशी फ़ंक्शन का उपयोग करते हैं getElementById, तो आपको सीधे एक jQuery ऑब्जेक्ट में निहित तत्व का संदर्भ मिलता है।
एक jQuery वस्तु एक सरणी जैसी वस्तु है जिसमें कई DOM तत्व हो सकते हैं:
var jQueryCollection = $("div"); //Contains all div elements in DOM
उपरोक्त लाइन jQuery के बिना किया जा सकता है:
var normalCollection = document.getElementsByTagName("div");
वास्तव में, यह ठीक उसी तरह है जब आप एक साधारण चयनकर्ता में पास होने पर jQuery आंतरिक रूप से करेंगे div। आप getविधि का उपयोग करके एक jQuery संग्रह के भीतर वास्तविक तत्वों का उपयोग कर सकते हैं :
var div1 = jQueryCollection.get(0); //Gets the first element in the collection
जब आपके पास एक तत्व, या तत्वों का सेट होता है, तो एक jQuery ऑब्जेक्ट के अंदर, आप jQuery एपीआई में उपलब्ध किसी भी तरीके का उपयोग कर सकते हैं, जबकि जब आपके पास कच्चा तत्व होता है तो आप केवल देशी जावास्क्रिप्ट विधियों का उपयोग कर सकते हैं।
मैंने पिछले महीने ही मुश्किल से jQuery के साथ खेलना शुरू किया था, और मेरे दिमाग में एक समान प्रश्न घूम रहा था। अब तक आपके द्वारा प्राप्त सभी उत्तर वैध और डॉट पर हैं, लेकिन एक बहुत सटीक उत्तर यह हो सकता है:
मान लें कि आप किसी फ़ंक्शन में हैं, और कॉलिंग तत्व को संदर्भित करने के लिए, आप या तो उपयोग कर सकते हैं this, या $(this); लेकिन क्या अंतर है? जब आप उपयोग करते हैं, तो आप एक jQuery वस्तु के अंदर $(this)लपेट रहे हैं this। लाभ यह है कि एक बार एक वस्तु एक jQuery वस्तु है, आप उस पर सभी jQuery कार्यों का उपयोग कर सकते हैं।
यह बहुत शक्तिशाली है, क्योंकि आप तत्वों का एक स्ट्रिंग प्रतिनिधित्व भी लपेट सकते हैं, var s = '<div>hello <a href='#'>world</a></div><span>!</span>'एक jQuery ऑब्जेक्ट के अंदर बस इसे सचमुच $ में लपेटकर () $(s):। अब आप jQuery के साथ उन सभी तत्वों को जोड़ सकते हैं।
अधिकांश jQuery के सदस्य के Functionsपास रिटर्न वैल्यू नहीं है, बल्कि वर्तमान jQuery Objectया किसी अन्य को लौटाता है jQuery Object।
इसलिए,
console.log("(!!) jquery >> " + $("#id") ) ;
वापस आ जाएगी [object Object], यानी एक jQuery Objectजो संग्रह जो चयनकर्ता के मूल्यांकन का परिणाम है का कहना है String( "#id"के खिलाफ) Document,
जबकि ,
console.log("(!!) getElementById >> " + document.getElementById("id") ) ;
लौटेगा [object HTMLDivElement](या वास्तव [object Object]में IE में) क्योंकि / यदि रिटर्न मान ए है div Element।
इसके अलावा क्या तरीकों jQuery वस्तु बनाम डोम तत्व पर काम कर सकते हैं? (1) क्या एक अकेला jQuery ऑब्जेक्ट कई DOM तत्वों का प्रतिनिधित्व कर सकता है? (2)
(1) FunctionjQuery में सदस्य s का एक मेजबान है जो DOM Objects से संबंधित है । Imo करने के लिए सबसे अच्छी बात यह है Functionकि एक विशिष्ट कार्य (जैसे Nodes का चयन करना या जोड़ तोड़ करना) के लिए एक बार प्रासंगिक के लिए jQuery एपीआई प्रलेखन खोजें ।
(2) हां, एक एकल jQuery Objectकई DOM Elements की सूची बनाए रख सकता है । इस स्वचालित कैशिंग व्यवहार पर कई Functions(जैसे कि jQuery.findया jQuery.each) हैं।
[object Object]अभी भी एक div Elementहालांकि होगा। यदि jQuery के साथ चुना जाता है तो यह एक होगा jQuery Object।
यह सिर्फ आपका ब्राउज़र चालाक है। वे दोनों वस्तुएं हैं, लेकिन डूमल विशेष वस्तुएं हैं। jQuery सिर्फ एक जावास्क्रिप्ट ऑब्जेक्ट में डॉगल लपेटता है।
यदि आप अधिक डिबग जानकारी प्राप्त करना चाहते हैं, तो मैं आपको फायरबग के लिए फायरबग और क्रोम के बिल्ट-इन इंस्पेक्टर (फायरबग के समान) के लिए डिबगिंग टूल देखने की सलाह देता हूं।
इसके अलावा जो उल्लेख किया गया है, मैं इस बारे में कुछ जोड़ना चाहूंगा कि jQuery ऑब्जेक्ट को विवरण के अनुसार क्यों आयात किया जाता है jQuery-वस्तु
तत्व विधियों का कार्यान्वयन ब्राउज़र विक्रेताओं और संस्करणों में भिन्न होता है।
एक उदाहरण के रूप में, सेट करें innerHTML इंटरनेट एक्सप्लोरर के अधिकांश संस्करणों में तत्व का काम नहीं कर सकता है।
आप भीतर के HTML को jQuery के तरीके से सेट कर सकते हैं और jQuery आपको ब्राउज़र के अंतर को छिपाने में मदद करेगा।
// Setting the inner HTML with jQuery.
var target = document.getElementById( "target" );
$( target ).html( "<td>Hello <b>World</b>!</td>" );
jQuery, डेवलपर के अनुभव को सुचारू बनाने के लिए jQuery ऑब्जेक्ट से जुड़ी विधियों की एक सूची प्रदान करता है, कृपया उनमें से कुछ की जाँच करें http://api.jquery.com/ के तहत । वेबसाइट एक सामान्य डोम हेरफेर भी प्रदान करती है, आइए देखें कि इसमें संग्रहीत तत्व कैसे डाला जाएnewElementtarget दोनों तरह से तत्व के बाद ।
डोम रास्ता,
// Inserting a new element after another with the native DOM API.
var target = document.getElementById( "target" );
var newElement = document.createElement( "div" );
target.parentNode.insertBefore( newElement, target.nextSibling );
JQuery रास्ता,
// Inserting a new element after another with jQuery.
var target = document.getElementById( "target" );
var newElement = document.createElement( "div" );
$( target ).after( newElement );
आशा है कि यह एक पूरक है।