Archives by date

You are browsing the site archives by date.

jQuery基本操作まとめ。

いまさら感否めないけど、おさらいの意もこめて。

■セレクタ編

$('div, span') // 複数の要素を指定。
$('div span') // 親要素の子孫を指定。この場合div中のどこかにあるspanを選択。
$('div > span') // 親要素直属の子供を指定。子孫要素は無視される。
$('h1 + p') // 要素の前後関係を指定する。この場合h1直後にあるpが選択される。
$('div[class=header]') // 指定した要素、属性、値を持つ要素を選択。
$('tr:odd') // 偶数番目の要素を指定。
$('tr:even') // 奇数番目の要素を指定。
$('tbody:nth-child(5)') // n番目の子要素を指定。(even)、(odd)を渡せば奇数、偶数を指定可能。
$('tbody:first-child') // 最初の子要素を指定。
$('tbody:last-child') // 最後の子要素を指定。
$('ul li:only-child') // 単一の子要素を指定。この場合ulの中に単一のliを持つものがあれば選択される。
$('input:checked') // チェックボックスにてチェックされた要素を指定。
$('select option:selected') // セレクトボックスにて選択された要素を指定。

■メソッド編

.css()
// 指定した要素のstyleを設定する。プロパティ名のみを指定した場合、現在の設定値を返却する。
.attr()
// 指定した要素の属性を設定する。属性名のみを指定した場合、現在の値を返却する。
.text()
// 指定した要素のテキストを操作する。パラメーターを指定しなかった場合、現在のテキスト要素を返却する。
.html()
// 指定した要素のHTMLを操作する。パラメーターを指定しなかった場合、子のHTML要素を返却する。text()関数と違い文字列のサニタイズは行われない。
.addClass()
// 指定した要素に引数で渡したクラスを追加する。
.removeClass() 
// 指定した要素に引数で渡したクラスが存在していれば削除する。
.toggleClass()
// 引数で渡したクラスが指定要素中に存在していれば削除し、無ければ追加する。
.width()
// 指定した要素の幅をピクセル単位で操作する。パラメーターを渡さなかった場合現在の幅を返却する。
.height()
// 指定した要素の高さをピクセル単位で操作する。パラメーターを渡さなかった場合現在の高さを返却する。
.val()
// input要素のvalueを操作する。パラメーターを渡さなかった場合、現在のvalue値を返却する。

■イベント系メソッド編

.click()
// 要素がクリックされた際に処理を行う。
.change()
// input要素の値が変更された際に処理を行う。
.hover()
// マウスオーバー、アウトをトリガーに処理を行う。第1引数にオーバー時の処理を、第2引数にアウト時の処理を指定する。
.resize()
// ウィンドウサイズが変更された際に処理を行う。
.scroll()
// スクロールアクションが発生した際に処理を行う。

これだけ抑えてれば大体の処理は実現できるかと。(思う!!)