このページの本文へ

初めてのjQuery:セレクターAPIを一挙解説(後編)

2009年07月30日 10時00分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

セレクターAPIのまとめ

 ここまでに紹介したとおり、jQueryではさまざまなセレクターを利用して(X)HTMLの要素を指定できます。最後に、jQueryで使えるセレクターをまとめておきましょう(表中の「要素」はセレクターで指定された要素です)

名称 書式 指定対象
CSSでよく利用されるセレクター
要素セレクター $("要素名") 特定のhtml要素
IDセレクター $("#ID名") 特定のid属性の値を持つ要素
クラスセレクター $(".クラス名") 特定のclass属性の値を持つ要素
子孫セレクター $("要素1 要素2") 特定の要素の内側にある要素
ユニバーサルセレクター $("*") すべての要素
グループセレクター $("セレクター1,セレクター2,...") 複数のセレクター
CSS2のセレクター
子セレクター $("親要素名 > 子要素名") 特定の要素の直下の子要素
隣接セレクター $("要素1 + 要素2") 特定の要素の次の要素
first-child擬似クラス $("要素:first-child") 特定の要素内の最初の要素
CSS3のセレクター
間接セレクター $("要素1 ~ 要素2") 特定の要素の後に出現する要素
否定擬似クラス $("要素1:not(要素2)") 特定の要素内の指定した要素以外の要素
empty擬似クラス $("要素:empty") 子要素やテキストを含まない要素
nth-child擬似クラス $("要素:nth-child(番号)") 特定の要素内の指定した番号の要素
last-child擬似クラス $("要素:last-child") 特定の要素内の最後の要素
only-child擬似クラス $("要素:only-child") 指定した要素が1つだけ含まれる特定の要素
CSSの属性セレクター
[attribute] $("[属性名]") 特定の属性を持つ要素
[attribute='value'] $("[属性名='値']") 特定の属性が指定した値を持つ要素
[attribute!='value'] $("要素名[属性名!='値']") 特定の属性が指定した値を持たない要素
[attribute^='value'] $("[属性名^='値']") 特定の属性が特定した値で始まっている要素
[attribute$='value'] $("[属性名$='値']") 特定の属性が特定した値で終わっている要素
[attribute*='value'] $("[属性名*='値']") 特定の属性が特定した値を含んでいる要素
[attributeFilter1][attributeFilter2] $("[属性セレクター1][属性セレクター2]") 複数の属性セレクターに該当する要素
jQueryの独自フィルター
firstフィルター $("要素:first") 指定した要素の最初の要素
lastフィルター $("要素:last") 指定した要素の最後の要素
evenフィルター $("要素:even") 指定した要素の偶数番目の要素
oddフィルター $("要素:odd") 指定した要素の奇数番目の要素
eqフィルター $("要素:eq(番号)") 指定した番号の要素(番号は0から数える)
gtフィルター $("要素:gt(番号)") 指定した番号より後の要素(番号は0から数える)
ltフィルター $("要素:lt(番号)") 指定した番号より前の要素(番号は0から数える)
headerフィルター $("要素:header") h1~h6までのheader要素
containsフィルター $("要素:contains(文字列)") 特定の文字列が含まれている要素
hasフィルター $("要素1:had(要素2)") 特定の要素が含まれている要素
parentフィルター $("要素:parent") 子要素やテキストを含む要素

 次回は、セレクターで指定した要素の(X)HTMLやCSSを変更する、さまざまな方法をご紹介します。


著者:西畑一馬(にしはた かずま)

著者写真

to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWEB制作にかかわる様々な情報を発信している。
主な著書に「現場のプロから学ぶXHTML+CSS」(共著、毎日コミュニケーションズ刊)がある。

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く