【jQuery】操作DOM方法まとめ

JQueryを使用すると、DOMオブジェクトをすばやく操作できます.一般的な方法を簡単に説明します.
1アクセス要素
要素の属性、内容、値およびCSSを操作します.
1.1要素属性操作
1.1.1要素属性の取得
attr(name):nameは属性名で、属性値を返します.
例:

var strAlt = $("img").attr("src");

1.1.2要素属性の設定
attr(key,value):属性keyの値をvalueに設定
attr({key 1:value 1,key 2:value 2}):複数のプロパティを設定
attr(key,function(){}):属性keyの値を関数functionの戻り値に設定します.
1.1.3要素属性の削除
removeAttr(name):nameが属性名
1.2要素の内容操作
html():要素のHTMLコンテンツを取得する
html(val):要素のHTML内容を設定する
text();要素のテキスト内容の取得
text(val):要素のテキスト内容を設定する
1.3要素値の取得または設定
val():要素の値を取得します.複数の可能性があります.
val(val):要素の値valを設定します.同じように複数です.
1.4要素スタイル操作
css(name,value):スタイルnameの値をvalueに設定
addClass(class):CSSカテゴリを追加
toggleClass(class):異なる要素カテゴリの切り替え(置き換え)
removeClass(class):カテゴリの削除
2ノード要素の作成
$(html):htmlはラベルを含む文字列であり、$(html)によってDOM要素に変換されます.
3ノードの挿入
3.1内部挿入ノード
append(content):contentは挿入する内容です.
append(function():関数が返す値を挿入
appendTo(content):要素をcontentノードに挿入
prepend(content):contentをノードコンテンツの前に挿入する
prepend(function():同理
prependTo(content):同理
3.2外部挿入ノード
after(content):contentをノードの後ろに挿入する
after(function():同理
before(content):contentをノードの前に挿入する
before(function():同理
InsertAfter(content):contentの後ろにノードを挿入する
InsertBefore(content):contentの前にノードを挿入する
4ノードのコピー
clone():ノードをコピーするだけで、挿入やその他の操作ができます.
clone(true):ノードのイベント、動作を同時にコピーする
5ノードの置き換え
replaceWith(content):ノードをcontentで置き換える

$("#span1").replaceWith("<span title='replacewith'>   </span>");

replaceAll(selector):選択したすべての要素を指定したselectorの要素に置き換え、selectorを置換する要素に置き換えます.

$("<span title='replaceAll'>[email protected]</span>").replaceAll("#span2");

6ラップノード
wrap(html):選択したすべての要素を他の文字列コードで包みます.

// <b>   <p>    。
$("p").wrap("<b></b>");

wrap(elem):同理
wrap(fn):同理
unwrap():選択した要素の親要素またはラップタグを削除します.
wrapAll(html):すべての要素をラベルで包みます.

$("p").wrapAll("<div></div>");

wrapAll(elem):同理
wrapInner(html):選択した要素のすべてのサブコンテンツを文字列コードで包む.

$("#span2").wrapInner("<li></li>");

wrapInner(elem):同理
wrapInner(fn):同理
7要素の遍歴
each(callback):同じタグのすべての要素を統一します.

$("img").each(function(index){

    this.title = " " + index + "   ";
})

その他の関数
関数＃カンスウ＃
説明
.add()
一致する要素のセットに要素を追加します.
.andSelf()
スタック内の前の要素セットを現在のセットに追加します.
.children()
一致する要素セット内の各要素のすべてのサブ要素を取得します.
.closest()
要素自体から開始し、親要素に段階的に一致し、最初に一致した祖先要素を返します.
.contents()
テキストとアノテーションノードを含む、一致する要素セット内の各要素のサブ要素を取得します.
.each()
jQueryオブジェクトを反復し、一致する要素ごとに関数を実行します.
.end()
現在のチェーン内の最近のフィルタ処理を終了し、一致する要素のセットを前回の状態に戻します.
.eq()
一致する要素のセットを、指定したインデックスにある新しい要素に縮小します.
.filter()
一致する要素のセットを、一致するセレクタまたは一致する関数が値を返す新しい要素に縮小します.
.find()
現在の一致する要素セット内の各要素の子孫を取得し、セレクタによってフィルタされます.
.first()
一致する要素のセットをセット内の最初の要素に縮小します.
.has()
一致する要素のセットを、特定の要素を含む子孫のセットに縮小します.
.is()
セレクタに基づいて現在の一致要素のセットをチェックし、少なくとも1つの一致要素が存在する場合はtrueを返します.
.last()
一致する要素のセットをセット内の最後の要素に縮小します.
.map()
現在の一致セットの各要素を関数に渡し、戻り値を含む新しいjQueryオブジェクトを生成します.
.next()
一致するエレメントセット内の各エレメントに隣接する同世代エレメントを取得します.
.nextAll()
一致するエレメントセット内の各エレメントの後にあるすべての同世代エレメントを取得し、セレクタによってフィルタします(オプション).
.nextUntil()
一致するセレクタの要素に遭遇するまで、各要素の後にあるすべての同世代要素を取得します.
.not()
一致する要素セットから要素を削除します.
.offsetParent()
配置に使用する最初の親要素を取得します.
.parent()
現在の一致する要素セット内の各要素の親要素を選択してフィルタします(オプション).
.parents()
現在の一致する要素セット内の各要素の祖先要素を取得し、セレクタによってフィルタされます(オプション).
.parentsUntil()
現在の一致するエレメントセット内の各エレメントの祖先エレメントを、一致するセレクタのエレメントに遭遇するまで取得します.
.prev()
一致する要素のセット内の各要素が隣接する前の世代の要素を取得し、セレクタによってフィルタされます(オプション).
.prevAll()
一致する要素のセット内の各要素の前のすべての同世代要素を取得し、セレクタによってフィルタされます(オプション).
.prevUntil()
一致するセレクタの要素に遭遇するまで、各要素の前のすべての同世代要素を取得します.
.siblings()
一致するエレメントセット内のすべてのエレメントの同世代エレメントを取得し、セレクタによってフィルタされます(オプション).
.slice()
一致する要素のセットを指定した範囲のサブセットに縮小します.
8要素の削除
remove([expr]):exprはオプションで、ある場合は要素をフィルタする式で、指定した要素を取得します.

$("ul li").remove("li[title=t]");
$("ul li:eq(1)").remove();

Empty():選択したページ要素またはすべての子孫要素を空にします.