Post on 13-Jan-2015
description
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