1. jQuery勉強会#2
丸山 亮(h13i32maru)

2. 自己紹介
• 丸山 亮@h13i32maru
• JavaScript結構好きなプログラマー
• Python少しずつ勉強中
• 焼鳥と牛たんが好物
https://twitter.com/h13i32maru

3. 今日のゴール
• jQueryで使えるCSSセレクタを知る
• 丸暗記しなくて良い
• 「こんなのあるんだ」と頭の片隅に入れておく
• 必要なときに調べればよい

4. 目次
• jQueryでできるアレコレ
• jQueryの技術要素
• 要素の選択(Selectors)
• 問題

5. jQueryでできるアレコレ

6. jQueryの技術要素
• 要素の選択: Selectors
• 要素の絞込み: Traversing
• 演出効果: Effects
• タグ操作: Manipulation
• ユーザ操作: Events
• 通信: Ajax
http://docs.jquery.com/

7. jQueryの技術要素
• 要素の選択: Selectors
• 要素の絞込み: Traversing
• 演出効果: Effects
• タグ操作: Manipulation
• ユーザ操作: Events
• 通信: Ajax
http://docs.jquery.com/

8. 要素の選択: Selectors
• CSSセレクタでタグを選択する
• 沢山の種類がある
• 組み合わせるとかなり強力
参考: CSS3対応のCSSセレクタ一覧
http://www.coolwebwindow.com/csstips/cssbasic/000243.php

9. 要素の選択: Selectors
• よく使うセレクタ
• 属性セレクタ
• 結合子
• 擬似要素
• グループセレクタ

10. 要素の選択: Selectors
• よく使うセレクタ
• 属性セレクタ
• 結合セレクタ
• 擬似セレクタ
• グループセレクタ

11. あえて複雑なHTMLと
CSSセレクタになってる
から注意！！

