How to replace all class names in jquery-JS Tutorial-php.cn

How to replace all class names in jquery

WBOY

Release： 2021-12-13 17:27:15

Original

3297 people have browsed it

Method: 1. Use the removeClass() method to delete all class names of the element. The syntax is "element object.removeClass();"; 2. Use the addClass() method to add the class name you want to replace. Yes, the syntax is "element object.addClasss("new class name");".

How to replace all class names in jquery

The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.

How to replace all class names in jquery

In jquery we can delete all class names of elements through the removeClass() method , and then use the addClass() method to add the class name you want to replace.

removeClass() method removes one or more classes from the selected element.

Note: If no parameters are specified, this method will remove all classes from the selected elements.

addClass() method adds one or more classes to the selected element.

This method does not remove the existing class attribute, but only adds one or more class attributes.

Tip: If you need to add multiple classes, please use spaces to separate class names.

The example is as follows:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".anniu1").click(function(){
    $("p").removeClass();
  });
    $(".anniu2").click(function(){
    $("p").addClass("intro2");
  });
});
</script>
<style type="text/css">
.intro1{
font-size:120%;
color:red;
}
.intro2{
font-size:200%;
color:pink;
}
</style>
</head>
<body>
<p class="intro1">This is a paragraph.</p>
<button class="anniu1">删除类</button>
<button class="anniu2">增加类</button>
</body>
</html>

Copy after login

Output result:

How to replace all class names in jquery

Related video tutorial recommendation: jQuery video tutorial

The above is the detailed content of How to replace all class names in jquery. For more information, please follow other related articles on the PHP Chinese website!