jQuery
jQueryとはjavascriptのプログラミングでよく行われる定型的な処理を書きやすくしてくれるオープンソースのライブラリです。イベントの設定などのDOM操作やAjaxを得意としている。
jQuery 要素を取得する$()メソッド
sample.js
$('セレクタ')
jQuery 取得した要素にイベントを設定
sample.js
$('セレクタ').on('イベント名',function(){
イベントが発生したときの処理
});
よく使う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() | イベントの基本動作をキャンセルする(javascriptメソッド) |