इस श्रृंखला में एक बात मैं बिल्कुल स्पष्ट कर देना चाहता हूं कि हममें से किसी को भी वैनिला विरोधी नहीं होना चाहिए। "वेनिला" का अर्थ है "कच्चा" या "देशी" जावास्क्रिप्ट। जावास्क्रिप्ट जो ब्राउज़र में बिना किसी फ्रेमवर्क या लाइब्रेरी या अन्य किसी चीज़ के चलता है। वास्तव में, यदि यह स्पष्ट नहीं है, तो jQuery स्वयं वेनिला जावास्क्रिप्ट में लिखा गया है। यह काम करना है। मुझे यकीन है कि आंतरिक रूप से यह स्वयं के तरीके और ऐसे कभी-कभी कॉल करता है, लेकिन मूल "यह सिर्फ जावास्क्रिप्ट है"।
अंगूठे के एक नियम के रूप में, अगर मैं एक साइट पर काम कर रहा हूं जिसमें कुछ छोटे कार्यों (जैसे कुछ चीजों को छिपाने / दिखाने) को पूरा करने के लिए जावास्क्रिप्ट का उपयोग करता है, तो मैं jQuery जैसी लाइब्रेरी का उपयोग नहीं करने की दिशा में सीखूंगा। ऊपर और उसके पार और पुस्तकालय से बाहर कुछ भी उसके वजन के लायक होगा। वास्तव में, मैंने कभी भी किसी भी गैर-तुच्छ वेबसाइट पर काम नहीं किया है जो jQuery का उपयोग नहीं करता है।
भले ही आप उस साइट पर काम कर रहे हों, जिसमें यह है या नहीं, यह कम से कम वेनिला जावास्क्रिप्ट में मूल बातें सीखने के लिए एक अच्छी बात है। मुझे यह NetTuts + लेख काफी पसंद है जो समकक्ष (और एक और अच्छा) दिखाता है। मैं इसे नियमित रूप से संदर्भित करता हूं:
$('a').on('click', function() ( ));अनिवार्य रूप से यह है:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));वीडियो में शुरू, हम इस तरह एक बटन था:
Buttonऔर जैसा कि हमने अब तक किया है, हमें इसका संदर्भ इस तरह मिला:
$("#press");वेनिला जावास्क्रिप्ट में वह तत्व प्राप्त करने के लिए हम कर सकते हैं:
document.getElementById("press");वे चीजें काफी समतुल्य नहीं हैं क्योंकि jQuery संस्करण वास्तव में एक jQuery ऑब्जेक्ट है जिसका अर्थ है कि यह सभी विशेष jQuery के सामान (जैसे हर एक jQuery विधि) कर सकता है। लेकिन यह ठीक उसी तरह है जैसे:
$("#press")(0);यह जानना महत्वपूर्ण है कि जब हमारे पास किसी तत्व का संदर्भ होता है, तो हमारे पास इसके बारे में सभी प्रकार की उपयोगी जानकारी होती है। विशाल ब्लॉक को माफ करें, लेकिन इस घर को चलाने के लिए इसके लायक है। यहाँ केवल कुछ है जो हम उस बटन संदर्भ से प्राप्त करते हैं (जैसा कि Google Chrome DevTools से लिया गया है):
accessKey: "" attributes: NamedNodeMap autofocus: false baseURI: "http://s.codepen.io/pen/secure_iframe?turn_off_js=&mobile=false" childElementCount: 0 childNodes: NodeList(1) children: HTMLCollection(0) classList: DOMTokenList className: "" clientHeight: 23 clientLeft: 2 clientTop: 0 clientWidth: 58 contentEditable: "inherit" dataset: DOMStringMap dir: "" disabled: false draggable: false firstChild: text firstElementChild: null form: null formAction: "" formEnctype: "" formMethod: "" formNoValidate: false formTarget: "" hidden: false id: "press" innerHTML: "Button" innerText: "Button" isContentEditable: false labels: NodeList(0) lang: "" lastChild: text lastElementChild: null localName: "button" name: "" namespaceURI: "http://www.w3.org/1999/xhtml" nextElementSibling: script nextSibling: text nodeName: "BUTTON" nodeType: 1 nodeValue: null offsetHeight: 23 offsetLeft: 0 offsetParent: body offsetTop: 0 offsetWidth: 62 onabort: null onbeforecopy: null onbeforecut: null onbeforepaste: null onblur: null onchange: null onclick: null oncontextmenu: null oncopy: null oncut: null ondblclick: null ondrag: null ondragend: null ondragenter: null ondragleave: null ondragover: null ondragstart: null ondrop: null onerror: null onfocus: null oninput: null oninvalid: null onkeydown: null onkeypress: null onkeyup: null onload: null onmousedown: null onmouseenter: null onmouseleave: null onmousemove: null onmouseout: null onmouseover: null onmouseup: null onmousewheel: null onpaste: null onreset: null onscroll: null onsearch: null onselect: null onselectstart: null onsubmit: null onwebkitfullscreenchange: null onwebkitfullscreenerror: null outerHTML: "Button" outerText: "Button" ownerDocument: document parentElement: body parentNode: body prefix: null previousElementSibling: null previousSibling: text pseudo: "" scrollHeight: 23 scrollLeft: 0 scrollTop: 0 scrollWidth: 58 shadowRoot: null spellcheck: true style: CSSStyleDeclaration tabIndex: 0 tagName: "BUTTON" textContent: "Button" title: "" translate: true type: "submit" validationMessage: "" validity: ValidityState value: "" webkitPseudo: "" webkitRegionOverset: "undefined" webkitShadowRoot: null webkitdropzone: "" willValidate: true __proto__: HTMLButtonElementवीडियो में हम उपयोग करने पर स्पर्श करते हैं tagName, जो तब उपयोगी हो सकता है जब आप यह निर्धारित कर रहे हों कि आप किसी ईवेंट में सही तत्व देख रहे हैं (कभी-कभी ईवेंट्स नेस्टेड तत्वों पर ट्रिगर हो सकते हैं और आपको सुनिश्चित करने की आवश्यकता है)।
हम कुछ "पुराने स्कूल" इवेंट को भी देखते हैं, जैसे कि onclickसंपत्ति सेट करना । इसे ओवरराइट करना कितना आसान है, इसकी वजह से यह समस्याग्रस्त है। हमें jQuery के साथ उस सामान के बारे में सोचने (बहुत) करने की ज़रूरत नहीं है क्योंकि यह घटना बाध्यकारी तरीकों से दूसरों को अधिलेखित नहीं करता है। Yay अच्छा एपीआई डिजाइन।
तत्वों को खोजने के बारे में, getElementsByClassName, querySelector, और querySelectorAll (जो कि jQuery जैसी पुस्तकालयों के कारण भी मौजूद है) के बारे में जानने योग्य हैं।
आप jQuery से ही वेनिला जावास्क्रिप्ट के बारे में जान सकते हैं! पॉल आयरिश के पास कुछ अच्छे वीडियो हैं जो उन्होंने अपने स्रोत को देखकर सीखा है।