博客

jQuery addClass()方法

  • Post category:jquery

下面是关于jQuery addClass()方法的完整攻略。

一、概述

jQuery addClass() 方法用于向选定的元素添加一个或多个类名。该方法可帮助您更好地控制网页的样式。

二、语法

addClass() 方法语法如下：

$(selector).addClass(classname,function(index,currentclass){})

参数：
– classname 必需，添加到指定元素的一个或多个类名。多个类名用空格分隔。
– function(index,currentclass) 可选，规定添加类名的函数。该函数返回一个或多个要添加到指定元素的类名。

三、示例1：为元素添加一个类名

下面的示例演示了如何向文档中 id 为 “test” 的元素添加一个类名 “highlight”：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery addClass 方法示例1</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style type="text/css">
    .highlight{
        color:red;
    }
    </style>
</head>
<body>
    <div id="test">Hello world!</div>
    <button onclick="doAddClass()">点击添加类名</button>
    <script>
        function doAddClass(){
            $("#test").addClass("highlight");
        }
    </script>
</body>
</html>

当点击页面中的按钮时，页面中的文本 “Hello world!” 将变成红色。

四、示例2：将多个类名添加到元素

下面的示例演示了如何向文档中 id 为 “test2” 的元素添加多个类名：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery addClass 方法示例2</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style type="text/css">
    .highlight1{
        color:red;
    }
    .highlight2{
        background-color:yellow;
    }
    </style>
</head>
<body>
    <div id="test2">Hello world!</div>
    <button onclick="doAddClass()">点击添加类名</button>
    <script>
        function doAddClass(){
            $("#test2").addClass("highlight1 highlight2");
        }
    </script>
</body>
</html>

当点击页面中的按钮时，页面中的文本 “Hello world!” 将变成红色并带有黄色背景色。

Tags: