Apresentação jQuery 1
Upcoming SlideShare
Loading in...5
×
 

Apresentação jQuery 1

on

  • 929 views

Primeira apresentação jQuery.

Primeira apresentação jQuery.

Statistics

Views

Total Views
929
Views on SlideShare
777
Embed Views
152

Actions

Likes
0
Downloads
16
Comments
0

3 Embeds 152

http://bluesoft.wordpress.com 88
http://blog.bluesoft.com.br 62
http://www.infoblogs.com.br 2

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Apresentação jQuery 1 Apresentação jQuery 1 Presentation Transcript

  •  
  • 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
  • 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;);
  • 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
  • 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();
  • Seletores (css) no jQuery $(“img”) $(“#Id”) $(“.classe”) $(“li a”) $(“li:has(a)”) $(“a:first”) $(“p:even”) $(“li:fist-child”)
  • Seletores (filtros) personalizados do jQuery $(“:checkbox:checked”) $(“:radio:checked”) $(“:input:checkbox”) $(“:input[name=radioGroup]:checked&quot;) $(“:input:not(:checkbox)”)
  • 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
  • <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
  • 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;);
  • 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>
  • 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ê ?
  • 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');
  • 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>
  • Obrigado!