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