THE HAM MEDIA BLOG

jQuer基礎:ベーシックフィルターを学ぶ

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

ベーシックフィルターを学ぶ

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

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



Basic Filters

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

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

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

それぞれ試してみる

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

プレビュー

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

<h4>:headerを押すとここが変化</h4>

● :first

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

● :last

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

● :not(selector)

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

● :even

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

● :odd

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

● :eq(index)

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

● :gt(index)

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

● :lt(index)

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

● :header

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

● :animated

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

勉強になった!!

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

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

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



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

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

ホームページアドレス:

コメント: [必須入力]

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


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

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

トップに戻る

×

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