THE HAM MEDIA BLOG

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

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
DOM
javascript
jquery

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

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

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



Contents Filters

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

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

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

それぞれ試してみる

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

プレビュー

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

◎デモ

  • ・最初のli
  • 3番目のli
  • 4番目のli

デモ部分のHTMLソース

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

● :contains(text)

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

● :empty

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

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

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

● :has(selector)

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

● :parent

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

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

今回も勉強になった!!

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

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

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



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。