jQueryでのDOMの一般的な操作例のまとめ

この例では、jQueryにおけるDOMの一般的な動作について説明します.皆さんの参考にしてください.具体的には以下の通りです.
DOM属性操作
属性リスト
ツールバーの
バージョン#バージョン#
説明
attr()
1.0
ドキュメントノードのプロパティを設定または返します.
removeAttr()
1.0
ドキュメントノードのプロパティを削除します.
prop()
1.6
DOM要素のプロパティを設定または返します.
removeProp()
1.6
一致する各要素のプロパティを削除します.
addClass()
1.0
CSSクラス名を追加します.
removeClass()
1.0
CSSクラス名を削除します.
toggleClass()
1.2
CSSクラス名を切り替えます(存在する場合は削除し、存在しない場合は追加します).
html()
1.0
要素のhtmlコンテンツ(innerHTML)を設定または返します.
text()
1.0
要素のテキスト内容を設定または返します(HTMLラベル、すなわちIEのinnerTextがフィルタされています).
val()
1.0
要素の値(主にフォーム要素のvalue値)を設定または返します.
DOMドキュメントアクション
一、要素の追加
1、内部追加

現在の要素の内部に追加内容を末尾

に追加する.

append($(selector))

現在の要素をある要素の内部に追加します.ただし、現在の要素は必要に応じて移動するため、jQueryオブジェクトは変更され、end()で

に復元できます.

appendTo($(selector))

現在の要素の内部前置内容

.

prepend($(selector))

は、現在の要素を要素の内部で前置します.appendTo()と同様に、オブジェクト

が変更されます.

prependTo($(selector))

2、外部追加

現在の要素の後にコンテンツ

を挿入する.

after($(selector))

現在のエレメントをエレメントの後に挿入します.appendTo()と同様に、オブジェクト

が変更されます.

insertAfter($(selector))

現在の要素の前にコンテンツ

を挿入する.

before($(selector))

現在のエレメントをエレメントの前に挿入します.appendTo()と同様に、オブジェクト

が変更されます.

insertBefore($(selector))

二、要素の削除

現在の要素を削除します.この要素に含まれるテキストの内容は子孫要素とともに削除され、バインドされたイベントも

には存在しません.

remove()

も現在の要素を削除するが、バインドされたイベントは

である.

detach()

現在の要素を空にします.この要素のテキスト内容と子孫要素は削除されますが、

は保持されます.

empty()

三、置換要素

現在選択されているページ要素を置き換えるには、ページ上の既存の要素を移動します.また、

を置き換えるには、新しい要素を追加します.

replaceWith($(selector))
replaceWith($(html))

は、現在選択されている要素で要素を置き換え、ページ上の既存の要素であってもよいし、新しい要素であってもよい.必要に応じて現在の要素のコピーがコピーされ、jQueryオブジェクト

が変更されます.

replaceAll($(selector))
replaceAll($(html))

DOMスタイル操作
一丶概要
JavaScriptでdom要素のstyle属性を取得することで、要素にスタイル属性を動的に与えることができます.jQueryではstyleプロパティを動的に変更しますcss()メソッドを使用すれば実現できます
二丶スタイル操作関数

CSS()

css()関数は、現在のjQueryオブジェクトに一致する要素のcssスタイル属性値を設定または返すために使用され、指定したcss属性を削除する必要がある場合は、関数を使用してその値を空の文字列(")に設定します.
構文の形式:

$("selector").css(property [, value ])
$("selector").css( object )

height()

現在の一致要素を設定または返すための高さ構文フォーマット:$("selector").height( [ value ] ) valueパラメータを省略すると、取得高さを表します.このパラメータが指定されている場合は、高さの設定を示します.

width()

現在の一致要素を設定または戻すための幅構文フォーマット:$("selector").width( [ value ] )

innerHeight(),innerWidth()

現在の一致する要素の幅または高さを設定または戻します.
構文の形式:

$("selector").innerHeight( [ value ] )
$("selector").innerWidth( [ value ] )

outerHeight(),outerWidht()

現在の一致する要素の外側の高さ(外側の幅)を取得します.
構文の形式:

$("selector").outerHeight( [ includeMargin ] )
$("selector").outerWidth( [ includeMargin ] )

DOMイベントアクション
一丶事件API
jQueryオブジェクトのコアイベントメソッド、主に要素の任意のイベント(カスタムイベントを含む)にバインドを追加、キャンセル、トリガする1つ以上のイベント処理関数
二丶方法

on()メソッド

説明:on()メソッドは、選択された要素およびサブ要素に1つ以上のイベントハンドラを追加する.構文:$(selector).on(event,childSelector,data,function,map)

toggle([speed],[easing],[fn])

説明:2つ以上のイベントプロセッサ関数をバインドして、選択された要素の交代clickイベントに応答します.要素が表示されている場合は、非表示に切り替えます.エレメントが非表示の場合は、表示に切り替えます.構文:$(selector).toggle(speed,easing,function)パラメータ:

speed:効果を非表示/表示する速度.デフォルトは0ミリ秒です.可能な値:slow,normal,fast.

easing:オプションパラメータ.切り替え効果を指定します.デフォルトは「swing」で、パラメータ「linear」が使用できます.

fn:アニメーションが完了したときに実行される関数で、要素ごとに1回実行されます.

change([[data],fn])

説明:要素の値が変更するとchangeイベントが発生する.このイベントは、テキストドメイン(text field)、およびtextareaおよびselect要素にのみ適用されます.select要素で使用すると、changeイベントはオプションを選択したときに発生します.このイベントは、text fieldまたはtext areaに使用されると、要素がフォーカスを失ったときに発生します.
構文:$(selector).change(data,fn);

click([[data],fn])

説明:各一致要素のclickイベントをトリガーします.この関数はclickイベントにバインドされたすべての関数を呼び出す.構文:$(selector).click(data,fn);

mouseover([[data],fn])

説明:マウスポインタが要素の上にある場合、mouseoverイベントが発生します.このイベントはmouseoutイベントとともに使用されることが多い.mouseenterイベントとは異なり、マウスポインタが選択された要素またはそのサブ要素を通過してもmouseoverイベントがトリガーされます.マウスポインタが選択された要素を通過した場合にのみ、mouseenterイベント構文:$(selector).mouseover(data,fn);がトリガーされます.

mouseout([[data],fn])

1.説明:マウスポインタが要素から上に移動するとmouseoutイベントが発生します.このイベントはmouseoverイベントとともに使用されることが多い.構文:$(selector).mouseout(data,fn);

select([[data],fn])

説明:textareaまたはテキストタイプのinput要素のテキストが選択されると、selectイベント構文:$(selector).select(data,fn);が発生します.

submit([[data],fn])

jQueryに関する詳細は、「jQuery操作DOMノードメソッドのまとめ」、「jQuery遍歴アルゴリズムとテクニックのまとめ」、「jQueryテーブル(table)操作テクニックのまとめ」、「jQuery拡張テクニックのまとめ」、「jQueryよく見られる古典的な特効集計」、「jqueryセレクタの使い方のまとめ」、および「jQuery常用プラグインと使い方のまとめ」のトピックを参照してください.
本文で述べたことが皆さんのjQueryプログラム設計に役立つことを望んでいます.