(X)HTML/CSSを操作するjQueryの命令のまとめ
10月 05
CSSを操作する命令
| 名称 | 書式 | 指定対象 |
|---|---|---|
| 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(番号)”) | 指定した番号の要素（番号は0から数える） |
| gtフィルター | $(“要素:gt(番号)”) | 指定した番号より後の要素（番号は0から数える） |
| ltフィルター | $(“要素:lt(番号)”) | 指定した番号より前の要素（番号は0から数える） |
| headerフィルター | $(“要素:header”) | h1～h6までのheader要素 |
| containsフィルター | $(“要素:contains(文字列)”) | 特定の文字列が含まれている要素 |
| hasフィルター | $(“要素1:had(要素2)”) | 特定の要素が含まれている要素 |
| parentフィルター | $(“要素:parent”) | 子要素やテキストを含む要素 |
HTMLを操作する命令
| 命令 | 意味 |
|---|---|
| テキストの変更と取得 | |
| text(…) | テキストを変更する |
| text() | テキストを取得する |
| （X)HTMLの変更と取得 | |
| html(…) | (X)HTMLを変更する |
| html() | (X)HTMLを取得する |
| (X)HTMLの挿入 | |
| prepend(…) | 要素内の先頭に(X)HTMLを挿入する |
| append(…) | 要素内の最後に(X)HTMLを挿入する |
| before(…) | 要素の前に(X)HTMLを挿入する |
| after(…) | 要素の後に(X)HTMLを挿入する |
| (X)HTMLの移動 | |
| prependTo(…) | 他の要素内の先頭に要素を移動する |
| appendTo(…) | 他の要素内の最後に要素を移動する |
| insertBefore(…) | 他の要素の前に要素を移動する |
| insertAfter(…) | 他の要素の後に要素を移動する |
| 他の要素で包む | |
| wrap(…) | 要素を他の要素で包む |
| wrarpAll(…) | 要素をまとめて他の要素で包む |
| wrapInner(…) | 子要素/テキストを他の要素で包む |
| 要素の置き換え | |
| replaceWith(…) | 要素を他の要素に置き換える |
| 要素の削除 | |
| remove() | 要素を削除する |
| 属性値の変更と取得 | |
| attr(… , …) | 指定した属性の値を変更する |
| attr(…) | 指定した属性の値を取得する |
| removeAttr(…) | 指定した属性を削除する |
| class属性の追加と削除 | |
| addClass(…) | class属性を追加する |
| removeClass(…) | class属性を削除する |
| CSSの制御 | |
| css(… , …) | 指定したCSSプロパティの値を設定する |
| css(…) | 指定したCSSプロパティの値を取得する |
