jqueryで要素の追加、変更、削除をする

セレクター

階層
子孫セレクター	$("ancestor descendant")	先祖要素（ancestor）の内側の指定された子孫要素（descendant）を選択
子セレクター	$("parent > child")	親要素（parent）の直下の指定された子要素（child）を選択。 > が無いと孫などの要素も選択してしまうので注意が必要
隣接セレクター	$("prev + next")	指定した要素（prev）の次にある指定した要素（next）を選択
関節セレクター	(“prev ~ siblings”)	定した要素（prev）の後に続く指定した要素（sliblings）を選択

子要素フィルター
first-child	$("要素:first-child")	指定した要素がはじめの子要素の場合、その要素を選択
first-of-type	$("要素:first-of-type")	指定した要素のはじめの子要素を選択
last-child	$("要素:last-child")	指定した要素が最後の子要素の場合、その要素を選択
last-of-type	$("要素:last-of-type")	指定した要素の最後の子要素を選択
nth-child nは数字ではなく「n」で使う	$("要素:nth-child(n)") 括弧の中は数字を入れる	指定した要素のn番目を選択。nは1から数えた数
nth-last-child	$("要素:nth-last-child(n)")	指定した要素の最後から数えてn番目を選択
nth-of-type	$("要素:nth-of-type(n)")	指定した要素のn番目を選択
nth-last-of-type	$("要素:nth-last-of-type(n)")	指定した要素の最後から数えてn番目を選択
only-child	$("要素:only-child")	指定した要素がひとつしかない子要素の場合、その要素を選択
only-of-type	$("要素:only-of-type")	指定した要素がひとつしかない子要素のタイプの場合、その要素を選択

親要素・子要素・兄弟要素を取得するのに参考になるサイトサンプル付きで解説あり

属性セレクター
[attribute]	$("[属性名]")	指定した属性名（attribute）の要素を選択
[attribute='value']	$("[属性名='値']")	指定した属性名（attribute）と値（value）の文字列が全く同じ場合に要素を選択
[attribute!='value']	$("[属性名!='値']")	指定した属性名（attribute）と値（value）の文字列が異なる場合に要素を選択
[attribute*='value']	$("[属性名*='値']")	指定した属性名（attribute）が値（value）の文字列を含んでいる要素を選択
[attribute\|='value']	$("[属性名\|='値']")	指定した属性名（attribute）が値（value）の文字列と同じ場合、もしくは値の文字列からはじまり後ろにハイフン（-）が続いてる場合に要素を選択
[attribute$='value']	$("[属性名$='値']")	指定した属性名（attribute）が値（value）の文字列と同じ場合、もしくは値の文字列と属性名の最後の部分が同じ場合に場合に要素を選択
[attribute~='value']	$("[属性名~='値']")	指定した属性名（attribute）が値（value）の文字列と同じ場合、もしくは値の文字列を半角スペースで区切られて含む場合に要素を選択
[attribute^='value']	$("[属性名^='値']")	指定した属性名（attribute）が値（value）の文字列からはじまる場合に要素を選択

フォームフィルター
:button	$("要素:button")	button要素を選択
:checkbox	$("要素:checkbox")	type属性がcheckboxのinput要素を選択
:checked	$("要素:checked")	チェックボックスやラジオボタンのチェックが入っている要素を選択
:disabled	$("要素:disabled")	disabledな要素を選択
:enabled	$("要素:enabled")	enabledな要素を選択
:file	$("要素:file")	type属性がfileのinput要素を選択
:image	$("要素:image")	type属性がimageのinput要素を選択
:input	$("要素:input")	input、textarea、select、button要素を選択
:password	$("要素:password")	type属性がpasswordのinput要素を選択
:radio	$("要素:radio")	type属性がradioのinput要素を選択
:reset	$("要素:reset")	type属性がresetのinput要素を選択
:selected	$("要素:selected")	選択されたセレクトボックスを選択
:submit	$("要素:submit")	type属性がsubmitのbutton要素・input要素
:text	$("要素:text")	type属性がtextのinput要素を選択

下記の表の行の値、セルの値を取得し表示しました。

上記表のidは「testt」です。jqueryのセレクタでテーブルの要素を取り出し、ソースを「HTML」の表示欄(id="html1")に入れています。

Javascript


 var txt = $("#testt").html();
 $("#html1").html(txt);

HTML

セレクターで要素を取り出すテスト

$("#testt tr:first-child").html()
tr:first-child⇒最初の行のhtmlを取り出す
$("#testt tr:first-child").text()
最初の行のtextを取り出す
$("#testt tr:nth-child(1)").text()
nth-child(数字)の表記では数字は1から始める
$("#testt tr").eq(0).text()
eq(数字)の表記では数字は0から始める
$("#testt tr:first-child th:first-child").text()
最初の行の最初のth(first-child)のtextを取り出す
$("#testt tr:first-child th").eq(0).text()
最初の行のthの0番目(eq(0))のtextを取り出す。数字は0から数える
$("#testt tr:eq(1) td").eq(0).text("トヨタ")
2番目の行(tr:eq(1))の1番目のセル(eq(0))のtextを「トヨタ」に変更する
$("#testt tr:first-child th").eq(0).text("製造元")
最初の行(tr:first-child)のthのうちの最初のセル(eq(0))のtextを「製造元」に変更する
$("#testt tr:nth-child(3) td").eq(1).text("テスト")
3番目の行(tr:nth-child(3))のtdのうちの2番目(eq(1))のtdのテキストを「テスト」に変更する

セレクターで要素を挿入するテスト

.append()
要素の末尾に、設定したコンテンツを挿入
$("#test2 li").eq(0).append("<hr>リスト1の末尾に挿入した要素です");
.prepend()
要素の先頭に、設定したコンテンツを挿入
$("#test2 li").eq(1).prepend("<hr>リスト2の先頭に挿入した要素です");
.appendTo()

$(A).append(B) とした場合にAにBが追加されるのに対して、
$(A).appendTo(B) ではAがBに追加される。

$("<hr>").appendTo("#test2 li:nth-child(3)");
var txt = "リスト3の末尾に挿入した要素です "; $(txt).appendTo("#test2 li:nth-child(3)");
.prependTo()

$(A).prepend(B) とした場合にAにBが追加されるのに対して、
$(A).prependTo(B) ではAがBに追加される。

$("<hr>").prependTo("#test2 li:nth-child(4)");
txt = "リスト4の先頭に挿入した要素です"
$(txt).prependTo("#test2 li:nth-child(4)");
.before()
要素の前を挿入
txt = "<hr>リスト"+Number(i+1)+"の前に挿入した要素です";
$("#test2 li").eq(i).before(txt);
.after()
要素の後を挿入
txt = "<hr>リスト"+Number(i+1)+"の後に挿入した要素です";
$("#test2 li").eq(i).after(txt);
.remove()
要素を削除