document.querySelectorAll() a plusieurs incohérences entre les navigateurs et n'est pas pris en charge dans les navigateurs plus anciens,Ce ne sera probablement pas causer d'ennuis ont plus cours aujourd'hui. Il a très peu intuitive mécanisme de délimitation de l'étendue et de certains autres n'est pas très joli fonctionnalités. Aussi avec javascript, il aura plus de difficultés à travailler avec les ensembles de résultats de ces requêtes, qui, dans de nombreux cas, vous voudrez faire. jQuery fournit des fonctions pour travailler sur eux comme: filter(), find(), children(), parent(), map(), not() , et plusieurs autres. Pour ne pas mentionner le jQuery capacité à travailler avec des pseudo-sélecteurs de classe.
Cependant, je ne voudrais pas considérer ces choses comme jQuery les plus forts de fonctionnalités, mais d'autres choses comme "travail" sur le dom (événements, de style, de l'animation et de manipulation) dans un crossbrowser compatible façon ou de l'interface web ajax.
Si vous voulez seulement le sélecteur moteur de jQuery, vous pouvez utiliser l'une de jQuery: Grésillement de Cette façon, vous avez le pouvoir de jQuerys Sélecteur moteur sans le méchant de frais généraux.
EDIT:
Juste pour mémoire, je suis un énorme vanille JavaScript ventilateur. Néanmoins, il est un fait que vous avez parfois besoin de 10 lignes de JavaScript où vous l'écrire 1 ligne de jQuery.
Bien sûr, vous devez être discipliné pour ne pas écrire jQuery comme ceci:
$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green').end();
C'est extrêmement difficile à lire, tandis que le dernier est assez clair:
$('ul.first')
.find('.foo')
.css('background-color', 'red')
.end()
.find('.bar')
.css('background-color', 'green')
.end();
L'équivalent JavaScript serait beaucoup plus complexe illustré par le pseudo-code ci-dessus:
1) Trouver l'élément, envisager de prendre tous les éléments ou seulement sur la première.
// $('ul.first')
// taking querySelectorAll has to be considered
var e = document.querySelector("ul.first");
2) effectuer une Itération sur le tableau de nœuds enfants par le biais de certains (éventuellement imbriquées ou récursif) les boucles et vérifier la classe (classlist pas disponible dans tous les navigateurs!)
//.find('.foo')
for (var i = 0;i<e.length;i++){
// older browser don't have element.classList -> even more complex
e[i].children.classList.contains('.foo');
// do some more magic stuff here
}
3) appliquer le style css
// .css('background-color', 'green')
// note different notation
element.style.backgroundColor = "green" // or
element.style["background-color"] = "green"
Ce code serait au moins deux fois plus de lignes de code que vous écrivez avec jQuery. Aussi vous n'avez qu'à examiner les problèmes de navigateur qui risque de compromettre la grave avantage de vitesse (en plus de la fiabilité) du code natif.
