jQuery 删除类

JavaScript 1年前 14

jQuery 中的 removeclass() 方法删除单个或多个类名。本教程演示了如何在 jQuery 中使用 removeclass() 方法。

jQuery 删除类

removeclass() 方法从一组元素或一组匹配元素中的每个 HTML 元素中删除单个类或多个类。该方法可以根据类的数量以多种方式使用。

请参阅下面的语法。

//Method 1:
removeClass( ClassName )
//Method 2:
removeClass( ClassNames )
//Method 3:
removeClass( function )
Function( Integer index, String className ) => String
//Method 4:
removeClass( function )
Function( Integer index, String className ) => String | Array

方法 1 删除一个或多个空格分隔的类，每个匹配元素的类属性。ClassName 参数是此方法的字符串。
方法 2 从一组匹配的元素中删除多个类。参数 ClassNames 是此方法的数组。
方法 3 删除从函数返回的一个或多个空格分隔的类。此方法将接收集合中元素的索引，旧的类值将作为参数。
4、方法 4 删除一个或多个空格分隔的类，这些类是函数返回的； className 可以是字符串或类数组。此方法还将接收集合中元素的索引，并且旧的类值将作为参数。

让我们试试 removeClass() 方法的示例。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery removeClass</title>
    <style>
    p {
        font-weight: bolder;
    }
    .FontSize {
        font-size: 25px;
    }
    .UnderLine {
        text-decoration: underline;
    }
    .Highlight {
        background: lightgreen;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
    <p class="FontSize UnderLine">Hello</p>
    <p class="FontSize UnderLine Highlight">This</p>
    <p class="FontSize UnderLine Highlight">is</p>
    <p class="FontSize UnderLine">Delftstack</p>
    <p class="FontSize UnderLine">Site</p>
    <script>
    $( "p" ).even().removeClass( "FontSize" );
    </script>
</body>
</html>

上面的代码包含多个段落，其中包含多个以空格分隔的类，包括 FontSize、UnderLine 和 Highlight。该代码将从偶数段落中删除 FontSize 类。

见输出：

jQuery 删除类

要删除多个以空格分隔的类，请参见下面的示例。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery removeClass</title>
    <style>
    p {
        font-weight: bolder;
    }
    .FontSize {
        font-size: 25px;
    }
    .UnderLine {
        text-decoration: underline;
    }
    .Highlight {
        background: lightgreen;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
    <p class="FontSize UnderLine">Hello</p>
    <p class="FontSize UnderLine Highlight">This</p>
    <p class="FontSize UnderLine Highlight">is</p>
    <p class="FontSize UnderLine">Delftstack</p>
    <p class="FontSize UnderLine">Site</p>
    <script>
    $( "p" ).even().removeClass( "FontSize UnderLine Highlight" );
    </script>
</body>
</html>

类似地，我们可以通过在 removeClass 方法中提供以空格分隔的类名来删除多个类。见输出：

jQuery 删除类

上面的代码从偶数段落中删除了类 FontSize、UnderLine 和 Highlight。

现在让我们尝试使用数组删除多个类。参见示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery removeClass</title>
    <style>
    p {
        font-weight: bolder;
    }
    .FontSize {
        font-size: 25px;
    }
    .UnderLine {
        text-decoration: underline;
    }
    .Highlight {
        background: lightgreen;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
    <p class="FontSize UnderLine">Hello</p>
    <p class="FontSize UnderLine Highlight">This</p>
    <p class="FontSize UnderLine Highlight">is</p>
    <p class="FontSize UnderLine">Delftstack</p>
    <p class="FontSize UnderLine">Site</p>
    <script>
    $( "p" ).even().removeClass( ["FontSize", "UnderLine", "Highlight"] );
    </script>
</body>
</html>

上面的代码将具有与示例 2 相同的输出，因为在此示例中，相同的多个类在数组中提供给 removeclass 方法。见输出：

jQuery 删除类

没有任何参数的 removeClass 类将从给定元素中删除所有类。参见示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery removeClass</title>
    <style>
    p {
        font-weight: bolder;
    }
    .FontSize {
        font-size: 25px;
    }
    .UnderLine {
        text-decoration: underline;
    }
    .Highlight {
        background: lightgreen;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
    <p class="FontSize UnderLine">Hello</p>
    <p class="FontSize UnderLine Highlight">This</p>
    <p class="FontSize UnderLine Highlight">is</p>
    <p class="FontSize UnderLine">Delftstack</p>
    <p class="FontSize UnderLine">Site</p>
    <script>
    $( "p" ).odd().removeClass( );
    </script>
</body>
</html>

上面的代码将从奇数段中删除所有类。见输出：

jQuery 删除类

最后，以 function 作为参数的 removeClass 示例。参见示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery removeClass</title>
    <style>
    p {
        font-weight: bolder;
    }
    .FontSize {
        font-size: 25px;
    }
    .UnderLine {
        text-decoration: underline;
    }
    .Highlight {
        background: lightgreen;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
    <p class="FontSize UnderLine">Hello</p>
    <p class="FontSize UnderLine Highlight">This</p>
    <p class="FontSize UnderLine Highlight">is</p>
    <p class="FontSize UnderLine">Delftstack</p>
    <p class="FontSize UnderLine">Site</p>
    <script>
    $( "p" ).odd().removeClass(function(){
           return $(this).attr( "class" );
		   });
    </script>
</body>
</html>

上面的代码将从奇数段中删除所有类。见输出：

jQuery 删除类

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布，任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供，仅供学习和研究使用。如您对本站的相关版权有任何异议，或者认为侵犯了您的合法权益，请及时通知我们处理。