Eine Sache, die ich in dieser Reihe absolut klarstellen möchte, ist, dass keiner von uns anti-vanilleartigem JavaScript sein sollte. „Vanille“ bedeutet „rohes“ oder „natives“ JavaScript. JavaScript, das im Browser ohne Frameworks, Bibliotheken oder sonstiges läuft. Tatsächlich ist, wenn das nicht offensichtlich ist, jQuery selbst in vanilleartigem JavaScript geschrieben. Es muss es sein, um zu funktionieren. Ich bin sicher, dass es intern manchmal seine eigenen Methoden und dergleichen aufruft, aber im Kern „ist es nur JavaScript“.
Als Faustregel gilt: Wenn ich an einer Website arbeite, die eine Handvoll JavaScript verwendet, um einige kleine Aufgaben zu erledigen (z. B. einige Dinge ein-/ausblenden), würde ich eher *keine* Bibliothek wie jQuery verwenden. Alles darüber hinaus und die Bibliothek ist ihr Gewicht wert. Tatsächlich habe ich noch nie an einer nicht trivialen Website gearbeitet, die jQuery nicht verwendet hätte.
Unabhängig davon, ob Sie an einer Website arbeiten, die es hat oder nicht, ist es gut, zumindest die Grundlagen in vanilleartigem JavaScript zu lernen. Ich mag diesen NetTuts+-Artikel sehr, der Entsprechungen zeigt (und einen weiteren guten). Ich verweise regelmäßig auf diesen
$('a').on('click', function() { });ist im Wesentlichen das
[].forEach.call( document.querySelectorAll('a'), function(el) {
el.addEventListener('click', function() { }, false);
});Beginnend im Video hatten wir einen Button wie diesen
<button id="press">Button</button>Und wie wir es jetzt immer wieder getan haben, haben wir eine Referenz darauf so erhalten
$("#press");Um dieses Element in vanilleartigem 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 die speziellen jQuery-Funktionen (z. B. jede einzelne jQuery-Methode) ausführen kann. Aber es *ist* genau dasselbe wie
$("#press")[0];Es ist wichtig zu wissen, dass wir, wenn wir eine Referenz auf ein Element wie dieses haben, alle Arten von nützlichen Informationen darüber haben. Entschuldigen Sie den riesigen Block, aber es lohnt sich, dies deutlich zu machen. Hier ist nur ein Teil dessen, was wir von dieser Button-Referenz erhalten (wie aus den 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 id="press">Button</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__: HTMLButtonElementIm Video berühren wir die Verwendung von tagName, was nützlich sein kann, wenn Sie bestimmen, ob Sie das richtige Element in einem Ereignis betrachten (manchmal können Ereignisse auf verschachtelten Elementen ausgelöst werden und Sie müssen sicherstellen).
Wir betrachten auch einige „Old-School“-Ereignisbindungen mit Dingen wie dem Setzen der onclick-Eigenschaft. Das ist problematisch, weil es so einfach zu überschreiben ist. Mit jQuery müssen wir uns nicht einmal (viel) Gedanken darüber machen, da seine Methoden zur Ereignisbindung keine anderen überschreiben. Yay gutes API-Design.
Beim Finden von Elementen gibt es auch getElementsByClassName, querySelector und querySelectorAll (die es sogar wegen Bibliotheken wie jQuery gibt), die alle wissenswert sind.
Sie können von jQuery selbst etwas über vanilleartiges JavaScript lernen! Paul Irish hat einige gute Videos über Dinge, die er gelernt hat, indem er sich den Quellcode angesehen hat.