色々なselector機能

引き続き、下の本を読み進める。

第1部　「Core jQuery」
- 第1章　「Introducing jQuery」
- 第2章　「Selecting the elements upon which to act」
- 第3章　「Bringing pages to life with jQuery」
- 第4章　「Events are where it happens!」
- 第5章　「Energizing pages with animations and effects」
- 第6章　「Beyond the DOM with jQuery utility functions」
- 第7章　「Expand your reach by extending jQuery」
- 第8章　「Talk to the server with Ajax」
第2部　「jQuery UI」
- 第1章　「Introducing jQuery UI: themes and effects」
- 第2章　「jQuery UI mouse interactions: Follow that mouse!」
- 第3章　「jQuery UI widgets: Beyond HTML controls」
appendix 「JavaScript that you need to know but might not!」

なぜか家で使っているGoogle Chrome 6では本のサイトに載っているサンプルコードが動かないのでSafari 5で閲覧中。

以下のようにCSSと同じようにDOMエレメントをセレクトできる。

$('a')

aタグ全部

$('#someID')

「someID」というIDを持つ要素。

$('.someClass')

「someClass」というclassを持つ要素。

$('a#someID.someClass')

「someID」というIDを持ち、「someClass」というクラスが指定されているaタグ。

$('p a.someClass')

pタグの子要素でaタグであり、かつ、「someClass」というクラスが指定されている要素。

SQLのunionみたいに、複数のselectorで対象をselectして結果をマージしたいときは、カンマで区切る。

$('div, span')

divタグ要素、または、span要素。

直下の子要素だけをselectしたいときは以下のようにselectorを書く。

$('ul > li > a')

以下のように書いてしまうと、子要素だけではなく、孫要素以下もマッチすればselectされてしまう。

$('ul li a')

以下のように書いて、属性の値を指定したselectが可能。

$("div[someAttribute^='startWith']")

この場合、someAttribute属性がstartWithで始まる（^=は〜で始まるの意となる）divタグをselectする。

baseとなる要素に「:」を付与することでページ中の絶対位置や相対位置を用いたfilterを掛けることができる。
奇数番目のliタグを取得する場合は以下のような感じ。

$('li:odd')

そのほかにも:even、:eq(n)　（n番目にマッチする）、:nth-child(n) (n番目の子要素)、等々多数のフィルターが使える。eqは0からインデックスが開始するが、nth-childは1から開始するので注意。

setoya-blog