# 19: Es ist nur JavaScript - CSS-Tricks

Anonim

Eine Sache, die ich in dieser Serie unbedingt klarstellen möchte, ist, dass keiner von uns Anti-Vanille-JavaScript sein sollte. "Vanille" bedeutet "rohes" oder "natives" JavaScript. JavaScript, das im Browser ohne Frameworks, Bibliotheken oder andere Elemente ausgeführt wird. Wenn dies nicht offensichtlich ist, ist jQuery selbst in Vanille-JavaScript geschrieben. Es muss sein, um zu arbeiten. Ich bin mir sicher, dass es intern manchmal eigene Methoden und dergleichen nennt, aber im Kern ist es nur JavaScript.

Als Faustregel gilt: Wenn ich an einer Site arbeite, auf der eine Handvoll JavaScript verwendet wird, um einige kleine Aufgaben zu erledigen (z. B. einige Dinge ausblenden / anzeigen), würde ich lernen, keine Bibliothek wie jQuery zu verwenden. Alles darüber hinaus und die Bibliothek werden ihr Gewicht wert sein. Tatsächlich habe ich noch nie an einer nicht trivialen Website gearbeitet, auf der jQuery nicht verwendet wurde.

Unabhängig davon, ob Sie an einer Site arbeiten, die diese hat oder nicht, ist es eine gute Sache, zumindest die Grundlagen in Vanille-JavaScript zu lernen. Ich mag diesen NetTuts + Artikel, der Äquivalente zeigt (und einen anderen guten). Ich beziehe mich regelmäßig darauf:

$('a').on('click', function() ( ));

ist im Wesentlichen das:

().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));

Ab dem Video hatten wir einen Button wie diesen:

Button

Und wie wir es jetzt immer und immer wieder getan haben, haben wir einen Hinweis darauf wie folgt:

$("#press");

Um dieses Element in Vanille-JavaScript zu erhalten, könnten wir:

document.getElementById("press");

Diese Dinge sind nicht ganz gleichwertig, da die jQuery-Version tatsächlich ein jQuery-Objekt ist, was bedeutet, dass sie all diese speziellen jQuery-Aufgaben ausführen kann (z. B. jede einzelne jQuery-Methode). Aber es ist genau das Gleiche wie:

$("#press")(0);

Es ist wichtig zu wissen, dass wir alle möglichen nützlichen Informationen darüber haben, wenn wir auf ein solches Element verweisen. Verzeihen Sie den riesigen Block, aber es lohnt sich, dieses Haus zu fahren. Hier ist nur ein Teil dessen, was wir aus dieser Schaltflächenreferenz erhalten (wie aus Google Chrome DevTools entnommen):

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

In dem Video gehen wir auf die Verwendung ein. Dies tagNamekann hilfreich sein, wenn Sie feststellen, ob Sie das richtige Element in einem Ereignis betrachten (manchmal können Ereignisse für verschachtelte Elemente ausgelöst werden, und Sie müssen dies sicherstellen).

Wir schauen uns auch einige „Old School“ -Ereignis an, die mit Dingen wie der Einrichtung des onclickGrundstücks verbunden sind. Es ist problematisch, weil es einfach zu überschreiben ist. Wir müssen mit jQuery nicht einmal (viel) darüber nachdenken, da die Methoden zur Ereignisbindung andere nicht überschreiben. Yay gutes API-Design.

In Bezug auf das Finden von Elementen gibt es auch getElementsByClassName, querySelector und querySelectorAll (die sogar aufgrund von Bibliotheken wie jQuery existieren), die alle wissenswert sind.

Sie können Vanille-JavaScript von jQuery selbst lernen! Paul Irish hat einige gute Videos über Dinge, die er aus der Quelle gelernt hat.