Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
Selectors & Traversing
Selectors & Traversing
Cargando en…3
×

Eche un vistazo a continuación

1 de 38 Anuncio
Anuncio

Más Contenido Relacionado

Anuncio

Más reciente (20)

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. 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>
  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 #me var 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. 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

×