JQuery Slides 01

download JQuery Slides 01

of 49

Transcript of JQuery Slides 01

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