準備
JQueryのライブラリーを読み込む。
CDN (Contents Delivery Network)から読み込む場合の例は以下のとおり。
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
ライブラリーをダウンロードする場合はURLをローカルのファイルパスにする。
記述位置～readyイベント
HTML要素に作用する処理（スタイル変更など）はDOMの読み込み後でなければならない。
オブジェクトとメソッド
オブジェクトの作成
jQueryの操作対象はページのDOM要素だが、jQueryでは、DOMのidやクラス名を使ってそのDOMのオブジェクトを作成し、それらのメソッドを通して操作する。
オブジェクトの作成はjQuery()コンストラクタを使い、セレクタとしてcssのセレクタを指定。
|
1 |
jQuery(セレクタ) または $(セレクタ) |
先の例では、id=”header”を与えられたオブジェクトを以下の様に作成している。
|
1 |
jQuery("#header") または $("#header") |
要素指定
様々な要素指定方法を参照。
メソッドによる操作
メソッドは各オブジェクトのクラスに定義されており、他のオブジェクト指向言語と同じ形で呼び出す。
|
1 |
jQuery("#header").css("color", "blue") |
この例では”#header”で作成したオブジェクトに対して、cssメソッドで前景色を青にするよう指定している。
これをエイリアスを用いて書くと以下の通り。
|
1 |
$("#header").css("color", "blue") |
メソッドの機能
メソッドには、機能に応じて以下の種類がある。
- オブジェクトの情報を取得するもの
- オブジェクトに対して操作を行うもの
- オブジェクトのイベント処理を行うもの
JQuery – メソッドに詳細。