12. よく使うセレクタ
$( #content span.small .active )
<div id=”header”></div>
<div id=”content”>
<p class=”small”></p>
<span class=”small”>
<a class=”active”></a>
<img class=”active”/>
</span>
<a><span></span></a>
</div>
</div id=”footer”></div>

13. よく使うセレクタ
$( #content span.small .active )
<div id=”header”></div>
<div id=”content”>
<p class=”small”></p>
<span class=”small”>
<a class=”active”></a>
<img class=”active”/>
</span>
<a><span></span></a>
</div>
</div id=”footer”></div>

14. よく使うセレクタ
$( #content span.small .active )
<div id=”header”></div>
<div id=”content”>
<p class=”small”></p>
<span class=”small”>
<a class=”active”></a>
<img class=”active”/>
</span>
<a><span></span></a>
</div>
</div id=”footer”></div>

15. よく使うセレクタ
$( #content span.small .active )
<div id=”header”></div>
<div id=”content”>
<p class=”small”></p>
<span class=”small”>
<a class=”active”></a>
<img class=”active”/>
</span>
<a><span></span></a>
</div>
</div id=”footer”></div>

16. よく使うセレクタ
$( #content span.small .active )
<div id=”header”></div>
<div id=”content”>
<p class=”small”></p>
<span class=”small”>
<a class=”active”></a>
<img class=”active”/>
</span>
<a><span></span></a>
</div>
</div id=”footer”></div>

17. よく使うセレクタ
• $( div ul ) → divの子であるul要素
• $( .title ) → classがtitleである要素
• $( #content ) → idがcontentである要素
• $( * ) → 全ての要素

18. 要素の選択: Selectors
• よく使うセレクタ
• 属性セレクタ
• 結合セレクタ
• 擬似セレクタ
• グループセレクタ

19. 属性セレクタ
$( div[data-name= book ] [class^= size ] )
<div data-name=”book”>
<span class=”size3”></span>
<p class=”size4”></p>
<a class=”small”></a>
</div>
<div data-name=”bird”/>

20. 属性セレクタ
$( div[data-name= book ] [class^= size ] )
<div data-name=”book”>
<span class=”size3”></span>
<p class=”size4”></p>
<a class=”small”></a>
</div>
<div data-name=”bird”></div>

21. 属性セレクタ
$( div[data-name= book ] [class^= size ] )
<div data-name=”book”>
<span class=”size3”></span>
<p class=”size4”></p>
<a class=”small”></a>
</div>
<div data-name=”bird”/>

22. 属性セレクタ
$( div[data-name= book ] [class^= size ] )
<div data-name=”book”>
<span class=”size3”></span>
<p class=”size4”></p>
<a class=”small”></a>
</div>
<div data-name=”bird”/>

23. 属性セレクタ
• $( [attr= value ] ) → attrがvalueの要素
• $( [attr^= value ]) → attrがvalueから始ま
る要素
• $( [attr$= value ]) → attrがvalueで終わる
要素
• $( [attr*= value ]) → attrにvalueを含む要素

24. 要素の選択: Selectors
• よく使うセレクタ
• 属性セレクタ
• 結合セレクタ
• 擬似セレクタ
• グループセレクタ

25. 結合セレクタ
$( div > span + p )
<div>
<span></span>
<p></p>
<a><span></span></a>
<p></p>
<span></span>
</div>
<div></div>
<span></span>
<p></p>

26. 結合セレクタ
$( div > span + p )
<div>
<span></span>
<p></p>
<a><span></span></a>
<p></p>
<span></span>
</div>
<div></div>
<span></span>
<p></p>

27. 結合セレクタ
$( div > span + p )
<div>
<span></span>
<p></p>
<a><span></span></a>
<p></p>
<span></span>
</div>
<div></div>
<span></span>
<p></p>

28. 結合セレクタ
$( div > span + p )
<div>
<span></span>
<p></p>
<a><span></span></a>
<p></p>
<span></span>
</div>
<div></div>
<span></span>
<p></p>

29. 結合セレクタ
• $( div > span ) → divの直下のspan要素(子要
素)
• $( div + span ) → divの直後のspan要素(兄弟
要素)
• $( div
span ) → divの直後の全てのspan要
素(全兄弟要素)

30. 要素の選択: Selectors
• よく使うセレクタ
• 属性セレクタ
• 結合セレクタ
• 擬似セレクタ
• グループセレクタ

31. 擬似セレクタ
$( li:first-child p:nth-child(2) )
<ul>
<li>
<p></p>
<p></p>
<p></p>
</li>
<li></li>
</ul>

32. 擬似セレクタ
$( li:first-child p:nth-child(2) )
<ul>
<li>
<p></p>
<p></p>
<p></p>
</li>
<li></li>
</ul>

33. 擬似セレクタ
$( li:first-child p:nth-child(2) )
<ul>
<li>
<p></p>
<p></p>
<p></p>
</li>
<li></li>
</ul>

34. 擬似セレクタ
$( li:first-child p:nth-child(2) )
<ul>
<li>
<p></p>
<p></p>
<p></p>
</li>
<li></li>
</ul>

35. 擬似セレクタ
$( li:first-child p:nth-child(2) )
<ul>
<li>
<p></p>
<p></p>
<p></p>
</li>
<li></li>
</ul>

36. 擬似セレクタ
• $( li:first-child ) → liの最初の要素
• $( li:last-child ) → liの最後の要素
• $( li:nth-child(2 )) → liの2番目の要素
• $( li:nth-child(odd )) → liの奇数番目の要素
• $( li:nth-child(even )) → liの偶数の要素
• $( li:nth-child(3n+1 )) → liの3n+1番目の要
素(n = 0, 1, 2...)

37. 要素の選択: Selectors
• よく使うセレクタ
• 属性セレクタ
• 結合セレクタ
• 擬似セレクタ
• グループセレクタ

38. グループセレクタ
$( div, .block )
<div></div>
<p class=”block”></p>
<p></p>

39. グループセレクタ
$( div, .block )
<div></div>
<p class=”block”></p>
<p></p>

40. グループセレクタ
$( div, .block )
<div></div>
<p class=”block”></p>
<p></p>

41. 要素の選択: Selectors (5)
• $( div, span ) → div要素もしくはspan要素

42. おわり