玩玩JQUERY
13年8月23⽇日星期五
Who am I ...
•Ethan - 陳禕寰
•MiCloud 前端⼯工程師(F2E)
13年8月23⽇日星期五
HTML
13年8月23⽇日星期五
JavaScript
13年8月23⽇日星期五
JQUERY
$(‘Knowledge’).appendTo(‘You’)
13年8月23⽇日星期五
What is jQuery?
It’s basically JavaScript
made more accessible.
13年8月23⽇日星期五
With JavaScript, cross-
browser Ajax looks like...
13年8月23⽇日星期五
With jQuery, it’s as
simple as this...
// Get the html data.
$.get('ajax/test.html',function(data){
$('#results').append(d...
With JavaScript, you would
style elements like this...
var elems = document.getElementsByClassName(‘ethan’),
len = elems.l...
With jQuery, it’s just a
simple one-liner...
$(‘.ethan’).css(‘backgroundColor’,‘green’);
before
after
13年8月23⽇日星期五
Let’s you write less
and do more
13年8月23⽇日星期五
“What does that mean?”
jQuery allows you to easily
select elements on a page
and manipulate or add some
new behaviour to t...
What the jQuery can do?
• Simplifies traversing the DOM
• Powerful selection engine
• Eases element styling through JavaScr...
Normalises many cross-browser quirks
so don’t have to worry about them
13年8月23⽇日星期五
Hi! I’m IE6
13年8月23⽇日星期五
jQuery
• It’s open-source
• Great for beginners wishing to ‘break’ into
front-end web development
• Developers from any ot...
Let’s start jQuery
13年8月23⽇日星期五
Go to jQuery.com
13年8月23⽇日星期五
How to use it?
• Create a new HTML file
• Include jQuery using <script> tag
• Load it from the Google CDN.This can be faste...
Using jQuery
In most cases, your code should run when the
document has finished loading
<script type=‘text/javascript’>
$(d...
What is $?
• $ is an alias to jQuery
• Code can either use $ or just jQuery
$(document).ready(function(){
// your code sho...
jQuery Structure
• Ajax
• Attributes
• Callbacks
object
• Core
• CSS
• Data
• Deferred
Object
• Deprecated
• Dimensions
• ...
Basic Selectors
// ID selector
$(‘#jquery’)
// Class selector
$(‘.ethan’)
// Element selector
$(‘div’)
// wildcard selecto...
<div class=‘welcome’></div>
<ul id=‘jquery’>
<li class=‘ethan’>micloud</li>
<li class=‘ethan’>Ethan</li>
<li class=‘ethan’...
<div class=‘welcome’></div>
<ul id=‘jquery’>
<li class=‘ethan’>micloud</li>
<li class=‘ethan’>Ethan</li>
<li class=‘ethan’...
<div class=‘welcome’></div>
<ul id=‘jquery’>
<li class=‘ethan’>micloud</li>
<li class=‘ethan’>Ethan</li>
<li class=‘ethan’...
<div class=‘welcome’></div>
<ul id=‘jquery’>
<li class=‘ethan’>micloud</li>
<li class=‘ethan’>Ethan</li>
<li class=‘ethan’...
<div class=‘welcome’></div>
<ul id=‘jquery’>
<li class=‘ethan’>micloud</li>
<li class=‘ethan’>Ethan</li>
<li class=‘ethan’...
What if I want to select
an element that’s a child
of another element?...
13年8月23⽇日星期五
<div class=‘welcome’></div>
<ul id=‘jquery’>
<li class=‘ethan’>micloud</li>
<li class=‘ethan’>Ethan</li>
<li class=‘ethan’...
<div class=‘welcome’></div>
<ul id=‘jquery’>
<li class=‘ethan’>micloud</li>
<li class=‘ethan’>Ethan</li>
<li class=‘ethan’...
<div class=‘welcome’></div>
<ul id=‘jquery’>
<li class=‘ethan’>micloud</li>
<li class=‘ethan’>Ethan</li>
<li class=‘ethan’...
<div class=‘welcome’></div>
<ul id=‘jquery’>
<li class=‘ethan’>micloud</li>
<li class=‘ethan’>Ethan</li>
<li class=‘ethan’...
Selectors
• Element selector
• ID and Class selectors
• Attribute selectors
• Pseudo selectors
• $(‘p’)
• $(‘div #things’)...
Effects
• Show and Hide
• Fade
• Animate
• more...!
• $(‘#ethan’).show()
• $(‘#ethan’).fadeOut()
• $(‘#ethan’).animate(......
Event
• Events in general
• A problem
• bind() and live()
• Introducing on()
$(‘button’).click(function(){alert(‘Clicked!’...
Just do it!
http://jsbin.com/evajoZU/5/edit
Please Clone
13年8月23⽇日星期五
Front-End Debug tool
13年8月23⽇日星期五
Yeoman
13年8月23⽇日星期五
Lots of Generators
13年8月23⽇日星期五
13年8月23⽇日星期五
Just do it!
npm install -g yo
npm install -g generator-webapp
yo webapp
13年8月23⽇日星期五
參考資料
• JS Bin http://jsbin.com
• Yeoman http://yeoman.io/
• jetstrap https://jetstrap.com
• Open Data Platform http://odf....
13年8月23⽇日星期五
Upcoming SlideShare
Loading in...5
×

玩玩jquery

389

Published on

jQuery入門相關

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

No Downloads
Views
Total Views
389
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

玩玩jquery

  1. 1. 玩玩JQUERY 13年8月23⽇日星期五
  2. 2. Who am I ... •Ethan - 陳禕寰 •MiCloud 前端⼯工程師(F2E) 13年8月23⽇日星期五
  3. 3. HTML 13年8月23⽇日星期五
  4. 4. JavaScript 13年8月23⽇日星期五
  5. 5. JQUERY $(‘Knowledge’).appendTo(‘You’) 13年8月23⽇日星期五
  6. 6. What is jQuery? It’s basically JavaScript made more accessible. 13年8月23⽇日星期五
  7. 7. With JavaScript, cross- browser Ajax looks like... 13年8月23⽇日星期五
  8. 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. 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. 10. With jQuery, it’s just a simple one-liner... $(‘.ethan’).css(‘backgroundColor’,‘green’); before after 13年8月23⽇日星期五
  11. 11. Let’s you write less and do more 13年8月23⽇日星期五
  12. 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. 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. 14. Normalises many cross-browser quirks so don’t have to worry about them 13年8月23⽇日星期五
  15. 15. Hi! I’m IE6 13年8月23⽇日星期五
  16. 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. 17. Let’s start jQuery 13年8月23⽇日星期五
  18. 18. Go to jQuery.com 13年8月23⽇日星期五
  19. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 29. What if I want to select an element that’s a child of another element?... 13年8月23⽇日星期五
  30. 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. 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. 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. 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. 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. 35. Effects • Show and Hide • Fade • Animate • more...! • $(‘#ethan’).show() • $(‘#ethan’).fadeOut() • $(‘#ethan’).animate(...) Making things look pretty. 13年8月23⽇日星期五
  36. 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. 37. Just do it! http://jsbin.com/evajoZU/5/edit Please Clone 13年8月23⽇日星期五
  38. 38. Front-End Debug tool 13年8月23⽇日星期五
  39. 39. Yeoman 13年8月23⽇日星期五
  40. 40. Lots of Generators 13年8月23⽇日星期五
  41. 41. 13年8月23⽇日星期五
  42. 42. Just do it! npm install -g yo npm install -g generator-webapp yo webapp 13年8月23⽇日星期五
  43. 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. 44. 13年8月23⽇日星期五
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×