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勉強会#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要素
おわり
Nächste SlideShare
Wird geladen in …5
×

jQuery勉強会#2

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen
  • Als Erste(r) kommentieren

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

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

×