HTML, CSS e Javascript.2. O QUE E JQUERY?E uma livraria de funcoes JavascriptE uma livraria com o lema Escrever menos e fazer maisContem os seguintes recursos Seleccoes de elementos HTMLManipulacao de elementos HTMLManipulacao CSSEventos HTMLEfeitos e animacoes JavascriptHTML DOMAJAX3. COMO ADICIONAR A LIVRARIA JQUERYA livraria jQuery e guardada num ficheiro Javscript, que contem as funcoes jQuery. Para adicionar a uma pagina web, utilize o seguinte codigo123<head><script type="text/javascript" src="jquery.js"></script></head>Existem 2 versoes disponiveis para download, uma simplificada, e outra descomprimida, para correccao de erros ou leitura. Ambas podem ser baixadas em jQuery.comAlternativamente, se nao pretender baixar os arquivos, podera utilizar os ficheiros alojados nos servidores da Google ou da MicrosoftGoogle123<head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script></head>Microsoft123<head><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script></head>4. SINTAXE JQUERYA sintaxe jQuery e orientada para seleccionar elementos HTML e de seguida efectuar accoes nos mesmos.A sintaxe basica e $(selectorHTML).accao()Trocando por palavras, o simbolo $ e para definir jQuery, (selectorHTML) e onde se introduz o elemento e accao() e onde irao ser introduzidas as accoes a efectuar nos elementos.Exemplos:1234567$(this).hide() // Esconde o elemento actual$("p").hide() // Esconde todos os paragrafos$("p.teste").hide() // Esconde todos os paragrafos com a classe="teste"$("#test").hide() // Esconde o elemento com o id="teste"5. SELECTORES JQUERYOs selectores permitem-lhe seleccionar e manipular elementos HTML. E possivel seleccionar por nome, nome de atributo ou conteudo.1 Selectores de elementosjQuery utiliza selectores CSS para seleccionar elementos HTML12345$("p") selecciona os elementos <p>$("p.intro") seleccionar todos os elementos <p> com class="intro".$("p#demo") selecciona o primeito elemento <p> com id="demo".2 Selectores de AtributosjQuery utiliza expressoes XPath para seleccionar elementos com dados atributos.1234567$("[href]") // Selecciona todos os elementos com um atributo href$("[href='#']") // Seleccionar todos os elementos com um valor href igual a "#"$("[href!='#']") // Selecciona todos os elementos com um valor href nao igual a "#"$("[href$='.jpg']") // Selecciona todos os elementos com um atributo href que acabe em ".jpg"3 Selectores CSSOs selectores CSS podem ser utilizados para alterar propriedades CSS de elementos HTMLNo exemplo a seguir alteramos a cor de fundo de todos os elementos p para amarelo1$("p").css("background-color","yellow");6. EVENTOS JQUERY 6.1 Eventos Os eventos jQuery sao peca chave. As funcoes que lidam com os eventos sao chamados quando algo acontece no HTML. Quando isto acontece, o termo accionado por um evento e muito conhecido e frequentemente utilizado.1234567891011121314151617181920<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").hide(); });});</script></head><body><h2>Isto e um titulo</h2><p>Isto e um paragrafo.</p><p>Isto e mais um paragrafo.</p><button>Clica-me</button></body></html>No exemplo acima, uma funcao e chamada quando o evento de clique no botao e accionado:$(botao).click(funcao() {codigo} E esta funcao esconde todos os elementos <p>:$(p).hide();6.2 Utilizar funcoes em ficheiro separado Se a sua pagina web contem inumeras paginas, e pretende que as suas funcoes jQuery tenham facil acesso para manutencao, pode introduzi-las num ficheiro .js separado. Nos casos citados acima, temos introduzido as funcoes jQuery na seccao <head>. No entanto, algumas vezes e preferivel introduzir as funcoes num ficheiro, e chama-las atraves do atributo src. Vejamos: 1234<head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="a_minha_funcao.js"></script></head>6.3 Conflitos de nomes jQueryjQuery usa o simbolo $ como atalho para jQuery. Outras livrarias de Javascript tambem utilizam este simbolo para as funcoes. No entanto, para evitar conflitos com jQuery, o metodo noconflict() permite atribuir um nome alternativo, por exemplo jq, em vez de utilizar