セレクタ
「何かを取ってくる」機能
- セレクタ
- 取ってきたところからさらに探す
セレクタ
$('セレクタ')
- ID セレクタ
- タイプセレクタ
- CLASSセレクタ
- 子孫セレクタ
- 全称セレクタ
- 子供セレクタ
- 隣接兄弟セレクタ
- 複数セレクタ
- 否定セレクタ
- 属性セレクタ
- 順番に関するセレクタ
- 状態に関するセレクタ
- フォームに関するセレクタ
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'); });