1. $( )
jQuery Tutorial

2. Select
$(‘#id’)
Then Do It
$(‘#id’).remove()

3. Select

4. Basic
Class $(‘ .class1 ’)
Element $(‘ div ’)
ID $(‘ #id ’)
Multiple $(‘ .class1,div,#id ’)

5. Attribute
Has Attribute $(‘ a[rel] ’)
Starts with $(‘ [rel^=”user”] ’)
Multiple $(‘ [rel=”go”] [id] ’)
Try Me
$(‘ a.bread[title^=”untitle”][target] ’)

6. Form
:input :password :selected
:button :radio :focus
:checkbox :reset :disabled
:file :submit :checked
:image :text
Try Me
$(‘ [type=radio][name^=user]:checked:eq(1) ’)

7. Filter
<ul> :eq() :even
<li>Item 0</li> :first :odd
<li>Item 1</li> :last :gt()
<li>Item 2</li> :not :lt()
<li>Item 3</li> :header
<li>Item 4</li> :animated
</ul>

8. Traversing
.eq() .not() .children() .parent()
.filter() .slice() .closest() .parents()
.first()
.has()
.is() L ATE
.add()
R
.andSelf()
.contents()
.find()
.next()
.nextAll()
.parentsUntil()
.prev()
.prevAll()
.last() .end() .nextUntil() .PrevUntil()
.map() .not() .offsetParent() .siblings()

9. Hierarchy
Descendant $(‘ ancestor descendant ’)
Child $(‘ parent > child ’)
Next Siblings $(‘ prev ~ siblings ’)
Next Adjacent $(‘ prev + next ’)

10. Hierarchy Demo 1
Descendant = $(‘ ul.top li ’)
All descendants
<ul class=”top”>
<li>AAA</li>
<li>BBB
<ul><li>B1</li><li>B2</li><li>B3</li></ul>
</li>
<li>CCC</li>
</ul>

11. Hierarchy Demo 2
Child = $(‘ ul.top > li ’)
1st level descendants only
<ul class=”top”>
<li>AAA</li>
<li>BBB
<ul><li>B1</li><li>B1</li><li>B1</li></ul>
</li>
<li>CCC</li>
</ul>

12. Hierarchy Demo 3
Next Siblings = $(‘ div.here ~ div ’)
All following siblings
<div>1</div>
<div class=”here”>2</div>
<div>3</div>
<span>4</span>
<div>5</div>
<div>6</div>

13. Hierarchy Demo 4
Next Adjacent = $(‘ div.here + div ’)
The immediate following sibling
<div>1</div>
<div class=”here”>2</div>
<div>3</div>
<span>4</span>
<div>5</div>
<div>6</div>

14. Do Sth

15. Manipulation
Insert .append()
.prepend()
Attribute .attr()
Property .prop()
HTML Content .html()

16. 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>

17. 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

18. 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

19. Property
<select name=”user”>
$(‘select’).prop(‘ selectedIndex ’)
Get property
$(‘select’).prop(‘selectedIndex’ , 0)
$(‘select’).prop( { selectedIndex : 0 } )
Set property

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

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

22. Traversing
.eq() .not() .closest() .parents()
.filter() .slice() .find() .parentsUntil()
.first() .add() .next() .prev()
.has() .andSelf() .nextAll() .prevAll()
.is() .contents() .nextUntil() .PrevUntil()
.last() .end() .offsetParent() .siblings()
.map() .children() .parent()

23. Traversing Demo 1
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II $('li.item-1').parent() =
<ul class="level-2"> [
<li class="item-a">A</li>
<li class="item-b">B
ul.level-3
<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>

24. Traversing Demo 2
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II $('li.item-1').parents() =
<ul class="level-2"> [
<li class="item-a">A</li>
<li class="item-b">B
ul.level-3,
<ul class="level-3"> li.item-b,
<li class="item-1">1</li> ul.level-2,
<li class="item-2">2</li> li.item-ii,
<li class="item-3">3</li>
</ul>
ul.level-1,
</li> body,
<li class="item-c">C</li> html
</ul>
]
</li>
<li class="item-iii">III</li>
</ul>

25. Traversing Demo 3
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II $('li.item-1').siblings() =
<ul class="level-2"> [
<li class="item-a">A</li> li.item-2,
<li class="item-b">B li.item-3
<ul class="level-3"> ]
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
$('li.item-1').siblings().andSelf() =
</ul> [
</li> li.item-1,
<li class="item-c">C</li> li.item-2,
</ul> li.item-3
</li> ]
<li class="item-iii">III</li>
</ul>

26. Traversing Demo 4
<table>
<thead>
<tr> $('table')
<td></td>
.find(‘thead’)
</tr>
</thead> .find(‘td’).html(‘ caption ’).end()
<tbody>
.end()
<tr>
<td></td> .find(‘tbody’)
</tr>
.find(‘td’).html(‘ content ’).end()
</tbody>
<tfoot> .end()
<tr> .find(‘tfoot’)
<td></td>
</tr> .find(‘td’).html(‘ footnote ’).end()
</tfoot> .end();
</table>

27. Traversing Demo 5
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II $('ul.level-1')
<ul class="level-2">
.find(‘ li ’)
<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>

28. Traversing Demo 5
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II $('ul.level-1')
<ul class="level-2">
.find(‘ li ’)
<li class="item-a">A</li>
<li class="item-b">B .has(‘ ul ‘)
<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>

29. Traversing Demo 5
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II $('ul.level-1')
<ul class="level-2">
.find(‘ li ’)
<li class="item-a">A</li>
<li class="item-b">B .has(‘ ul ‘)
<ul class="level-3">
.not(‘ .item-ii ‘)
<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>

30. Traversing Demo 5
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II $('ul.level-1')
<ul class="level-2">
.find(‘ li ’)
<li class="item-a">A</li>
<li class="item-b">B .has(‘ ul ‘)
<ul class="level-3">
.not(‘ .item-ii ‘)
<li class="item-1">1</li>
<li class="item-2">2</li> ( ... )
<li class="item-3">3</li>
.end()
</ul>
</li> ( ... do with .has(‘ul’) )
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>

31. Traversing Demo 5
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II $('ul.level-1')
<ul class="level-2">
.find(‘ li ’)
<li class="item-a">A</li>
<li class="item-b">B .has(‘ ul ‘)
<ul class="level-3">
.not(‘ .item-ii ‘)
<li class="item-1">1</li>
<li class="item-2">2</li> ( ... )
<li class="item-3">3</li>
.end()
</ul>
</li> .end()
<li class="item-c">C</li> ( do with .find(‘ li ’) )
</ul>
</li>
<li class="item-iii">III</li>
</ul>

32. CSS
CSS class .addClass()
.removeClass()
Get style .css(‘ border ’)
Set style .css(‘ border ‘, ‘ 2px ’)
Dimension .width() .height()

33. Core

34. jQuery()
$( selector [ , context ] )
Select elements
$( html )
Create elements
$( function(){ ... } )
jQuery(function($){ ... })
Just like onLoad()

35. One more thing

36. Chainable ?
$(‘div’).width(100).height(50)....
only if return jQuery object

37. fin

38. Reference
John 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