aprenda jquery 1.3
Post on 13-Jan-2015
2.587 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related