Chrome Inspector & jQuery            1   Ronald	  Hsu	  100062595	  @	  MIRLab                h7p://about.me/hothero      ...
Outline    ¢Previous	  Course    ¢Chrome	  Inspector    ¢jQuery    ¢More	  Online	  Courses                           ...
Previous	  Course    ¢Var:	  local	  variable    ¢No-­‐Var:	  global	  variable	  declared	  anywhere    ¢Google	  Map	...
Chrome	  Inspector    ¢Elements	  Panel    ¢Resources	  Panel    ¢Network	  Panel    ¢Scripts	  Panel    ¢Timeline	  ...
How	  to	  open	  it    ¢Right	  click	  on	  webpage	  anywhere	  -­‐>	  click	        “inspect	  element”    ¢Click	  ...
Elements	  Panel    ¢DOM	  tree    ¢Allow	  inspecHon	  and	  on-­‐the-­‐fly	  ediHng	  of	  DOM	        elements    ¢Mo...
Resource	  Panel    ¢Category	  resource(Images,	  Scripts,	  ...)      — hEp://pinterest.com/    ¢HTML5	  Database(Key...
Network,	  Scripts,	  Timeline,	  Profile	  Panel    ¢Network      — The	  loading	  Hme	  of	  those	  resources    ¢Sc...
Console	  Panel    ¢$(“id”):	  select	  a	  element    ¢inspect(id):	  showing	  content	  of	  this	  element    ¢dir(...
jQuery    ¢jQuery	  是⼀一套物件導向式簡潔輕量級的	  JavaScript	        Library。透過	  jQuery	  你可以用最精簡少量的程式碼      來輕鬆達到跨瀏覽器	  DOM	  操作、事件...
Get	  Started    ¢In	  javascript      — window.document.form1.Text1.value=‘ABC’;	  	        — document.getElementById(...
More	  Powerful    ¢To	  hide	  a	  div	  in	  javascript    ¢In	  jQuery    ¢DEMO:	  hEp://goo.gl/Jb9Io               ...
More	  Powerful(Cont.)    ¢Javascript    ¢jQuery    ¢DEMO:	  hEp://goo.gl/uuDUj                                    1312...
Selector    ¢Syntax:	  $(selectors);    ¢Tag	  selector      — jQuery:	  $(“a”)      — JS:	  document.getElementsByTag...
Selector(Cont.)    ¢Base	  filters:	  (First	  /	  Last	  /	  not)      — :first	  -­‐>	  The	  first	  element	  in	  defin...
Selector(Cont.)    ¢Basic	  filters:	  (Even	  /	  Odd	  /	  Eq)       — :even       — :odd       — :eq	      ¢DEMO:	 ...
Selector(Cont.)    ¢Content	  filters:	  (contains	  /	  has	  /	  empty)       — $(‘tr:contains(“BB”)’)	  :	  Its	  cont...
Selector(Cont.)    ¢Visibility	  filters:	  (hidden	  /	  visible)       — $(‘tr:hidden’).fadeIn(‘slow’);	  -­‐>	  with	 ...
Selector	  -­‐	  AEribute	  Filters    ¢[aEribute	  =	  value]       — $(‘td[class=“test”]’)    ¢Regular	  Expression  ...
Selector(Advanced)    ¢Child	  object	  selecHon      — :nth-­‐child(index):	  (Index	  start	  from	  1)      — :first-...
Selector(Advanced)    ¢Form	  object	  selecHon      — :input            ¢   specific	  input	  type                 ¢:...
jQuery	  AEributes    ¢Get         — aEr(name)    ¢Set         — aEr(name,	  value)    ¢Delete         — removeAEr(n...
jQuery	  CSS    ¢Get      — css(name)    ¢Set      — css(name,	  value)    ¢Example      — $("p").css("opacity","0.5...
jQuery	  Effects    ¢Some	  FuncHons      — Previous	  menHon:	  show,	  hide,	  fadeIn,	  toggle...      — slideDown   ...
jQuery	  Plugin    ¢Media	  Player    ¢Slideshow    ¢jQuery	  UI    ¢Image	  Galleries    ¢Form	  Filtering    ¢Docu...
Reference    ¢hEp://webdesign.kerthis.com/jquery/    ¢hEp://ithelp.ithome.com.tw/js-­‐ninja/arHcles/      page/1    ¢hE...
More    ¢URL	  Parsing	  with	  javascript      — hEp://jsbin.com/eqicig/2    ¢Extensions	  for	  web	  developers/desi...
More	  online	  courses    ¢Codecademy(Simple	  &	  Step	  by	  step)      — hEp://www.codecademy.com    ¢Coursea(Other...
Thanks	  for	  your	  listening    ¢Q	  &	  A                                         2912年4月24日星
Upcoming SlideShare
Loading in …5
×

Inspector&j query slide

755 views

Published on

It's a NTHU Course Slide

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

  • Be the first to like this

No Downloads
Views
Total views
755
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Inspector&j query slide

  1. 1. Chrome Inspector & jQuery 1 Ronald  Hsu  100062595  @  MIRLab h7p://about.me/hothero 2012042412年4月24日星
  2. 2. Outline ¢Previous  Course ¢Chrome  Inspector ¢jQuery ¢More  Online  Courses 212年4月24日星
  3. 3. Previous  Course ¢Var:  local  variable ¢No-­‐Var:  global  variable  declared  anywhere ¢Google  Map  Event  Object:  hEps:// developers.google.com/maps/documentaHon/ javascript/reference#MouseEvent ¢The  explanaHon  fault  of  a  closure  example  :   hEp://jsbin.com/exigiz ¢Map  sample  error:  hEp://goo.gl/9Hl0e 312年4月24日星
  4. 4. Chrome  Inspector ¢Elements  Panel ¢Resources  Panel ¢Network  Panel ¢Scripts  Panel ¢Timeline  Panel ¢Profiles  Panel ¢Console ¢Official  DocumentaHon:  hEp://goo.gl/N68rh 412年4月24日星
  5. 5. How  to  open  it ¢Right  click  on  webpage  anywhere  -­‐>  click   “inspect  element” ¢Click                -­‐>  Tools  -­‐>  Developer  Tools ¢“View”  on  toolbar  -­‐>  Developer  -­‐>  Developer   Tools 512年4月24日星
  6. 6. Elements  Panel ¢DOM  tree ¢Allow  inspecHon  and  on-­‐the-­‐fly  ediHng  of  DOM   elements ¢More  curious  informaHon — Styles,  Metrics,  ProperHes,  Others ¢DEMO — On-­‐the-­‐fly  ediHng:  hEp://goo.gl/bXvKd — Metrics  &  others:  hEp://goo.gl/kLWnX — Right-­‐Lock:  hEp://goo.gl/Y7IIE 612年4月24日星
  7. 7. Resource  Panel ¢Category  resource(Images,  Scripts,  ...) — hEp://pinterest.com/ ¢HTML5  Database(Keyword:  Storage  API) ¢Cookie — hEp://mirlab.org/users/ronald.hsu/ web_course_demo/cookie02.htm 712年4月24日星
  8. 8. Network,  Scripts,  Timeline,  Profile  Panel ¢Network — The  loading  Hme  of  those  resources ¢Scripts — Javascript  Debugger(Breakpoints) — hEp://mirlab.org/users/ronald.hsu/ web_course_demo/keyboardevent01.htm ¢Timeline — The  loading  Hme  of  each  operaHon  detail ¢Profile — Monitoring  CPU  &  HEAP  usage  rate  in  client 812年4月24日星
  9. 9. Console  Panel ¢$(“id”):  select  a  element ¢inspect(id):  showing  content  of  this  element ¢dir($(“id”)):  showing  aEribute  of  this ¢DEMO:  hEp://mirlab.org/users/ronald.hsu/ web_course_demo/keyboardevent01.htm ¢Firebug  Command  Line  API — hEp://geqirebug.com/wiki/index.php/ Command_Line_API 912年4月24日星
  10. 10. jQuery ¢jQuery  是⼀一套物件導向式簡潔輕量級的  JavaScript   Library。透過  jQuery  你可以用最精簡少量的程式碼 來輕鬆達到跨瀏覽器  DOM  操作、事件處理、設計 頁面元素動態效果、AJAX  互動等。 ¢jQuery  is  a  fast  and  concise  JavaScript  Library  that   simplifies  HTML  document  traversing,  event  handling,   animaDng,  and  Ajax  interacDons  for  rapid  web   development.  jQuery  is  designed  to  change  the  way   that  you  write  JavaScript. ¢摘自:hHp://jquery.com/、  hHp:// webdesign.kerthis.com/jquery/ 1012年4月24日星
  11. 11. Get  Started ¢In  javascript — window.document.form1.Text1.value=‘ABC’;     — document.getElementById(‘Text1’).value=‘ABC’;     — document.all(‘Text1’).value=‘ABC’;    //(Only  IE) ¢In  jQuery — $(‘#Text1’).val(‘ABC’); ¢DEMO:  hEp://goo.gl/vvuTk 1112年4月24日星
  12. 12. More  Powerful ¢To  hide  a  div  in  javascript ¢In  jQuery ¢DEMO:  hEp://goo.gl/Jb9Io 1212年4月24日星
  13. 13. More  Powerful(Cont.) ¢Javascript ¢jQuery ¢DEMO:  hEp://goo.gl/uuDUj 1312年4月24日星
  14. 14. Selector ¢Syntax:  $(selectors); ¢Tag  selector — jQuery:  $(“a”) — JS:  document.getElementsByTagName(“a”) — CSS:  a  {} ¢Id  selector — jQuery:  $(“#container”) ¢Class  selector — jQuery:  $(“.content”) 1412年4月24日星
  15. 15. Selector(Cont.) ¢Base  filters:  (First  /  Last  /  not) — :first  -­‐>  The  first  element  in  definiHon ¢$(‘tr:first’)  :  The  first  tr ¢$(‘td:first’)  :  The  first  td — :last  -­‐>  The  last  element  in  definiHon ¢$(‘tr:last)  :  The  last  tr ¢$(‘td:last’)  :  The  last  td — Not   ¢ $(‘tr:not(:first)’)  :  All  of  tr  elements  except  for  the  first. ¢DEMO:  hEp://goo.gl/jlFuZ 1512年4月24日星
  16. 16. Selector(Cont.) ¢Basic  filters:  (Even  /  Odd  /  Eq) — :even — :odd — :eq   ¢DEMO:  hEp://goo.gl/teMiq 1612年4月24日星
  17. 17. Selector(Cont.) ¢Content  filters:  (contains  /  has  /  empty) — $(‘tr:contains(“BB”)’)  :  Its  content  contains  ‘BB’ — $(‘tr  :not(:has(th))’):The  ‘tr’  doesn’t  have  ‘th’ ¢ Contains:string  v.s.  has:element — $(‘td:empty’).html(‘N/A’); ¢DEMO:  hEp://goo.gl/LJH1W 1712年4月24日星
  18. 18. Selector(Cont.) ¢Visibility  filters:  (hidden  /  visible) — $(‘tr:hidden’).fadeIn(‘slow’);  -­‐>  with  animaHon — $(‘tr:visible’).hide(‘slow’);  -­‐>  with  animaHon ¢DEMO:  hEp://goo.gl/SDk4b 1812年4月24日星
  19. 19. Selector  -­‐  AEribute  Filters ¢[aEribute  =  value] — $(‘td[class=“test”]’) ¢Regular  Expression — ^= ¢ $(‘a[href^=“y”]’):  href  start  from  “y” — $= ¢ $(a[href$=”.com”]):  href  end  with  “.com”   — *= ¢ $(‘a[href*=“y”]’):  href  contains  “y” ¢DEMO:  hEp://goo.gl/HY1nl 1912年4月24日星
  20. 20. Selector(Advanced) ¢Child  object  selecHon — :nth-­‐child(index):  (Index  start  from  1) — :first-­‐child — :last-­‐child — :only-­‐child ¢DEMO:  hEp://goo.gl/dvgNl 2012年4月24日星
  21. 21. Selector(Advanced) ¢Form  object  selecHon — :input ¢ specific  input  type ¢:text:   ¢:password:   ¢:radio:   ¢:checkbox:   ¢others:  image,  reset,  buEon,  file,  ...  etc. ¢DEMO:  hEp://goo.gl/XDqrT、hEp://goo.gl/ HZgSk 2112年4月24日星
  22. 22. jQuery  AEributes ¢Get — aEr(name) ¢Set — aEr(name,  value) ¢Delete — removeAEr(name) ¢ 2212年4月24日星
  23. 23. jQuery  CSS ¢Get — css(name) ¢Set — css(name,  value) ¢Example — $("p").css("opacity","0.5"); — $("p").css({color:"red","background-­‐color":"blue"}); ¢Offset  (Different  definiHon  in  each  browser) — $("p").offset({  top:  5,  le€:  5}) — $("p").offset().le€ 2312年4月24日星
  24. 24. jQuery  Effects ¢Some  FuncHons — Previous  menHon:  show,  hide,  fadeIn,  toggle... — slideDown — slideToggle — Others ¢More:  hEp://webdesign.kerthis.com/jquery/ jquery_effects 2412年4月24日星
  25. 25. jQuery  Plugin ¢Media  Player ¢Slideshow ¢jQuery  UI ¢Image  Galleries ¢Form  Filtering ¢Document  Viewer ¢Dialog  Box ¢More:  The  God  of  google 2512年4月24日星
  26. 26. Reference ¢hEp://webdesign.kerthis.com/jquery/ ¢hEp://ithelp.ithome.com.tw/js-­‐ninja/arHcles/ page/1 ¢hEp://ithelp.ithome.com.tw/quesHon/ 10090567 ¢hEp://docs.jquery.com/Main_Page ¢Ajax — hEp://www.ibm.com/developerworks/cn/xml/x-­‐ ajaxjquery.html 2612年4月24日星
  27. 27. More ¢URL  Parsing  with  javascript — hEp://jsbin.com/eqicig/2 ¢Extensions  for  web  developers/designer — chrome  extensions  "web  developer"  tools 2712年4月24日星
  28. 28. More  online  courses ¢Codecademy(Simple  &  Step  by  step) — hEp://www.codecademy.com ¢Coursea(Other  domains) — hEps://www.coursera.org/ ¢Code  School(Step  by  step  &  Video) — hEp://www.codeschool.com/ ¢Stanford  Open  Course  2012(Other  domains) — hEp://stanford.edu/online/courses 2812年4月24日星
  29. 29. Thanks  for  your  listening ¢Q  &  A 2912年4月24日星

×