THE HAM MEDIA BLOG

jQuer基礎:アトリビュートフィルターを学ぶ

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

アトリビュートフィルターを学ぶ

jQuer基礎:ベーシックフィルターを学ぶ
jQuer基礎:コンテンツフィルターを学ぶ
現在jQueryのフィルターについて2つのことを勉強ついでにエントリーしましたが、
今回はアトリビュートフィルターを勉強してみようと思う。

タグ内のnameとかclassとかidの名前が●●●の時に適応・・・
というようなフィルターの勉強です!



Attribute Filters

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

※以下それぞれの説明ページへのリンクになっています

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

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

それぞれ試してみる

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

プレビュー

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

◎デモ(下記の名前はクラスの名前になってます)

  • ・attribute
  • ・attribute
  • ・attributes
  • ・attribut
  • ・filters
  • ・filter
  • ・fil
  • ・no class(クラス無し)

デモ部分のHTMLソース

<ul class="filtersPreview">
<li class="attribute">・attribute</li>
<li class="attribute">・attribute</li>
<li class="attributes">・attributes</li>
<li class="attribut">・attribut</li>
<li class="filters">・filters</li>
<li class="filter">・filter</li>
<li class="fil">・fil</li>
<li>・no class(クラス無し)</li>
</ul>

今回はちょっと進歩

[attribute]のattribute部分をclassにしてみました。
あとはオレンジの文字で説明している通りです。

で、何が進歩かっていうと、毎回デモを作るときは
jQueryを使ってプログラムを少し作るのですが、
配列とかループとか使って今回のをつくっちゃいました。

いつもは自分のプログラムを紹介するのが恥ずかしくて、
ソースをみたらわかるようにはしていましたが、
参考として載せることをしていませんでした。

今回はちょっと勉強したぞってことで、
載せておきたいと思います。

$(document).ready(function(){
	$("ul.contents-filters a").click(function(){
	    
	    Attributes = new Array(
	       "class", "class='attribute'", 
	       "class!='attribute'", "class^='fil'", 
	       "class$='s'", "class*='te'", "class*='fil'][class$='s'");
		
		$("ul.filtersPreview li").css("background-color","#fff");
		
		var filterNum = this.id;
		
		for (i = 0; i < 7; i++) {
		  if(filterNum == "afilter"+ i ){ var filter = Attributes[i]};
		};
		
		var changeFilter = "ul.filtersPreview li["+filter+"]";
		
		$(changeFilter).css("background-color","#ccccff");
		
		$("p#preview-info")
		  .html("適応されているフィルターは「:" + filter + "」です。");
		
		return true;
	});
});

もっとこう作ったらいいのに!ってのは、たぶんまだまだ多いですが、
少しずつでも進歩していけたらなって思っています。



この記事へのコメント
初めてコメントします!!

以前から、時々訪問させて頂いています。
(読み逃げでしたが・・・)
今日の更新を見てめちゃめちゃ応援したくなりました!!
がんばってください!!!!


Posted by ルカ at 2008年06月28日
コメントを書く
お名前: [必須入力]

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

ホームページアドレス:

コメント: [必須入力]

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


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

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

トップに戻る

×

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