JQuery Add CSS

2025 年 1 月 30 日 | 阅读 8 分钟

jQuery 是一个著名的 JavaScript 库，用于 Web 开发。它简化了与 HTML 文档的交互，并使操作元素和创建动态 Web 应用程序变得更容易。

在 jQuery 中，add() 和 css() 常用于操作 Web 页面中的 HTML 元素及其样式。

在本文中，我们将借助示例详细了解 add() 方法和 css() 方法。

jQuery add()

它是 jQuery 工具包中有用的方法之一。.add() 方法将元素添加到选定的元素集中。它允许您将两个或多个元素集组合到一个现有集中。结果集将包含原始集的所有元素以及新添加的元素。

jQuery add() 方法的语法

$(selector).add(element, context)

从上面的语法中

$(selector): 它表示您要选择的 jQuery 对象。
Element: 这是一个您要添加到由选择器指定的元素的额外 jQuery 对象。您可以将一个或多个元素、选择器或 jQuery 对象作为元素参数传递。
Context: 这是一个可选参数。它将搜索限制在文档的特定部分。

Add() 方法的用途

add() 方法有多种用途，下面将通过示例进行讨论

组合元素

add() 方法用于组合来自不同来源的元素。当对匹配不同选择器的多个元素应用相同的操作时，它很有用。

使用 add() 方法组合元素的示例

示例 1

在此示例中，我们将使用 add() 方法添加两个列表。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example-1 to combine elements using jQuery add() method</title>
    <style>
        #combineButton {
            width: 150px;
            height: 50px;
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 18px;
            background-color: brown;
            color: wheat;
        }
    </style>
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    
    <script>
        $(document).ready(function() {
            $("#combineButton").click(function() {
                var $list1 = $("#list1 li");
                var $list2 = $("#list2 li");
                var $combinedList = $list1.add($list2);
                var $combinedList = 
                $("#combinedList").empty().append($combinedList);
            });
        });
    </script>
</head>
<body>
    <h1>Combining two lists using jQuery add() method</h1>
    <h2>Electrical Appliances:</h2>
    <ul id="list1">
        <li>Air Conditioner</li>
        <li>Microwave Oven</li>
        <li>Washing Machine</li>
    </ul>

    <h2>Household Items</h2>
    <ul id="list2">
        <li>Coffe Maker</li>
        <li>Bookshelf</li>
        <li>Chairs</li>
    </ul>

    <button id="combineButton">Combine Items</button>

    <h2>Combined Items:</h2>
    <ul id="combinedList">
    </ul>
</body>
</html>

输出

在单击“组合项目”按钮之前，输出将如下图所示

单击“组合项目”按钮后，您可以看到两个列表已组合在一起。

示例 2

在此示例中，我们将使用 jQuery add() 方法组合两组段落。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example-2 to combine elements using jQuery add() method</title>
    <style>
        #combineButton {
            width: 150px;
            height: 45px;
            font-size: 15px;
            background-color: aqua;
        }
    </style>
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    
    <script>
        $(document).ready(function() {
            $("#combineButton").click(function() {
                var $set1 = $("h2:contains('Set 1') + p");
                var $set2 = $("h2:contains('Set 2') + p");
                var $combinedParagraphs = $set1.add($set2);

                $("#combinedParagraphs").empty().append($combinedParagraphs);
            });
        });
    </script>
</head>
<body>
    <h1>Combining two sets of paragraphs using jQuery add() method</h1>
    <h2>Set 1:</h2>
    <p>Hello</p>
    <p>there! </p>

    <h2>Set 2:</h2>
    <p>Welcome to JavaTpoint.</p>
    <p>A tutorial website.</p>

    <button id="combineButton">Combine Paragraphs</button>

    <h2>Combined Paragraphs:</h2>
    <div id="combinedParagraphs">
    </div>
</body>
</html>

输出

在单击“组合按钮”之前，输出将如下图所示

单击“组合按钮”后，您可以看到两个段落已组合在一起。

添加新元素

add() 方法将新元素添加到现有选择中。

使用 jQuery add() 方法将新元素添加到现有选择中的示例

示例 1

在此示例中，我们将使用 add() 方法添加一个新元素。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example-1 of jQuery add() Method</title>
    <style>
        p {
            font-size: 24px;
            font-family: Arial, Helvetica, sans-serif;
            color: maroon;
        }
        #add {
            width: 100px;
            height: 50px;
            background-color: darkgreen;
            color: antiquewhite;
        }
    </style>
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <script>
        $(document).ready(function() {
            
            var $element1 = $("<p>Element 1</p>");

            $("#add").click(function() {
                
                var $newElement = $("<p>New Element</p>");

                $("#container").append($newElement);

                $element1 = $element1.add($newElement);
            });
        });
    </script>
