7/26/2019 JQuery Slides 01
1/49
jQuery
7/26/2019 JQuery Slides 01
2/49
Captulo 01
7/26/2019 JQuery Slides 01
3/49
7/26/2019 JQuery Slides 01
4/49
Introduo
Foi criada tendo como foco a simplicidade e com o objetivode facilitar a programao JavaScript. Programas queutilizariam linhas e mais linhas de cdigo para obter umdeterminado efeito ou carregar um componente AJAX, so
substitudos por poucas instrues utilizando jQuery o quepermite o uso dela por designers e desenvolvedores compouco conhecimento de JavaScript.
7/26/2019 JQuery Slides 01
5/49
Introduo
jQuery no uma nova linguagem de programao, antes,trata-se de uma compilao do JavaScript. Para utiliz-la,basta referenciar o arquivo .js do jQuery em sua pgina e voc
j pode usar esta linguagem com prazer.
Recomenda-se que todo o cdigo produzido tambm estejaem um arquivo externo; isso diminu o tamanho final de suapgina HTML e tambm assegura que o cdigo no ficarexposto, tornando as coisas mais fcies, caso voc queira
mudar um cdigo que aparea em todas as suas pginas
7/26/2019 JQuery Slides 01
6/49
Para que serve?
A jQuery pode ser utilizada para: adicionar efeitos visuais e animaes;
acessar e manipular o DOM;
carregar componentes AJAX;
prover interatividade; alterar contedos;
simplificar tarefas JavaScript.
7/26/2019 JQuery Slides 01
7/49
Compatibilidade
A jQuery foi criada para ser uma biblioteca compatvel comqualquer navegador Web. Ela resolve para o programador apenosa tarefa de desenvolver programas em JavaScript tendoque prever a enorme gama de navegadores em que sua pgina
poder rodar.Sabemos que cada navegador tem seu prprio conjunto decaractersticas de implementao, que ainda podem variar deacordo com a plataforma e sistema operacional onde estiver
rodando.Com a jQuery, a programao nica e transparente.
7/26/2019 JQuery Slides 01
8/49
Compatibilidade
A jQuery foi criada para ser uma biblioteca compatvel comqualquer navegador Web. Ela resolve para o programador apenosa tarefa de desenvolver programas em JavaScript tendoque prever a enorme gama de navegadores em que sua pgina
poder rodar.Sabemos que cada navegador tem seu prprio conjunto decaractersticas de implementao, que ainda podem variar deacordo com a plataforma e sistema operacional onde estiver
rodando.Com a jQuery, a programao nica e transparente.
7/26/2019 JQuery Slides 01
9/49
Obtendo e instalando ajQueryA query pode ser obtida gratuitamente no site http://jquery.com/. Na pgina principal, no lado direito da pgina h um botode Download (jQuery) onde podemos escolher entre duasverses:
7/26/2019 JQuery Slides 01
10/49
Obtendo e instalando ajQueryPRODUCTION : a verso voltada para ambiente de produo. uma verso com o cdigo em formato minimizado, sem quebrasde linha e com o cdigo obscurecido. Essa verso tem em tornode 15% do tamanho da verso de Desenvolvimento
(DEVELOPMENT).
DEVELOPMENT: a verso de desenvolvimento. a verso nocompactada da bibliteca e com o cdigo no obscurecido. ideal
para ambientes de desenvolvimento por se integrar facilmentes ferramentas e IDEs.
7/26/2019 JQuery Slides 01
11/49
Obtendo e instalando ajQueryBasta escolher a verso que voc deseja baixar e clicar emDownload. A biblioteca abrir em formato de cdigo JavaScriptno prprio navegador, e voc dever clicar emArquivo > Salvar eguardar a biblioteca na sua pasta de desenvolvimento.
Usualmente guardamos a biblioteca com o nome jquery-1.11.1.min.js quando for a verso compactada, ou com o nome jquery-1.11.1.js quando for a verso de desenvolvimento.
Preferencialmente, salve a jQuery em uma pasta "js" dentro dasua pasta principal de desenvolvimento, ou na raiz do seu site.
7/26/2019 JQuery Slides 01
12/49
7/26/2019 JQuery Slides 01
13/49
Um bloco $(document).ready()
$(document).ready(function() {
console.log('pronto!');
});
H um atalho para $(document).ready() que voc ver algumasvezes; entretando, eu no recomendo us-lo se voc estiverescrevendo cdigo que pessoas que no tm experincia com
jQuery poder ver.
7/26/2019 JQuery Slides 01
14/49
Atalho para $(document).ready()
$(function() {
console.log('pronto!');
});
Voc ainda pode passar uma funo nomeada para$(document).ready() ao invs de passar uma funo annima.
7/26/2019 JQuery Slides 01
15/49
Passando uma funo nomeada
ao invs de uma annima
function readyFn()
{
// cdigo para executar quando o documento estiver pronto
}$(document).ready(readyFn);
7/26/2019 JQuery Slides 01
16/49
Selecionando elementos
O conceito mais bsico do jQuery "selecionar alguns elementose fazer alguma coisa com eles." O jQuery suporta a maioria dosseletores CSS3, assim como alguns seletores no-padro. Parauma referncia completa de seletores, visite
http://api.jquery.com/category/selectors/.
A seguir, alguns exemplos de tcnicas comuns de seleo.
7/26/2019 JQuery Slides 01
17/49
Selecionando elementos por ID
$('#myId'); // lembre-se que os IDs devem ser nicos por pgina
7/26/2019 JQuery Slides 01
18/49
Selecionando elementos pelo
nome da classe
$('div.myClass'); // h um aumento de performance se voc
// especificar o tipo de elemento.
7/26/2019 JQuery Slides 01
19/49
Selecionando elementos por
atributo
$('input[name=first_name]'); // cuidado, isto pode ser muito
lento
7/26/2019 JQuery Slides 01
20/49
Selecionando elementos atravs
da composio de seletores CSS
$('#contents ul.people li');
7/26/2019 JQuery Slides 01
21/49
Pseudo-seletores
$('a.external:first');
$('tr:odd');
$('#myForm :input'); // selecione todos os elementos input num formulrio
$('div:visible');
$('div:gt(2)'); // todos exceto as trs primeiras divs$('div:animated'); // todas as divs com animao
7/26/2019 JQuery Slides 01
22/49
Pseudo-seletores
Quando voc usa os pseudos-seletores :visible e :hidden, o jQuery testa avisibilidade atual do elemento, no os atributos visibility ou display do CSS -ou seja, ele olha se a altura e a largura fsica do elemento na pgina soambas maiores que zero.
7/26/2019 JQuery Slides 01
23/49
Pseudo-seletores
No entanto, este teste no funciona com elementos ; neste caso, ojQuery faz a verificao da propriedade display do CSS, e considera umelemento como oculto se sua propriedade display for none. Elementos queno forem adicionados no DOM sero sempre considerados ocultos, mesmoque o CSS que os afetam torn-los visveis. (Consulte a seo de Manipulao
mais adiante neste captulo para aprender como criar e adicionar elementosao DOM).
7/26/2019 JQuery Slides 01
24/49
Pseudo-seletores
Para referncia, aqui est o cdigo que jQuery usa para determinar se umelemento visvel ou oculto, com os comentrios adicionados para maioresclarecimento:
7/26/2019 JQuery Slides 01
25/49
Pseudo-seletores
jQuery.expr.filters.hidden = function( elem )
{
var width = elem.offsetWidth, height = elem.
offsetHeight,
skip = elem.nodeName.toLowerCase() === "tr";
// o elemento tem 0 de altura e 0 de largura e
// no uma ?
return width === 0 && height === 0 && !skip ?
// ento deve estar escondido
true :
// mas se o elemento tiver largura e altura
// e no for uma
width > 0 && height > 0 && !skip ?
// ento deve estar visvel
false :
// se chamos aqui, o elemento tem largura
// e altura, mas tambm uma ,
// ento verifica a propriedade display para
// decidir se ele esta escondido
jQuery.curCSS(elem, "display") === "none";
};
jQuery.expr.filters.visible = function( elem )
{
return !jQuery.expr.filters.hidden( elem );
};
7/26/2019 JQuery Slides 01
26/49
Escolhendo seletores
Escolher bons seletores uma forma de melhorar a performance do seuJavaScript. Uma pequena especificidade - por exemplo, incluir um elementocomo div quando selecionar elementos pelo nome da classe - pode ir por umlongo caminho.
Geralmente, sempre que voc puder dar ao jQuery alguma dica sobre ondeele pode esperar encontrar o que voc estiver procurando, voc deve dar.
Por outro lado, muita especificidade pode no ser muito bom. Um seletorcomo #myTable thead tr th.special um desperdcio se um seletor como#myTable th.special lhe dar o que voc precisa.
7/26/2019 JQuery Slides 01
27/49
7/26/2019 JQuery Slides 01
28/49
Escolhendo seletores
Se por um lado estes seletores podem ser bem teis, eles tambm podem serextremamente lerdos - Uma vez eu escrevi um seletor baseado em atributosque travou minha pgina por mltiplos segundos.
Sempre que possvel, faa suas selees usando IDs, nomes de classe e nomesde tags.
7/26/2019 JQuery Slides 01
29/49
7/26/2019 JQuery Slides 01
30/49
Minha seleo contm algum
elemento?
Uma vez que voc fez uma seleo, voc ir querer saber se h algo paratrabalhar com ela. Voc talvez se sinta tentado a fazer algo assim:
if ($('div.foo'))
{ ...
}
7/26/2019 JQuery Slides 01
31/49
Minha seleo contm algum
elemento?
Isso no ir funcionar. Quando voc faz uma seleo usando $(), um objeto sempre retornado, e objetos sempre so tratados como true. Mesmo se suaseleo no tiver nenhum elemento, o cdigo dentro do if vai executar domesmo jeito.
Ao invs disso, voc precisa testar a propriedade length da seleo, que diz avoc quantos elementos foram selecionados.
Se a resposta for 0, a propriedade length ser interpretada como falsoquando usada como um valor booleano.
7/26/2019 JQuery Slides 01
32/49
Testando se uma seleo
contm elementos.
if ($('div.foo').length)
{
...
}
7/26/2019 JQuery Slides 01
33/49
Salvando selees
Toda vez que voc faz uma seleo, um monte de cdigo executado, e ojQuery no faz caching de selees para voc.
Se voc fez uma seleo que voc talvez precise fazer novamente, voc devesalvar a seleo numa varivel ao invs de fazer a seleo vrias vezes.
7/26/2019 JQuery Slides 01
34/49
Armazenando selees em
variveis
var $divs = $('div');
No , o nome da varivel comea com um sinal de dlar. Ao invs de outraslinguagens, no h nada especial sobre o sinal de dlar em JavaScript -- apenas outro caracter. Ns o usamos para indicar que a varavel contm umobjeto jQuery. Esta prtica -- um tipo de Notao Hngara (http://pt.wikipedia.org/wiki/Nota%C3%A7%C3%A3o_h%C3%BAngara) -- meramenteuma conveno, e no obrigatria.
7/26/2019 JQuery Slides 01
35/49
Armazenando selees em
variveis
Uma vez que voc armazenou sua seleo, voc pode chamar os mtodos dojQuery na varivel que voc armazenou, da mesma forma que voc faria naseleo original.
Uma seleo somente obtm os elementos que esto na pgina quando vocfaz a seleo. Se voc adicionar elementos na pgina depois, voc ter querepetir a seleo ou ento adicion-la seleo armazenada na varivel.Selees armazenadas no atualizam automaticamente quando o DOMmuda.
7/26/2019 JQuery Slides 01
36/49
Refinando & Filtrando
Selees
Algumas vezes voc tem uma seleo que contm mais do que voc quer;neste caso, voc talvez queira refinar sua seleo. O jQuery oferece vriosmtodos para voc obter exatamente o que precisa.
7/26/2019 JQuery Slides 01
37/49
Refinando selees
$('div.foo').has('p'); // o elemento div.foo que contm
7/26/2019 JQuery Slides 01
38/49
Seletores relacionados
formulrios
O jQuery oferece vrios pseudo-seletores que lhe ajudam a encontrarelementos nos seus formulrios; estes so especialmente teis porque podeser difcil distinguir entre elementos form baseados no seu estado ou tipousando seletores CSS padro.
7/26/2019 JQuery Slides 01
39/49
Seletores relacionados
formulrios
:button
Seleciona elementos do tipo e elementos com type="button"
:checkbox
Seleciona inputs com type="checkbox"
:checkedSeleciona inputs selecionados
:disabled
Seleciona elementos de formulrio desabilitados
:enabled
Seleciona elementos de formulrio habilitados
7/26/2019 JQuery Slides 01
40/49
Seletores relacionados
formulrios
:file
Seleciona inputs com type="file"
:image
Seleciona inputs com type="image"
:inputSeleciona , , e elementos
:password
Seleciona inputs com type="password"
7/26/2019 JQuery Slides 01
41/49
Seletores relacionados
formulrios
:radio
Seleciona inputs com type="radio"
:reset
Seleciona inputs com type="reset"
:selectedSeleciona inputs que esto selecionados
:submit
Seleciona inputs com type="submit"
:text
Seleciona inputs com type="text"
7/26/2019 JQuery Slides 01
42/49
Usando pseudo-seletores
relacionados formulrios
$('#myForm :input'); // obtm todos os elementos que aceitam entrada de
dados
7/26/2019 JQuery Slides 01
43/49
Trabalhando com selees
Uma vez que voc tem uma seleo, voc pode chamar mtodos nela.Mtodos geralmente vm em duas formas diferentes: getters e setters.Getters retornam uma propriedade do primeiro elemento selecionado;setters ajustam (setam) uma propriedade em todos os elementosselecionados
7/26/2019 JQuery Slides 01
44/49
Encadeamento
Se voc chamar um mtodo numa seleo e este mtodo retornar um objetojQuery, voc pode continuar a chamar mtodos do jQuery sem precisarpausar com um ponto-e-vrgula.
$('#content').find('h3').eq(2).html('o novo texto do terceiro h3!');
Se voc estiver escrevendo uma cadeia que inclui vrios passos, voc (e apessoa que vir depois de voc) talvez ache seu cdigo mais legvel se voc
quebrar o cdigo em vrias linhas.
7/26/2019 JQuery Slides 01
45/49
Formatando cdigo
encadeado
$('#content')
.find('h3')
.eq(2)
.html('novo texto do terceiro h3!');
Se voc mudar sua seleo no meio de uma cadeia, o jQuery prov o mtodo$.fn.end para voc voltar para sua seleo original.
7/26/2019 JQuery Slides 01
46/49
Restaurando sua seleo
original usando $.fn.end
$('#content')
.find('h3')
.eq(2)
.html('novo texto para o terceiro h3!')
.end() // restaura a seleo para todos h3 em #context
.eq(0)
.html('novo texto para o primeiro h3!');
Encadeamento um recurso extraordinariamente poderoso, e muitasbibliotecas adotaram-no desde que o jQuery o tornou popular. Entretando,
deve ser usado com cuidado. Encadeamentos extensos podem deixar ocdigo extremamente difcil de debugar ou modificar. No h uma regra quediz o quo grande uma cadeia deve ser -- mas saiba que fcil fazer baguna
7/26/2019 JQuery Slides 01
47/49
Getters & Setters
O jQuery "sobrecarrega" seus mtodos, ento o mtodo usado para setar umvalor geralmente tem o mesmo nome do mtodo usado para obter um valor.Quando um mtodo usado para setar um valor, ele chamado de setter.Quando um mtodo usado para pegar (ou ler) um valor, ele chamado degetter. Os setters afetam todos os elementos na seleo; getters obtm o
valor requisitado somente do primeiro elemento na seleo.
7/26/2019 JQuery Slides 01
48/49
O mtodo $.fn.html usado
como setter
$('h1').html('ol mundo');
7/26/2019 JQuery Slides 01
49/49
O mtodo html usado como
getter
$('h1').html();
Os setters retornam um objeto jQuery, permitindo que voc continuechamando mtodos jQuery na sua seleo; getters retornam o que eles forampedidos para retornar, o que significa que voc no pode continuarchamando mtodos jQuery no valor retornado pelo getter.
Top Related