jqueryセレクタ

TOPページに戻る > jquery入門

jqueryで使えるセレクタ

cssのセレクタを使えます。cssと同じ使い方なので使いやすいと思います
jqueryはブラウザに依存しないので、全てのブラウザでセレクタを使えます
jqueryではその他にも便利なセレクターが使えます

要素セレクタ

html要素で指定します。h1要素を変更したい場合のセレクターの書き方

<script type="text/javascript">
$(function() {
	$("h1").処理する内容;
});
</script>

idセレクタ

HTML要素のid属性を指定します。この場合はid="hoge"になっているHTML要素を指定しています

$(function() {
	$("#hoge").処理する内容;
});

HTML要素を特定する場合の指定方法。この場合はp要素のid="hoge"になっているHTML要素を指定しています

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

classセレクタ

HTML要素のclass属性を指定します。この場合はclass="hoge"になっているHTML要素を指定しています

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

HTML要素を特定する場合の指定方法。この場合はh1要素のclass="hoge"になっているHTML要素を指定しています

$(function() {
	$("h1.hoge").処理する内容;
});

子孫セレクタ

cssの子孫セレクタと指定の方法は同じです
要素の中にある要素にスタイルを適用する時に使います。この場合はdiv要素の子要素になっているp要素を指定します

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

全称セレクタ（ユニバーサルセレクタ）

全ての要素を指定します。cssの全称セレクタと使い方は同じです

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

この場合はp要素の子要素になっている全ての要素を指定します

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

この場合はhogeクラスの子要素になっている全ての要素を指定します

$(function() {
	$(".hoge *").処理する内容;
});

グループセレクタ

cssのセレクタのグループ化と指定方法は同じです。この場合はb要素とstrong要素を指定しています

$(function() {
	$("b, strong").処理する内容;
});

子供セレクタ

cssの子供セレクタと指定方法は同じです。直接の子要素のみ指定します
この場合はdiv要素の子要素になっているb要素を指定します

$(function() {
	$("div > b").処理する内容;
});

隣接セレクタ

特定の要素の次の要素を指定します。この場合はem要素の次にくるb要素を指定します

$(function() {
	$("em+b").処理する内容;
});

first-child擬似クラス

指定したセレクタの中で最初の要素を指定します。親要素がある場合は、親要素の中で最初に記述された要素を指定します
$("要素:first-child")

この場合は最初に記述されたp要素を指定します

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