jQuery против document.querySelectorAll

Это потому, что jQuery может намного больше, чем querySelectorAll.

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

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

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

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

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

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

Режим причуд 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).

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

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

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

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

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

Вот сравнение, если я хочу применить тот же атрибут, например. скрыть все элементы класса «мой-класс». Это одна из причин использовать 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 () выбирает только первый соответствующий элемент, что делает его полезным только наполовину.

Старый вопрос, но спустя полдесятилетия к нему стоит вернуться. Здесь я обсуждаю только селекторный аспект jQuery.

document.querySelector[All] поддерживается всеми текущими браузерами, вплоть до IE8, поэтому совместимость больше не является проблемой. Я также не обнаружил проблем с производительностью, о которых стоит говорить (он должен был быть медленнее, чем document.getElementById, но мое собственное тестирование показывает, что он немного быстрее).

Поэтому, когда дело доходит до непосредственного управления элементом, предпочтительнее jQuery.

Например:

var element=document.querySelector('h1');
element.innerHTML='Hello';

значительно превосходит:

var $element=$('h1');
$element.html('hello');

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

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

Однако преимущество jQuery заключается в том, как он обрабатывает коллекции. Если требуется установить свойства нескольких элементов, jQuery имеет встроенный метод each, который позволяет что-то вроде этого:

var $elements=$('h2');  //  multiple elements
$elements.html('hello');

Чтобы сделать это с помощью Vanilla JavaScript, потребуется что-то вроде этого:

var elements=document.querySelectorAll('h2');
elements.forEach(function(e) {
    e.innerHTML='Hello';
});

что некоторые находят пугающим.

Селекторы jQuery также немного отличаются, но современные браузеры (за исключением IE8) не получат особой пользы.

Как правило, я предостерегаю от использования jQuery для новых проектов:

• jQuery - это внешняя библиотека, которая увеличивает накладные расходы проекта и увеличивает вашу зависимость от третьих лиц.
• Функция jQuery очень дорогостоящая с точки зрения обработки.
• jQuery навязывает методологию, которую необходимо изучить, и которая может конкурировать с другими аспектами вашего кода.
• jQuery медленно открывает новые функции в JavaScript.

Если ничего из вышеперечисленного не имеет значения, делайте то, что хотите. Однако jQuery уже не так важен для кроссплатформенной разработки, как раньше, поскольку современные JavaScript и CSS идут намного дальше, чем раньше.

Здесь не упоминаются другие функции jQuery. Однако я думаю, что и к ним нужно присмотреться.

как говорится на официальном сайте: "jQuery: меньше пишите, делайте больше, библиотека JavaScript"

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

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

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

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

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

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

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

Дело в том, что функция $ () создает массив, а затем разбивает его для вас, но с помощью document.querySelectorAll () он создает массив, и вы должны его разбить.

Просто прокомментируйте это, при использовании материального дизайна lite селектор jquery по какой-то причине не возвращает свойство для материального дизайна.

Для:

<div class="logonfield mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="myinputfield" required>
        <label class="mdl-textfield__label" for="myinputfield">Enter something..</label>
      </div>

Это работает:

document.querySelector('#myinputfield').parentNode.MaterialTextfield.change();

Это не так:

$('#myinputfield').parentNode.MaterialTextfield.change();