玩玩jquery

玩玩JQUERY

13年8月23⽇日星期五

Who am I ...

•Ethan - 陳禕寰•MiCloud 前端⼯工程師(F2E)


HTML


JavaScript


JQUERY

$(‘Knowledge’).appendTo(‘You’)


What is jQuery?

It’s basically JavaScript made more accessible.


With JavaScript, cross-browser Ajax looks like...


With jQuery, it’s as simple as this...

// Get the html data. $.get('ajax/test.html',function(data){$('#results').append(data);

});


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


“What does that mean?”

jQuery allows you to easily select elements on a page

and manipulate or add some new behaviour to them.


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!


Normalises many cross-browser quirks so don’t have to worry about them


Hi! I’m IE6


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


Let’s start jQuery


Go to jQuery.com


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>


http://code.jquery.com/jquery-1.10.1.min.js

http://code.jquery.com/jquery-1.10.1.min.js

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>


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});


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’ />









</ul>



$(‘#jquery’)// Class selector

$(‘.ethan’)

// Element selector

$(‘div’)












</ul>



$(‘#jquery’)

// Class selector

$(‘.ethan’)// Element selector

$(‘div’)












</ul>



$(‘#jquery’)

// Class selector

$(‘.ethan’)

// Element selector

$(‘div’)// wildcard selector











</ul>



$(‘#jquery’)

// Class selector

$(‘.ethan’)

// Element selector

$(‘div’)












</ul>



$(‘#jquery’)

// Class selector

$(‘.ethan’)

// Element selector

$(‘div’)





What if I want to select an element that’s a child of another element?...









</ul>


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’)









</ul>





$(‘ul li:last’)//all odd elements in a result set


$(‘ul li:even’)









</ul>





$(‘ul li:last’)



$(‘ul li:even’)









</ul>





$(‘ul li:last’)



$(‘ul li:even’)


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.


Effects

• Show and Hide

• Fade

• Animate

• more...!

• $(‘#ethan’).show()

• $(‘#ethan’).fadeOut()

• $(‘#ethan’).animate(...)

Making things look pretty.


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


Just do it!http://jsbin.com/evajoZU/5/edit

Please Clone


http://jsbin.com/evajoZU/1/edit

http://jsbin.com/evajoZU/1/edit

Front-End Debug tool


Yeoman


Lots of Generators



Just do it!

npm install -g yo

npm install -g generator-webapp

yo webapp


參考資料• 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/


http://jsbin.com/

http://jsbin.com/

http://yeoman.io/

http://yeoman.io/

https://jetstrap.com

https://jetstrap.com

http://odf.micloud.tw/

http://odf.micloud.tw/

http://getbootstrap.com/

http://getbootstrap.com/

http://jqueryui.com/

http://jqueryui.com/


Technology

玩玩jquery