8.1 jQueryの接続
ついにjQueryライブラリにたどり着きました。この記事が書かれた時点では、これはすでに廃止されており、新しいプロジェクトではほとんど使用されていません。しかし、かつては非常に人気があり、十分に文書化されており、インターネット上にはその使用例がたくさんあります。
したがって、小規模な Web プロジェクトを作成していて、最新のフレームワークの学習に何ヶ月も費やしたくない場合は、jQuery ライブラリを使用することをお勧めします。
何千もの jQuery 関数を使用するには、それをページに含めるだけです。次のようにして実行できます。
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>jQuery の操作は 2 つのタイプに分類できます。
まず、jQuery ライブラリ オブジェクトを取得します。これは、カスタム jQuery オブジェクトでラップされた通常の HTML 要素です。
次に、jQuery には HTML 要素にバインドされていないグローバル オブジェクトがいくつかあります。それらも使用する必要があります。
まずは最初から始めましょう。
8.2 セレクターの操作
jQuery はセレクターを使用してオブジェクトを操作します (CSS とそのクラスを覚えていますか?)。したがって、jQuery では、オブジェクトまたはオブジェクトのグループを選択したい場合、それらのセレクターを設定する必要があります。
例:
| コード | 説明 | ノート | |
|---|---|---|---|
| 1 | $("div") | DIVタグを持つすべてのオブジェクトを選択します | 多くのオブジェクト |
| 2 | $("img.#image123") | IMG タグと ID == image123 を持つすべてのオブジェクトを選択します | 1つのオブジェクト |
| 3 | $("#image123") | ID == image123 を持つすべてのオブジェクトを選択します | 1つのオブジェクト |
| 4 | $("div.article") | クラスアーティクルを持つ DIV タグを持つすべてのオブジェクトを選択します | 多くのオブジェクト |
すべてのリンクにイベント処理を追加したいとしますonclick。jQuery を使用してそれを行う方法は次のとおりです。
$("a").click(function() {
alert("Click");
});ここでは 3 つのステップが実行されます。
- selector に一致するオブジェクトを取得します
"a"。 - を呼び出す匿名関数を作成します
alert()。 - この関数をポイント 1 からのすべてのオブジェクトのイベント ハンドラーとして設定します
click。
jQuery のもう 1 つの利点は、コードが読みやすいことです。すべてがどのように機能するかを理解するのにそれほど時間はかかりません。動作するコードがあれば、それが何をするのかを理解するのは簡単です。
8.3 文書要素の操作
jQuery を使用してドキュメントを操作するためのいくつかのシナリオを見てみましょう。
要素の値を取得します (値を持つ要素の場合)。
var result = $ ("selector").value();要素の値を設定します (値を持つ要素の場合):
$ ("selector").value(newValue);要素内に HTML を追加するにはどうすればよいですか?
$ ("selector").html(newHTML);そして、要素内にある HTML を取得するにはどうすればよいでしょうか?
var html = $ ("selector").html();HTMLではなくプレーンテキストを取得/追加したい場合はどうすればよいですか? ここでも驚くべきことではありません。
var html = $ ("selector").text();要素の色を取得または変更したい場合はどうすればよいですか?
$ ("selector").color("red");スタイルを操作する必要がある場合、これも簡単に行えます。
$ ("selector").css("color", "red");新しい要素を追加するにはどうすればよいですか?
$ (".container").append($("h3"));