ejemplos - ¿Document.querySelector() de JavaScript igual que el método jQuery $()?

queryselector value

Question

Me he estado preguntando por qué las personas glorificaron el método jQuery $(".myClass") cuando JavaScript tiene un document.querySelector() genérico. ¿Hay algo que me falta aquí? ¿Por qué no usar el objeto del document ?

Soy completamente nuevo en JavaScript, entonces ¿hay algún tipo de estafa para document.querySelector() que no tenga conocimiento?

Realmente me gustaría saber, porque me encontré con algo así antes y me pregunto si podría ayudar una situación en la que estoy:

var retrieve = function( s ) {
    return document.querySelector( s );
};

retrieve(".myClass").style.display = "block";

Nota

No tengo nada en contra de jQuery en absoluto. De hecho, me encanta. Sin embargo, prefiero no engañarme a mí mismo con las herramientas listas para usar fáciles de usar cuando estoy tratando de aprender JavaScript.

¡Cualquier ayuda sería muy apreciada! :-)

Answer 1

Hace aproximadamente una década, los principales navegadores eran IE6, Netscape 8 y Firefox 1.5. En aquellos días, existían pequeñas formas de navegación cruzada para seleccionar un elemento del DOM además de Document.getElementById() .

Entonces, cuando jQuery fue lanzado en 2006 , fue bastante revolucionario. En aquel entonces, jQuery estableció el estándar sobre cómo seleccionar / cambiar elementos HTML y desencadenar eventos fácilmente, porque su flexibilidad y compatibilidad con el navegador no tenían precedentes.

Ahora, más de una década después, muchas características que hicieron tan popular a jQuery se han incluido en el estándar javaScript. En lugar de $selection.on() de jQuery, ahora puede usar EventTarget.addEventListener() . En lugar de jQuery''s $() , ahora puede usar Document.querySelectorAll() ... etc ... lo que nos lleva a preguntarnos por qué deberíamos usar jQuery. Y, de hecho, la gente se pregunta cada vez más si deberíamos usar jQuery en absoluto . Entonces, si crees que entiendes el JavaScript lo suficientemente bien como para prescindir de jQuery, ¡por favor hazlo! ¡No se sienta obligado a usar jQuery, solo porque muchos otros lo están haciendo!

De todos modos, para entender por qué jQuery es tan popular, ¡es importante entender de dónde venimos!

Answer 2

Soporte de navegador cruzado y heredado.

También puede usar getElementsByClassName () si no desea usar Jquery. Hay una respuesta a una publicación sobre devshed por usuario: KorRedDevil que puede ser de su interés.

Tomé su función de su publicación y la hice devolver una matriz. Después de tener esa matriz de elementos, todo lo que tiene que hacer es recorrerlos. Puedes probarlo here .

Javascript :

var retrieve = function(className) {
    return document.getElementsByClassName(className);
};

var elements = retrieve(''foo'');
for (var i = 0; i < elements.length; i++)
    elements[i].style.background = ''#dfd'';

Marcado

<p class="foo">foo</p>
<p class="bar">bar</p>
<p class="foo">foo</p>
<p class="foo">foo</p>
<p class="bar">bar</p>
<p class="bar">bar</p>