1.
Manual jQuery 1.3

2.
Quem? <ul><li>JQuery é um framework que ajudar os desenvolvedores a se concentrarem na lógica dos sistemas web e não nos problemas de compatibilidade dos navegadores. </li></ul><ul><li>Seu lema é escrever menos e fazer mais. </li></ul>

3.
Funcionalidades <ul><li>Resolução da incompatibilidade entre os navegadores. </li></ul><ul><li>Redução de código. </li></ul><ul><li>Reusabilidade do código através de plug-ins. </li></ul><ul><li>Utilização de uma vasta quantidade de plugins criados por outros desenvolvedores. </li></ul><ul><li>Trabalha com AJAX e DOM. </li></ul><ul><li>Implementação segura de recursos do CSS1, CSS2 e CSS3. </li></ul>

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

5.
Seletores <ul><li>Seletores </li></ul><ul><li>Pseudo-seletores </li></ul><ul><li>Pseudo-Seletores de Formulários </li></ul><ul><li>Pseudo-Seletores p/ Atributos </li></ul><ul><li>Seletor Pai </li></ul>

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]

10.
Seletor Pai <ul><li>Sintax: </li></ul><ul><li>$(“meuSeletor”, “meuSeletorPai”) </li></ul><ul><li>Exemplo: </li></ul><ul><li>Limpar os campos que não estão vazio: </li></ul><ul><li>$(“:input:not(:empty)”, “#meuFormulario”).val(‘’) </li></ul><ul><li>Ao estender o jQuery, geralmente as funções possuem chamados ao parent. </li></ul><ul><li>Exemplo para limpar todos os input de um formulário: </li></ul><ul><li>$(“#meuForm”).limpaCampos(); </li></ul><ul><li>jQuery.fn.extend({ </li></ul><ul><li>limpaCampos : function(){ </li></ul><ul><li>$(&quot;:input&quot;, this).val(''); // this é o elemento #meuForm. </li></ul><ul><li>} </li></ul><ul><li>}); </li></ul>Geralmente se usa o parent em componentes do jQuery ou funções utilitárias.

11.
Atributos <ul><li>Atributos </li></ul>

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)

13.
Navegação <ul><li>Navegação </li></ul>

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)”)

15.
Manipulação <ul><li>Manipulação </li></ul>

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()

18.
CSS <ul><li>CSS </li></ul><ul><li>CSS com objeto JavaScript </li></ul>

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”)

20.
CSS com objeto JS <ul><li>Uma das formas de alterar o CSS de um elemento é utilizando objeto dentro do primeiro parâmetro da função css. Note os objetos do JavaScript utilizam {} para sua formação. Ex: var objeto = { id :1, emp : 2}; </li></ul><ul><li>Folha de estilo CSS: </li></ul><ul><li>div { </li></ul><ul><li>display: block; </li></ul><ul><li>color:#fff; </li></ul><ul><li>background: red url(arquivo.png) </li></ul><ul><li>} </li></ul><ul><li>Aplicando no jQuery: </li></ul><ul><li>$(“div”).css({ </li></ul><ul><li>display : “block”, </li></ul><ul><li>color : “#fff”, </li></ul><ul><li>background : “red url(arquivo.png)” </li></ul><ul><li>}); </li></ul>

21.
Eventos <ul><li>Eventos </li></ul><ul><li>Evento ready </li></ul>

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!!!”); });

24.
Evento ready <ul><li>O evento ready será o mais comum no dia a dia por ser semelhante ao window.onload e herdar suas boas características: </li></ul><ul><li>O evento ready é executado após o carregamento total dos elementos. </li></ul><ul><li>Melhora a organização do JavaScript. </li></ul><ul><li>Impossibilita chamados a elementos ainda não carregados na tela. </li></ul><ul><li>Exemplo: </li></ul><ul><li>$(document).ready(function(){ </li></ul><ul><li>// Ao carregar a pagina executa meu conteúdo </li></ul><ul><li>}); </li></ul>

25.
Efeitos <ul><li>Efeitos </li></ul><ul><li>Efeitos – Meu próprio efeito </li></ul>

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”)

27.
Efeitos – Meu próprio efeito <ul><li>Alterar os parâmetros CSS em 1500ms: </li></ul><ul><li>$(&quot;#meuElemento&quot;). animate ({ </li></ul><ul><li>width: &quot;70%“, </li></ul><ul><li>opacity: 0.4, </li></ul><ul><li>marginLeft: &quot;0.6in“, </li></ul><ul><li>fontSize: &quot;3em“, </li></ul><ul><li>borderWidth: &quot;10px” </li></ul><ul><li>}, 1500 ); </li></ul>

28.
AJAX <ul><li>Propriedades e callback’s </li></ul><ul><li>Exemplo de requisição </li></ul>

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