1. jQuery勉強会#3
2012/10/12
丸山 亮@h13i32maru

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

3. 今日のゴール
• CSSセレクタだけではできない要素の絞込みを
知る
• たくさんあるので、「こんなのあるんだー」程度
でOK

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

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

6. 要素の絞込み: Traversing
• Selectors API(CSSセレクタ)だけでは選択で
きない要素の絞込みができる
• 絞込みだけじゃなくて、縦横無尽に選択も可能

7. 絞り込みの種類
• 自要素の絞込み
• 子要素の絞込み
• 親要素の絞込み
• 兄弟要素の絞込み
• 操作
• each()

8. 絞り込みの種類
• 自要素の絞込み
• 子要素の絞込み
• 親要素の絞込み
• 兄弟要素の絞込み
• 操作
• each()

9. 自要素の絞込み
$( div, span ).filter( .small )
<div>
<span>A</span>
<span class="small">A</span>
<span class="small">A</span>
</div>
<div class="small">A</div>

10. 自要素の絞込み
$( div, span ).filter( .small )
<div>
<span>A</span>
<span class="small">A</span>
<span class="small">A</span>
</div>
<div class="small">A</div>

11. 自要素の絞込み
$( div, span ).filter( .small )
<div>
<span>A</span>
<span class="small">A</span>
<span class="small">A</span>
</div>
<div class="small">A</div>

12. CSSセレクタと比較
$( div, span ).filter( .small )
$( div.small, span.small )
.small が重複してる！！！

13. 自要素の絞込み
• .filter( .small ) → .smallの要素だけに絞込み
• .first() → 最初の要素だけに絞込み
• .last() → 最後の要素だけに絞込み
• .eq(3) → 3番目の要素だけに絞込み
• .slice(1, 3) → 1番目から3番目の要素だけに絞
込み
• .has( li ) → li要素を持つ要素だけに絞込み

14. 絞り込みの種類
• 自要素の絞込み
• 子要素の絞込み
• 親要素の絞込み
• 兄弟要素の絞込み
• 操作
• each()

15. 子要素の絞込み
$('div').find('.small, .medium')
<div>
<span class="small">A</span>
<div>
<span class="medium">A</span>
<span>A</span>
</div>
</div>
<p>
<span class="small">A</span>
</p>

16. 子要素の絞込み
$('div').find('.small, .medium')
<div>
<span class="small">A</span>
<span class="medium">A</span>
<span>A</span>
</div>
<p>
<span class="small">A</span>
</p>

17. 子要素の絞込み
$('div').find('.small, .medium')
<div>
<span class="small">A</span>
<span class="medium">A</span>
<span>A</span>
</div>
<p>
<span class="small">A</span>
</p>

18. CSSセレクタと比較
$('div').find('.small, .medium')
$('div .small, div .medium')
div が重複してる！！！

19. 子要素の絞込み
• .find( .small ) → 子要素(孫要素含む)のう
ち.smallだけを絞込み
• .children( .small ) → 子要素(孫要素含まない)
のうち.smallだけを絞込み

20. 絞り込みの種類
• 自要素の絞込み
• 子要素の絞込み
• 親要素の絞込み
• 兄弟要素の絞込み
• 操作
• each()

21. 親要素の絞込み
$('.small').parent()
<div>
<span>A</span>
<span class="small">A<span>
</div>
<div>
<span>A</span>
<span class="medium">A</span>
</div>

22. 親要素の絞込み
$('.small').parent()
<div>
<span>A</span>
<span class="small">A<span>
</div>
<div>
<span>A</span>
<span class="medium">A</span>
</div>

23. 親要素の絞込み
$('.small').parent()
<div>
<span>A</span>
<span class="small">A<span>
</div>
<div>
<span>A</span>
<span class="medium">A</span>
</div>

24. CSSセレクタと比較
$('.small').parent()
できない！！！

25. 親要素の絞込み
• .parent() → 親要素(一つ上のみ)を選択
• .parents() → 親要素(先祖要素)を選択

26. 絞り込みの種類
• 自要素の絞込み
• 子要素の絞込み
• 親要素の絞込み
• 兄弟要素の絞込み
• 操作
• each()

27. 兄弟要素の絞込み
$('.small').prev()
<div>
<span>A</span>
<span class="small">A<span>
</div>
<div>
<span>A</span>
<span class="medium">A</span>
</div>

28. 親要素の絞込み
$('.small').prev()
<div>
<span>A</span>
<span class="small">A<span>
</div>
<div>
<span>A</span>
<span class="medium">A</span>
</div>

29. 親要素の絞込み
$('.small').prev()
<div>
<span>A</span>
<span class="small">A<span>
</div>
<div>
<span>A</span>
<span class="medium">A</span>
</div>

30. CSSセレクタと比較
$('.small').prev()
できない！！！

31. 兄弟要素の絞込み
• .prev() → 直前の要素を選択
• .prevAll() → 直前の全ての要素を選択
• .next() → 直後の要素を選択
• .nextAll() → 直後の全ての要素を選択
• .siblings() → 直前と直後の全ての要素を選択

32. 絞り込みの種類
• 自要素の絞込み
• 子要素の絞込み
• 親要素の絞込み
• 兄弟要素の絞込み
• 操作
• each()

33. 操作
$('.small').next().andSelf()
<ul>
<li>A</li>
<li>A</li>
<li class="small">A</li>
<li>A</li>
<li>A</li>
</ul>

34. 操作
$('.small').next().andSelf()
<ul>
<li>A</li>
<li>A</li>
<li class="small">A</li>
<li>A</li>
<li>A</li>
</ul>

35. 操作
$('.small').next().andSelf()
<ul>
<li>A</li>
<li>A</li>
<li class="small">A</li>
<li>A</li>
<li>A</li>
</ul>

36. 操作
$('.small').next().andSelf()
<ul>
<li>A</li>
<li>A</li>
<li class="small">A</li>
<li>A</li>
<li>A</li>
</ul>

37. CSSセレクタと比較
$('.small').next().andSelf()
$('.small + *, .small ')
.smallが重複！！！

38. 操作
• .andSelf() → 自要素を追加する
• .add( .small ) → .smallの要素を追加する

39. 絞り込みの種類
• 自要素の絞込み
• 子要素の絞込み
• 親要素の絞込み
• 兄弟要素の絞込み
• 操作
• each()

40. each()
$('li').each(function(index, elm){
alert("No." + index + " is " + $(elm).text());
});
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>

41. 操作
$('li').each(function(index, elm){
alert("No." + index + " is " + $(elm).text());
});
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>

42. 操作
$('li').each(function(index, elm){
alert("No." + index + " is " + $(elm).text());
});
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>

43. 操作
$('li').each(function(index, elm){
alert("No." + index + " is " + $(elm).text());
});
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>

44. 操作
$('li').each(function(index, elm){
alert("No." + index + " is " + $(elm).text());
});
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>

45. each()
• each()は選択した要素を順番に走査して、処理
を行う
• jQueryではよく使われる機能

46. おわり