玩玩jquery

  • 289 views
Uploaded on

jQuery入門相關

jQuery入門相關

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
289
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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⽇日星期五