如何将原生JS代码转为jQuery语法？解惑current变量[0]的作用

嘿，作为JS新手遇到这种问题太正常了，别担心，我帮你拆解清楚～

一、为什么要给current加[0]？ #

你提到的current[0]，核心原因是原生JS里的某些元素选择方法返回的是「类数组集合」，而非单个DOM元素：

• 在W3C的示例中，current应该是通过document.getElementsByClassName("active")或者document.querySelectorAll(".active")这类方法获取的。这些方法会返回所有匹配选择器的元素组成的集合（比如HTMLCollection或NodeList），哪怕页面上只有一个符合条件的元素，它依然是一个集合类型。
• 集合类型不能直接像单个DOM元素那样操作className这类属性，必须从中取出具体的元素才行。[0]就是取这个集合里的第一个元素（也是你示例里唯一的那个「被点击的数字/按钮」对应的元素），把它转换成可直接操作的原生DOM对象，这样才能修改它的类名或其他属性。

举个原生代码的片段例子（对应W3C常见的按钮激活场景）：

var current = document.getElementsByClassName("active");
// 此时current是一个HTMLCollection集合，必须取[0]才能拿到具体元素
current[0].className = current[0].className.replace(" active", "");

二、把原生JS转成jQuery语法的示例 #

jQuery封装了很多DOM操作的细节，写起来会简洁很多，不用手动处理集合的索引问题。假设你的原生代码是实现「点击按钮切换active类」的功能，对应的jQuery版本如下：

原生JS示例（参考W3C常见代码） #

var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

转成jQuery后的代码 #

// 给所有.btn按钮绑定点击事件
$('#myBtnContainer .btn').on('click', function() {
  // 移除所有带有active类的元素的active类（jQuery会自动遍历集合）
  $('.active').removeClass('active');
  // 给当前点击的按钮添加active类
  $(this).addClass('active');
});

为什么jQuery不用加[0]？ #

• jQuery选择器（比如$('.active')）返回的是jQuery对象，它本身就支持批量操作。调用removeClass('active')时，jQuery会自动遍历所有匹配的元素，帮你完成移除类的操作，不用手动取集合里的元素。
• 如果你需要从jQuery对象里取出原生DOM元素，也可以用$('.active')[0]或者$('.active').get(0)，效果和原生的current[0]一样。

内容的提问来源于stack exchange，提问作者Kiril Mladenov