初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

jQuery セレクター・メソッド・イベント一覧表

数日間記述したセレクター・メソッド・イベントについて一覧にまとめました。
jQueryを使うときに役に立つかと思います。

  1. jQuery セレクター 一覧
  2. jQuery メソッド 一覧
  3. jQuery イベント 一覧

jQuery セレクター 一覧

※表中の「要素」はセレクターで指定された要素です。

名称書式指定対象
CSSでよく利用されるセレクタ
要素セレクタ $('要素名') 特定の要素
IDセレクタ $('#ID名') 特定のid属性を持つ要素
クラスセレクタ $('.クラス名') 特定のclass属性を持つ要素
子孫セレクタ $('要素1要素2') 特定の要素の内側にある要素
ユニバーサルセレクタ $('*') 全てのの要素
グループセレクタ $('セレクター1,セレクター2,…') 複数セレクタ
CSS2.1のセレクタ
セレクタ $('親要素名 > 子要素名') 特定の要素の直下の子要素
隣接セレクタ $('要素1 + 要素2') 特定の要素の次の要素
first-child擬似セレクタ $('.要素:first-child') 同一要素内の最初の要素
CSS3のセレクタ
関節セレクタ $('要素1 ~ 要素2') 特定の要素の後に出現する要素
否定擬似クラス $(要素1:not(要素2)') 特定の要素のうち要素2の条件を除く要素
empty擬似クラス $('.要素:empty') 子要素やテキストを含まない要素
nth-child擬似クラス $('要素:nth-child(番号)') 要素内の指定した番号の要素
last-child擬似クラス $('要素:last-child') 全てのの要素
only-child擬似クラス $('要素:only-child') 複数セレクタ
nth-last-child擬似クラス $('要素:nth-last-child') 特定の要素
nth-of-type擬似クラス $('要素:nth-of-type') 特定のid属性を持つ要素
nth-last-of-type擬似クラス $('要素:nth-last-of-type') 特定のclass属性を持つ要素
first-of-type擬似クラス $('要素:first-of-type') 特定の要素の内側にある要素
last-of-type擬似クラス $(要素:last-of-type') 全てのの要素
only-of-type擬似クラス $('要素:only-of-type') 1つだけ存在する要素
lang擬似クラス $(':lang(言語)') 特定の言語を指定された要素
CSSの属性セレクタ
[attribute] $('[要素名]') 特定の属性を持つ要素
[attribute='value'] $('[要素名='値']') 特定の属性が指定した値を持つ要素
[attribute!='value'] $('[要素名[属性名!='値']') 特定の属性が指定した値を持たない要素
[attribute^='value'] $('[要素名^='値']') 特定の属性が指定した値で始まっている要素
[attribute$='value'] $('[要素名$='値']') 特定の属性が指定した値で終わっている要素
[attribute*='value'] $('[要素名*='値']') 特定の属性が指定した値を含んでいる要素
[attributeFilter1]
[attributeFilter2]
$('[属性セレクター1][属性セレクター2]') 複数の属性セレクターに該当する要素
jQueryの独自セレクタ
firstセレクタ $('要素名') 指定した要素の最初の要素
lastセレクタ $('#ID名') 指定した要素の最後の要素
evenセレクタ $('.クラス名') 指定した要素の偶数番目の要素(0から数える)
oddセレクタ $('要素1要素2') 指定した要素の奇数番目の要素(0から数える)
eqセレクタ $('*') 指定した番号の要素(0から数える)
ltセレクタ $('要素:lt(番号)') 指定した番号より前の要素(0から数える)
gtセレクタ $('要素:gt(番号)') 指定した番号より後の要素(0から数える)
headerセレクタ $(':header') h1~h6までのheading要素
containsセレクタ $(要素:cantains(文字列)') 特定の文字列が含めれている要素
hasセレクタ $('要素1:has(要素2)') 特定の要素が含まれている要素
parentセレクタ $('要素:parent') 子要素やテキストを含む要素

jQuery メソッド 一覧

命令意味
テキストの変更と取得
text(…) テキストを変更する
text() テキストを取得する
HTMLの変更と取得
html(…) HTMLを変更する
html() HTMLを取得する
HTMLの挿入
prepend(…) 要素内の先頭にHTMLを挿入する
append(…) 要素内の最後にHTMLを挿入する
before(…) 要素内の前にHTMLを挿入する
after(…) 要素内の後にHTMLを挿入する
HTMLの移動
prependTo(…) 他の要素内に先頭に要素を移動する
appendTo(…) 他の要素内に最後に要素を移動する
insertBefore(…) 他の要素の前に要素を移動する
insertAfter(…) 他の要素内の後に要素を移動する
他の要素で包む
wrap(…) 要素を他の要素で包む
wrapAll(…) 要素をまとめて他の要素で包む
wrapInner(…) 子要素/テキストを他の要素で包む
親要素を取り除く
unwrap() 親要素を取り除く
要素の置き換え
replaceWith(…) 要素を他の要素に置き換える
要素の削除
remove(…) 要素を削除する
属性値の変更と取得
attr(…,…) 指定した属性の値を変更する
attr(…) 指定した属性の値を取得する
removeAttr(…) 指定した属性を削除する
class属性の追加と削除
addClass(…,…) class属性を追加する
removeClass(…) class属性を削除する
CSSの制御
css(…,…) 指定したCSSプロパティの値を設定する
css(…) 指定したCSSプロパティの値を取得する

jQuery イベント 一覧

命令意味
click() クリック時に処理を実行する
dbclick() ダブルクリック時に処理を実行する
mousedown() マウスボタンが離された時に処理を実行する
mouseover() マウスオーバー時に処理を実行する
mouseout() マウスアウト時に処理を実行する
mousemove() マウスが移動した時に処理を実行する
one() イベント発生時に一度だけ処理を実行する
on() 対象要素を絞ってイベントを登録する
off() 設定されているイベント処理を取り消す
topへ戻る