Manual jQuery

1.3

Quem?

• 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.

• Seu lema é escrever menos e fazer mais.

Funcionalidades

• Resolução da incompatibilidade entre os navegadores.

• Redução de código.• Reusabilidade do código através de plug-ins.• Utilização de uma vasta quantidade de plugins

criados por outros desenvolvedores.• Trabalha com AJAX e DOM.• Implementação segura de recursos do CSS1, CSS2

e CSS3.

Exemplo de redução de código

No Javascript nativo:document.getElementById(“minhaTabela”)

No jQuery:$(“#minhaTabela”)

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

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:

Seletores

SeletoresPseudo-seletoresPseudo-Seletores de FormuláriosPseudo-Seletores p/ AtributosSeletor Pai

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

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.

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

São formas aprimoradas de distinção para seletores.

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

Acesso mais rápido a elementos de formulários.

Pseudo-Seletores p/ Atributos

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]

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 Pai

Sintax:$(“meuSeletor”, “meuSeletorPai”)

Exemplo:Limpar os campos que não estão vazio:$(“:input:not(:empty)”, “#meuFormulario”).val(‘’)

Ao estender o jQuery, geralmente as funções possuem chamados ao parent.Exemplo para limpar todos os input de um formulário:$(“#meuForm”).limpaCampos();

jQuery.fn.extend({limpaCampos : function(){

$(":input", this).val(''); // this é o elemento #meuForm.}

});

Sintax:$(“meuSeletor”, “meuSeletorPai”)

Exemplo:Limpar os campos que não estão vazio:$(“:input:not(:empty)”, “#meuFormulario”).val(‘’)

Ao estender o jQuery, geralmente as funções possuem chamados ao parent.Exemplo para limpar todos os input de um formulário:$(“#meuForm”).limpaCampos();

jQuery.fn.extend({limpaCampos : function(){

$(":input", this).val(''); // this é o elemento #meuForm.}

});

Geralmente se usa o parent em componentes do jQuery ou funções utilitárias.

Atributos

Atributos

Atributos

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)

São usados para descrever um elemento. Ex: <input type=“text” class=“cinza” />. Os atributos da expressão são: type e class.

Navegação

Navegação

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

Além dos seletores é possível utilizar funções de navegação. Segue a lista das principais funções de navegação.

Manipulação

Manipulação

Manipulação

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

Há sempre a necessidade de mover elementos e editar html. Com esta necessidade foram elaborados os métodos de manipulação do jQuery.

Manipulação

Função Descrição Executando

insertAfter(expr) Move o elemento após o elemento citado na expressão (expr).

$("li:first").insertAfter("li:last")

insertBefore(expr) Move o elemento antes do elemento citado na expressão (expr).

$("li:eq(1)").insertBefore("li:first")

empty() Limpa elemento. $("#txtNome").empty()

remove() Remove elemento. $("#txtNomve").remove()

clone() Clona elemento, exceto input file. var clone = $("div").clone()

CSS

CSSCSS com objeto JavaScript

CSS

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

Criado a partir do html 4, o CSS é uma forma de separar os estilos do código html.

CSS com objeto JSUma 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};

Folha de estilo CSS:div {

display: block;color:#fff;background: red url(arquivo.png)

}

Aplicando no jQuery:$(“div”).css({

display : “block”,color : “#fff”,background : “red url(arquivo.png)”

});

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};

Folha de estilo CSS:div {

display: block;color:#fff;background: red url(arquivo.png)

}

Aplicando no jQuery:$(“div”).css({

display : “block”,color : “#fff”,background : “red url(arquivo.png)”

});

Eventos

EventosEvento ready

Eventos

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’);});

São comportamentos que os elementos possuem em determinadas situações.

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

Evento ready

O evento ready será o mais comum no dia a dia por ser semelhante ao window.onload e herdar suas boas características:

• O evento ready é executado após o carregamento total dos elementos.

• Melhora a organização do JavaScript.• Impossibilita chamados a elementos ainda não carregados na

tela.

Exemplo:$(document).ready(function(){ // Ao carregar a pagina executa meu conteúdo});

O evento ready será o mais comum no dia a dia por ser semelhante ao window.onload e herdar suas boas características:

• O evento ready é executado após o carregamento total dos elementos.

• Melhora a organização do JavaScript.• Impossibilita chamados a elementos ainda não carregados na

tela.

Exemplo:$(document).ready(function(){ // Ao carregar a pagina executa meu conteúdo});

Efeitos

EfeitosEfeitos – Meu próprio efeito

Efeitos

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

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.

Efeitos – Meu próprio efeito

Alterar os parâmetros CSS em 1500ms:$("#meuElemento").animate({

width: "70%“,opacity: 0.4,marginLeft: "0.6in“,fontSize: "3em“,borderWidth: "10px”

}, 1500 );

Alterar os parâmetros CSS em 1500ms:$("#meuElemento").animate({

width: "70%“,opacity: 0.4,marginLeft: "0.6in“,fontSize: "3em“,borderWidth: "10px”

}, 1500 );

AJAX

Propriedades e callback’sExemplo de 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.

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.

Note: O jQuery é cross-browser, todavia vocênão precisa se preocupar com a compatibilidade entre navegadores quando faz uma requisição AJAX.

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

XML retorno:<root>

<row><retorno>1234</retorno>

</row></root>

jQuery: $(“root > row > retorno”,xml).text()

XML retorno:<root>

<row><retorno>1234</retorno>

</row></root>

jQuery: $(“root > row > retorno”,xml).text()

Duvidas?

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

Referências

Helton Marinho

Site www.ninsas.com

Blog xhelton.wordpress.com