2011年12月26日月曜日

jQueryの備忘録

jQueryで利用できる主なHTML/CSSを操作する命令
命令名・書式意味
テキストの変更と取得
text(変更後のテキスト)テキストを変更する
text()テキストを取得する
HTMLの変更と取得
html(変更後のHTML)HTMLを変更する
html()HTMLを取得する
HTMLの挿入
prepend(挿入するHTML)要素内の先頭にHTMLを挿入する
append(挿入するHTML)要素内の最後にHTMLを挿入する
before(挿入するHTML)要素の前にHTMLを挿入する
after(挿入するHTML)要素の後にHTMLを挿入する
HTMLの移動
prependTo(移動先のセレクター)他の要素内の先頭に要素を移動する
appendTo(移動先のセレクター)他の要素内の最後に要素を移動する
insertBefore(移動先のセレクター)他の要素の前に要素を移動する
insertAfter(移動先のセレクター)他の要素の後に要素を移動する
他の要素で包む
wrap(<要素名>)要素を他の要素で包む
wrarpAll(<要素名>)要素をまとめて他の要素で包む
wrapInner(<要素名>)子要素/テキストを他の要素で包む
要素の置き換え
replaceWith(置換後の要素)要素を他の要素に置き換える
要素の削除
remove()要素を削除する
属性値の変更と取得
attr(属性名, 属性値)指定した属性の値を変更する
attr(属性名)指定した属性の値を取得する
removeAttr(属性名)指定した属性を削除する
class属性の追加と削除
addClass(class属性値)class属性を追加する
removeClass(class属性値)class属性を削除する
CSSの制御
css(プロパティ名,値)指定したCSSプロパティの値を設定する
css(プロパティ名)指定したCSSプロパティの値を取得する
フォーム部品の操作
val("入力値")フォームの入力値(val ue属性の値)を変更する
val()フォームの入力値(val ue属性の値)を取得する


jQueryで利用できる主なセレクター
名称書式指定対象
CSSでよく利用されるセレクター
要素セレクター$(要素名)特定のHTML要素
IDセレクター$(#ID名)特定のid属性を持つ要素
クラスセレクター$(.クラス名)特定のclass属性を持つ要素
子孫セレクター$(要素1 要素2)特定の要素の内側にある要素
ユニバーサルセレクター$(*)すべての要素
グループセレクター$(セレクター1)セレクター2
CSS2のセレクター
子セレクター$(親要素名 > 子要素名)特定の要素の直下の子要素
隣接セレクター$(要素1 + 要素2)特定の要素の次の要素
first-child擬似クラス$(要素:first-child)同一の親要素内の最初の要素
CSS3のセレクター
間接セレクター$(要素1 ~ 要素2)特定の要素の後に出現する要素
否定擬似クラス$(要素1:not(要素2))特定の要素内で指定した要素以外の要素
empty擬似クラス$(要素:empty")"子要素やテキストを含まない要素
nth-child擬似クラス$(要素:nth-child(番号))特定の要素内の指定した番号の要素
last-child擬似クラス$(要素:last-child)特定の要素内の最後の要素
only-child擬似クラス$(要素:only-child)指定した要素が1つだけ含まれる特定の要素
CSSの属性セレクター
[attribute]$([属性名])特定の属性を持つ要素
[attribute='value']$([属性名='値'])特定の属性が指定した値を持つ要素
[attribute!='value']$(要素名[属性名!='値'])特定の属性が指定した値を持たない要素
[attribute^='value']$([属性名^='値'])特定の属性が特定した値で始まっている要素
[attribute$='value']$([属性名$='値'])特定の属性が特定した値で終わっている要素
[attribute*='value']$([属性名*='値'])特定の属性が特定した値を含んでいる要素
[attributeFilter1][attributeFilter2]$([属性セレクター1][属性セレクター2])複数の属性セレクターに該当する要素
jQueryの独自フィルター
firstフィルター$(要素:first)同一の親要素内の最初の要素
lastフィルター$(要素:last)指定した要素の最後の要素
evenフィルター$(要素:even)指定した要素の偶数番目の要素
oddフィルター$(要素:odd)指定した要素の奇数番目の要素
eqフィルター$(要素:eq(番号))指定した番号の要素
gtフィルター$(要素:gt(番号))指定した番号より後の要素
ltフィルター$(要素:lt(番号))指定した番号より前の要素
headerフィルター$(要素:header)h1~h6までのheader要素
containsフィルター$(要素:contains(文字列))特定の文字列が含まれている要素
hasフィルター$(要素1:has(要素2))特定の要素が含まれている要素
parentフィルター$(要素:parent)子要素やテキストを含む要素
フォームフィルター
:inputフィルター$(要素:input)input要素/textarea要素/select要素/button要素
:textフィルター$(要素:text)1行テキスト入力フォーム(type属性がtextのinput要素)
:passwordフィルター$(要素:password)パスワード入力フォーム(type属性がpassowordのinput要素)
:radioフィルター$(要素:radio)ラジオボタン(type属性がradioのinput要素)
:checkboxフィルター$(要素:checkbox)チェックボックス(type属性がcheckboxのinput要素)
:submitフィルター$(要素:submit)送信ボタン(type属性がsubmit/imagesのinput要素)
:imageフィルター$(要素:image)イメージボタン(type属性がimageのinput要素)
:resetフィルター$(要素:reset)リセットボタン(type属性がresetのinput要素)
:buttonフィルター$(要素:button)ボタン(button要素)
:fileフィルター$(要素:file)ファイル選択フォーム(type属性がfileのinput要素)
:checkedフィルター$(要素:checked)ラジオボタン、チェックボックスでチェックが入っている要素
:selectedフィルター$(要素:selected)セレクトボックスで選択されている要素