描述正则表达式
正则表达式 (RegExp) 是用于匹配字符串中的字符组合的模式。
它们在 JavaScript 中也被视为对象。
它们与 RegExp 的 exec 和 test 方法以及 String 的替换、匹配、搜索和拆分方法一起使用。
正则表达式获得四个可选标志，它们可以单独使用或者以任何顺序一起使用，并作为正则表达式的一部分包含在内。
在本教程中，我们将学习使用 JavaScript 更改元素类的方法。
在 JavaScript 中，选择元素的标准方法是使用 document.getElementById("Id")。
当然，也可以通过其他方式获取元素，并且在某些情况下，使用这种方式。
要用一个或者多个类替换所有现有类，我们应该设置 className 属性，如下所示：
document.getElementById("My_Element").className = "My_Class";
为了在不影响/删除现有值的情况下向元素添加类，我们应该添加一个空格和一个新的类名，如下所示：
document.getElementById("My_Element").className += " My_Class";
为了在不影响其他潜在类的情况下删除元素的单个类，需要使用正则表达式替换，如下所示：
document.getElementById("My_Element").className = document.getElementById("My_Element").className.replace(/(?:^|\s)My_Class(?!\S)/g, '')
这个正则表达式的解释如下：
( ? : ^ | \s) # 匹配字符串的开头，或者任何单个空白字符MyClass #要删除的类名的文本
( ? !\S) # 否定向前看以验证以上是整个类名
# 确保没有非空格字符
如果类名已添加多次，则标志 g 命令根据需要重复替换。
上面使用的正则表达式也可用于检查特定类是否存在。
例如：
if(document.getElementById("My_Element").className.match(/(?:^|\s)MyClass(?!\S)/))
虽然可以在 HTML 事件属性中直接编写 JavaScript（例如，onclick="this.className+='My_Class'"），但不欢迎我们这样做。
特别是在较大的应用程序中，通过将 HTML 标记与 JavaScript 交互逻辑分离，可以获得更可持续的代码。
实现这一目标的第一步是创建一个函数并在 onclick 属性中调用它，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style type="text/css">
body {
text-align: center;
}
.oldClassName {
background-color: green;
}
.newClassName {
background-color: blue;
}
.pId {
margin-top: 30px;
}
#buttonId {
padding: 15px;
}
</style>
</head>
<body>
<h2>Chenge class name</h2>
<button class="oldClassName" id="buttonId" onclick="changeClass()">Click on Button</button>
<br>
<p id="pId">Old class name: oldClassName </p>
<script type="text/javascript">
function changeClass() {
document.getElementById('buttonId').className = "newClassName";
let button_class = document.getElementById('buttonId').className;
document.getElementById('pId').innerHTML = "New class name: " + button_class;
}
</script>
</body>
</html>
第二步是使用 addEventListener 将 onclick 事件从 HTML 移到 JavaScript 中，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style type="text/css">
body {
text-align: center;
}
.oldClassName {
background-color: green;
}
.newClassName {
background-color: blue;
}
.pId {
margin-top: 30px;
}
#buttonId {
padding: 15px;
}
</style>
</head>
<body>
<h2>Chenge class name</h2>
<button class="oldClassName" id="buttonId">Click on Button</button>
<br>
<p id="pId">Old class name: oldClassName </p>
<script type="text/javascript">
function changeClass() {
document.getElementById('buttonId').className = "newClassName";
let button_class = document.getElementById('buttonId').className;
document.getElementById('pId').innerHTML = "New class name: " + button_class;
}
window.onload = function() {
document.getElementById("buttonId").addEventListener('click', changeClass);
}
</script>
</body>
</html>
我们还可以使用 jQuery 更改类，如下所示：
$('#My_Element').addClass('My_Class');
$('#My_Element').removeClass('My_Class');
if ($('#My_Element').hasClass('My_Class'))
此外，jQuery 可以提供一个添加类的快捷方式，如果它不适用，或者删除一个类，这样做，就像这里：
$('#My_Element').toggleClass('My_Class');
此外，我们还可以选择使用 jQuery 将函数分配给单击事件，如下所示：
$('#My_Element').click(changedClass);
或者，不需要 id：
$(':button:contains(Button)').click(changedClass);