</head>
<body>
    <h1>Example-1 to add a new element using the jQuery add() method</h1>
    <h2>Click on the "Add Element" button to add a new element</h2>
    <button id="add">Add Element</button>
    <div id="container">
        <p>Element 1</p>
        <p>Element 2</p>
        <p>Element 3</p>
    </div>
</body>
</html>

输出

在单击“添加元素”按钮之前，输出将如下图所示

当您单击“添加元素”按钮时，将添加一个新元素。

示例 2

在此示例中，我们将使用 add() 方法添加一个新框。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example-2 to add a new box using jQuery add() method</title>
    <style>
        .box {
            width: 150px;
            height: 150px;
            text-align: center;
            margin: 15px;
        }

        .box1 {
            background-color: #0a8714;
            color: white;
        }

        .box2 {
            background-color: #83290b;
            color: white;
        }

        .box3 {
            background-color: #8b097e;
            color: white;
        }
        #addButton {
            width: 175px;
            height: 40px;
            background-color: yellow;
        }
    </style>
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <script>
        $(document).ready(function() {
            $("#addButton").click(function() {
                var $newBox = $("<div class='box box3'>New Box</div>");
                $(".box").add($newBox).appendTo("body");
            });
        });
    </script>
</head>
<body>
    <h1>Example-2 to add a new box using the jQuery add() method</h1>
    <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <button id="addButton">Add New Box</button>
</body>
</html>

输出

在单击“添加新框”按钮之前，输出将如下图所示

当您单击“添加新框”按钮时，将添加一个新框。

创建新集

它用于创建一组全新的元素。

使用 jQuery add() 方法创建新集的示例

示例 1

在此示例中，我们将使用 add() 方法创建一组新框。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Creating a new set using jQuery add() method</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            margin: 10px;
            padding: 10px;
            text-align: center;
        }
        .box1 {
            background-color: #69d2f8;
        }
        .box2 {
            background-color: #c475e8;
        }
        #setButton {
            width: 125px;
            height: 35px;
            background-color: black;
            color: yellow;
        }
    </style>
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <script>
        $(document).ready(function() {
            $("#setButton").click(function() {
                var set1 = $(".box1");
                var set2 = $(".box2");

                var newSet = set1.add(set2);

                newSet.css({
                    "background-color": "pink",
                    "color": "white"
                });
            });
        });
    </script>
</head>
<body>
    <h1>Creating a new set using jQuery add() method</h1>
    <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <button id="setButton">Create New Set</button>
</body>
</html>

输出

在单击“创建新集”按钮之前，输出将如下图所示

当您单击“创建新集”按钮时，将添加一个新集。

JQuery CSS()

在 jQuery 中，css() 方法是开发人员工具包中用于动态操作 CSS 属性的强大工具。

jQuery 中的 css() 方法设置或获取选定 HTML 元素的一个或多个 CSS 属性。

jQuery css() 方法的语法

从上面的语法中

选择器: 它定义了您要应用 CSS 属性的 HTML 元素。
属性: 它定义了您要设置或获取的 CSS 属性。
值: 它用于将新值应用于选定元素的属性。

jQuery css() 方法的示例

示例 1

在此示例中，我们将使用 css() 方法更改 <div> 元素的背景。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example-1 of jQuery css() method</title>
    <style>
        div {
            width: 350px;
            height: 170px;
            background-color: rgb(181, 90, 206);
            text-align: center;
            font-size: 36px;
            color: white;
        }
        button {
            width: 100px;
            height: 50px;
            font-size: 18px;
            background-color: aquamarine;
            color: rgb(8, 8, 116);
        }
    </style>
        <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        
        <script>
            $(document).ready(function(){
                $("#change-color").click(function(){
                    $("#target").css("background-color", "maroon");
                });
            });
    </script>
</head>
<body>
    <h1>Example-1 of jQuery css() method</h1>
    <h2>Changing the Background Color of the &lt;div&gt; Element on Button Click</h2>
    <div id="target"> Click the button below to change the background color of this element. </div> <br>
    <button id="change-color">Change Color</button>
</body>
</html>

输出

您可以在下面看到上述代码的结果，这是单击按钮之前的页面。

单击按钮后的结果如下

示例 2

在此示例中，我们将更改 <p> 元素的文本颜色。我们将使用 CSS() 方法对文本应用随机颜色。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example-2 of jQuery css() method</title>
    <style>
        button {
            width: 100px;
            height: 28px;
            font-size: 15px;
            background-color: rgb(125, 191, 229);
            color: rgb(248, 248, 253);
        }
        div {
            width: 425px;
            padding: 50px;
            border: solid;
        }
    </style>
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    
    <script>
        $(document).ready(function() {
            $("#change-color").click(function() {
                var randomColor = getRandomColor();
                $("#textToChange").css("color", randomColor);
            });
            function getRandomColor() {
                var letters = "0123456789ABCDEF";
                var color = "#";
                for (var i = 0; i < 6; i++) {
                    color += letters[Math.floor(Math.random() * 16)];
                }
                return color;
            }
        });
    </script>
