セレクターの指定方法まとめ

セレクターの指定方法を適当に分類してまとめ。

サンプルコード

HTML

<div id="sample">
	<h1>H1のテキスト</h1>
	<p>pのテキスト</p>
	<ul>
		<li id="list1" class="list">1番目のリスト</li>
		<li class="list2">2番目のリスト</li>
		<li class="list">3番目のリスト</li>
		<li class="list">4番目のリスト</li>
	</ul>
	<dl>
		<dt class="dt1">1番目のdt</dt>
		<dd class="dd1"><span>1番目のdd</span></dd>
		<dt class="dt2">2番目のdt</dt>
		<dd class="dd2">2番目のdd</dd>
		<dt class="dt3">3番目のdt</dt>
		<dd class="dd3"><span>3番目</span>の<span>dd</span></dd>
	</dl>
	<div><a href="#sample">ページ内リンク</a></div>
	<div><a href="image.jpg">jpg画像リンク</a></div>
	<div id="empty"></div>
</div>

基本

JavaScript

$(function() {
	console.log($('h1').text()); // H1のテキスト
	console.log($('#list1').text()); // 1番目のリスト
	console.log($('.list2').text()); // 2番目のリスト
	console.log($('h1, p').text()); // H1のテキストpのテキスト
	console.log($('ul *').text()); // 1番目のリスト2番目のリスト3番目のリスト4番目のリスト
	console.log($('li:not(.list2)').text()); // 1番目のリスト3番目のリスト4番目のリスト
});

基本のデモページ
　

階層

JavaScript

$(function() {
	console.log($('#sample li').text()); // 1番目のリスト2番目のリスト3番目のリスト4番目のリスト
	console.log($('#sample > h1').text()); // H1のテキスト
	console.log($('.dt2 + dd').text()); // 2番目のdd
	console.log($('.dt2 ~ dd').text()); // 2番目のdd3番目のdd
});

階層のデモページ
　

順番

JavaScript

$(function() {
	console.log($('dt:first-child').text()); // 1番目のdt
	console.log($('dd:first-child').text()); // 
	console.log($('li:nth-child(2)').text()); // 2番目のリスト
	console.log($('dt:last-child').text()); // 
	console.log($('dd:last-child').text()); // 3番目のdd
	console.log($('dd span:only-child').text()); // 1番目のdd
	console.log($('dd:first').text()); // 1番目のdd
	console.log($('dt:last').text()); // 3番目のdt
	console.log($('li:even').text()); // 1番目のリスト3番目のリスト
	console.log($('li:odd').text()); // 2番目のリスト4番目のリスト
	console.log($('dt:eq(1)').text()); // 2番目のdt
	console.log($('dt:gt(0)').text()); // 2番目のdt3番目のdt
	console.log($('dt:lt(2)').text()); // 1番目のdt2番目のdt
});

順番のデモページ
　

属性

JavaScript

$(function() {
	console.log($('#sample a[href]').text()); // ページ内リンクjpg画像リンク
	console.log($('[id = "list1"]').text()); // 1番目のリスト
	console.log($('li[id != "list1"]').text()); // 2番目のリスト3番目のリスト4番目のリスト
	console.log($('[href ^= "#"]').text()); // ページ内リンク
	console.log($('[href $= ".jpg"]').text()); // jpg画像リンク
	console.log($('[href *= "sample"]').text()); // ページ内リンク
	console.log($('li[class = "list"][id = "list1"]').text()); // 1番目のリスト
});

属性のデモページ
　

中身

JavaScript

$(function() {
	console.log($('div:empty').attr('id')); // empty
	console.log($('#sample div:parent').text()); // ページ内リンクjpg画像リンク
	console.log($('li:contains("1番目")').text()); // 1番目のリスト
	console.log($('dd:has(span)').text()); // 1番目のdd3番目のdd
	console.log($('#sample :header').text()); // H1のテキスト
});

中身のデモページ
　

フォーム

HTML

<div id="sample">
	<input type="text" value="text" />
	<input type="password" value="pass" />
	<textarea cols="30" rows="5">テキストエリア</textarea>
	<input type="radio" name="radio" id="rd01" value="radioA" /><label for="rd01">ラジオA</label>
	<input type="radio" name="radio" id="rd02" value="radioB" checked /><label for="rd02">ラジオB</label>
	<input type="checkbox" name="check" value="checkA" />チェックA
	<input type="checkbox" name="check" value="checkB" checked />チェックB
	<select>
		<option value="">選択してください</option>
		<option value="selectA" selected>選択肢A</option>
		<option value="selectB">選択肢B</option>
	</select>
	<input type="submit" value="submit" />
	<input type="image" value="image" />
	<input type="reset" value="reset" />
	<button>button</button>
	<input type="file" />
</div>

JavaScript

$(function() {
	console.log($(':input').text()); // テキストエリア選択してください選択肢A選択肢Bbutton
	console.log($(':text').val()); // text
	console.log($(':password').val()); // pass
	$(':radio').addClass('radio'); // radioにclass付与
	$(':checkbox').addClass('check'); // checkboxにclass付与
	console.log($('[name = "check"]:checked').val()); // checkB
	console.log($(':selected').val()); // selectA
	$(document).on('click', ':submit', function() {
		console.log('submitをクリック');
	});
	$(document).on('click', ':image', function() {
		console.log('imageをクリック');
	});
	$(document).on('click', ':reset', function() {
		console.log('resetをクリック');
	});
	$(document).on('click', ':button', function() {
		console.log('buttonをクリック');
	});
	$(document).on('click', ':file', function() {
		console.log('fileをクリック');
	});
});

フォームのデモページ