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
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');