JQuery vs document.querySelectorAll

Ответ 1

document.querySelectorAll() имеет несколько несоответствий в браузерах и не поддерживается в старых браузерах ^{Это, вероятно, больше не вызовет проблем в наши дни}. Он имеет очень неинтуитивный механизм видимости и некоторые другие не очень приятные функции. Кроме того, с javascript у вас труднее работать с наборами результатов этих запросов, что во многих случаях вы можете захотеть сделать. jQuery предоставляет функции для работы над ними, например: filter(), find(), children(), parent(), map(), not() и еще несколько. Не говоря уже о способности jQuery работать с селекторами псевдокласса.

Однако я бы не рассматривал эти вещи как самые сильные функции jQuery, но другие вещи, такие как "работа" над dom (события, стиль, анимация и манипуляция) в совместимом с crossbrowser или интерфейсе ajax.

Если вам нужен только механизм выбора из jQuery, вы можете использовать один сам jQuery, используя: Sizzle Таким образом, у вас есть мощность механизма выбора jQuerys без неприятных накладных расходов.

EDIT: Просто для записи, я огромный поклонник JavaScript с ванилью. Тем не менее, это факт, что вам иногда нужны 10 строк JavaScript, где вы должны писать 1 строку jQuery.

Конечно, вам нужно быть дисциплинированным, чтобы не писать jQuery следующим образом:

$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green').end();

Это очень сложно прочитать, в то время как последнее довольно ясно:

$('ul.first')
   .find('.foo')
      .css('background-color', 'red')
.end()
   .find('.bar')
      .css('background-color', 'green')
.end();

Эквивалентный JavaScript был бы намного более сложным, проиллюстрированным выше псевдокодом:

1) Найдите элемент, возьмите все элементы или только первые.

// $('ul.first')
// taking querySelectorAll has to be considered
var e = document.querySelector("ul.first");

2) Итерации по массиву дочерних узлов через некоторые (возможно, вложенные или рекурсивные) циклы и проверку класса (список классов недоступен во всех браузерах!)

//.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) примените стиль css

// .css('background-color', 'green')
// note different notation
element.style.backgroundColor = "green" // or
element.style["background-color"] = "green"

Этот код будет по крайней мере в два раза больше строк кода, который вы пишете с помощью jQuery. Также вам придется учитывать проблемы с кросс-браузером, которые могут скомпрометировать преимущество в скорости скорости (помимо надежности) собственного кода.

Ответ 2

Если вы оптимизируете свою страницу для IE8 или новее, вам стоит подумать, нужен ли вам jquery или нет. У современных браузеров есть много активов, изначально предоставляемых jquery.

Если вы заботитесь о производительности, вы можете получить невероятную производительность (на 2-10 быстрее), используя собственный javascript: http://jsperf.com/jquery-vs-native-selector-and-element-style/2

Я преобразовал div-tagcloud из jquery в собственный javascript (совместимый с IE8 +), результаты впечатляют. В 4 раза быстрее с небольшими накладными расходами.

                    Number of lines       Execution Time                       
Jquery version :        340                    155ms
Native version :        370                    27ms

Вам не нужно JQuery предоставляет действительно хороший обзор, какие родные методы заменяют версию браузера.

http://youmightnotneedjquery.com/

Приложение: Дальнейшие сравнения скорости, как собственные методы конкурируют с jquery

• Array: $.inArray vs Array.indexOf: JQuery на 24% медленнее

• DOM: $.empty vs Node.innerHtml: JQuery на 97% медленнее

• DOM: $.on vs Node.addEventListener: JQuery на 90% медленнее

• DOM: $.find vs Node.queryselectorall: JQuery на 90% медленнее

• Array: $.grep vs Array.filter: родной на 70% медленнее

• DOM: $.show/hide vs display none: JQuery на 85% медленнее

• AJAX: $.ajax vs XMLHttpRequest: JQuery на 89% медленнее

• Высота: $.outerHeight против offsetHeight: JQuery на 87% медленнее

• Attr: $.attr vs setAttribute: JQuery на 86% медленнее

Ответ 3

Чтобы понять, почему jQuery настолько популярен, важно понять, откуда мы пришли!

Около десяти лет назад главными браузерами были IE6, Netscape 8 и Firefox 1.5. В те дни было мало способов перекрестного браузера для выбора элемента из DOM, помимо Document.getElementById().

Итак, когда jQuery был выпущен еще в 2006 году, он был довольно революционным. Тогда jQuery установил стандарт для того, как легко выбирать/изменять элементы HTML и запускать события, поскольку его гибкость и поддержка браузера были беспрецедентными.

Теперь, более десятилетия спустя, многие функции, которые сделали JQuery настолько популярными, стали включены в стандарт javaScript:

• Вместо jQuery $() теперь вы можете использовать Document.querySelectorAll()
• Вместо jQuery $el.on() теперь вы можете использовать EventTarget.addEventListener()
• Вместо jQuery $el.toggleClass() вы можете теперь использовать Element.classList.toggle()
• ...

В 2005 году они вообще не были доступны. Тот факт, что они сегодня, очевидно, задает вопрос о том, почему мы должны использовать jQuery вообще. И действительно, люди все чаще задаются вопросом, следует ли вообще использовать jQuery.

