jQuery勉強会#2       丸山 亮(h13i32maru)
自己紹介• 丸山 亮@h13i32maru• JavaScript結構好きなプログラマー• Python少しずつ勉強中• 焼鳥と牛たんが好物         https://twitter.com/h13i32maru
今日のゴール• jQueryで使えるCSSセレクタを知る• 丸暗記しなくて良い • 「こんなのあるんだ」と頭の片隅に入れておく • 必要なときに調べればよい
目次• jQueryでできるアレコレ• jQueryの技術要素• 要素の選択(Selectors)• 問題
jQueryでできるアレコレ
jQueryの技術要素• 要素の選択: Selectors• 要素の絞込み: Traversing• 演出効果: Effects• タグ操作: Manipulation• ユーザ操作: Events• 通信: Ajax       http://...
jQueryの技術要素• 要素の選択: Selectors• 要素の絞込み: Traversing• 演出効果: Effects• タグ操作: Manipulation• ユーザ操作: Events• 通信: Ajax       http://...
要素の選択: Selectors• CSSセレクタでタグを選択する• 沢山の種類がある• 組み合わせるとかなり強力 参考: CSS3対応のCSSセレクタ一覧 http://www.coolwebwindow.com/csstips/cssbas...
要素の選択: Selectors• よく使うセレクタ• 属性セレクタ• 結合子• 擬似要素• グループセレクタ
要素の選択: Selectors• よく使うセレクタ• 属性セレクタ• 結合セレクタ• 擬似セレクタ• グループセレクタ
あえて複雑なHTMLとCSSセレクタになってる   から注意!!
よく使うセレクタ  $( #content span.small .active )     <div id=”header”></div>     <div id=”content”>       <p class=”small”></p> ...
よく使うセレクタ  $( #content span.small .active )     <div id=”header”></div>     <div id=”content”>       <p class=”small”></p> ...
よく使うセレクタ  $( #content span.small .active )     <div id=”header”></div>     <div id=”content”>       <p class=”small”></p> ...
よく使うセレクタ  $( #content span.small .active )     <div id=”header”></div>     <div id=”content”>       <p class=”small”></p> ...
よく使うセレクタ  $( #content span.small .active )     <div id=”header”></div>     <div id=”content”>       <p class=”small”></p> ...
よく使うセレクタ• $( div ul ) → divの子であるul要素• $( .title ) → classがtitleである要素• $( #content ) → idがcontentである要素• $( * ) → 全ての要素
要素の選択: Selectors• よく使うセレクタ• 属性セレクタ• 結合セレクタ• 擬似セレクタ• グループセレクタ
属性セレクタ$( div[data-name= book ] [class^= size ] )        <div data-name=”book”>          <span class=”size3”></span>       ...
属性セレクタ$( div[data-name= book ] [class^= size ] )        <div data-name=”book”>          <span class=”size3”></span>       ...
属性セレクタ$( div[data-name= book ] [class^= size ] )        <div data-name=”book”>          <span class=”size3”></span>       ...
属性セレクタ$( div[data-name= book ] [class^= size ] )        <div data-name=”book”>          <span class=”size3”></span>       ...
属性セレクタ• $( [attr= value ] ) → attrがvalueの要素• $( [attr^= value ]) → attrがvalueから始ま る要素• $( [attr$= value ]) → attrがvalueで終わ...
要素の選択: Selectors• よく使うセレクタ• 属性セレクタ• 結合セレクタ• 擬似セレクタ• グループセレクタ
結合セレクタ       $( div > span + p )   <div>     <span></span>     <p></p>     <a><span></span></a>     <p></p>     <span></sp...
結合セレクタ       $( div > span + p )   <div>     <span></span>     <p></p>     <a><span></span></a>     <p></p>     <span></sp...
結合セレクタ       $( div > span + p )   <div>     <span></span>     <p></p>     <a><span></span></a>     <p></p>     <span></sp...
結合セレクタ       $( div > span + p )   <div>     <span></span>     <p></p>     <a><span></span></a>     <p></p>     <span></sp...
結合セレクタ• $( div > span ) → divの直下のspan要素(子要  素)• $( div + span ) → divの直後のspan要素(兄弟  要素)• $( div       span ) → divの直後の全てのs...
要素の選択: Selectors• よく使うセレクタ• 属性セレクタ• 結合セレクタ• 擬似セレクタ• グループセレクタ
擬似セレクタ  $( li:first-child p:nth-child(2) )    <ul>      <li>         <p></p>         <p></p>         <p></p>      </li>    ...
擬似セレクタ  $( li:first-child p:nth-child(2) )    <ul>      <li>         <p></p>         <p></p>         <p></p>      </li>    ...
擬似セレクタ  $( li:first-child p:nth-child(2) )    <ul>      <li>         <p></p>         <p></p>         <p></p>      </li>    ...
擬似セレクタ  $( li:first-child p:nth-child(2) )    <ul>      <li>         <p></p>         <p></p>         <p></p>      </li>    ...
擬似セレクタ  $( li:first-child p:nth-child(2) )    <ul>      <li>         <p></p>         <p></p>         <p></p>      </li>    ...
擬似セレクタ• $( li:first-child ) → liの最初の要素• $( li:last-child ) → liの最後の要素• $( li:nth-child(2 )) → liの2番目の要素• $( li:nth-child(od...
要素の選択: Selectors• よく使うセレクタ• 属性セレクタ• 結合セレクタ• 擬似セレクタ• グループセレクタ
グループセレクタ         $( div, .block )   <div></div>   <p class=”block”></p>   <p></p>
グループセレクタ         $( div, .block )   <div></div>   <p class=”block”></p>   <p></p>
グループセレクタ         $( div, .block )   <div></div>   <p class=”block”></p>   <p></p>
要素の選択: Selectors (5)• $( div, span ) → div要素もしくはspan要素
おわり
Upcoming SlideShare
Loading in …5
×

jQuery勉強会#2

925 views

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
925
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery勉強会#2

  1. 1. jQuery勉強会#2 丸山 亮(h13i32maru)
  2. 2. 自己紹介• 丸山 亮@h13i32maru• JavaScript結構好きなプログラマー• Python少しずつ勉強中• 焼鳥と牛たんが好物 https://twitter.com/h13i32maru
  3. 3. 今日のゴール• jQueryで使えるCSSセレクタを知る• 丸暗記しなくて良い • 「こんなのあるんだ」と頭の片隅に入れておく • 必要なときに調べればよい
  4. 4. 目次• jQueryでできるアレコレ• jQueryの技術要素• 要素の選択(Selectors)• 問題
  5. 5. jQueryでできるアレコレ
  6. 6. jQueryの技術要素• 要素の選択: Selectors• 要素の絞込み: Traversing• 演出効果: Effects• タグ操作: Manipulation• ユーザ操作: Events• 通信: Ajax http://docs.jquery.com/
  7. 7. jQueryの技術要素• 要素の選択: Selectors• 要素の絞込み: Traversing• 演出効果: Effects• タグ操作: Manipulation• ユーザ操作: Events• 通信: Ajax http://docs.jquery.com/
  8. 8. 要素の選択: Selectors• CSSセレクタでタグを選択する• 沢山の種類がある• 組み合わせるとかなり強力 参考: CSS3対応のCSSセレクタ一覧 http://www.coolwebwindow.com/csstips/cssbasic/000243.php
  9. 9. 要素の選択: Selectors• よく使うセレクタ• 属性セレクタ• 結合子• 擬似要素• グループセレクタ
  10. 10. 要素の選択: Selectors• よく使うセレクタ• 属性セレクタ• 結合セレクタ• 擬似セレクタ• グループセレクタ
  11. 11. あえて複雑なHTMLとCSSセレクタになってる から注意!!
  12. 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. 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. 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. 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. 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. 17. よく使うセレクタ• $( div ul ) → divの子であるul要素• $( .title ) → classがtitleである要素• $( #content ) → idがcontentである要素• $( * ) → 全ての要素
  18. 18. 要素の選択: Selectors• よく使うセレクタ• 属性セレクタ• 結合セレクタ• 擬似セレクタ• グループセレクタ
  19. 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. 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. 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. 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. 23. 属性セレクタ• $( [attr= value ] ) → attrがvalueの要素• $( [attr^= value ]) → attrがvalueから始ま る要素• $( [attr$= value ]) → attrがvalueで終わる 要素• $( [attr*= value ]) → attrにvalueを含む要素
  24. 24. 要素の選択: Selectors• よく使うセレクタ• 属性セレクタ• 結合セレクタ• 擬似セレクタ• グループセレクタ
  25. 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. 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. 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. 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. 29. 結合セレクタ• $( div > span ) → divの直下のspan要素(子要 素)• $( div + span ) → divの直後のspan要素(兄弟 要素)• $( div span ) → divの直後の全てのspan要 素(全兄弟要素)
  30. 30. 要素の選択: Selectors• よく使うセレクタ• 属性セレクタ• 結合セレクタ• 擬似セレクタ• グループセレクタ
  31. 31. 擬似セレクタ $( li:first-child p:nth-child(2) ) <ul> <li> <p></p> <p></p> <p></p> </li> <li></li> </ul>
  32. 32. 擬似セレクタ $( li:first-child p:nth-child(2) ) <ul> <li> <p></p> <p></p> <p></p> </li> <li></li> </ul>
  33. 33. 擬似セレクタ $( li:first-child p:nth-child(2) ) <ul> <li> <p></p> <p></p> <p></p> </li> <li></li> </ul>
  34. 34. 擬似セレクタ $( li:first-child p:nth-child(2) ) <ul> <li> <p></p> <p></p> <p></p> </li> <li></li> </ul>
  35. 35. 擬似セレクタ $( li:first-child p:nth-child(2) ) <ul> <li> <p></p> <p></p> <p></p> </li> <li></li> </ul>
  36. 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. 37. 要素の選択: Selectors• よく使うセレクタ• 属性セレクタ• 結合セレクタ• 擬似セレクタ• グループセレクタ
  38. 38. グループセレクタ $( div, .block ) <div></div> <p class=”block”></p> <p></p>
  39. 39. グループセレクタ $( div, .block ) <div></div> <p class=”block”></p> <p></p>
  40. 40. グループセレクタ $( div, .block ) <div></div> <p class=”block”></p> <p></p>
  41. 41. 要素の選択: Selectors (5)• $( div, span ) → div要素もしくはspan要素
  42. 42. おわり

×