jQuery 記述方法
2011.01.17
この記事は最終更新日から1年以上が経過しています。
jQueryの基本的な記述方法です。
$(function(){
//jQueryの記述
})
セレクタを使いcssのプロパティ設定です。
$("CSSセレクタ").css("プロパティ",”値”);
テーブルの奇数の行のみ背景色を変える場合
$("tr:nth-child(odd)").css("background-color","#999999");
pのid属性”test”の内容を入れ替える
$("p#test").html("<strong>変更後</strong>");
jQuery(expression, context)
この関数は、エレメントとマッチさせるCSSセレクターを含む文字列を受け取る。
基本の関数となります。ほとんどのjQuery構文がこの形であるか、なんらかで利用しております。
利用方法は合致するエレメントを抽出するためのexpressionを受け取ることである。
もしcontextが何も指定されなければ、$()関数は現在のHTMLのDOMエレメントを検索。
逆に指定されれば、expressionはそのcontextに対して合致するものを検索。
例：
$("input:submit", document.form[0]);
documentの最初のform内にある、全てのinput typeがsubmitのものを抽出。
例：
$("div", xml.responseXML);
AJAXで戻ってきたXMLから、全てのpを抽出する。
| 命令の構文 | 命令の内容 |
| text(変更後のテキスト) | テキストを変更 |
| text() | テキストを取得 |
| 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属性を削除する |
| toggleClass(class属性値) | 指定したcssが無ければ追加、あれば削除 |
class属性の取得
| 命令の構文 | 命令の内容 |
| hasClass(class属性値) | 一致するclass属性を取得する |
CSSの制御
| 命令の構文 | 命令の内容 |
| css(プロパティ名,値) | 指定したCSSプロパティの値を設定する |
| css(プロパティ名) | 指定したCSSプロパティの値を取得する |
フォーム部品の操作
| 命令の構文 | 命令の内容 |
| val（”入力値”） | フォームの入力値（val ue属性の値）を変更する |
| val（） | フォームの入力値（val ue属性の値）を取得する |
