$( )jQuery Tutorial
Select    $(‘#id’)Then Do It$(‘#id’).remove()
Select
Basic   Class $(‘ .class1 ’)Element $(‘ div ’)      ID $(‘ #id ’)Multiple $(‘ .class1,div,#id ’)
AttributeHas Attribute $(‘ a[rel] ’)  Starts with $(‘ [rel^=”user”] ’)     Multiple $(‘ [rel=”go”] [id] ’)                ...
Form  :input         :password      :selected  :button        :radio         :focus  :checkbox      :reset         :disabl...
Filter<ul>               :eq()    :even <li>Item 0</li>   :first   :odd <li>Item 1</li>   :last    :gt() <li>Item 2</li>  ...
Traversing.eq()       .not()        .children()      .parent().filter()   .slice()      .closest()       .parents().first(...
Hierarchy  Descendant $(‘ ancestor descendant ’)         Child $(‘ parent > child ’) Next Siblings $(‘ prev ~ siblings ’)N...
Hierarchy Demo 1Descendant = $(‘ ul.top li ’)All descendants    <ul class=”top”>     <li>AAA</li>     <li>BBB        <ul><...
Hierarchy Demo 2Child = $(‘ ul.top > li ’)1st level descendants only    <ul class=”top”>     <li>AAA</li>     <li>BBB     ...
Hierarchy Demo 3Next Siblings = $(‘ div.here ~ div ’)All following siblings      <div>1</div>      <div class=”here”>2</di...
Hierarchy Demo 4Next Adjacent = $(‘ div.here + div ’)The immediate following sibling     <div>1</div>     <div class=”here...
Do Sth
Manipulation       Insert .append()               .prepend()    Attribute .attr()     Property .prop()HTML Content .html()
Insert<div id=”me”></div>  $(‘#me’).append( ‘plain text’ )<div> plain text </div>  $(‘<span/>’)    .html(‘<b>bold</b>’)   ...
Remove$(‘#me’).empty()Clean all inside #me$(‘#me’).remove(‘ p.illness ’)Clean all/partial inside #mevar obj = $(‘#me’).det...
Attribute<a href=”#” title=”Click Me”>$(‘a’).attr(‘ title ’)Get attribute$(‘a’).attr(‘title’ , ‘Dont Click Me’)$(‘a’).attr...
Property<select name=”user”>$(‘select’).prop(‘ selectedIndex ’)Get property$(‘select’).prop(‘selectedIndex’ , 0)$(‘select’...
Value       .val()           .val( value )       Get value        Set value$(select.foo).val()$(‘input[type=checkbox]:chec...
Value<select multiple="multiple">Return array or NULL (none selected)
Traversing.eq()       .not()        .closest()       .parents().filter()   .slice()      .find()          .parentsUntil()....
Traversing Demo 1<ul class="level-1">     <li class="item-i">I</li>     <li class="item-ii">II                            ...
Traversing Demo 2<ul class="level-1">     <li class="item-i">I</li>     <li class="item-ii">II                            ...
Traversing Demo 3<ul class="level-1">     <li class="item-i">I</li>     <li class="item-ii">II                            ...
Traversing Demo 4<table>    <thead>        <tr>              $(table)              <td></td>                            .f...
Traversing Demo 5<ul class="level-1">     <li class="item-i">I</li>     <li class="item-ii">II                            ...
Traversing Demo 5<ul class="level-1">     <li class="item-i">I</li>     <li class="item-ii">II                            ...
Traversing Demo 5<ul class="level-1">     <li class="item-i">I</li>     <li class="item-ii">II                            ...
Traversing Demo 5<ul class="level-1">     <li class="item-i">I</li>     <li class="item-ii">II                            ...
Traversing Demo 5<ul class="level-1">     <li class="item-i">I</li>     <li class="item-ii">II                            ...
CSS CSS class .addClass()              .removeClass()  Get style .css(‘ border ’)  Set style .css(‘ border ‘, ‘ 2px ’)Dime...
Core
jQuery()$( selector [ , context ] )Select elements$( html )Create elements$( function(){ ... } )jQuery(function($){ ... })...
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...
Upcoming SlideShare
Loading in...5
×

jQuery tutorial

3,715

Published on

Published in: Technology
1 Comment
23 Likes
Statistics
Notes
  • comprehensive presentation about jQuery.........good one
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,715
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
174
Comments
1
Likes
23
Embeds 0
No embeds

No notes for slide

jQuery tutorial

  1. 1. $( )jQuery Tutorial
  2. 2. Select $(‘#id’)Then Do It$(‘#id’).remove()
  3. 3. Select
  4. 4. Basic Class $(‘ .class1 ’)Element $(‘ div ’) ID $(‘ #id ’)Multiple $(‘ .class1,div,#id ’)
  5. 5. AttributeHas Attribute $(‘ a[rel] ’) Starts with $(‘ [rel^=”user”] ’) Multiple $(‘ [rel=”go”] [id] ’) Try Me $(‘ a.bread[title^=”untitle”][target] ’)
  6. 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. 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. 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. 9. Hierarchy Descendant $(‘ ancestor descendant ’) Child $(‘ parent > child ’) Next Siblings $(‘ prev ~ siblings ’)Next Adjacent $(‘ prev + next ’)
  10. 10. Hierarchy Demo 1Descendant = $(‘ 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. 11. Hierarchy Demo 2Child = $(‘ 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. 12. Hierarchy Demo 3Next 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. 13. Hierarchy Demo 4Next 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. 14. Do Sth
  15. 15. Manipulation Insert .append() .prepend() Attribute .attr() Property .prop()HTML Content .html()
  16. 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. 17. Remove$(‘#me’).empty()Clean all inside #me$(‘#me’).remove(‘ p.illness ’)Clean all/partial inside #mevar obj = $(‘#me’).detach(‘ p.hat ’)Remove and reinsert later
  18. 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. 19. Property<select name=”user”>$(‘select’).prop(‘ selectedIndex ’)Get property$(‘select’).prop(‘selectedIndex’ , 0)$(‘select’).prop( { selectedIndex : 0 } )Set property
  20. 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. 21. Value<select multiple="multiple">Return array or NULL (none selected)
  22. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 32. CSS CSS class .addClass() .removeClass() Get style .css(‘ border ’) Set style .css(‘ border ‘, ‘ 2px ’)Dimension .width() .height()
  33. 33. Core
  34. 34. jQuery()$( selector [ , context ] )Select elements$( html )Create elements$( function(){ ... } )jQuery(function($){ ... })Just like onLoad()
  35. 35. One more thing
  36. 36. Chainable ?$(‘div’).width(100).height(50).... only if return jQuery object
  37. 37. fin
  38. 38. 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.htmlhttp://www.infoq.com/articles/jquery-mobile-24-hrs
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×