Итак, если вы считаете, что понимаете JavaScript достаточно хорошо, чтобы обойтись без jQuery, пожалуйста, сделайте это! Не чувствуйте себя вынужденным использовать jQuery, просто потому, что так делают многие другие!

Ответ 4

jQuery Механизм выбора Sizzle может использовать querySelectorAll, если он доступен. Он также сглаживает несогласованности между браузерами для достижения единообразных результатов. Если вы не хотите использовать все jQuery, вы можете просто использовать Sizzle отдельно. Это довольно фундаментальное колесо для изобретательства.

Здесь некоторые вишневые подборки из источника, которые показывают, какие вещи jQuery (w/Sizzle) сортируются для вас:

Режим quirks Safari:

if ( document.querySelectorAll ) {
  (function(){
    var oldSizzle = Sizzle,
      div = document.createElement("div"),
      id = "__sizzle__";

    div.innerHTML = "<p class='TEST'></p>";

    // Safari can't handle uppercase or unicode characters when
    // in quirks mode.
    if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
      return;
    }

Если этот защитник терпит неудачу, он использует версию Sizzle, которая не улучшена с помощью querySelectorAll. Далее существуют специальные ручки для несоответствий в IE, Opera и браузере Blackberry.

  // Check parentNode to catch when Blackberry 4.6 returns
  // nodes that are no longer in the document #6963
  if ( elem && elem.parentNode ) {
    // Handle the case where IE and Opera return items
    // by name instead of ID
    if ( elem.id === match[3] ) {
      return makeArray( [ elem ], extra );
    }

  } else {
    return makeArray( [], extra );
  }

И если все остальное не получится, он вернет результат oldSizzle(query, context, extra, seed).

Ответ 5

Это потому, что jQuery может выполнять гораздо больше, чем querySelectorAll.

Прежде всего, jQuery (и Sizzle, в частности), работает для старых браузеров, таких как IE7-8, которые не поддерживают селекторов CSS2.1-3.

Кроме того, Sizzle (который является движком селектора за jQuery) предлагает вам множество более продвинутых селекторных инструментов, таких как псевдо-класс :selected, расширенный селектор :not(), более сложный синтаксис, например, в $("> .children") и т.д.

И он делает это кросс-браузеры, безупречно, предлагая все, что может предложить jQuery (плагины и API).

Да, если вы считаете, что можете полагаться на простые селектора классов и идентификаторов, jQuery слишком много для вас, и вы будете платить за преувеличенное вознаграждение. Но если вы этого не сделаете, и хотите воспользоваться всеми преимуществами jQuery, используйте его.

Ответ 6

Здесь сравнение, если я хочу применить тот же атрибут, например. скрыть все элементы класса "my-class". Это одна из причин использования jQuery.

JQuery

$('.my-class').hide();

JavaScript:

var cls = document.querySelectorAll('.my-class');
for (var i = 0; i < cls.length; i++) {
    cls[i].style.display = 'none';
}

Когда jQuery уже так популярен, они должны были сделать document.querySelector(), как и $(). Вместо этого document.querySelector() выбирает только первый соответствующий элемент, который делает его полезным только на полпути.

Ответ 7

С точки зрения ремонтопригодности кода существует несколько причин придерживаться широко используемой библиотеки.

Один из основных заключается в том, что они хорошо документированы и имеют такие сообщества, как... скажем... stackexchange, где можно найти помощь с библиотеками. С помощью специальной кодированной библиотеки у вас есть исходный код и, возможно, практический документ, если кодер больше времени не документировал код, чем записывал его, что исчезает редко.

Написание вашей собственной библиотеки может сработать для вас, но у стажера, сидящего на следующем столе, может быть легче ускользнуть с чем-то вроде jQuery.

Назовите это сетевым эффектом, если хотите. Это не означает, что код будет выше в jQuery; просто то, что краткий характер кода облегчает понимание общей структуры для программистов всех уровней навыков, хотя бы потому, что в просматриваемом файле отображается сразу один функциональный код. В этом смысле 5 строк кода лучше 10.

Подводя итог, я вижу основные преимущества jQuery как краткого кода и вездесущности.

Ответ 8

Я считаю, что истинным ответом является то, что jQuery был разработан задолго до того, как querySelector/querySelectorAll стал доступен во всех основных браузерах.

Первоначальный выпуск jQuery был в 2006 году. На самом деле даже jQuery не был первым, который реализовал селектор CSS.

IE был последним браузером для реализации querySelector/querySelectorAll. Его восьмая версия была выпущена в 2009 году.

Итак, теперь селектора элементов DOM больше не являются самой сильной точкой jQuery. Тем не менее, у него по-прежнему много полезных свойств, таких как ярлыки для изменения содержимого css и html-содержимого, анимации, привязки событий, ajax.

Ответ 9

как сообщает официальный сайт: "jQuery: запись меньше, больше, библиотека JavaScript"

попытайтесь транслировать следующий код jQuery без какой-либо библиотеки

$("p.neat").addClass("ohmy").show("slow");

Ответ 10

$("#id") vs document.querySelectorAll("#id")

Сделка с функцией $() делает массив, а затем разбивает его для вас, но с document.querySelectorAll() он создает массив, и вам нужно его разбить.