0
jQuery勉強会#3             2012/10/12      丸山 亮@h13i32maru
自己紹介• 丸山 亮@h13i32maru• JavaScript結構好きなプログラマー• 今はPython少しずつ勉強中• 焼鳥と牛たんが好物         https://twitter.com/h13i32maru
今日のゴール• CSSセレクタだけではできない要素の絞込みを 知る• たくさんあるので、「こんなのあるんだー」程度 でOK
jQueryの技術要素• 要素の選択: Selectors (jQuery勉強会#2)• 要素の絞込み: Traversing• 演出効果: Effects• タグ操作: Manipulation• ユーザ操作: Events• 通信: Ajax...
jQueryの技術要素• 要素の選択: Selectors (jQuery勉強会#2)• 要素の絞込み: Traversing• 演出効果: Effects• タグ操作: Manipulation• ユーザ操作: Events• 通信: Ajax...
要素の絞込み: Traversing• Selectors API(CSSセレクタ)だけでは選択で きない要素の絞込みができる• 絞込みだけじゃなくて、縦横無尽に選択も可能
絞り込みの種類• 自要素の絞込み• 子要素の絞込み• 親要素の絞込み• 兄弟要素の絞込み• 操作• each()
絞り込みの種類• 自要素の絞込み• 子要素の絞込み• 親要素の絞込み• 兄弟要素の絞込み• 操作• each()
自要素の絞込み      $( div, span ).filter( .small )<div>  <span>A</span>  <span class="small">A</span>  <span class="small">A</spa...
自要素の絞込み      $( div, span ).filter( .small )<div>  <span>A</span>  <span class="small">A</span>  <span class="small">A</spa...
自要素の絞込み      $( div, span ).filter( .small )<div>  <span>A</span>  <span class="small">A</span>  <span class="small">A</spa...
CSSセレクタと比較   $( div, span ).filter( .small )    $( div.small, span.small )     .small が重複してる!!!
自要素の絞込み• .filter( .small ) → .smallの要素だけに絞込み• .first() → 最初の要素だけに絞込み• .last() → 最後の要素だけに絞込み• .eq(3) → 3番目の要素だけに絞込み• .slice(1...
絞り込みの種類• 自要素の絞込み• 子要素の絞込み• 親要素の絞込み• 兄弟要素の絞込み• 操作• each()
子要素の絞込み    $(div).find(.small, .medium)<div>  <span class="small">A</span>  <div>     <span class="medium">A</span>     <sp...
子要素の絞込み    $(div).find(.small, .medium)<div>  <span class="small">A</span>  <span class="medium">A</span>  <span>A</span></...
子要素の絞込み    $(div).find(.small, .medium)<div>  <span class="small">A</span>  <span class="medium">A</span>  <span>A</span></...
CSSセレクタと比較  $(div).find(.small, .medium)   $(div .small, div .medium)     div が重複してる!!!
子要素の絞込み• .find( .small ) → 子要素(孫要素含む)のう ち.smallだけを絞込み• .children( .small ) → 子要素(孫要素含まない) のうち.smallだけを絞込み
絞り込みの種類• 自要素の絞込み• 子要素の絞込み• 親要素の絞込み• 兄弟要素の絞込み• 操作• each()
親要素の絞込み           $(.small).parent()<div>  <span>A</span>  <span class="small">A<span></div><div>  <span>A</span>  <span c...
親要素の絞込み           $(.small).parent()<div>  <span>A</span>  <span class="small">A<span></div><div>  <span>A</span>  <span c...
親要素の絞込み           $(.small).parent()<div>  <span>A</span>  <span class="small">A<span></div><div>  <span>A</span>  <span c...
CSSセレクタと比較     $(.small).parent()       できない!!!
親要素の絞込み• .parent() → 親要素(一つ上のみ)を選択• .parents() → 親要素(先祖要素)を選択
絞り込みの種類• 自要素の絞込み• 子要素の絞込み• 親要素の絞込み• 兄弟要素の絞込み• 操作• each()
兄弟要素の絞込み            $(.small).prev()<div>  <span>A</span>  <span class="small">A<span></div><div>  <span>A</span>  <span c...
親要素の絞込み            $(.small).prev()<div>  <span>A</span>  <span class="small">A<span></div><div>  <span>A</span>  <span cl...
親要素の絞込み            $(.small).prev()<div>  <span>A</span>  <span class="small">A<span></div><div>  <span>A</span>  <span cl...
CSSセレクタと比較      $(.small).prev()       できない!!!
兄弟要素の絞込み• .prev() → 直前の要素を選択• .prevAll() → 直前の全ての要素を選択• .next() → 直後の要素を選択• .nextAll() → 直後の全ての要素を選択• .siblings() → 直前と直後の...
絞り込みの種類• 自要素の絞込み• 子要素の絞込み• 親要素の絞込み• 兄弟要素の絞込み• 操作• each()
操作       $(.small).next().andSelf()<ul> <li>A</li> <li>A</li> <li class="small">A</li> <li>A</li> <li>A</li></ul>
操作       $(.small).next().andSelf()<ul> <li>A</li> <li>A</li> <li class="small">A</li> <li>A</li> <li>A</li></ul>
操作       $(.small).next().andSelf()<ul> <li>A</li> <li>A</li> <li class="small">A</li> <li>A</li> <li>A</li></ul>
操作       $(.small).next().andSelf()<ul> <li>A</li> <li>A</li> <li class="small">A</li> <li>A</li> <li>A</li></ul>
CSSセレクタと比較   $(.small).next().andSelf()      $(.small + *, .small )       .smallが重複!!!
操作• .andSelf() → 自要素を追加する• .add( .small ) → .smallの要素を追加する
絞り込みの種類• 自要素の絞込み• 子要素の絞込み• 親要素の絞込み• 兄弟要素の絞込み• 操作• each()
each()$(li).each(function(index, elm){  alert("No." + index + " is " + $(elm).text());});  <ul>   <li>A</li>   <li>B</li> ...
操作$(li).each(function(index, elm){  alert("No." + index + " is " + $(elm).text());});  <ul>   <li>A</li>   <li>B</li>   <l...
操作$(li).each(function(index, elm){  alert("No." + index + " is " + $(elm).text());});  <ul>   <li>A</li>   <li>B</li>   <l...
操作$(li).each(function(index, elm){  alert("No." + index + " is " + $(elm).text());});  <ul>   <li>A</li>   <li>B</li>   <l...
操作$(li).each(function(index, elm){  alert("No." + index + " is " + $(elm).text());});  <ul>   <li>A</li>   <li>B</li>   <l...
each()• each()は選択した要素を順番に走査して、処理 を行う• jQueryではよく使われる機能
おわり
Upcoming SlideShare
Loading in...5
×

jQuery勉強会#3

633

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
633
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "jQuery勉強会#3"

  1. 1. jQuery勉強会#3 2012/10/12 丸山 亮@h13i32maru
  2. 2. 自己紹介• 丸山 亮@h13i32maru• JavaScript結構好きなプログラマー• 今はPython少しずつ勉強中• 焼鳥と牛たんが好物 https://twitter.com/h13i32maru
  3. 3. 今日のゴール• CSSセレクタだけではできない要素の絞込みを 知る• たくさんあるので、「こんなのあるんだー」程度 でOK
  4. 4. jQueryの技術要素• 要素の選択: Selectors (jQuery勉強会#2)• 要素の絞込み: Traversing• 演出効果: Effects• タグ操作: Manipulation• ユーザ操作: Events• 通信: Ajax http://docs.jquery.com/
  5. 5. jQueryの技術要素• 要素の選択: Selectors (jQuery勉強会#2)• 要素の絞込み: Traversing• 演出効果: Effects• タグ操作: Manipulation• ユーザ操作: Events• 通信: Ajax http://docs.jquery.com/
  6. 6. 要素の絞込み: Traversing• Selectors API(CSSセレクタ)だけでは選択で きない要素の絞込みができる• 絞込みだけじゃなくて、縦横無尽に選択も可能
  7. 7. 絞り込みの種類• 自要素の絞込み• 子要素の絞込み• 親要素の絞込み• 兄弟要素の絞込み• 操作• each()
  8. 8. 絞り込みの種類• 自要素の絞込み• 子要素の絞込み• 親要素の絞込み• 兄弟要素の絞込み• 操作• each()
  9. 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. 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. 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. 12. CSSセレクタと比較 $( div, span ).filter( .small ) $( div.small, span.small ) .small が重複してる!!!
  13. 13. 自要素の絞込み• .filter( .small ) → .smallの要素だけに絞込み• .first() → 最初の要素だけに絞込み• .last() → 最後の要素だけに絞込み• .eq(3) → 3番目の要素だけに絞込み• .slice(1, 3) → 1番目から3番目の要素だけに絞 込み• .has( li ) → li要素を持つ要素だけに絞込み
  14. 14. 絞り込みの種類• 自要素の絞込み• 子要素の絞込み• 親要素の絞込み• 兄弟要素の絞込み• 操作• each()
  15. 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. 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. 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. 18. CSSセレクタと比較 $(div).find(.small, .medium) $(div .small, div .medium) div が重複してる!!!
  19. 19. 子要素の絞込み• .find( .small ) → 子要素(孫要素含む)のう ち.smallだけを絞込み• .children( .small ) → 子要素(孫要素含まない) のうち.smallだけを絞込み
  20. 20. 絞り込みの種類• 自要素の絞込み• 子要素の絞込み• 親要素の絞込み• 兄弟要素の絞込み• 操作• each()
  21. 21. 親要素の絞込み $(.small).parent()<div> <span>A</span> <span class="small">A<span></div><div> <span>A</span> <span class="medium">A</span></div>
  22. 22. 親要素の絞込み $(.small).parent()<div> <span>A</span> <span class="small">A<span></div><div> <span>A</span> <span class="medium">A</span></div>
  23. 23. 親要素の絞込み $(.small).parent()<div> <span>A</span> <span class="small">A<span></div><div> <span>A</span> <span class="medium">A</span></div>
  24. 24. CSSセレクタと比較 $(.small).parent() できない!!!
  25. 25. 親要素の絞込み• .parent() → 親要素(一つ上のみ)を選択• .parents() → 親要素(先祖要素)を選択
  26. 26. 絞り込みの種類• 自要素の絞込み• 子要素の絞込み• 親要素の絞込み• 兄弟要素の絞込み• 操作• each()
  27. 27. 兄弟要素の絞込み $(.small).prev()<div> <span>A</span> <span class="small">A<span></div><div> <span>A</span> <span class="medium">A</span></div>
  28. 28. 親要素の絞込み $(.small).prev()<div> <span>A</span> <span class="small">A<span></div><div> <span>A</span> <span class="medium">A</span></div>
  29. 29. 親要素の絞込み $(.small).prev()<div> <span>A</span> <span class="small">A<span></div><div> <span>A</span> <span class="medium">A</span></div>
  30. 30. CSSセレクタと比較 $(.small).prev() できない!!!
  31. 31. 兄弟要素の絞込み• .prev() → 直前の要素を選択• .prevAll() → 直前の全ての要素を選択• .next() → 直後の要素を選択• .nextAll() → 直後の全ての要素を選択• .siblings() → 直前と直後の全ての要素を選択
  32. 32. 絞り込みの種類• 自要素の絞込み• 子要素の絞込み• 親要素の絞込み• 兄弟要素の絞込み• 操作• each()
  33. 33. 操作 $(.small).next().andSelf()<ul> <li>A</li> <li>A</li> <li class="small">A</li> <li>A</li> <li>A</li></ul>
  34. 34. 操作 $(.small).next().andSelf()<ul> <li>A</li> <li>A</li> <li class="small">A</li> <li>A</li> <li>A</li></ul>
  35. 35. 操作 $(.small).next().andSelf()<ul> <li>A</li> <li>A</li> <li class="small">A</li> <li>A</li> <li>A</li></ul>
  36. 36. 操作 $(.small).next().andSelf()<ul> <li>A</li> <li>A</li> <li class="small">A</li> <li>A</li> <li>A</li></ul>
  37. 37. CSSセレクタと比較 $(.small).next().andSelf() $(.small + *, .small ) .smallが重複!!!
  38. 38. 操作• .andSelf() → 自要素を追加する• .add( .small ) → .smallの要素を追加する
  39. 39. 絞り込みの種類• 自要素の絞込み• 子要素の絞込み• 親要素の絞込み• 兄弟要素の絞込み• 操作• each()
  40. 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. 41. 操作$(li).each(function(index, elm){ alert("No." + index + " is " + $(elm).text());}); <ul> <li>A</li> <li>B</li> <li>C</li> </ul>
  42. 42. 操作$(li).each(function(index, elm){ alert("No." + index + " is " + $(elm).text());}); <ul> <li>A</li> <li>B</li> <li>C</li> </ul>
  43. 43. 操作$(li).each(function(index, elm){ alert("No." + index + " is " + $(elm).text());}); <ul> <li>A</li> <li>B</li> <li>C</li> </ul>
  44. 44. 操作$(li).each(function(index, elm){ alert("No." + index + " is " + $(elm).text());}); <ul> <li>A</li> <li>B</li> <li>C</li> </ul>
  45. 45. each()• each()は選択した要素を順番に走査して、処理 を行う• jQueryではよく使われる機能
  46. 46. おわり
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×