ライブラリを利用する理由
- クロスブラウザ対応が簡単にできる。
- 利用しているプロパティなどがブラウザごとで利用できないといったことを避けることができる
jQueryの特徴
- メソッドチェーンを利用できる
- CSS3セレクタや独自セレクタによる要素の取得
- プラグインによる拡張性の高さ
1. メソッドチェーンを利用できる
js
$('#foo').find('.foo-child').text('hello');
ドット演算子でつなぐことができ、処理を順番通りに実行することができる。理由は、メソッドの返り値がjQueryオブジェクトであるから。返り値のjQueryオブジェクトに対して、さらにメソッドを利用することができる。
jQueryでよく使うメソッド一覧
要素を選択
| メソッド |
説明 |
| css(prop, value) |
|
| addClass |
|
| removeClass |
|
| toggleClass |
|
| offset() |
|
| scrollTop() |
|
要素を操作
| メソッド |
説明 |
| css(prop, value) |
|
| addClass |
|
| removeClass |
|
| toggleClass |
|
| offset() |
|
| scrollTop() |
|
スタイルの操作
| メソッド |
説明 |
| css(prop, value) |
cssを変更 |
| addClass |
クラスを追加 |
| removeClass |
クラスを削除 |
| toggleClass('class', 'content') |
クラスがあればcontent追加、なければ削除 |
| offset() |
位置を取得 |
| scrollTop() |
スクロール位置を取得 |
アニメーション
アニメーションメソッドは以下の引数を取る
- duration・・・アニメーション完了までの時間を表す
- easing・・・アニメーションで変化させる値の変化量を設定する
- callback・・・アニメーション完了時に実行されるコールバック関数を設定
| メソッド |
説明 |
| css(prop, value) |
cssを変更 |
| addClass |
クラスを追加 |
| removeClass |
クラスを削除 |
| toggleClass('class', 'content') |
クラスがあればcontent追加、なければ削除 |
| offset() |
位置を取得 |
| scrollTop() |
スクロール位置を取得 |
