jQuery tutorial

4,648 views

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
4,648
On SlideShare
0
From Embeds
0
Number of Embeds
148
Actions
Shares
0
Downloads
178
Comments
1
Likes
23
Embeds 0
No embeds

No notes for slide

jQuery tutorial

  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. AttributeHas 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 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. 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. 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. 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. 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 #mevar 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. 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

×