Una cosa que quiero dejar absolutamente claro en esta serie es que ninguno de nosotros debería ser anti-JavaScript vanilla. "Vainilla" significa JavaScript "crudo" o "nativo". JavaScript que se ejecuta en el navegador sin marcos ni bibliotecas ni nada más. De hecho, si esto no es obvio, jQuery está escrito en JavaScript vanilla. Tiene que serlo para que funcione. Estoy seguro de que internamente llama a sus propios métodos y cosas así, pero en el fondo "es solo JavaScript".
Como regla general, si estoy trabajando en un sitio en el que se usa un puñado de JavaScript para realizar algunas tareas pequeñas (por ejemplo, ocultar / mostrar algunas cosas), aprendería a no usar una biblioteca como jQuery. Cualquier cosa más allá de eso y la biblioteca valdrá su peso. De hecho, nunca he trabajado en ningún sitio web no trivial que no use jQuery.
Independientemente de si está trabajando en un sitio que lo tiene o no, es bueno aprender al menos los conceptos básicos de JavaScript vanilla. Me gusta bastante este artículo de NetTuts + que muestra equivalentes (y otro bueno). Hago referencia a este con regularidad:
$('a').on('click', function() ( ));es esencialmente esto:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));Comenzando en el video, teníamos un botón como este:
ButtonY como lo hemos hecho una y otra vez, tenemos una referencia como esta:
$("#press");Para obtener ese elemento en JavaScript vainilla, podríamos:
document.getElementById("press");Esas cosas no son del todo equivalentes porque la versión de jQuery es en realidad un objeto de jQuery, lo que significa que puede hacer todas esas cosas especiales de jQuery (por ejemplo, todos los métodos de jQuery). Pero es exactamente lo mismo que:
$("#press")(0);Es importante saber que cuando tenemos una referencia a un elemento como ese, tenemos todo tipo de información útil al respecto. Perdone el enorme bloque, pero vale la pena conducir este hogar. Esto es solo algo de lo que obtenemos de esa referencia de botón (tomado de 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__: HTMLButtonElementEn el video, hablamos sobre el uso tagName, que puede ser útil cuando está determinando si está viendo el elemento correcto en un evento (a veces, los eventos pueden activarse en elementos anidados y debe asegurarse).
También observamos algunos enlaces de eventos de la "vieja escuela" con cosas como configurar la onclickpropiedad. Es problemático por lo fácil que es sobrescribirlo. Ni siquiera tenemos que pensar (mucho) en esas cosas con jQuery porque sus métodos de enlace de eventos no sobrescriben a otros. Buen diseño de API.
Con respecto a la búsqueda de elementos, también hay getElementsByClassName, querySelector y querySelectorAll (que incluso existe debido a bibliotecas como jQuery) que vale la pena conocer.
¡Puede aprender sobre JavaScript vanilla en jQuery! Paul Irish tiene algunos buenos videos sobre las cosas que ha aprendido al ver su fuente.