寻找替代链式querySelector的jQuery元素选择方案

首先，你之前的jQuery代码失效的原因很简单：jQuery对象和原生DOM元素是不同的类型，classList是原生DOM元素的专属属性，不能直接调用jQuery对象的这个属性。

要替代你那行原生的链式querySelector代码，有两种常用的jQuery写法：

方法1：直接使用后代选择器（最简洁） #

jQuery的选择器本身就支持直接组合父元素和子元素的选择器，和CSS选择器规则完全一致，所以可以直接写成：

// 移除指定类
$("#login .form__message").removeClass("form__message--error");
// 如果是添加类的话，对应你原来尝试的add操作
$("#login .form__message").addClass("form__message--error");

方法2：模拟链式查找（对应原生的querySelector链式调用） #

如果你想更贴近原生代码的链式结构，可以用jQuery的.find()方法，它的作用和原生在父元素内调用querySelector查找子元素完全对应：

$("#login").find(".form__message").removeClass("form__message--error");

另外，如果你确实需要操作原生DOM元素（比如非要用classList），也可以从jQuery对象中取出原生元素再操作：

// 通过索引获取第一个匹配的原生元素
$("#login .form__message")[0].classList.remove("form__message--error");
// 或者用.get()方法
$("#login .form__message").get(0).classList.remove("form__message--error");

不过更推荐使用jQuery自带的.addClass()/.removeClass()方法，它们会自动处理多个匹配元素的情况（刚好符合你说的实际场景中可能存在多个.form__message元素的需求），不需要手动遍历。

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