Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (19)
Destaque
Mais de douglasgrava
Apresentação jQuery 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
- 3. jQuery é sair disso var tables = document.getElementsByTagName("table"); for ( var t = 0; t < tables.length; t++ ) { var rows = tables[t].getElementsByTagName("tr"); for ( var i = 1; i < rows.length; i += 2 ) if ( !/(^|)odd(|$)/.test( rows[i].className ) ) rows[i].className += " odd"; } Para isso! $(“tr:nth-child(odd)”).addClass(“odd");
- 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
- 5. Estrutura do jQuery $("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") <body> <ul> <li>Item 1</li> <li>Item 2</li> </ul> <ol> <li>Item 3</li> <li>Item 4</li> </ol> </body> Seletor .acaoAplicadaNoConjuntoSelecionado();
- 6. Seletores (css) no jQuery $(“img”) $(“#Id”) $(“.classe”) $(“li a”) $(“li:has(a)”) $(“a:first”) $(“p:even”) $(“li:fist-child”)
- 7. Seletores (filtros) personalizados do jQuery $(“:checkbox:checked”) $(“:radio:checked”) $(“:input:checkbox”) $(“:input[name=radioGroup]:checked") $(“:input:not(:checkbox)”)
- 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
- 9. <img src="img1.jpg" alt="alt1"/> <img src="img2.jpg" alt="alt2"/> <img src="img3.jpg" alt="alt3"/> Gerenciando o conjunto de elementos selecionados continuação... $().add(selector | element | html | array); $(“img[alt]") $(“li”).add(“p") $(“p”).add("<span>Um elemento span para o conjunto</span>") <img src="img1.jpg" alt="alt1"/> <img src="img2.jpg" alt="alt2"/> <img src="img3.jpg" alt="alt3"/> <img src="img4.jpg" title="title1"/> <img src="img5.jpg" title="title2"/> <img src="img6.jpg" title="title3"/> .add(“img[title]") <img src="img4.jpg" title="title1"/> <img src="img5.jpg" title="title2"/> <img src="img6.jpg" title="title3"/> .addClass(“css1") .addClass(“css2"); Retorna: um conjunto de elementos
- 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") Retorna: um conjunto de elementos .addClass(“css1");
- 11. Gerenciando o conjunto de elementos selecionados continuação... $().slice(begin,end) $(“li").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"').slice(2) <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> $(“li") <li>item 1</li> <li>item 2</li>
- 12. Gerenciando o conjunto de elementos selecionados continuação... <p> <span>Olá</span>, como vai <span>você </span> ? </p> $("p").find("span").css('color','red'); Retorna: um conjunto de elementos $().find(seletor); Olá , como vai você ?
- 13. Gerenciando o conjunto de elementos selecionados continuação... $("*").is('p'); Retorna: true se pelo menos um elemento coincidir; false se não coincidir $().is(seletor); True False <body> <img src="img1.jpg"/> <img src="img1.jpg"/> <img src="img1.jpg"/> <p>Texto</p> </body> $("*").is('li');
- 14. Gerenciando o conjunto de elementos selecionados continuação... $().end(); Retorna: o conjunto anterior <ul class="primeira"> <li class="bolha">item 1</li> <li>item 2</li> <li class="wende">item 3</li> </ul> <ul class="segunda"> <li class="bolha">item 1</li> <li>item 2</li> <li class="wende">item 3</li> </ul> <ul class="primeira"> <li class="bolha">item 1</li> <li>item 2</li> <li class="wende">item 3</li> </ul> <li class="bolha">item 1</li> .find(“.bolha") .addClass(“css1") .end() .find(“.wende") .addClass(“css2"); $(“ul.primeira") <ul class="primeira"> <li class="bolha">item 1</li> <li>item 2</li> <li class="wende">item 3</li> </ul> <li class="wende">item 2</li> <ul class="primeira"> <li class="bolha">item 1</li> <li>item 2</li> <li class="wende">item 3</li> </ul> <ul class="segunda"> <li class="bolha">item 1</li> <li>item 2</li> <li class="wende">item 3</li> </ul>
- 15. Obrigado!