Manual simples de jQuery 1.3.

1. Manual jQuery 1.3

4. Exemplo de redução de código No Javascript nativo: document.getElementById(“minhaTabela”) No jQuery: $(“#minhaTabela”) No Javascript nativo: document.getElementsByTagName("ul")[0].getElementsByTagName("li")[0].innerHTML No Jquery: $("ul:first > li:first").text() Retornar o texto do primeiro item da primeira lista: Retornar elemento pelo índice:

6. Seletores Basicamente, o seletor pode ser um nome de elemento para se manipular (seletor de tipo de elemento), uma classe (seletor de classe) ou um identificador (seletor de id), mas há também outros formatos de seletores. Seletor Descrição Executando Elemento Retorna os elemento pelo nome. $(“table”) * Todos os elementos. $(“*”) # Elemento por índice. $(“#tabela1”) > Retorna os filhos do elemento. $(“#tabela1 > tbody”) ‘ ‘ (espaço) Retorna os descendentes do elemento. $(“#tabela1 td”) + Próximo elemento (irmão). $(“form + div”) .class Retorna os elementos por nome da classe CSS. $(“.cssTabelas”)

7. Pseudo-Seletores São formas aprimoradas de distinção para seletores. Seletor Descrição Executando :first Primeiro item. $(“ul > li:first”) :last Último item. $(“ul > li:last”) :not Ignora algo/alguma coisa. $(“ul > li:not(:last)” :contains Contenha texto. $(“p:contains(helton)”) :empty Vazio. $(“p:empty”) :even, :odd Item impar ou par. $(“tr > td:even”) :visible Visível. $(“div:visible”) :first-child Primeiro filho. $(“table :first-child”) :last-child Último filho. $(“table :last-child”) :onlychild Somente filhos. $(“table :onlychild”)

8. Pseudo-Seletores de Formulários Acesso mais rápido a elementos de formulários. Seletor Descrição Executando :input Campos input. Elemento <input>. $(“:input”) :hidden Campos invisíveis. $(“:hidden”) :button Botões. Elemento <button /> $(“:button”) :checkbox Checkbox. Elemento <input>. $(“:checkbox”) :file Arquivo. Elemento <input>. $(“:file”) :image Campo/Imagem. Elemento <input>. $(“:image”) :password Senha. Elemento <input>. $(“:password”) :radio Radio. Elemento <input>. $(“:radio”) :reset Botão limpar. Elemento <input>. $(“:reset”) :submit Botão enviar. Elemento <input>. $(“:submit”) :text Campos input do tipo texto. $(“:text”)

9. Pseudo-Seletores p/ Atributos Utilizado, geralmente, em conjunto com outros seletores. Ex: :input[value=‘helton’]. Atributos: São usados para descrever um elemento. Ex: <input type =“text” class =“cinza” />. Os atributos da expressão são: type e class. Seletor Descrição Executando = Atributo igual. [atributo=valor] != Atributo diferente. [atributo!=valor] ^ Contenha o valor no atributo. [atributo^=valor] $= Contenha o valor no final do atributo. [atributo$=valor]

12. Atributos São usados para descrever um elemento. Ex: <input type =“text” class =“cinza” />. Os atributos da expressão são: type e class. Função Descrição Executando attr(chave) Retorna o atributo. $(“li:first”).attr(“id”) attr(chave,valor) Altera o valor do atributo. $(“li:first”).attr(“id”,”new”) removeAttr(chave) Remove atributo. $(“li:first”).removeAttr(“id”) addClass(chave) Adiciona atributo class (css). $(“div”).addClass(“dv”) removeClass(chave) Remove atributo class. $(“div”).removeClass(“dv”) toggleClass(chave) Alterna class. $(“div”).toggleClass(“dv”) html() Retorna o código html. $(“div”).html() html(valor) Altera o código html. $(“div”).html(“<b>oi</b>”) text() Retorna o conteúdo texto. $(“div”).text() text(valor) Altera o conteúdo texto. $(“div”).text(“oi”) val() Retorna o valor do elemento. $(“:input:first”).val() val(valor) Altera o valor do elemento. $(“:input:first”).val(1234)

14. Navegação Além dos seletores é possível utilizar funções de navegação. Segue a lista das principais funções de navegação. Função Descrição Executando filter(expr) Retorna os elemento que se encaixam na expressão. Personalizado. $(“li”).filter(function(i){ return i % 2 == 0; }) // múltiplo de 2 is(expr) Retorna true se o elemento contem a expressão, senão false. $(“div”).is(“form”) // false not(expr) Retorna os elemento que não se encaixam na expressão. $(“div”).not(“.green”) slice(inicio, fim) Filtra os elementos por uma faixa de índice. $(“div”).slice(12,44) parent() Retorna o pai do elemento. $(“li”).parent() // ul next() Retorna o próximo irmão. $(“li:first”).next() // outro ‘li’ find(expr) Procura elementos filhos e netos que se encaixam na expressão. $(“ul”).find(“li:not(:empty)”)

16. Manipulação Há sempre a necessidade de mover elementos e editar html. Com esta necessidade foram elaborados os métodos de manipulação do jQuery. Função Descrição Executando append(expr) Adiciona html no final do elemento. $(“div”).append(“<b>oi</b>”) appendTo(expr) Move o elemento para o final do elemento citado na expressão (expr). $(“div”).appendTo(“span”) prepend(expr) Adiciona html no inicio do elemento. $(“div”).prepend(“No inicio”) prependTo(expr) Move o elemento para o inicio do elemento citado na expressão (expr). $(“div”).prependTo(“span”) after(expr) Adiciona html após o elemento. $(“div”).after(“apos”) before(expr) Adiciona html antes do elemento. $(“div”).before(“antes”)

17. Manipulação Função Descrição Executando insertAfter(expr) Move o elemento após o elemento citado na expressão (expr). $(&quot;li:first&quot;).insertAfter(&quot;li:last&quot;) insertBefore(expr) Move o elemento antes do elemento citado na expressão (expr). $(&quot;li:eq(1)&quot;).insertBefore(&quot;li:first&quot;) empty() Limpa elemento. $(&quot;#txtNome&quot;).empty() remove() Remove elemento. $(&quot;#txtNomve&quot;).remove() clone() Clona elemento, exceto input file. var clone = $(&quot;div&quot;).clone()

19. CSS Criado a partir do html 4, o CSS é uma forma de separar os estilos do código html. Função Descrição Executando css(chave) Retorna a propriedade no CSS. $(“div”).css(“color”) css(chave,valor) Altera a propriedade no CSS. $(“div”).css(“color”,”#fff”) css(objeto) Altera, por objeto, a(s) propriedade(s) no CSS. $(“div”).css({ color : “#fff”, border : “1px solid #000” }) position() Retorna left, top do elemento. $(“div”).position().left // .top height() Retorna a altura do elemento. $(“div”).height() height(valor) Altera a altura do elemento. $(“div”).height(“100px”) width() Retorna a largura do elemento. $(“div”).width() width(valor) Altera a altura do elemento. $(“div”).width(“300px”)

22. Eventos São comportamentos que os elementos possuem em determinadas situações. Função Descrição Executando ready(fn) Ao carregar todos os elementos da tela, este evento é disparado. $(document).ready(function(){ alert(“Página carregada”); }); bind(type,data,fn) Adiciona evento. $(“div”).bind(“click”, function(){ alert(‘click ok!’); }); unbind(type) Retira evento. $(“div”).unbind(“click”) blur() Dispara evento blur. $(“:input”).blur() blur(fn) Adiciona evento blur (Ao perder foco) $(“:input”).blur(function(){ alert(‘perdeu foco’); });

23. Eventos Função Descrição Executando change() Dispara evento change. $(“textarea”).change() change(fn) Adiciona evento change (Ao alterar um elemento) $(“textarea”).change(function(){ alert(“alterado”); }); click() Dispara evento click. $(“:input”).click() click(fn) Adiciona evento click. $(“:input”).click(function(){ alert(“click ok!”); }); dblclick() Dispara evento duplo click. $(“:input”).dblclick() dblclick(fn) Adiciona evento duplo click. $(“:input”).dblclick(function(){ alert(“dblclick ok!!!”); });

26. Efeitos Os principais efeitos aplicados aos elementos são os listados a baixo, porém é possível criar seus próprios efeitos utilizando a função animate. Função Descrição Executando show() Exibe o elemento. $(“div”).show() show(“slow”) Exibe suavemente o elemento. $(“div”).show(“slow”) hide() Esconde o elemento. $(“div”).hide() hide(“slow”) Esconde suavemente o elemento. $(“div”).hide(“slow”) toggle() Exibe/Esconde o elemento. $(“div”).toggle() toggle(“slow”) Exibe/Esconde suavemente o elemento. $(“div”).toggle(“slow”) slideUp() Cortina p/ esconder o elemento. $(“div”).slideUp() slideUp(“slow”) Cortina p/ esconder suavemente o elemento. $(“div”).slideUp(“slow”) slideDown() Cortina p/ exibir o elemento. $(“div”).slideDown() slideDown(“slow”) Cortina p/ exibir suavemente o elemento. $(“div”).slideDown(“slow”)

29. AJAX Asynchronous JavaScript and XML , ou AJAX consiste em um método para se comunicar com um servidor web sem a necessidade de recorrer ao recarregamento de página. Note: O jQuery é cross-browser, todavia você não precisa se preocupar com a compatibilidade entre navegadores quando faz uma requisição AJAX. Propriedades type Tipo de requisição ( POST ou GET). url URL do serviço. data Dados a serem enviados ao serviço. Callback’s success Se a operação foi efetuada com sucesso, dispara este callback. complete Se a operação chegou ao final, dispara este callback. Error Se a operação não foi efetuada, dispara este callback.

30. AJAX $.ajax({ type: &quot;POST“, url: “meuServico.php“, data: &quot;codigo=1&nome=helton&quot;, success: function(xml){ Alert($(&quot;root > row > retorno&quot;, xml).text()); }, complete: function(){ alert(&quot;chegou ao fim&quot;); }, error: function(e){ alert(&quot;ERRO:&quot;+e); } }); XML retorno: <root> <row> <retorno>1234</retorno> </row> </root> jQuery: $(“root > row > retorno”,xml).text()

31. Duvidas? Referências http://www.abpsoft.com/criacaoweb/cssbasico.html http://docs.jquery.com/ http://www.hospedia.com.br/artigos/4/ajax/1/ajax_-_o_objeto_xmlhttprequest_-_parte_1.html http://pt.wikipedia.org/wiki/JQuery Helton Marinho Site www.ninsas.com Blog xhelton.wordpress.com