THE HAM MEDIA BLOG

CSSの疑似要素に似たような性質のjQueryのフィルター機能。
実はどんなのがあるのかわかっていなかったりするので勉強！

こんなにあったの！？
と、ただただ、驚くばかりの今日のお勉強。

Basic Filters

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

• ■:first
• ■:last
• ■:not(selector)
• ■:even
• ■:odd
• ■:eq(index)
• ■:gt(index)
• ■:lt(index)
• ■:header
• ■:animated

感覚的になのでしょうが、上５つは何となくわかる。
でも・・・した５つが全く推測できない。
「:header」？「:animated」？

とりあえず試してみよう。

それぞれ試してみる

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

プレビュー

それぞれをクリックするとプレビュー
（ここに適応されているフィルターが表示されます。）

● :first

これは、最初の要素のみに適応となる。
今回はリスト(li)での設定だったので、
リストの最初のみ適応されるようになっている。

● :last

これは、最後の要素のみに適応となる。
今回の例では、これも同じくリスト(li)での設定だったので、
リストの最後のみ適応されるようになっている。

● :not(selector)

これは、その:notが設定されているところ以外の適応となる。
今回はnotのところ以外が適応されるように設定してある。

● :even

これは、偶数番目の要素に適応となる。
気をつけてもらいたいのは、要素の開始は０番目であり、
０も偶数に入るようで、そこからの適応となる。
だから今回の例でも、最初のが０番目という扱いになり、
最初から適応されているのである。

● :odd

これは、奇数番目の要素に適応となる。
これも気をつけたいのは、要素の開始が０番目だから、
最初からの適応ではなく、その次からとなる。

● :eq(index)

これは、(index)のindexに入れた数字の部分に適応となる。
これも０から始まることに注意して使うように。
今回は（５）に設定してある。

● :gt(index)

これは、(index)のindexに入れた数字より後の要素に適応となる。
今回は（６）に設定してある。

● :lt(index)

これは、(index)のindexに入れた数字より前の要素に適応となる。
今回は（７）に設定してある。

● :header

これは見出し要素（h１やh２等）に適応となる。
今回はプレビュー部分の最後にいれてある、
<h4>部分に適応するように設定してある。

● :animated

これはアニメーション設定してあるところに適応となる。
今回のはこれをクリックすると、
スライドして出たり消えたりを繰り返すアニメーション(slideToggle)
になっていて、そこに適応されるようにした。

勉強になった！！

フィルターは使い方とか全然わかっていなかったけど、
今回のプレビュー部分を作ったときに、いろいろ学べた！

evenとかoddは便利だなって思う。
リストや表で色分けなどで使うと便利だと思う。

その他のフィルターも、必要な部分で使ってみるといいでしょう。