jQuery入門相關

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