api_programming @ ウィキ
api_programming @ ウィキ

Javascript > jQuery > 要素の操作

下位ページ

Content

基本

jQuery("...") or $("...")

要素の取得


属性で選ぶ

$("TAG[ATTRIBUTE='VALUE']")
例えば
$("input[name='newsletter']")

クラスを選ぶ

.（ピリオド）を使う。TAGがなくても良い。
$("TAG.CLASS")

親要素、先祖要素

親要素

$(element).parent()
$(element).parent(val)
値(val)を設定することで、valに対応する親ならば返す、という処理にできる
parent() - jQuery日本語リファレンス

先祖要素

$(element).parents()
$(element).parents(val)
ルート以外、全て取り出す
parent() - jQuery日本語リファレンス


子要素、子孫要素

親要素の下に欲しい子孫要素を記述する。
$("先祖 子孫")
$("子孫", "先祖")
直下（子）だけ取得する場合は > を使用する。
$("先祖 > 子孫")

  • A
  • B
    • BA
    • BB
$("ul li:last")
はBB
$("ul > li:last")
はBが返る

$(a).children("~")

thisの子要素

$(子要素, this)
で取得できる


n番目の要素を取り出す

$(selector).eq(n)

フィルタ(filter)

コロン( : )
$("TAG:FILTER")

最初、最後

最初
$("TAG:first")
最後
$("TAG:last")

次の要素、前の要素

aの次の要素
a.next()
aの次の要素（ただし、クラスがb）
a.next(".b")
もしも、aの次の要素がクラスbでなければ、何も選択されない。(要素が取得できたか確認)

aの前の要素
a.prev()

要素が取得できたか確認

a = b.next();
if(a !== undefined)
では弾けなかった。

if(a.get(0) !== undefined)
では通った（はじけた）

ここで分かるのは、b.next()にて、DOMエレメントの「集合」として返しているということ？
http://kihon-no-ki.com/check-existence-element-by-javascript-and-jquery

要素の追加

子要素に追加 prepend(), prependTo(), append(), appendTo()

ある要素 A を 別の要素 B の子として移動する 

- B
  - A

prepend(), prependTo()は子要素の最初に追加
$(B).prepend(A)
$(A).prependTo(B)

append(), appendTo()は子要素の最後に追加
$(B).append(A)
$(A).appendTo(B)

要素の移動



ある要素の後ろに移動 after(), insertAfter()

ある要素 B を 別の要素 A の後ろに挿入する（A->B)
$(A).after(B)
$(B).insertAfter(A)

ある要素の前に移動 before(), insertBefore()

ある要素 A を 別の要素 B の前に挿入する（A->B)
$(A).before(B)
$(B).insertBefore(A)
after,insertAfterから類推
.after() - jQuert入門

リストの最後の要素を取得する

:last を追加する
$('ul#id li:last')
ul#idの下に、更にulがネストされていて、li要素がある場合、これが返る。

要素の削除する

$('ul').empty()
これは子要素を削除している
$('ul').remove()
.remove()は、自分自身を削除している。しかし、


要素数

$(selector).length
「要素の操作」をウィキ内検索
最終更新：2020年09月12日 11:49