ほいほい。まりぞーです。

前回から引き続き、jQueryセレクタについてです。
前回 : 【jQuery入門 2】セレクタって何?要素を取得しよう。基本編

今回は、.next().is().parent()など、機能的なセレクタの使い方をご紹介します。

今回もデモがあったりします。

目次

機能的なセレクタ一覧

  • .find()
    指定された条件に当てはまる要素を取得
  • .prev()
    指定された条件に当てはまる要素の直前にある要素を取得
  • .next()
    指定された条件に当てはまる要素の直後にある要素を取得
  • .eq()
    指定された条件に当てはまるn番目の要素を取得
  • .first()
    指定された条件に当てはまる要素の最初の要素を取得
  • .last()
    指定された条件に当てはまる要素の最後の要素を取得
  • .is()
    指定された条件と一致する要素を取得
  • .not()
    指定された条件と一致しない要素を取得
  • .children()
    指定された条件に当てはまる要素の子要素を取得
  • .parent()
    指定された条件に当てはまる要素の親要素を取得

find()

公式ドキュメント : .find() | jQuery API Documentation

  1. 指定した条件「class『.demo1_target2』の要素」を取得する
  2. 選択した要素のclassを追加する

DEMO 01

find()のDEMO

HTML

jQuery

prev()

公式ドキュメント : .prev() | jQuery API Documentation

  1. 指定した条件「class『demo2_target2』の要素」直前にある要素を取得する
  2. 選択した要素にclass「demo02_target3」を追加する

DEMO 02

prev()のDEMO

HTML

jQuery

next()

公式ドキュメント : .next() | jQuery API Documentation

  1. 指定した条件「class『demo03_target2』の要素」直後にある要素を取得する
  2. 選択した要素にclass「demo03_target3」を追加する

DEMO 03

next()のDEMO

HTML

jQuery

eq()

公式ドキュメント : .eq() | jQuery API Documentation

  1. 指定した条件「demo04_inner p」の7番目の要素を取得する
  2. 選択した要素にclass「demo04_target」を追加する

DEMO 04

eq()のDEMO

HTML

jQuery

first()

公式ドキュメント : .first() | jQuery API Documentation

  1. 指定した条件「demo05_inner p」の最初の要素を取得する
  2. 選択した要素にclass「demo05_target」を追加する

DEMO 05

first()のDEMO

HTML

jQuery

last()

公式ドキュメント : .last() | jQuery API Documentation

  1. 指定した条件「demo06_inner p」の最後の要素を取得する
  2. 選択した要素にclass「demo06_target」を追加する

last()のDEMO

DEMO 06

HTML

jQuery

is()

公式ドキュメント : .is() | jQuery API Documentation

  1. 指定した条件のclass「demo07_inner p:even」と一致する要素を取得する
  2. 選択した要素にclass「demo07_target」を追加する

DEMO 07

is()のDEMO

HTML

jQuery

not()

公式ドキュメント : .not() | jQuery API Documentation

  1. 指定した条件のclass「demo08_target」と一致しない要素を取得する
  2. 選択した要素にclass「demo08_target2」を追加する

DEMO 08

not()のDEMO

HTML

jQuery

children()

公式ドキュメント : .children() | jQuery API Documentation

class「demo09_trigger」の要素「ふふふ・・・」をクリックすると、「demo09_target p」要素の子要素(span)のclassを切り替える

DEMO 09

children()のDEMO

HTML

jQuery

DEMO 10 : parent()

公式ドキュメント : .parent() | jQuery API Documentation

class「demo10_trigger」の要素「ぽちぽち」をクリックすると、「demo10_target」要素の親要素(class「demo10_inner」)にclass「demo10_target2」を追加する

DEMO 10

parent()のDEMO

HTML

jQuery

いかがでしたかね。次回はクリックしたらなんちゃらする、とかイベントについて触れていきます。
次回もよろしくお願いしますー(°ω°)ノ

第4回目はこちら。
【jQuery入門 4】イベントって何?on、offを使ってみよう

あわせて読みたい記事