Једна ствар коју желим да потпуно разјасним у овој серији је да нико од нас не би требало да буде анти-ванилла ЈаваСцрипт. „Ванилија“ што значи „сирови“ или „изворни“ ЈаваСцрипт. ЈаваСцрипт који се покреће у прегледачу без икаквих оквира, библиотека или било чега другог. У ствари, ако ово није очигледно, сам јКуери је написан на ванилин ЈаваСцрипт-у. Мора бити, да би успело. Сигуран сам да интерно понекад назива сопствене методе и слично, али у основи је "то само ЈаваСцрипт".
По правилу, ако радим на веб локацији на којој користи прегршт ЈаваСцрипт-а за извршавање неких малих задатака (нпр. Сакривање / показивање неколико ствари), научио бих да не користим библиотеку попут јКуери-а. Све изнад и изнад тога и библиотека биће вредно своје тежине. У ствари, никада нисам радио на било којој нетривијалној веб локацији која никада није користила јКуери.
Без обзира да ли радите на веб локацији која је има или нема, добро је научити барем основе ванилин ЈаваСцрипт-а. Свиђа ми се овај НетТутс + чланак који показује еквиваленте (и још један добар). Редовно се позивам на ову:
$('a').on('click', function() ( ));је у суштини ово:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));Почевши од видеа, имали смо овакво дугме:
ButtonИ као што смо чинили изнова и изнова, добили смо референцу на то овако:
$("#press");Да бисмо добили тај елемент у ванилин ЈаваСцрипт-у, могли бисмо:
document.getElementById("press");Те ствари нису сасвим еквивалентне, јер је јКуери верзија заправо јКуери објект, што значи да може да уради све те посебне јКуери ствари (нпр. Сваки појединачни јКуери метод). Али то је потпуно иста ствар као:
$("#press")(0);Важно је знати када имамо референцу на такав елемент, имамо све врсте корисних информација о њему. Опростите на огромном блоку, али вредело је возити се кући. Ево само неких информација које смо добили од референце тог дугмета (преузето са Гоогле Цхроме ДевТоолс):
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имовине. Проблематично је због тога што је лако преписати. Не морамо чак ни да размишљамо (пуно) о тим стварима са јКуери-јем, јер то методе везивања догађаја не преписују друге. Добар дизајн АПИ-ја.
Што се тиче проналажења елемената, ту су и гетЕлементсБиЦлассНаме, куериСелецтор и куериСелецторАлл (који чак постоје и због библиотека попут јКуери) о којима вреди знати.
О ванили ЈаваСцрипт-у можете сазнати од самог јКуери-а! Паул Ирисх има неколико добрих видео записа о стварима које је научио гледајући његов извор.