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) | セレクトボックスで選択されている要素 |