jqueryのaddclass()の使い方-フロントエンドQ&A-php.cn

jqueryのaddclass()の使い方

青灯夜游

リリース： 2022-03-01 16:05:40

オリジナル

3383 人が閲覧しました

jquery では、addclass() メソッドを使用して、選択した要素に 1 つ以上のクラスを追加します。構文は "$(selector).addClass("class name")" です。追加する必要がある場合は、複数のクラスを使用する場合は、スペースを使用してクラス名を区切る必要があります。

jqueryのaddclass()の使い方

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

jquery では、addclass() メソッドを使用して、選択した要素に 1 つ以上のクラスを追加します。

このメソッドは既存のクラス属性を削除しませんが、1 つ以上のクラス属性を追加するだけです。

ヒント: 複数のクラスを追加する必要がある場合は、スペースを使用してクラス名を区切ってください。

構文

1	`$(selector).addClass(class)`

ログイン後にコピー

関数を使用して、選択した要素にクラスを追加することもできます

1	`$(selector).addClass(function(index,oldclass))`

ログイン後にコピー

jqueryのaddclass()の使い方

例:

最初の p 要素にクラスを追加します

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <script src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("button").click(function() {
                    $("p:first").addClass("intro");
                });
            });
        </script>
        <style type="text/css">
            .intro {
                font-size: 120%;
                color: red;
            }
        </style>
 
    </head>
 
    <body>
        <h1>这是一个大标题</h1>
        <p>这是一个段落。</p>
        <p>这是另一个段落。</p>
        <button>向第一个 p 元素添加一个类</button>
    </body>
 
</html>

ログイン後にコピー

jqueryのaddclass()の使い方

要素に 2 つのクラスを追加します

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <script src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("button").click(function() {
                    $("p:first").addClass("intro note");
                });
            });
        </script>
        <style type="text/css">
            .intro {
                font-size: 120%;
                color: blue;
            }
 
            .note {
                background-color: yellow;
            }
        </style>
 
    </head>
 
    <body>
        <h1>这是一个大标题</h1>
        <p>这是一个段落。</p>
        <p>这是另一个段落。</p>
        <button>向第一个 p 元素添加一个类</button>
    </body>
 
</html>