Download - jQuery tutorial
![Page 1: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/1.jpg)
jQuery Tutorial
$( )
![Page 2: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/2.jpg)
Select
Then Do It
$(‘#id’)
$(‘#id’).remove()
![Page 3: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/3.jpg)
Select
![Page 4: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/4.jpg)
Basic$(‘ .class1 ’)
$(‘ div ’)
$(‘ #id ’)
$(‘ .class1,div,#id ’)
Class
Element
ID
Multiple
![Page 5: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/5.jpg)
Attribute$(‘ a[rel] ’)
$(‘ [rel^=”user”] ’)
$(‘ [rel=”go”] [id] ’)
Has Attribute
Starts with
Multiple
Try Me
$(‘ a.bread[title^=”untitle”][target] ’)
![Page 6: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/6.jpg)
Form:input:button:checkbox:!le:image
:selected:focus:disabled:checked
:password:radio:reset:submit:text
Try Me
$(‘ [type=radio][name^=user]:checked:eq(1) ’)
![Page 7: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/7.jpg)
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>
![Page 8: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/8.jpg)
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
![Page 9: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/9.jpg)
$(‘ ancestor descendant ’)
$(‘ parent > child ’)
$(‘ prev ~ siblings ’)
$(‘ prev + next ’)
Descendant
Child
Next Siblings
Next Adjacent
Hierarchy
![Page 10: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/10.jpg)
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
![Page 11: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/11.jpg)
<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
![Page 12: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/12.jpg)
<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
![Page 13: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/13.jpg)
<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
![Page 14: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/14.jpg)
Do Sth
![Page 15: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/15.jpg)
Manipulation.append()
.prepend()
.attr()
.prop()
.html()
Insert
Attribute
Property
HTML Content
![Page 16: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/16.jpg)
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>
![Page 17: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/17.jpg)
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
![Page 18: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/18.jpg)
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
![Page 19: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/19.jpg)
Property<select name=”user”>
$(‘select’).prop(‘ selectedIndex ’)Get property
$(‘select’).prop(‘selectedIndex’ , 0)$(‘select’).prop( { selectedIndex : 0 } )Set property
![Page 20: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/20.jpg)
Value
$('select.foo').val()$(‘input[type=checkbox]:checked’).val()$(‘input[type=radio]:checked’).val()$(‘textarea’).val()
.val()Get value
.val( value )Set value
![Page 21: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/21.jpg)
Value<select multiple="multiple">Return array or NULL (none selected)
![Page 22: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/22.jpg)
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()
![Page 23: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/23.jpg)
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]
![Page 24: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/24.jpg)
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]
![Page 25: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/25.jpg)
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]
![Page 26: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/26.jpg)
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();
![Page 27: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/27.jpg)
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 ’)
![Page 28: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/28.jpg)
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 ‘)
![Page 29: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/29.jpg)
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 ‘)( ... )
![Page 30: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/30.jpg)
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’) )
![Page 31: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/31.jpg)
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 ’) )
![Page 32: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/32.jpg)
CSS.addClass()
.removeClass()
.css(‘ border ’)
.css(‘ border ‘, ‘ 2px ’)
.width() .height()
CSS class
Get style
Set style
Dimension
![Page 33: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/33.jpg)
Core
![Page 34: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/34.jpg)
jQuery()$( selector [ , context ] )Select elements
$( html )Create elements
$( function(){ ... } )jQuery(function($){ ... })Just like onLoad()
![Page 35: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/35.jpg)
One more thing
![Page 36: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/36.jpg)
Chainable ?$(‘div’).width(100).height(50)....
only if return jQuery object
![Page 37: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/37.jpg)
fin
![Page 38: jQuery tutorial](https://reader034.vdocument.in/reader034/viewer/2022051514/54b43fcc4a7959903f8b462e/html5/thumbnails/38.jpg)
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