jQuery を使用して HTML 要素のコンテンツを変更する方法-フロントエンドQ&A-php.cn

jQuery を使用して HTML 要素のコンテンツを変更する方法

PHPz

リリース： 2023-04-17 11:09:27

オリジナル

1368 人が閲覧しました

JQuery は、HTML ドキュメント内の要素を簡単に見つけて操作できるように設計された人気のある JavaScript ライブラリです。この記事では、jQuery を使用して HTML 要素 (つまり、要素) のコンテンツを変更する方法について説明します。この変更はユーザーのクリック (つまり、クリック) によって行われます。

ステップ 1: 準備

jQuery コードを書き始める前に、HTML ページを準備する必要があります。以下は、要素とボタンを含む単純な HTML ページの例です:

<!DOCTYPE html>
<html>
  <head>
    <title>jquery demo</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
      $(document).ready(function(){
        $("#clickButton").click(function(){
          $("span").text("你点击了按钮！");
        });
      });
    </script>
  </head>
  <body>

    <h1>JQuery事件点击修改span内容</h1>
    <p>点击下面的按钮!</p>

    <button id="clickButton">点击这里</button>

    <p>点这里看看下面<span>会变化</span>！</p>

  </body>
</html>

ログイン後にコピー

この例では、jQuery ライブラリを導入し、< とすでに同じ要素を定義しました。 span > ;要素に関連付けられたクリックイベントリスナー。このイベントリスナーは、ユーザーがボタンをクリックするとトリガーされ、要素のテキストコンテンツを「ボタンをクリックしました!」に変更します。

ここで、このコード 1 の意味を説明しましょう。一つ。

ステップ 2: jQuery イベントバインディング

$(document).ready() 関数は jQuery の特別な関数の 1 つで、ページの準備ができたときにコードを実行するために使用されます。これは、DOM ツリーがロードされるとすぐに $(document).ready() 関数内のコードが実行されることを意味します。したがって、このブロックでクリックイベントの関数をバインドする必要があります。

$("#clickButton").click() を使用してクリックイベントをバインドします。このイベントは、ユーザーが ID「clickButton」のボタンをクリックするとトリガーされます。クラスセレクターまたはタグセレクターを使用して HTML 要素と一致させることもできますが、この場合は ID セレクターを使用していることに注意してください。

クリックイベントハンドラー内で、$ ("span").text() メソッドを使用して、< span > 要素のテキストコンテンツを「ボタンをクリックしました!」に変更します。要素のテキスト内容を簡単に変更できるように、メソッドに文字列パラメーター「ボタンをクリックしました!」を渡します。

ステップ 3: テスト結果

ここで、上記の HTML コードを含むページを開いてボタンをクリックすると、要素のテキストコンテンツが変更されていることがわかります。

JQuery事件点击修改span内容

点击下面的按钮!

（点击按钮后）

点这里看看下面你点击了按钮！

ログイン後にコピー

この例では、非常に基本的な jQuery コードを使用していますが、これは、jQuery を使用して HTML ページ上の要素を変更する方法を理解するための良い出発点となります。必要に応じて、ニーズに合わせてこのコード例を拡張できます。

以上がjQuery を使用して HTML 要素のコンテンツを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。