jQuery与原生JavaScript选择HTML元素集合用法对比分析

jQuery是一种快速、简洁的JavaScript库，可以兼容各种浏览器。它在选择DOM元素时，提供了一系列易于使用的方法，易于理解而且代码量少。但是相对于原生JavaScript来说，使用jQuery选择元素集合的代码量会更多一些。下面我们来分析jQuery和原生JavaScript选择HTML元素集合的用法对比。

文档选择器

jQuery

在jQuery中，选择器是其最强大的特性之一。可以使用CSS样式、元素类型、属性，以及文档的层次结构等来选择元素。

// 使用id选择器
$("#myId")

// 使用class选择器
$(".myClass")

// 复合选择器
$("div.myClass")

// 属性选择器
$('input[name="first_name"]')

原生JavaScript

在原生JavaScript中，querySelector和querySelectorAll是最常用的选择器，与jQuery中选择器的用法几乎一致。

// 使用id选择器
document.querySelector("#myId");

// 使用class选择器
document.querySelectorAll(".myClass");

// 复合选择器
document.querySelectorAll("div.myClass");

// 属性选择器
document.querySelectorAll('input[name="first_name"]');

实时反馈

jQuery

当使用jQuery选择HTML元素集合时，它会实时反馈选择结果。这意味着如果网页的内容有改变，jQuery将自动更新选择集合。

// 点击按钮添加元素
$('button').click(function() {
  $('ul').append('<li>New item</li>');
});

// 实时反馈选择结果，新添加的元素也被选中
$('ul li').click(function() {
  $(this).css('color', 'red');
});

原生JavaScript

在原生JavaScript中，querySelectorAll方法只会在页面首次加载时进行元素选择。如果页面内容被改变，就需要重新运行查询以更新选择结果。

// 点击按钮添加元素
document.querySelector('button').addEventListener('click', function() {
  let li = document.createElement('li');
  li.textContent = 'New item';
  document.querySelector('ul').appendChild(li);
});

// 元素点击事件
document.querySelectorAll('ul li').forEach(item =>
  item.addEventListener('click', function() {
    this.style.color = 'red';
  })
);

可以看出，使用jQuery选择HTML元素集合时，代码更为简洁，且会自动实时反馈选择结果。但是对于静态网页，使用原生JavaScript选择HTML元素集合并运行查询后，在运行时性能则更好。