DOMの取得

さて、諸々いじる前に、DOMを取得する必要があります。
それの取得方法についてはじめていきましょう。

CSSと同じような取得方法

CSSと同じように#や.で指定することができます。

IDを指定する。

CSSと同じく、IDでの指定は、先頭に [#] をつけます。

$('#hoge')

classを指定する。

CSSと同じく、classでの指定は、先頭に [.] をつけます。

$('.hoge')

要素自体を指定する。

CSSと同じく、そのまま要素名をつけます。

$('p')

子要素の指定

CSSと同じく、半角スペースで区切ってあげます。

$('p .hoge')

複数要素の指定

CSSと同じく、[,]で区切ってあげます。

$('p .hoge,div .hige')

メソッドを使った子要素の取得

今度は、jQueryメソッドを使った指定方法です。

children([条件])

子要素の指定ですが、半角スペースではなく、関数を使用して指定することができます。
但し直後の子要素のみとなり、孫以降は指定することができません。

// 要素Pの子要素内のhogeクラス
$('p').children('.hoge');

find([条件])

子以降全てを参照する事ができます。

// 要素P以下にある全てのhogeクラスを参照
$('p').find('.hoge');

メソッドを使った親要素の取得

jQueryメソッドを使った親要素の指定方法です。

parent([条件])

直前の親要素を取得します。
自分の親を取得しますので、それ以上上は参照しません。

// 要素Pの親がhogeクラスの場合取得
$('p').parent('.hoge');

parents([条件])

同じく親要素を取得しますが 自分の親以上の先祖要素を取得します。

// 要素Pの先祖で、がhogeクラスの要素を取得
$('p').parents('.hoge');

メソッドを使った兄弟要素の取得

自分と同階層にいる要素を取得できます。

next([条件])

自分の次の要素を取得します。
但し、直後のみとなります。

// 要素Pの次の要素にhogeクラスがあれば取得
$('p').next('.hoge');

nextAll([条件])

自分の次の要素を取得します。
次以降すべての要素が対象です。

// 要素Pの次以降でhogeクラスがついているものを取得
$('p').nextAll('.hoge');

prev([条件])

自分の前の要素を取得します。
但し、直前のみとなります。

// 要素Pの前要素にhogeクラスがついていれば取得
$('p').prev('.hoge');

prevAll([条件])

自分の前の要素を取得します。
前にいる要素全てが対象です。

// 要素Pの前要素にhogeクラスがついていれば取得
$('p').prev('.hoge');