玩玩jquery
DESCRIPTION
jQuery入門相關TRANSCRIPT
玩玩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(data);
});
13年8月23⽇日星期五
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
after13年8月23⽇日星期五
With jQuery, it’s just a simple one-liner...
$(‘.ethan’).css(‘backgroundColor’, ‘green’);
before
after13年8月23⽇日星期五
Let’s you write lessand 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 them.
13年8月23⽇日星期五
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⽇日星期五
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 other language background can start using it easily
13年8月23⽇日星期五
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 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⽇日星期五
Using jQueryIn 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⽇日星期五
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⽇日星期五
jQuery Structure
• Ajax
• Attributes
• Callbacks object
• Core
• CSS
• Data
• Deferred Object
• Deprecated
• Dimensions
• Effects
• Events
• Forms
• Internals
• Manipulation
• Miscellaneous
• Offset
• Properties
• Removed
• Selectors
• Traversing
• Utilities13年8月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⽇日星期五
<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⽇日星期五
<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⽇日星期五
<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⽇日星期五
<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⽇日星期五
<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⽇日星期五
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’>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⽇日星期五
<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⽇日星期五
<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⽇日星期五
<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⽇日星期五
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⽇日星期五
Effects
• Show and Hide
• Fade
• Animate
• more...!
• $(‘#ethan’).show()
• $(‘#ethan’).fadeOut()
• $(‘#ethan’).animate(...)
Making things look pretty.
13年8月23⽇日星期五
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⽇日星期五
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.micloud.tw/
• Bootstrap http://getbootstrap.com/
• jQuery UI http://jqueryui.com/
13年8月23⽇日星期五
13年8月23⽇日星期五