jQuery Tutorial

$( )

Select

Then Do It

$(‘#id’)

$(‘#id’).remove()

Select

Basic$(‘ .class1 ’)

$(‘ div ’)

$(‘ #id ’)

$(‘ .class1,div,#id ’)

Class

Element

ID

Multiple

Attribute$(‘ a[rel] ’)

$(‘ [rel^=”user”] ’)

$(‘ [rel=”go”] [id] ’)

Has Attribute

Starts with

Multiple

Try Me

$(‘ a.bread[title^=”untitle”][target] ’)

Form:input:button:checkbox:!le:image

:selected:focus:disabled:checked

:password:radio:reset:submit:text

Try Me

$(‘ [type=radio][name^=user]:checked:eq(1) ’)

Filter:eq():!rst:last:not

:even:odd:gt():lt():header:animated

<ul><li>Item 0</li><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li>

</ul>

Traversing.eq()

.!lter()

.!rst()

.has()

.is()

.last()

.map()

.not()

.slice()

.add()

.andSelf()

.contents()

.end()

.not()

.children()

.closest()

.!nd()

.next()

.nextAll()

.nextUntil()

.offsetParent()

.parent()

.parents()

.parentsUntil()

.prev()

.prevAll()

.PrevUntil()

.siblings()

LATER

$(‘ ancestor descendant ’)

$(‘ parent > child ’)

$(‘ prev ~ siblings ’)

$(‘ prev + next ’)

Descendant

Child

Next Siblings

Next Adjacent

Hierarchy

Hierarchy Demo 1

<ul class=”top”><li>AAA</li><li>BBB

<ul><li>B1</li><li>B2</li><li>B3</li></ul></li><li>CCC</li>

</ul>

Descendant = $(‘ ul.top li ’)All descendants

<ul class=”top”><li>AAA</li><li>BBB

<ul><li>B1</li><li>B1</li><li>B1</li></ul></li><li>CCC</li>

</ul>

Child = $(‘ ul.top > li ’)1st level descendants only

Hierarchy Demo 2

<div>1</div><div class=”here”>2</div><div>3</div>

<span>4</span><div>5</div><div>6</div>

Next Siblings = $(‘ div.here ~ div ’)All following siblings

Hierarchy Demo 3

<div>1</div><div class=”here”>2</div><div>3</div>

<span>4</span><div>5</div><div>6</div>

Next Adjacent = $(‘ div.here + div ’)The immediate following sibling

Hierarchy Demo 4

Do Sth

Manipulation.append()

.prepend()

.attr()

.prop()

.html()

Insert

Attribute

Property

HTML Content

Insert<div id=”me”></div>

$(‘#me’).append( ‘plain text’ )

<div> plain text </div>

$(‘<span/>’) .html(‘<b>bold</b>’) .appendTo( $(‘#me’) )

<div> plain text <span><b>bold</b></span> </div>

Remove$(‘#me’).empty()Clean all inside #me

$(‘#me’).remove(‘ p.illness ’)Clean all/partial inside #me

var obj = $(‘#me’).detach(‘ p.hat ’)Remove and reinsert later

Attribute<a href=”#” title=”Click Me”>

$(‘a’).attr(‘ title ’)Get attribute

$(‘a’).attr(‘title’ , ‘Dont Click Me’)$(‘a’).attr( { title : ‘ Dont Click Me ’ } )Set attribute

Property<select name=”user”>

$(‘select’).prop(‘ selectedIndex ’)Get property

$(‘select’).prop(‘selectedIndex’ , 0)$(‘select’).prop( { selectedIndex : 0 } )Set property

Value

$('select.foo').val()$(‘input[type=checkbox]:checked’).val()$(‘input[type=radio]:checked’).val()$(‘textarea’).val()

.val()Get value

.val( value )Set value

Value<select multiple="multiple">Return array or NULL (none selected)

Traversing.eq()

.!lter()

.!rst()

.has()

.is()

.last()

.map()

.not()

.slice()

.add()

.andSelf()

.contents()

.end()

.children()

.closest()

.!nd()

.next()

.nextAll()

.nextUntil()

.offsetParent()

.parent()

.parents()

.parentsUntil()

.prev()

.prevAll()

.PrevUntil()

.siblings()

Traversing Demo 1<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li></ul>

$('li.item-1').parent() =[ ul.level-3]

Traversing Demo 2<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li></ul>

$('li.item-1').parents() =[ ul.level-3, li.item-b, ul.level-2, li.item-ii, ul.level-1, body, html]

Traversing Demo 3<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li></ul>

$('li.item-1').siblings() =[ li.item-2, li.item-3]

$('li.item-1').siblings().andSelf() =[ li.item-1, li.item-2, li.item-3]

Traversing Demo 4<table> <thead> <tr> <td></td> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> <tfoot> <tr> <td></td> </tr> </tfoot></table>

$('table').!nd(‘thead’)

.!nd(‘td’).html(‘ caption ’).end().end().!nd(‘tbody’)

.!nd(‘td’).html(‘ content ’).end().end().!nd(‘tfoot’)

.!nd(‘td’).html(‘ footnote ’).end().end();

Traversing Demo 5<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li></ul>

$('ul.level-1').!nd(‘ li ’)

Traversing Demo 5<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li></ul>

$('ul.level-1').!nd(‘ li ’)

.has(‘ ul ‘)

Traversing Demo 5<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li></ul>

$('ul.level-1').!nd(‘ li ’)

.has(‘ ul ‘).not(‘ .item-ii ‘)( ... )

Traversing Demo 5<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li></ul>

$('ul.level-1').!nd(‘ li ’)

.has(‘ ul ‘).not(‘ .item-ii ‘)( ... ).end()( ... do with .has(‘ul’) )

Traversing Demo 5<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li></ul>

$('ul.level-1').!nd(‘ li ’)

.has(‘ ul ‘).not(‘ .item-ii ‘)( ... ).end()

.end()( do with .!nd(‘ li ’) )

CSS.addClass()

.removeClass()

.css(‘ border ’)

.css(‘ border ‘, ‘ 2px ’)

.width() .height()

CSS class

Get style

Set style

Dimension

Core

jQuery()$( selector [ , context ] )Select elements

$( html )Create elements

$( function(){ ... } )jQuery(function($){ ... })Just like onLoad()

One more thing

Chainable ?$(‘div’).width(100).height(50)....

only if return jQuery object

fin

ReferenceJohn Resig ( jQuery creator )

jQuery Quick API Reference

jQuery 1.7 Visual Cheat Sheet

jQuery - Select element cheat sheet

20 jQuery Cheatsheets, Docs and References

http://www.learningjquery.com/

http://www.noupe.com/tutorial/51-best-of-jquery-tutorials-and-examples.html

http://www.infoq.com/articles/jquery-mobile-24-hrs