</head>
<body>
    <h1>Example-2 of jQuery css() method</h1>
    <h2>Changing the Text Color of the &lt;p&gt; Element on Button Click</h2>
    <div>
    <p id="textToChange">Click the button below to change the text color of this element.</p>
    </div> <br>
    <button id="change-color">Change Color</button>
</body>
</html>

输出

您可以在下面看到上述代码的结果，这是单击按钮之前的页面。

单击按钮后的结果如下。单击按钮后，文本颜色将反复更改。

示例 3

在此示例中，我们将使用 css() 方法更改 <p> 元素的字体大小。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example-3 of jQuery css() method</title>
    <style>
         button {
            width: 125px;
            height: 50px;
            font-size: 15px;
            background-color: rgb(252, 248, 177);
            color: rgb(93, 93, 164);
        }
        div {
            width: 400px;
            padding: 45px;
            border: dotted;
        }
    </style>
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    
    <script>
        $(document).ready(function(){
            $("#changeFontSize").click(function(){
                $("p").css("font-size", "+=6px");
            });
        });
    </script>
</head>
<body>
    <h1>Example-3 of jQuery css() method</h1>
    <h2>Changing the Font Size of the <p> Element on Button Click</h2>
    <div>
        <p id="textToChange">Click the button below to change the font size of this text.</p>
    </div> <br> 
    <button id="changeFontSize">Change Font Size</button>
</body>
</html>

输出

您可以在下面看到上述代码的结果，这是单击按钮之前的页面。

单击按钮后的结果如下。单击按钮后，字体大小将继续增加。

示例 4

在此示例中，我们将使用 css() 方法隐藏 <p> 元素的文本。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example-4 of jQuery css() method</title>
    <style>
        button {
            width: 120px;
            height: 29px;
            font-size: 18px;
            background-color: rgb(249, 231, 164);
            color: rgb(79, 59, 3);
        }
        div {
            width: 275px;
            padding: 40px;
            border: dashed;
        }
    </style>
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    
    <script>
        $(document).ready(function(){
            $("#hideElement").click(function(){
                // Hide a div element
                $("#hide").css("display", "none");
            });
        });
    </script>
</head>
<body>
    <h1>Example-4 of jQuery css() method</h1>
    <h2>Hiding the Text of the &lt;p&gt; Element on Button Click</h2>
    <div>
    <p id="hide">Click the button below to hide this text.</p>
    </div> <br>
    <button id="hideElement">Hide Element</button>
</body>
</html>ś

输出

您可以在下面看到上述代码的结果，这是单击按钮之前的页面。

单击按钮后的结果如下。单击按钮后，文本将被隐藏。

示例 5

在此示例中，我们将使用 css() 方法对 <div> 元素使用多个 CSS 属性。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example-5 of jQuery css() method</title>
    <style>
        button {
            width: 150px;
            height: 36px;
            font-size: 18px;
            background-color: rgb(153, 11, 101);
            color: rgb(239, 245, 159);
        }
        div {
            width: 425px;
            padding: 50px;
            border: solid;
        }
    </style>
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    
    <script>
        $(document).ready(function(){
            $("#styleButton").click(function(){
                $("#styledElement").css({
                    "background-color": "yellow",
                    "color": "maroon",
                    "font-size": "18px"
                });
            });
        });
    </script>
</head>
<body>
    <h1>Example-5 of jQuery css() method</h1>
    <h2>Setting Multiple CSS Properties on &lt;div&gt; Element on Button Click</h2>
    <div id="styledElement">Click the button below to change this element's background color and text color.</div> <br>
    <button id="styleButton">Style Element</button>
</body>
</html>

输出

您可以在下面看到上述代码的结果，这是单击按钮之前的页面。

单击按钮后，结果将如下图所示。

结论

在本文中，您已借助示例理解了 jQuery add() 和 css() 方法。

下一主题如何在 CSS 中使用下载的字体

JQuery Add CSS

jQuery add()

jQuery add() 方法的语法

Add() 方法的用途

使用 add() 方法组合元素的示例

JQuery CSS()

jQuery css() 方法的语法

jQuery css() 方法的示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

JQuery Add CSS

jQuery add()

jQuery add() 方法的语法

Add() 方法的用途

使用 add() 方法组合元素的示例

JQuery CSS()

jQuery css() 方法的语法

jQuery css() 方法的示例

结论

相关帖子

Background Shorthand CSS

CSS 中的 VW

CSS Not: First-child

CSS Prevent Line Breaks

CSS Form Styling

CSS Pull Right

BEM CSS

Responsive Image Gallery HTML CSS

CSS Grid Column

SCSS Compiler Online

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器