Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Apresentação jQuery 1

1,004 views

Published on

Primeira apresentação jQuery.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Apresentação jQuery 1

  1. 2. O que é jQuery ? jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. John Resig
  2. 3. jQuery é sair disso var tables = document.getElementsByTagName(&quot;table&quot;); for ( var t = 0; t < tables.length; t++ ) { var rows = tables[t].getElementsByTagName(&quot;tr&quot;); for ( var i = 1; i < rows.length; i += 2 ) if ( !/(^|s)odd(s|$)/.test( rows[i].className ) ) rows[i].className += &quot; odd&quot;; } Para isso! $(“tr:nth-child(odd)”).addClass(“odd&quot;);
  3. 4. Vantagens do jQuery $() Acesso direto a qualquer elemento da página $() Uso dos seletores do CSS $() Facilita a manipulação de conteúdos $() Compatível com todos os navegadores $() Faz as mesmas coisas com menos código
  4. 5. Estrutura do jQuery $(&quot;conjuntoDeElementosASelecionar”) <body> <ul> <li>Item 1</li> <li>Item 2</li> </ul> <ol> <li>Item 3</li> <li>Item 4</li> </ol> </body> $(“ul li&quot;) <body> <ul> <li>Item 1</li> <li>Item 2</li> </ul> <ol> <li>Item 3</li> <li>Item 4</li> </ol> </body> Seletor .acaoAplicadaNoConjuntoSelecionado();
  5. 6. Seletores (css) no jQuery $(“img”) $(“#Id”) $(“.classe”) $(“li a”) $(“li:has(a)”) $(“a:first”) $(“p:even”) $(“li:fist-child”)
  6. 7. Seletores (filtros) personalizados do jQuery $(“:checkbox:checked”) $(“:radio:checked”) $(“:input:checkbox”) $(“:input[name=radioGroup]:checked&quot;) $(“:input:not(:checkbox)”)
  7. 8. Gerenciando o conjunto de elementos selecionados $().size(); $().get(index); $().index(elemento); Retorna: o número de elementos no conjunto selecionado Retorna: um elemento ou um conjunto de elementos Retorna: o índice do elemento dentro do conjunto
  8. 9. <img src=&quot;img1.jpg&quot; alt=&quot;alt1&quot;/> <img src=&quot;img2.jpg&quot; alt=&quot;alt2&quot;/> <img src=&quot;img3.jpg&quot; alt=&quot;alt3&quot;/> Gerenciando o conjunto de elementos selecionados continuação... $().add(selector | element | html | array); $(“img[alt]&quot;) $(“li”).add(“p&quot;) $(“p”).add(&quot;<span>Um elemento span para o conjunto</span>&quot;) <img src=&quot;img1.jpg&quot; alt=&quot;alt1&quot;/> <img src=&quot;img2.jpg&quot; alt=&quot;alt2&quot;/> <img src=&quot;img3.jpg&quot; alt=&quot;alt3&quot;/> <img src=&quot;img4.jpg&quot; title=&quot;title1&quot;/> <img src=&quot;img5.jpg&quot; title=&quot;title2&quot;/> <img src=&quot;img6.jpg&quot; title=&quot;title3&quot;/> .add(“img[title]&quot;) <img src=&quot;img4.jpg&quot; title=&quot;title1&quot;/> <img src=&quot;img5.jpg&quot; title=&quot;title2&quot;/> <img src=&quot;img6.jpg&quot; title=&quot;title3&quot;/> .addClass(“css1&quot;) .addClass(“css2&quot;); Retorna: um conjunto de elementos
  9. 10. Gerenciando o conjunto de elementos selecionados continuação... $().filter(seletor | function) <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 1</li> <li>item 3</li> <li>item 5</li> $(“li”).filter(“:even&quot;) Retorna: um conjunto de elementos .addClass(“css1&quot;);
  10. 11. Gerenciando o conjunto de elementos selecionados continuação... $().slice(begin,end) $(“li&quot;).slice(0,2) Retorna: um conjunto de elementos <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> $(“l&quot;').slice(2) <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> $(“li&quot;) <li>item 1</li> <li>item 2</li>
  11. 12. Gerenciando o conjunto de elementos selecionados continuação... <p> <span>Olá</span>, como vai <span>você </span> ? </p> $(&quot;p&quot;).find(&quot;span&quot;).css('color','red'); Retorna: um conjunto de elementos $().find(seletor); Olá , como vai você ?
  12. 13. Gerenciando o conjunto de elementos selecionados continuação... $(&quot;*&quot;).is('p'); Retorna: true se pelo menos um elemento coincidir; false se não coincidir $().is(seletor); True False <body> <img src=&quot;img1.jpg&quot;/> <img src=&quot;img1.jpg&quot;/> <img src=&quot;img1.jpg&quot;/> <p>Texto</p> </body> $(&quot;*&quot;).is('li');
  13. 14. Gerenciando o conjunto de elementos selecionados continuação... $().end(); Retorna: o conjunto anterior <ul class=&quot;primeira&quot;> <li class=&quot;bolha&quot;>item 1</li> <li>item 2</li> <li class=&quot;wende&quot;>item 3</li> </ul> <ul class=&quot;segunda&quot;> <li class=&quot;bolha&quot;>item 1</li> <li>item 2</li> <li class=&quot;wende&quot;>item 3</li> </ul> <ul class=&quot;primeira&quot;> <li class=&quot;bolha&quot;>item 1</li> <li>item 2</li> <li class=&quot;wende&quot;>item 3</li> </ul> <li class=&quot;bolha&quot;>item 1</li> .find(“.bolha&quot;) .addClass(“css1&quot;) .end() .find(“.wende&quot;) .addClass(“css2&quot;); $(“ul.primeira&quot;) <ul class=&quot;primeira&quot;> <li class=&quot;bolha&quot;>item 1</li> <li>item 2</li> <li class=&quot;wende&quot;>item 3</li> </ul> <li class=&quot;wende&quot;>item 2</li> <ul class=&quot;primeira&quot;> <li class=&quot;bolha&quot;>item 1</li> <li>item 2</li> <li class=&quot;wende&quot;>item 3</li> </ul> <ul class=&quot;segunda&quot;> <li class=&quot;bolha&quot;>item 1</li> <li>item 2</li> <li class=&quot;wende&quot;>item 3</li> </ul>
  14. 15. Obrigado!

×