setoya-blog

システム開発技術、データ分析関連でお勉強したことや、山奥生活を綴る、テンション低めなブログです。

色々なselector機能

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

jQuery in Action

jQuery in Action

  • 第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 selector機能

以下のように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要素。

child selector機能

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

$('ul > li > a')

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

$('ul li a')

Attribute selector機能

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

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

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

filter selector機能

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

$('li:odd')

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