# 19: Det är bara JavaScript - CSS-tricks

En sak som jag vill göra helt klart i denna serie är att ingen av oss ska vara anti-vanilj JavaScript. "Vanilj" betyder "rå" eller "infödd" JavaScript. JavaScript som körs i webbläsaren utan ramar eller bibliotek eller något annat. I själva verket, om detta inte är uppenbart, skrivs jQuery i sig i vanilj JavaScript. Det måste vara att arbeta. Jag är säker på att det internt kallar att det är egna metoder och sådant ibland, men i grunden "det är bara JavaScript".

Som en tumregel skulle jag lära mig att inte använda ett bibliotek som jQuery om jag arbetar på en webbplats där jag använder en handfull JavaScript för att utföra några små uppgifter (t.ex. göm / visa några saker). Allt utöver det och biblioteket kommer att vara värt sin vikt. Jag har faktiskt aldrig arbetat på någon icke-trivial webbplats någonsin som inte använde jQuery.

Oavsett om du arbetar på en webbplats som har den eller inte, är det bra att lära sig åtminstone grunderna i vanilj JavaScript. Jag gillar den här NetTuts + -artikeln som visar motsvarigheter (och en annan bra). Jag refererar till den här regelbundet:

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

är i huvudsak detta:

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

Från och med videon hade vi en knapp så här:

Button

Och som vi har gjort om och om igen nu har vi en hänvisning till det så här:

$("#press");

För att få det elementet i vanilj JavaScript kan vi:

document.getElementById("press");

Dessa saker är inte riktigt likvärdiga eftersom jQuery-versionen faktiskt är ett jQuery-objekt, vilket betyder att den kan göra alla de speciella jQuery-grejerna (t.ex. varje enskild jQuery-metod). Men det är exakt samma sak som:

$("#press")(0);

Det är viktigt att veta när vi har en hänvisning till ett sådant element, vi har all slags användbar information om det. Förlåt det enorma kvarteret, men det är värt det att köra hem. Här är bara några av vad vi får bort den knappreferensen (som hämtats från 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

I videon berör vi att använda tagName, vilket kan vara användbart när du bestämmer om du tittar på rätt element i en händelse (ibland kan händelser utlösas på kapslade element och du måste se till).

Vi tittar också på några "old school" -händelser med saker som att sätta onclickfastigheten. Det är problematiskt på grund av hur lätt det är att skriva över. Vi behöver inte ens tänka (mycket) på de sakerna med jQuery eftersom det är händelsebindningsmetoder som inte skriver över andra. Yay bra API-design.

När det gäller att hitta element finns det också getElementsByClassName, querySelector och querySelectorAll (som till och med finns på grund av bibliotek som jQuery) som alla är värda att veta om.

Du kan lära dig mer om vanilj JavaScript från jQuery själv! Paul Irish har några bra videor om saker som han har lärt sig genom att titta på källan.