迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

jQuery 删除类

作者:迹忆客 最近更新:2024/03/24 浏览次数:

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

让我们试试 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>

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

见输出:

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

<!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 方法中提供以空格分隔的类名来删除多个类。见输出:

上面的代码从偶数段落中删除了类 FontSizeUnderLineHighlight

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

<!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 方法。见输出:

没有任何参数的 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>

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

最后,以 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>

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

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

用 jQuery 检查复选框是否被选中

发布时间:2024/03/24 浏览次数:98 分类:JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

jQuery 触发点击

发布时间:2024/03/24 浏览次数:175 分类:JavaScript

在今天的文章中,我们将学习 jQuery 中的触发点击事件。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便