jQueryメソッド：addClass（）

jQuery addClass() メソッドは、開発者に、よりグローバルな方法で要素を変更する方法を提供します。メソッド名が示すように、選択した要素にクラス属性を追加できます。なぜこれをしたいのですか？

タイトル、段落、クリックするボタンなど、何かを行う既存の要素を含むWebページの例を見てみましょう。このページに加えて、これらの要素のクラス名を使用してスタイルを設定するスタイルシートがあります。ボタンをクリックすると、既存のコンテンツのスタイルや外観が変わる可能性があります。

addClass()を使用できますボタンがクリックされた後に既存のコンテンツの新しいスタイル属性を挿入するメソッド。これにより、コード行のみを使用して既存のコンテンツのスタイルを変更できます。そうすることで、開発者は要素をスタイル付きで操作することを考えることができます。

例をさらに深く掘り下げて、どのようにコーディングするかを見てみましょう。

jQuery addClass（）のしくみ

この例では、ボタンがクリックされたときにオブジェクトのクラス属性を変更しています。このサンプルコードに入る前に、addClass()がどのように行われるかを見てみましょう。動作します。このHTMLがあるとします。

<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 16px;
  }
  .selected {
    color: blue;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>