jQuer基礎：コンテンツフィルターを学ぶ

2008/06/02

コンテンツフィルターを学ぶ

ちょっと前に「jQuer基礎：ベーシックフィルターを学ぶ」をエントリーしたのですが、
今回はコンテンツフィルターを勉強してみようと思う。

前回同様、こんなのもあるのね〜って状態でスタート。
うまく覚えられるだろうか・・・

とりあえずどんなのがあるのかチェックしてみよう。
「API/1.2/Selectors - jQuery JavaScript Library」

今回のはどれも想像がつく。
あとは使い方と動作のしかたくらいだろう。

今回もためしてみるとしよう。

それぞれのソースは先ほどの一覧がリンクになっているので、
そこからとんで参照してみてください。

それぞれをクリックするとデモ部分でプレビューされます。

<ul class="filtersPreview">
<li>・最初のli</li>
<li></li>
<li>・<span><em>３番目のli</em></span></li>
<li>・<em>４番目のli</em></li>
<li><em></em></li>
</ul>

これは(text)で指定した語句が入っていたら、
そこの要素に適応するようになっている。
今回の例では、「最初」という単語がはいっていたら、
適応されるようにしてみた。

これはHTMLのみでみると、そこはliの空欄なのだが
その空欄部分にtextを表示させるようにしているため、
JavaScriptが動作している限りは「二番目のli」が表示されるようになっている。

テーブルなどの空白セルで用いたり、
空要素になっている部分にいろいろ適応させたりするのに便利だ。

今回のだと最後の部分も空要素なのだが、
liより内側にemがあるため、liの中はemptyだとみなされず、
空要素ではないとされるために表示されない。

これは(selector)を含んでいる要素に適応となる。
今回のはliの中のspan要素に適応されるようにしてある。

これは今回の例ではわからないかもしれないが、
:parentで指定した要素内に、テキストや子要素があるものに適応される。

今回はemが指定されている部分に適応されるようになっているが、
最後のem内は空で、子要素がないので適応されない。

jQueryの基礎をここで勉強すれば勉強するほど、
いろんな使い方がわかってきて楽しい。

使ってみないとわからないようなのも沢山あるから、
実際に使ってみるのが一番覚えるなーって思った。

この勉強、時間があるときにでも続けて、
プチシリーズものにしてみようと思う。

参考サイト：