ホームページ >ウェブフロントエンド >フロントエンドQ&A >HTMLでjQueryを使う方法
HTMLでjQueryを使う方法
- PHPzオリジナル
- 2023-04-26 10:21:243166ブラウズ
HTML で jQuery を使用する方法
jQuery は、効率的な JavaScript コードを迅速に作成するのに役立つ使いやすい API を提供するため、開発者のタスクを簡素化する人気の JavaScript ライブラリです。この記事では、HTML で jQuery を使用する方法について説明します。
HTML への jQuery の導入
jQuery ライブラリを他の場所で使用できるようにするには、HTML に jQuery ライブラリを導入する必要があります。通常、HTML の先頭に次のコードを追加します。
<head> <!-- 引入 jQuery 库 --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head>
上記のコードは、パブリック jQuery CDN を使用していることを前提としています。ローカル jQuery ファイルを使用している場合は、パスをローカル ファイルに置き換えてください。パス。
jQuery の使用
jQuery を参照した後、それに含まれるメソッドと関数を使用できます。最も一般的に使用される jQuery メソッドの一部を次に示します。
要素セレクター
jQuery は CSS と同じ要素セレクターを使用するため、HTML ドキュメント内の要素を簡単に選択できます。たとえば、すべての p 要素を選択するには、次のコードを使用します。
$("p")
ID myDiv の要素を選択するには、次のコードを使用します。
$("#myDiv")
クラス myClass のすべての要素を選択するには、次のコードを使用します。次のコード:
$(".myClass")
イベント処理
jQuery を使用すると、HTML 要素にイベント リスナーを簡単にバインドできます。たとえば、ボタンがクリックされたときにコードを実行するには、次のコードを使用します。
$("button").click(function() {
// 这里是代码逻辑
});
このコードは、ページ上のすべてのボタンを検索し、ボタンがクリックされたときに指定されたコード ロジックを実行します。
DOM 操作
jQuery は、多くの実用的な DOM 操作関数を提供します。たとえば、ページに要素を追加するには、次のコードを使用します。
$("body").append("<p>Hello World!</p>");
このコードは、新しい p 要素をページに追加し、そこにテキスト「Hello World!」を追加します。
その他の一般的に使用される DOM 操作には次のものがあります。
- 要素の削除:
$("p").remove(); - 要素を非表示にする:
$("p").hide(); - 要素内容の変更:
$("p").text("new text");
Ajax
jQuery は、Ajax 呼び出しを簡素化するメソッドを提供します。 jQuery を使用して Ajax リクエストを実行するには、次のコードを使用します。
$.ajax({
url: "myurl",
success: function(result) {
// 这里是返回数据的逻辑
}
});
このコードは、指定された URL に Ajax リクエストを送信し、成功すると指定されたコード ロジックを実行します。
結論
この記事では、HTML で一般的な jQuery メソッドを使用する方法を紹介しました。 jQuery を使い始めたばかりの場合、簡単なコードを書き始めるにはこれらのメソッドで十分です。また、利用可能なメソッドと機能の詳細については、jQuery API ドキュメントを参照することをお勧めします。
以上がHTMLでjQueryを使う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。