jqueryフィルター

TOPページに戻る > jquery入門

jqueryフィルター

jqueryが独自に採用したフィルターです。IE6、IE7にも対応しています
jqueryで使えるCSS以外のセレクタです

firstフィルター

指定した要素の最初の要素を指定します
$("要素:first")
この場合は、最初に出てくるp要素を指定します
first-child類似クラスも最初の要素を指定しますが、同じ親要素ごとに最初の要素を指定しますが、firstフィルターは同じ親要素がいくつあっても1つのみ指定します

$(function() {
	$("p:first").処理する内容;
});

lastフィルター

指定した要素の最後の要素を指定します
$("要素:last")
この場合は、最後に出てくるp要素を指定します
last-child擬似クラスも最後の要素を指定しますが、同じ親要素ごとに最後の要素を指定しますが、firstフィルターは同じ親要素がいくつあっても1つのみ指定します

$(function() {
	$("p:last").処理する内容;
});

evenフィルター

指定した要素の偶数番目の要素を指定します
$("要素:even")
この場合は、p要素の偶数番目の要素を指定します。4つ要素があるとすると2番目と4番目の要素を指定します
nth-child擬似クラスも偶数の要素を指定できますが、同じ親要素ごとに偶数の要素を指定します。evenフィルターは指定した要素の中から偶数の要素を指定します

$(function() {
	$("p:even").処理する内容;
});

oddフィルター

指定した要素の奇数番目の要素を指定します
$("要素:odd")
この場合は、p要素の奇数番目の要素を指定します。4つ要素があるとすると1番目と3番目の要素を指定します
nth-child擬似クラスも奇数の要素を指定できますが、同じ親要素ごとに奇数の要素を指定します。firstフィルターは指定した要素の中から奇数の要素を指定します

$(function() {
	$("p:odd").処理する内容;
});

eqフィルター

指定した番号の要素を指定します
$("要素:eq(番号)")
この場合は、5番目に出てくるp要素を指定します

$(function() {
	$("p:eq(5)").処理する内容;
});

gtフィルター

指定した番号より後にでてくる要素を指定します
$("要素:gt(番号)")
この場合は、7番目のp要素より後に出てくるを指定します

$(function() {
	$("p:gt(7)").処理する内容;
});

ltフィルター

指定した番号より前にでてくる要素を指定します
$("要素:lt(番号)")
この場合は、10番目のp要素以前に出てくるを指定します

$(function() {
	$("p:lt(10)").処理する内容;
});

headerフィルター

h1～h6の要素をまとめて指定します
$("要素:header")
この場合は、h1～h6の要素をまとめて指定します。$("h1,h5:header")こうやるとh1とh5を指定することができます

$(function() {
	$(":header").処理する内容;
});

containsフィルター

指定した文字列が含まれている要素をしていします
$("要素:contains('文字列')")
この場合は、p要素の内容にhogeとゆう文字がある要素を指定します

$(function() {
	$("p:contains('hoge')").処理する内容;
});

hasフィルター

指定した要素2を内容に持っている要素を指定します
$("要素1:has('要素2')")
この場合は、strong要素を内容に持っているp要素を指定します

$(function() {
	$("p:has('strong')").処理する内容;
});

parentフィルター

指定した要素の内容に子要素やテキストを含む要素を指定します
$("要素:parent")
この場合は、p要素の内容に子要素やテキストがある要素を指定します
内容がない要素は指定されません。例.<p></p>

$(function() {
	$("p:parent").処理する内容;
});

animatedフィルター

アニメーションしている要素を指定します
$("要素:animated")
この場合は、p要素がアニメーションしているときに指定します

$(function() {
	$("p:animated").処理する内容;
});

アニメーションをしていない要素を指定する方法

否定擬似クラスといっしょに使うとアニメーションしていない要素を指定できます
この場合は、アニメーションしていないp要素を指定します

$(function() {
	$("p:not(:animated)").処理する内容;
});