Your SlideShare is downloading. ×
0
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
玩玩jquery
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

342

Published on

jQuery入門相關

jQuery入門相關

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

No Downloads
Views
Total Views
342
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
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 13年8月23⽇日星期五
  • 2. Who am I ... •Ethan - 陳禕寰 •MiCloud 前端⼯工程師(F2E) 13年8月23⽇日星期五
  • 3. HTML 13年8月23⽇日星期五
  • 4. JavaScript 13年8月23⽇日星期五
  • 5. JQUERY $(‘Knowledge’).appendTo(‘You’) 13年8月23⽇日星期五
  • 6. What is jQuery? It’s basically JavaScript made more accessible. 13年8月23⽇日星期五
  • 7. With JavaScript, cross- browser Ajax looks like... 13年8月23⽇日星期五
  • 8. With jQuery, it’s as simple as this... // Get the html data. $.get('ajax/test.html',function(data){ $('#results').append(data); }); 13年8月23⽇日星期五
  • 9. With JavaScript, you would style elements like this... var elems = document.getElementsByClassName(‘ethan’), len = elems.length, i = 0; for( i = 0; i < len; i++ ){ elems[i].style.backgroundColor = ‘green’; }; before after 13年8月23⽇日星期五
  • 10. With jQuery, it’s just a simple one-liner... $(‘.ethan’).css(‘backgroundColor’,‘green’); before after 13年8月23⽇日星期五
  • 11. Let’s you write less and do more 13年8月23⽇日星期五
  • 12. “What does that mean?” jQuery allows you to easily select elements on a page and manipulate or add some new behaviour to them. 13年8月23⽇日星期五
  • 13. What the jQuery can do? • Simplifies traversing the DOM • Powerful selection engine • Eases element styling through JavaScript • Powerful methods for element animation • Cross-browser Ajax interactions • DOM data-storage • and more! 13年8月23⽇日星期五
  • 14. Normalises many cross-browser quirks so don’t have to worry about them 13年8月23⽇日星期五
  • 15. Hi! I’m IE6 13年8月23⽇日星期五
  • 16. jQuery • It’s open-source • Great for beginners wishing to ‘break’ into front-end web development • Developers from any other language background can start using it easily 13年8月23⽇日星期五
  • 17. Let’s start jQuery 13年8月23⽇日星期五
  • 18. Go to jQuery.com 13年8月23⽇日星期五
  • 19. How to use it? • Create a new HTML file • Include jQuery using <script> tag • Load it from the Google CDN.This can be faster than self-hosting <script src=‘javascript/jquery-1.10.1.min.js’></script> <script src=‘http://code.jquery.com/jquery-1.10.1.min.js’></script> 13年8月23⽇日星期五
  • 20. Using jQuery In most cases, your code should run when the document has finished loading <script type=‘text/javascript’> $(document).ready(function(){ // your code should go here }); // alternatively $(function(){ // your code should go here }); </script> 13年8月23⽇日星期五
  • 21. What is $? • $ is an alias to jQuery • Code can either use $ or just jQuery $(document).ready(function(){ // your code should go here }); // same as... jQuery(document).ready(function(){ // your code should go here }); 13年8月23⽇日星期五
  • 22. jQuery Structure • Ajax • Attributes • Callbacks object • Core • CSS • Data • Deferred Object • Deprecated • Dimensions • Effects • Events • Forms • Internals • Manipulation • Miscellaneous • Offset • Properties • Removed • Selectors • Traversing • Utilities 13年8月23⽇日星期五
  • 23. Basic Selectors // ID selector $(‘#jquery’) // Class selector $(‘.ethan’) // Element selector $(‘div’) // wildcard selector $(‘*’) // Attribute selector $(‘input[name=ethanName]’) <div class=‘welcome’></div> <ul id=‘jquery’> <li class=‘ethan’>micloud</li> <li class=‘ethan’>Ethan</li> <li class=‘ethan’>Team</li> <li class=‘ethan’>mitac</li> <li class=‘ethan’>HI</li> </ul> <input type=‘text’ name=‘ethanName’ value=’hi’ /> 13年8月23⽇日星期五
  • 24. <div class=‘welcome’></div> <ul id=‘jquery’> <li class=‘ethan’>micloud</li> <li class=‘ethan’>Ethan</li> <li class=‘ethan’>Team</li> <li class=‘ethan’>mitac</li> <li class=‘ethan’>HI</li> </ul> <input type=‘text’ name=‘ethanName’ value=’hi’ /> Basic Selectors // ID selector $(‘#jquery’) // Class selector $(‘.ethan’) // Element selector $(‘div’) // wildcard selector $(‘*’) // Attribute selector $(‘input[name=ethanName]’) 13年8月23⽇日星期五
  • 25. <div class=‘welcome’></div> <ul id=‘jquery’> <li class=‘ethan’>micloud</li> <li class=‘ethan’>Ethan</li> <li class=‘ethan’>Team</li> <li class=‘ethan’>mitac</li> <li class=‘ethan’>HI</li> </ul> <input type=‘text’ name=‘ethanName’ value=’hi’ /> Basic Selectors // ID selector $(‘#jquery’) // Class selector $(‘.ethan’) // Element selector $(‘div’) // wildcard selector $(‘*’) // Attribute selector $(‘input[name=ethanName]’) 13年8月23⽇日星期五
  • 26. <div class=‘welcome’></div> <ul id=‘jquery’> <li class=‘ethan’>micloud</li> <li class=‘ethan’>Ethan</li> <li class=‘ethan’>Team</li> <li class=‘ethan’>mitac</li> <li class=‘ethan’>HI</li> </ul> <input type=‘text’ name=‘ethanName’ value=’hi’ /> Basic Selectors // ID selector $(‘#jquery’) // Class selector $(‘.ethan’) // Element selector $(‘div’) // wildcard selector $(‘*’) // Attribute selector $(‘input[name=ethanName]’) 13年8月23⽇日星期五
  • 27. <div class=‘welcome’></div> <ul id=‘jquery’> <li class=‘ethan’>micloud</li> <li class=‘ethan’>Ethan</li> <li class=‘ethan’>Team</li> <li class=‘ethan’>mitac</li> <li class=‘ethan’>HI</li> </ul> <input type=‘text’ name=‘ethanName’ value=’hi’ /> Basic Selectors // ID selector $(‘#jquery’) // Class selector $(‘.ethan’) // Element selector $(‘div’) // wildcard selector $(‘*’) // Attribute selector $(‘input[name=ethanName]’) 13年8月23⽇日星期五
  • 28. <div class=‘welcome’></div> <ul id=‘jquery’> <li class=‘ethan’>micloud</li> <li class=‘ethan’>Ethan</li> <li class=‘ethan’>Team</li> <li class=‘ethan’>mitac</li> <li class=‘ethan’>HI</li> </ul> <input type=‘text’ name=‘ethanName’ value=’hi’ /> Basic Selectors // ID selector $(‘#jquery’) // Class selector $(‘.ethan’) // Element selector $(‘div’) // wildcard selector $(‘*’) // Attribute selector $(‘input[name=ethanName]’) 13年8月23⽇日星期五
  • 29. What if I want to select an element that’s a child of another element?... 13年8月23⽇日星期五
  • 30. <div class=‘welcome’></div> <ul id=‘jquery’> <li class=‘ethan’>micloud</li> <li class=‘ethan’>Ethan</li> <li class=‘ethan’>Team</li> <li class=‘ethan’>mitac</li> <li class=‘ethan’>HI</li> </ul> <input type=‘text’ name=‘ethanName’ value=’hi’ /> Filter Selectors //first element in a result set $(‘ul li:first’) //last element in a result set $(‘ul li:last’) //all odd elements in a result set $(‘ul li:odd’) //all even elements $(‘ul li:even’) 13年8月23⽇日星期五
  • 31. <div class=‘welcome’></div> <ul id=‘jquery’> <li class=‘ethan’>micloud</li> <li class=‘ethan’>Ethan</li> <li class=‘ethan’>Team</li> <li class=‘ethan’>mitac</li> <li class=‘ethan’>HI</li> </ul> <input type=‘text’ name=‘ethanName’ value=’hi’ /> Filter Selectors //first element in a result set $(‘ul li:first’) //last element in a result set $(‘ul li:last’) //all odd elements in a result set $(‘ul li:odd’) //all even elements $(‘ul li:even’) 13年8月23⽇日星期五
  • 32. <div class=‘welcome’></div> <ul id=‘jquery’> <li class=‘ethan’>micloud</li> <li class=‘ethan’>Ethan</li> <li class=‘ethan’>Team</li> <li class=‘ethan’>mitac</li> <li class=‘ethan’>HI</li> </ul> <input type=‘text’ name=‘ethanName’ value=’hi’ /> Filter Selectors //first element in a result set $(‘ul li:first’) //last element in a result set $(‘ul li:last’) //all odd elements in a result set $(‘ul li:odd’) //all even elements $(‘ul li:even’) 13年8月23⽇日星期五
  • 33. <div class=‘welcome’></div> <ul id=‘jquery’> <li class=‘ethan’>micloud</li> <li class=‘ethan’>Ethan</li> <li class=‘ethan’>Team</li> <li class=‘ethan’>mitac</li> <li class=‘ethan’>HI</li> </ul> <input type=‘text’ name=‘ethanName’ value=’hi’ /> Filter Selectors //first element in a result set $(‘ul li:first’) //last element in a result set $(‘ul li:last’) //all odd elements in a result set $(‘ul li:odd’) //all even elements $(‘ul li:even’) 13年8月23⽇日星期五
  • 34. Selectors • Element selector • ID and Class selectors • Attribute selectors • Pseudo selectors • $(‘p’) • $(‘div #things’) • $(‘input[type=text]’) • $(‘input:focus’) An extremely powerful way to specify which elements you want. 13年8月23⽇日星期五
  • 35. Effects • Show and Hide • Fade • Animate • more...! • $(‘#ethan’).show() • $(‘#ethan’).fadeOut() • $(‘#ethan’).animate(...) Making things look pretty. 13年8月23⽇日星期五
  • 36. Event • Events in general • A problem • bind() and live() • Introducing on() $(‘button’).click(function(){alert(‘Clicked!’)}) $(‘.cat’).click(function(){alert(‘Clicked!’)}) $(...).bind(...) $(...).live(...) $(‘button’).on(‘click’, function(){alert(‘Clicked!’)}) Responding to user actions 13年8月23⽇日星期五
  • 37. Just do it! http://jsbin.com/evajoZU/5/edit Please Clone 13年8月23⽇日星期五
  • 38. Front-End Debug tool 13年8月23⽇日星期五
  • 39. Yeoman 13年8月23⽇日星期五
  • 40. Lots of Generators 13年8月23⽇日星期五
  • 41. 13年8月23⽇日星期五
  • 42. Just do it! npm install -g yo npm install -g generator-webapp yo webapp 13年8月23⽇日星期五
  • 43. 參考資料 • JS Bin http://jsbin.com • Yeoman http://yeoman.io/ • jetstrap https://jetstrap.com • Open Data Platform http://odf.micloud.tw/ • Bootstrap http://getbootstrap.com/ • jQuery UI http://jqueryui.com/ 13年8月23⽇日星期五
  • 44. 13年8月23⽇日星期五

×