jQueryライブラリ

All lectures for JA purposes

レベル 1 , レッスン 967

使用可能

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 要素にバインドされていないグローバルオブジェクトがいくつかあります。それらも使用する必要があります。

まずは最初から始めましょう。

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 つのステップが実行されます。

jQuery のもう 1 つの利点は、コードが読みやすいことです。すべてがどのように機能するかを理解するのにそれほど時間はかかりません。動作するコードがあれば、それが何をするのかを理解するのは簡単です。

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"));

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION