当CSS类改变时，在前端应用程序中触发事件是一项很常见的任务。使用jQuery可以轻松地实现这个目标，本文将介绍如何使用jQuery来检测和响应类的更改。
前提条件
在开始之前，请确保已经包含了最新版本的jQuery库。你可以从官方网站下载或者使用CDN链接。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
监听类的更改
为了监听类的更改，我们需要使用jQuery的 $(selector).on() 方法。该方法可以在元素上绑定事件处理程序，并在指定的事件发生时执行该处理程序。
以下示例演示了如何检测当类名为 "active" 的元素被添加到页面中时：
$(document).on('DOMNodeInserted', '.active', function() {
console.log('Class added: active');
});在上面的代码中，我们使用jQuery的 on() 方法来监听 DOMNodeInserted 事件，该事件表示一个元素被插入到文档中。然后，我们指定要监听的CSS类选择器 '.active'，并且当元素匹配此选择器时，会执行传递给 .on() 方法的回调函数。在此示例中，我们只是记录一个简单的消息到控制台。
同样的方式，我们也可以使用 DOMNodeRemoved 事件来监听当元素上的类被删除时的更改：
$(document).on('DOMNodeRemoved', '.active', function() {
console.log('Class removed: active');
});实时检测类的更改
上述代码只能在元素插入或删除后进行检测，但如果我们需要实时检测类的更改呢？jQuery也可以轻松地实现这个目标。
以下示例演示了如何使用jQuery的 $(selector).hasClass() 方法来检测一个元素是否包含指定的CSS类：
setInterval(function() {
if ($('.target').hasClass('active')) {
console.log('Class changed: active');
}
}, 100);在上面的代码中，我们使用了 setInterval() 方法来每隔100毫秒检查一次元素的 active 类。如果该类存在于 .target 元素中，则会记录一个简单的控制台消息。
结论
通过使用jQuery的 on() 和 hasClass() 方法，我们可以轻松地检测和响应CSS类的更改。这不仅使我们能够创建更动态和交互性的前端应用程序，还可以帮助我们更好地理解和掌握jQuery中的事件处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26146