jQuery tutorial2. Select
$(‘#id’)
Then Do It
$(‘#id’).remove()
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>
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>
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
20. Value
.val() .val( value )
Get value Set value
$('select.foo').val()
$(‘input[type=checkbox]:checked’).val()
$(‘input[type=radio]:checked’).val()
$(‘textarea’).val()
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()
34. jQuery()
$( selector [ , context ] )
Select elements
$( html )
Create elements
$( function(){ ... } )
jQuery(function($){ ... })
Just like onLoad()
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