Your SlideShare is downloading. ×
0
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
jQuery勉強会#2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery勉強会#2

689

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
689
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×