JS/ES – JQuery – 基本

準備

JQueryのライブラリーを読み込む。

CDN (Contents Delivery Network)から読み込む場合の例は以下のとおり。

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

ライブラリーをダウンロードする場合はURLをローカルのファイルパスにする。

記述位置~readyイベント

HTML要素に作用する処理(スタイル変更など)はDOMの読み込み後でなければならない。

JQueryスクリプトの記述位置記述方法

オブジェクトとメソッド

オブジェクトの作成

jQueryの操作対象はページのDOM要素だが、jQueryでは、DOMのidやクラス名を使ってそのDOMのオブジェクトを作成し、それらのメソッドを通して操作する。

オブジェクトの作成はjQuery()コンストラクタを使い、セレクタとしてcssのセレクタを指定。

先の例では、id=”header”を与えられたオブジェクトを以下の様に作成している。

要素指定

様々な要素指定方法を参照。

メソッドによる操作

メソッドは各オブジェクトのクラスに定義されており、他のオブジェクト指向言語と同じ形で呼び出す。

この例では”#header”で作成したオブジェクトに対して、cssメソッドで前景色を青にするよう指定している。

これをエイリアスを用いて書くと以下の通り。

メソッドの機能

メソッドには、機能に応じて以下の種類がある。

  • オブジェクトの情報を取得するもの
  • オブジェクトに対して操作を行うもの
  • オブジェクトのイベント処理を行うもの

JQuery – メソッドに詳細。