- ブラウザ間の互換性を吸収できる
- DOM操作を上手にラッピングしている
- 少ないコード量で処理を記述できる
- 処理が重い
- TypeScriptと相性が悪い
- コードからHTML要素を把握し辛い
$(セレクタ-).メソッド(パラメータ)-
$()はjQuery()のショートカット
- '$()'が使用できない場合, 'jQuery.noConflict()`を使用する
-
$(セレクター)は, 要素のjQueryオブジェクト.(メソッドとメンバを持つ)
-
$('.class_name') クラスセレクター
-
$('div p') 子孫セレクター
-
$('p:last-child') 疑似クラスセレクター
-
$('#id') idセレクター
該当するセレクタが複数ある場合, すべてのセレクタにjQuery操作が適用される!
| メソッド |
概要 |
| コア機能 |
- |
$('セレクタ') |
セレクタにマッチする要素をすべて取得する |
$(配列またはオブジェクト) |
配列のデータやオブジェクトのプロパティをすべて取得する |
$.ajax() |
非同期通信を行う |
| トラバーサル |
- |
next() |
すぐ次の弟要素を取得する |
find('セレクタ') |
子孫要素のうち, セレクタにマッチする要素すべてを取得する |
children('セレクタ') |
子要素をすべて取得する. パラメータにセレクタが含まれている場合, マッチする子要素のみ取得 |
each(function() {...}) |
取得したすべての要素や配列のデータなどに{...}を実行する |
parent('セレクタ') |
親要素を取得する. パラメータにセレクタが含まれている場合, 親要素がセレクタにマッチするときのみ取得する |
siblings() |
兄弟要素をすべて取得する |
prev() |
すぐ前の兄要素を取得する` |
| マニピュレーション(HTMLやCSSの操作) |
- |
addClass('クラス') |
クラスを追加する |
removeClass('クラス') |
クラスを削除する |
toggleClass('クラス') |
取得した要素にクラスがあれば, 削除, なければ追加 |
text('テキスト') |
テキストコンテンツを設定する(上書き) |
hasClass('クラス') |
取得した要素にクラスがあるかどうか調べる |
prepend(要素) |
取得した要素に子要素を挿入する. 既に子要素があれば, その前に挿入 |
append(要素) |
取得した要素に子要素を挿入する. 既に子要素があれば, その後に挿入 |
attr('属性名','値') |
要素の属性を値に設定する |
attr('属性名') |
要素の属性の値を取得する |
remove() |
要素を削除する |
| イベント |
- |
on('イベント', function() {}) |
イベントを設定する |
event.preventDefault() |
イベントの基本動作をキャンセルする |
$('#img_unit').html('ここに,画像リストが表示されます'); // 変更
alert($('#img_unit').html()); // 取得
$('#img_unit').css('margin-top', '100px'); // 設定(変更)
$('#img_unit').css('margin-top'); // 取得
同じHTML要素に対する操作はメソッドチェーンでメソッドを連結できる
$('#img_unit').html('ここに,画像リストが表示されます').css('margin-top', '100px');
$.getJSON('http://your.url:port/path/to', function(data) {
alert('データを受信しました');
}
$.getJSON(ファイルパス, 送信データ, コールバック);- `$.getJSON(ファイルパス, コールバック);'
-
$('<div class="photo"></div>') : DOMのdocument.createElement()に相当
- DOMの
dom_obj.appendChild()に相当
$('親要素').append('子要素').append('子要素');
$('子要素').appendTo('親要素');
$(document).ready(functon() {
// 処理
});
$(セレクタ).on('イベント名', function() {
// イベントで処理する内容
$(this); // 複数セレクタを取得した場合, いずれかの要素のjQueryオブジェクト
// e.g
if ($(this).className == 'my_specific') {
// 特定の要素に対するイベント処理
}
});
$('.submenu h3').on('click', function() {
// 処理
});