Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

jQuery勉強会#3

  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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. おわり

×