关于jQuery代码示例中attr("class")、split方法及classNames[1]作用的技术问询

首先先把你的代码贴出来方便对照：

$(document).ready(function() {
  $(".box").on("click", function() {
    var classNames = $(this).attr("class").split(" ");
    $("." + classNames[1]).css("background-color", "red");
  });
});

先搞懂两个关键方法：attr("class") 和 split(" ") #

• $(this).attr("class")：这是jQuery提供的属性获取方法，作用是拿到当前被点击元素的所有类名，返回的是一个字符串。比如你点击的.box元素如果写的是 <div class="box warning">，那这个方法就会返回 "box warning"。
• split(" ")：这是原生JavaScript的字符串方法，它会把传入的字符串按空格作为分隔符，拆分成一个数组。还是刚才的例子，"box warning"经过split(" ")处理后，就变成了数组 ["box", "warning"]，这就是classNames变量最终存的内容。

再看classNames赋值后的执行逻辑 #

当classNames变成数组后，classNames[1]取的是数组里的第二个元素（因为数组下标从0开始，classNames[0]是第一个类名box）。然后$("." + classNames[1])就相当于用这个类名创建了一个jQuery选择器，选中页面中所有带有这个类的元素。最后调用.css("background-color", "red")，就是把这些选中元素的背景色改成红色。

举个实际场景的例子 #

假设你的页面有这些元素：

<div class="box warning">点击我试试</div>
<p class="warning">我是带有warning类的段落</p>
<span class="warning">我也是warning类的文本</span>

当你点击第一个div时：

1. $(this).attr("class")得到字符串 "box warning"
2. split(" ")把它拆成数组 ["box", "warning"]
3. $(".warning")选中页面里的p和span元素
4. 最后把这两个元素的背景色改成红色

这样整个流程就通啦！本质就是通过点击元素的第二个类名，批量找到所有带该类的元素并修改样式。

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