セレクタ

「何かを取ってくる」機能

  • セレクタ
  • 取ってきたところからさらに探す

セレクタ

$('セレクタ')
  1. ID セレクタ
  2. タイプセレクタ
  3. CLASSセレクタ
  4. 子孫セレクタ
  5. 全称セレクタ
  6. 子供セレクタ
  7. 隣接兄弟セレクタ
  8. 複数セレクタ
  9. 否定セレクタ
  10. 属性セレクタ
  11. 順番に関するセレクタ
  12. 状態に関するセレクタ
  13. フォームに関するセレクタ
ID セレクタ
$('#idValue')

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<ul>
	<li>fox</li>
	<li id="cat">cat</li>
	<li>fish</li>
	<li id="dog">dog</li>
	<li>bird</li>
</ul>
</body>
</html>


《scripts.js》

$(function() {
  $('#cat').css('background','pink');
  $('#dog').css('background','yellowgreen');
});




ピンポイントでページ内の要素が欲しいときに最適なセレクタ

CLASSセレクタ
$('.className')

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<ul>
	<li class="man">Paul</li>
	<li class="man">Billy</li>
	<li class="woman">Alice</li>
	<li class="man">Taro</li>
	<li class="woman">Hanako</li>
</ul>
</body>
</html>


《scripts.js》

$(function(){
	$('.man').css('background','lightblue');
	$('.woman').css('background','pink');
});




2つ以上の要素に何かしたいときに最適なセレクタ

タイプセレクタ（element）
  • 指定した要素名の要素すべてをとってくる
$('div')

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<h1>Heading</h1>
<p>The quick brown fox jumps over the lazy dog.</p>
<ul>
  <li>The quick brown fox jumps over the lazy dog.</li>
  <li>The quick brown fox jumps over the lazy dog.</li>
</ul>
</body>
</html>


《scripts.js》

$(function(){
	$('p').css('background','pink');
	$('li').css('background','yellowgreen');
});



body要素を取得

$(function(){
	$('body').css('background','black');
});
組み合わせ（絞り込み）
子孫セレクタ（ancestor descendant）
$('p strong')

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div>
<p>I have a <strong>pen</strong>.</p>
</div>
<ul>
<li>His <strong>pen</strong> is red.</li>
<li>I need his <strong>pen</strong>.</li>
</ul>
<p>She doesn't need a <strong>pen</strong>.</p>
</body>
</html>


《scripts.js》

$(function(){
	$('div strong').css('background','lightblue');
	$('ul strong').css('background','pink');
});


より高度なセレクタ

  • id が div な要素の直下にある p要素のうち、クラスboxに属さない要素を取得
$('#div > p:not(.box)')
CSSのセレクタとjQueryのセレクタ
  • 「:first-child」は、InternetExplorer 6 はサポートしていません
  • jQueryではInternetExplorer 6であっても「:first-child」が使うことができます