javascript - जावास्क्रिप्ट का document.querySelector()jQuery $()विधि के समान ही है?




dom model (3)

मैं सोच रहा हूं कि जावास्क्रिप्ट में जेनेरिक document.querySelector() लोगों ने jQuery की $(".myClass") विधि का $(".myClass") क्यों दिया $(".myClass") document.querySelector() । क्या मैं यहाँ कुछ याद कर रहा हूँ? document ऑब्जेक्ट का उपयोग क्यों न करें?

मैं जावास्क्रिप्ट के लिए पूरी तरह से नया हूं, तो क्या document.querySelector() कुछ प्रकार का कंस है जो मुझे पता नहीं है?

मैं वास्तव में जानना चाहता हूं, क्योंकि मैंने पहले इस तरह कुछ चलाया था और मैं सोच रहा हूं कि क्या यह ऐसी स्थिति में मदद कर सकता है जिसमें मैं हूं:

var retrieve = function( s ) {
    return document.querySelector( s );
};

retrieve(".myClass").style.display = "block";

ध्यान दें

मेरे पास jQuery के खिलाफ कुछ भी नहीं है। वास्तव में, मुझे यह पसंद है। हालांकि, जब मैं अभी जावास्क्रिप्ट सीखने की कोशिश कर रहा हूं, तो मैं आसानी से तैयार किए जाने वाले उपयोग के लिए आसान टूल का उपयोग करके खुद को धोखा नहीं दूंगा।

कोई भी सहायताकाफी प्रशंसनीय होगी! :-)


Answers

लगभग एक दशक पहले, शीर्ष ब्राउज़र आईई 6, नेटस्केप 8 और फ़ायरफ़ॉक्स 1.5 थे। उन दिनों में, Document.getElementById() अलावा डीओएम से तत्व का चयन करने के लिए थोड़ा क्रॉस-ब्राउज़र तरीके थे .getElementById Document.getElementById()

इसलिए, जब 2006 में jQuery को वापस जारी किया गया था , तो यह बहुत क्रांतिकारी था। उसके बाद, jQuery ने एचटीएमएल तत्वों को आसानी से चुनने / बदलने और घटनाओं को ट्रिगर करने के लिए मानक निर्धारित किया, क्योंकि इसकी लचीलापन और ब्राउज़र समर्थन अभूतपूर्व था।

अब, एक दशक बाद से, jQuery को इतना लोकप्रिय बनाने वाली कई विशेषताएं जावास्क्रिप्ट मानक में शामिल हो गई हैं। JQuery के $selection.on() EventTarget.addEventListener() बजाय, अब आप EventTarget.addEventListener() उपयोग कर सकते हैं। JQuery के $() के बजाय, अब आप Document.querySelectorAll() ... आदि का उपयोग कर सकते हैं ... जो सवाल पूछता है कि हमें jQuery का उपयोग क्यों करना चाहिए। और वास्तव में, लोग तेजी से सोच रहे हैं कि हमें jQuery का उपयोग करना चाहिए या नहीं । इसलिए, यदि आपको लगता है कि आप jQuery के बिना जावास्क्रिप्ट को पर्याप्त रूप से समझते हैं, तो कृपया करें! JQuery का उपयोग करने के लिए मजबूर महसूस न करें, सिर्फ इसलिए कि बहुत से लोग इसे कर रहे हैं!

वैसे भी, समझने के लिए कि jQuery इतना लोकप्रिय क्यों है, यह समझना महत्वपूर्ण है कि हम कहां से आ रहे हैं!


क्रॉस ब्राउज़र और विरासत समर्थन।

यदि आप Jquery का उपयोग नहीं करना चाहते हैं तो आप getElementsByClassName () का भी उपयोग कर सकते हैं। उपयोगकर्ता द्वारा devshed पर एक पोस्ट के लिए एक प्रतिक्रिया है: KorRedDevil जो आप के लिए ब्याज हो सकता है।

मैंने आपकी पोस्ट को अपनी पोस्ट से लिया और इसे एक सरणी वापस कर दिया। आपके पास तत्वों की उस सरणी के बाद, आपको बस इतना करना है कि उन पर लूप है। आप इसे आजमा सकते here

जावास्क्रिप्ट :

var retrieve = function(className) {
    return document.getElementsByClassName(className);
};

var elements = retrieve('foo');
for (var i = 0; i < elements.length; i++)
    elements[i].style.background = '#dfd';

मार्कअप :

<p class="foo">foo</p>
<p class="bar">bar</p>
<p class="foo">foo</p>
<p class="foo">foo</p>
<p class="bar">bar</p>
<p class="bar">bar</p>

असल में, यदि आप AngularJS का उपयोग कर रहे हैं, तो आपको अब jQuery की आवश्यकता नहीं है। AngularJS में बाध्यकारी और निर्देश है, जो कि आप jQuery के साथ कर सकते हैं ज्यादातर चीजों के लिए एक बहुत अच्छा "प्रतिस्थापन" है।

मैं आमतौर पर AngularJS और Cordova का उपयोग कर मोबाइल एप्लिकेशन विकसित करता हूं । JQuery की केवल एक चीज मुझे चयनकर्ता है।

गुगल करके, मैं देखता हूं कि वहाँ एक स्टैंडअलोन jQuery चयनकर्ता मॉड्यूल है। यह झींगा है।

और मैंने एक छोटा कोड स्निपेट बनाने का फैसला किया जो मुझे jQuery चयनकर्ता (Sizzle का उपयोग करके) के साथ AngularJS का उपयोग कर वेबसाइट शुरू करने में मदद करता है।

मैंने अपना कोड यहां साझा किया: https://github.com/huytd/Sizzular





javascript jquery dom model document