SlideShare uma empresa Scribd logo
 Biblioteca JavaScript OpenSource.
 Simplifica a interação entre HTML e JavaScript.
 Excelente comunidade.
 Centenas de posts diários em fóruns .
 Plugins e extensões.
 Funciona nos principais browsers.
 Possui apenas 20Kb.
Quem usa jQuery?
$(‘jQuery’)
 Possui uma sintaxe extremamente simples
  com a finalidade de encontrar elementos
  em uma página HTML e permitir que se faça
  algo com eles.
 Sua Sintaxe Básica é $(‘elemento’)
 Fluent Interfaces
jQuery Core
Selecionar Elementos por Tipo
   Todos os elementos div
   $(‘div’)

   Todas as tabelas
   $(‘table’)

   Todos os elementos div, h1 e h2
   $('h1,h2,div');

   Todos os Elementos
   $(‘*’)
Por Id ou Class
   <div id=“menu”>
     <div id=“home”> Home </div>
     <div class=“red”> Links </div>
   </div>

 $(‘#menu’) //obtem o item menu
 $(‘#home’)
 $(‘.red’) //obtem o div com class=‘red’
Por Estado
 $('div:empty'); //Sem sub-elementos
 $('input:enabled'); //Habilitados
 $('input:disabled');
 $('input:checked');
 $('option:selected');
 $(‘div:visible'); // Visíveis
 $('div:hidden'); // Invisíveis
Por Atributos
 Elementos que possuam um atributo
  checked.
 $(':checkbox[checked]');
 $("a[@name]");
 $(‘div*name=item+'); //igual a item
 $(‘*name^=item+'); //começe com item
 $('[name$=item]'); //termine com item
 $(‘*name*=item+'); //contenha item
Por Pais e Filhos
   $('p strong'); //Obtem um elemento strong que possua
    um parágrafo.

   Obtem um elemento li que esteja dentro de um
    elemento ul.
   $(‘li > ul');

   Elementos h3 com filhos (inclusive textos)
   $('h3:parent');

   Elementos li com o texto “Bluesoft”
   $('li:contains(“Bluesoft")');
Formulários
   $(‘:input’): //Todos os elementos input
   $(‘:text’): //Todos os elementos input type=“text”
   $(‘:password’)
   $(‘:radio’)
   $(‘:checkbox’)
   $(‘:file’)
   $(‘:submit’)
   $(‘:image’)
   $(‘:reset’)
   $(‘:button’): //type="button" ou <button/>
Por Índice?
<select id=“numeroFuncionarios”>
    <option>até 50</option>
    <option>até 200</option>
    <option>até 500</option>
    <option>500 ou mais</option>
</select>

   $('option:even'); //par
   $('option:odd'); //impar
   $('option:eq(0)'); //obtem o elemento de índice 0
   $('option:nth(1)'; //obtem o elemento de índice 1
   $(''option:gt(1)'); // todos com índices maiores que 1
   $(''option:lt(4)'); // todos com índices menores que 4
   $(‘'option:first'); //o primeiro
   $(‘'option:last'); //o último
   $("option").slice(1,3); //Do Índice 1 até o 3
   Observe que o índice inicia no Zero
Encontrando o Índice
   Pesquisa em todos os elementos selecionados e retorna o
    indice do elemento se encontrado, inicia em 0.
   Retorna -1 se o elemento não for encontrado.

   <div id="foobar"><b></b><span id="foo"></span></div>
   $("*").index( $('#foobar')[0]);
     Retornaria 0
   $("*").index( $('#foo')[0]);
     Retornaria 1
   $("*").index( $('#bar')[0]);
     Retornaria -1
Chaining
 $(“#el”).hide();
 $(“# el”).hide().color(”red”);
 $(“# el”).hide().color(”red”).slideDown();
Modificando Seletores
   add()
   children()
   eq()
   filter()
   find()
   gt()
   lt(),
   next()
   not()
   parent()
   parents()
   siblings()
   end()
CSS
   <p id=“xx" style="color:red“>a</p>

 css(‘’) para obter
 $("# xx ").css('color') //retorna red


 css(‘’,’’) para alterar
 $("# xx ").css('color','blue');
 $("#xx").css({'color':'cyan', 'font-size':'90'});
Offset
   Obtem o posicionamento do Elemento

 var top = $("#menu").offset().top;
 var left = $("#menu").offset().left;
Altura e Comprimento

   Obter a altura
     $(‘el’).height();
   Alterar a altura
     $(‘el’). height(20);


   Obter o comprimento
     $(‘el’). width();
   Alterar o comprimento
     $(‘el’). Width(100);
Length / Size
   Retorna o número de elementos selecionados.

   <img src="test1.jpg"/> <img src="test2.jpg"/>


   $("img").length;
     Retornaria 2


   $("img").size;
     Retornaria 2
DOM
attr
   Altera um atributo de um elemento.

   <img id=“imagem” src=“scrum.jpg”/>

   Acessar um atributo
     $(‘# imagem’).attr(‘src’)
      ○ Retornaria “scrum.jpg”
   Alterar um atributo
     $(“#imagem").attr("src",“openup.jpg");
      ○ Altera o src do elemento img.
attr
   Altera um atributo de um elemento, através de
    uma função personalizada.

   $("img").attr("title", function(index) {
     return this.src;
   });

   Antes
     <img src="test.jpg" />
   Depois
     <img src="test.jpg" title="test.jpg" />
removeAttr
   Remove um atributo de um elemento.

   $("input").removeAttr("disabled")

   Antes
     <input type=“text” name=“idade”
     disabled="disabled"/>
   Depois
     <input type=“text” name=“idade”/>
val

     <input id=“a” type=“text” value=“444”>

     Obter o valor de um elemento
       $(‘#a’).val();
        ○ Retonaria “444”


     Alterar o valor de um elemento
       $(‘#a’).val(“222”)


Não recomendado para elementos com multiplos (multi-select, multi-checkbox)
class
 addClass();
 hasClass();
 toggleClass();
 removeClass();


   $(‘div’).addClass(‘vermelho’);
html() / text()
   <div id=“story”>
     Era uma vez....
   </div>

   Retorna o conteúdo do div story
   $(‘#story’).html();

   Altera o conteúdo do div story
   $(‘#story’).html(‘Novo Conteúdo!!!!’);

   O mesmo conceito é aplicado para text() e text(‘...’).
Inserindo Dentro do Elemento
   <div id=“item”> Compras </div>

   $(#item).append(‘ OK ’)
     Compras OK


   $(# item).prepend(‘ - ’)
     - Compras


 $("p").appendTo("#foo");
 $("p").prependTo("#foo");
Inserindo Fora do Elemento
   <div id=“item”> Compras </div>

   Insere depois do elemento
   $(‘#item’).after(‘<div>fim</div>’);

   Insere antes do elemento
   $(‘#item’).before(‘<div>inicio</div>’);

   $("p").insertAfter("#foo");
   $("p").insertBefore("#foo");
Clone
   Clonar um elemento
     clone();


   Clonar um elemento incluindo eventos
     clone(true);


   $("b").clone().prependTo("p");
Empty
   Remove todos os elementos filhos (child
    nodes) de um elemento.

 $("p").empty();
 Antes
     <p>Hello, <span>Person</span> <a
     href="#">and person</a></p>
   Depois
     <p></p>
E tem mais....
   replaceWith();
remove()
   Remove todos os objetos selecionados

   $(‘remove’)
     Antes
      ○ <p>Hello</p> how are <p>you?</p>
     Depois
      ○ how are


   $("p").remove(".hello");
     Antes
      ○ <p class="hello">Hello</p> how are <p>you?</p>
     Depois
      ○ how are <p>you?</p>
wrap();

   <p>Test Paragraph.</p>
     Antes
      ○ <p>Test Paragraph.</p>
     Depois
      ○ <div class='wrap'><p>Test Paragraph.</p></div>
add(expression)
   Adiciona mais elementos a seleção atual.

   $("p").add("span“);
add(HTML)
   Adiciona mais elementos, criados “on the
    fly”, para o conjunto de elementos
    selecionados.

   $("p").add("<span>Again</span>")
add(element)
   Adiciona um ou mais elementos para o
    conjunto de elementos selecionados.

 $("p").add(document.getElementById("a"));
 $("p").add(document.forms[0].elements );
children(expr)
   Obtem o conjunto de elementos que contenha
    todos os filhos de cada elemento do conjunto de
    selecionados. Pode-se utilizar filtros.
                                 <a>x<a>
 <p>Hello</p><div><span>Hello Again</span><a>x</a></div><p>And Again</p>

   $("div").children();
     <span>Hello Again</span><a>x</a>
   $("div").children(‘a’);
     <a>x</a>
contains(str)
   Filtra o conjunto de elementos que
    contanha o texto especificado.

 <p>This is just a test.</p><p>So is this</p>
 $("p").contains("test")
     <p>This is just a test.</p>
filter(expression)
   Remove elementos que não correspondam a
    expressão.

   <p class="selected">Hello</p><p>How are you?</p>
   $("p").filter(".selected")
     <p class="selected">Hello</p>

   <p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
   $("p").filter(".selected, :first")
     <p>Hello</p>, <p class="selected">And Again</p>
filter(function)
   Permite que se escreva uma função com os
    critérios para filtragem de elementos.

   <p><ol><li>Hello</li></ol></p><p>How are you?</p>

   $("p").filter(function(index) {
     return $("ol", this).length == 0;
 })
 <p>How are you?</p>
find(expression)
   Procura por todos os elementos que
    combinem com a expressão. Esse método é
    ideal para encontrar elementos
    descendentes.

   <p><span>Hello</span>, how are you?</p>

   $("p").find("span");
     <span>Hello</span>
is(expression)
   Verifica a seleção atual contra a expressão e
    retorna true caso ao menos um elemento
    da seleção combine com a expressão.

   <form><input type="checkbox" /></form>
   $("input[@type='checkbox']").parent().is("form");
     true
next(exp) / previous(exp)
   Obtem os próximos elementos. A utilização
    do filtro é opcional.

   <p>Hello</p><p>Hello Again</p><div><span>And
    Again</span></div>

   $("p").next()
     <p>Hello Again</p>, <div><span>And
      Again</span></div>
not(el)
   Remove o elemento especificado do
    conjunto de elementos.

   <p>Hello</p><p id="selected">Hello Again</p>

   $("p").not( $("#selected")[0] );
     <p>Hello</p>
not(expression)
   Remove os elementos que combinem com
    determinada expressão.

   <p>Hello</p><p id="selected">Hello Again</p>

   $("p").not("#selected")
     <p>Hello</p>
parent();

   <div><p>Hello</p><p>Hello</p></div>

   $("p").parent()
     <div><p>Hello</p><p>Hello</p></div>

   <div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>

   $("p").parent(".selected")
     <div class="selected"><p>Hello Again</p></div>
parents(expression);
   Obtem todos os objetos pai menos o root
    (<html>). O filtro é opcional.
Obter elementos DOM
   Utiliza-se a função get();

   Obter todos os elementos IMG
     $("img").get();

    Seleciona todas os elementos IMG e retorna o primeiro
     $("img").get(0);

    Seleciona todas os elementos IMG e retorna todos menos os três
       primeiros. (Obs: gt = Greater Than = Maior que)
     $("img").gt(2).get();

    Seleciona todas os elementos IMG e retorna os dois primeiros. (Obs: lt =
       Less Than = Menor que)
     $("img").lt(2) .get();
Criar Elementos DOM
   Cria um elemento DOM “on-the-fly” através
    de uma string com tags HTML.

   $("<div><p>Olá</p></div>").appendTo("body")
     O exemplo acima cria um elemento div com um paragrafo e o insere
      dentro do elemento body.
Extendendo o jQuery
 Extende o próprio objeto jQuery.
 Pode ser usado para adicionar funções ao
  namespace do jQuery ou funções de plugin.
Adicionando Funções ao Namespace

   jQuery.extend({
     min: function(a, b) { return a < b ? a : b; },
     max: function(a, b) { return a > b ? a : b; }
   });

 $.min(10,20);
 $.min(10,20);
Adicionando Funções de Plugin
   jQuery.fn.extend({
    check: function() {
       return this.each(function() { this.checked = true; });
    },
    uncheck: function() {
       return this.each(function() { this.checked = false; });
    }
   });

   $("input[@type=checkbox]").check();
   $("input[@type=radio]").uncheck();
Eventos e Manipulação
Ready
   O código inserido dentro da função “ready” é
    executado somente quando os objetos DOM
    estiverem prontos para serem manipulados.

   Sintaxe
     $(document).ready(function(){//seu código failsafe});
     $(function(){ //seu código failsafe });
     jQuery(function($) { //seu código failsafe });
Event Handling
   Bind
   $("p").bind("click", function(e){
       alert('clicou no parágrafo!')
   });

   Unbind
   $("p").unbind("click“);

 One
 $("p").one("click", function(e){
     alert('clicou no parágrafo!')
 });
 //Só exibe o alerta a primeira vez que clicar!
Triggers
   $("button:first").click(function () {
     alert('a');
 });
 $("button:last").click(function () {
     $("button:first").trigger('click');
     alert('b');
   });

   Ao Clicar no último botão serão exibidos dois
    alerts.
Hover / Toggle
 $(“a").hover(function(),…-, function(),…-);
 Executa f1 quando ganha foco e f2 quando perde.


 $(“a").toggle(function(),…-, function(),…-);
 Alterna entre a execução f1() e f2() a cada clique.
Event Helpers
   Existem alguns facilitadores para fazer bind de
    eventos comuns...

 click(f); // $(‘p’).click(function(){...})
 Equivale a $(‘p’).bind(‘click’,... function(){...})


 $(‘p’).click();
 Executa o evento click dos elementos ‘p’.
Event Helpers
   click( )
                   mousemove( )
   dblclick( )    mouseout( )
   error( )       mouseover( )
   focus( )       mouseup( )
   keydown( )     resize( )
                   scroll( )
   keypress( )
                   select( )
   keyup( )       submit( )
   load( )        unload( )
   mousedown( )
Efeitos Especiais
Show / Hide
 Exibe um elemento
 $("p").show()
 $("p").show(‘slow’) //slow, normal, fast


 Esconde um elemento
 $("p").hide()
 $("p"). hide(‘slow’) //slow, normal, fast


 Se estiver escondido exibe senão esconde
 $("p").toggle()
Sliding / Fading
 slideIn
 slideOut
 slideToggle
 fadeIn
 fadeOut


   Você também pode criar seus próprios
    efeitos e animações.
AJAX
Load
 Carrega a página napa.jsp no elemento e
 $("#e").load(“napa.jsp ");


 Com parametrôs e evento
 $("#feeds").load(“napa.jsp",
     {limit: 25}, function(){
      ○ alert("The last 25 entries in the feed have been
         loaded");
   });
Get
   $.get(“pedido.action",
     { codigo: “1234", fornecedor: “44" -
   );

   $.get("test.cgi",
     { name: "John", time: "2pm" },
     function(data){ alert("Data Loaded:" + data); }
   );
JSON
   $.getJSON(
     "test.js",
     function(json){ alert("JSON Data: " +
         json.users[3].name); }
   );
Executando Scripts
   $.ajax({
     type: "GET",
     url: "test.js",
     dataType: "script" });


     $.getScript("test.js",
      ○ function(){ alert("Script loaded and executed."); }
     );
Enviando dados
   $.ajax({
     type: "POST",
     url: “wendola.jsp",
     data: "name=John&location=Boston", success:
      function(msg){
      ○ alert( "Data Saved: " + msg ); }
     });
Última Versão
   $.ajax({
       url: "test.html",
       cache: false,
       timeout: 20,
       Data: ,devedor:’bolha’, pagador:’wendola’-,
       type: ‘POST’,
       username: ‘juniao’
       password: ‘cocazero’,
       error: function(){alert(‘error’)-,
       success: function(html){
        ○ $("#results").append(html); }
     });
Sincronicidade
   var html = $.ajax({
      ○ url: "some.php",
      ○ async: false }
     ).responseText;
Serialização
    function showValues() {
       var str = $("form").serialize();
       $("#results").text(str);
     }

   single=Single&multiple=Multiple&multiple=Mu
    ltiple3&check=check2&radio=radio1
Utilidades
Each
   var arr = [ "one", "two", "three", "four", "five" ];
   var obj = { one:1, two:2, three:3, four:4, five:5 };

   jQuery.each(arr, function() {
       $("#" + this).text("My id is " + this + ".");
       return (this != "four"); // will stop running to skip "five“
   });

   jQuery.each(obj, function(i, val) {
       $("#" + i).append(document.createTextNode(" - " + val));
   });

   Percorre um objeto ou array executando a função para cada
    elemento encontrado.
Grep
     var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
     $("div").text(arr.join(", "));

     arr = jQuery.grep(arr, function(n, i){
      return (n != 5 && i > 4);
     });
     $("p").text(arr.join(", "));

     arr = jQuery.grep(arr, function (a) { return a != 9; });
     $("span").text(arr.join(", "));

   //Age como um filtro de elementos
Mais
   Retira espaços em branco
   jQuery.trim( str )

   Verifica se o objeto é uma função
   jQuery.isFunction( obj )

   Remove elementos duplicados
   jQuery.unique( array )

   Une dois arrays sem repetir os elementos.
   jQuery.merge(array, array)
Browser


   if($.browser.safari || $.browser.msie) {
     $( function() {
      ○ alert("this is safari!");
     } );
   }
jQuery User Interface
jQuery UI
   Drag and dropping
   Sorting
   Selecting
   Resizing
   Accordions
   Date pickers
   Dialogs
   Sliders
   Tabs.
jQuery UI Tabs
tabs()
   <div id="example" class="flora">
          <ul>
            <li><a href="#fragment-1"><span>One</span></a></li>
            <li><a href="#fragment-2"><span>Two</span></a></li>
            <li><a href="#fragment-3"><span>Three</span></a></li>
          </ul>
          <div id="fragment-1">conteúdo da aba 1</div>
          <div id="fragment-2">conteúdo da aba 2</div>
          <div id="fragment-3">conteúdo da aba 3</div>
   </div>

   $("#example > ul").tabs();
jQuery Tabs - Eventos
 tabsselect – dispara ao selecionar uma aba
 tabsload – dispara ao carregar uma aba
 tabsshow – dispara ao exibir uma aba
 tabsadd – dispara ao adicionar uma aba
 tabsremove – dispara ao remover uma aba
 tabsenable – dispara ao habilitar uma aba.
 tabsdisable – dispara ao desabilitar uma aba.
jQuery Validator
Validação
   Evitar que o usuário mude de aba caso a
    aba atual não passe na validação.

   $('#example').tabs({
       select: function(ui) {
         var isValid = ... // form validation returning true or false
         return isValid;
       }
   });
Métodos
   tabs( options )        ]
      Cria uma novo componente jQuery UI Tabs
   tabs( "add", url, label, index )
      Adiciona uma nova aba
   tabs( "remove", index )
      Remove uma aba
   tabs( "enable", index ) / tabs( "disable", index )
      Habilita / Desabilita uma aba
   tabs( "select", index )
      Seleciona uma aba
   tabs( "load", index )
      Carrega uma aba com ajax
   tabs( "url", index, url )
      Carrega uma url em uma aba com ajax
   tabs( "destroy" )
      Destroi o componente
   tabs( "length" )
      Retorna o número de abas
   tabs( "rotate", ms, continuing )
      Realiza um rodízio automático entre as abas
jQuery Form Plugin
   O jQuery Form Plugin permite que você
    facilmente transforme formulários HTML
    comuns em formulários AJAX.
jQuery Form Plugin
   <form id="myForm" action="comment.php" method="post">
      Name: <input type="text" name="name" />
      Comment: <textarea name="comment"></textarea>
      <input type="submit" value="Submit Comment" />
    </form>

   $('#myForm').ajaxForm(function() {
        alert("Thank you for your comment!");
    });
Opções
   $(document).ready(function() {
      var options = {
        target:    '#output1', // target element(s) to be updated with server response
        beforeSubmit: showRequest, // pre-submit callback (return false = abort)
        success:     showResponse // post-submit callback

           url:   url     // override for form's 'action' attribute
           type: type        // 'get' or 'post', override for form's 'method' attribute
           dataType: null      // 'xml', 'script', or 'json' (expected server response type)
           clearForm: true      // clear all form fields after successful submit
           resetForm: true       // reset the form after successful submit
           // the $.ajax options can be used here too, for example:
           //timeout: 3000
      };
       // bind form using 'ajaxForm'
       $('#myForm1').ajaxForm(options);
    });
jQuery Validator
 Simplicidade
 Maturidade (Julho 2006)
 Padronização
 Mensagens de Erro




   http://docs.jquery.com/Plugins/Validation
Seletores Especiais


    :blank         :filled      :unchecked

• Traz todos   • Traz todos    • Traz todos
  os             os              os
  elementos      elementos       elementos
  em branco      preenchidos     não
                                 ‘checados’
Formatador de Mensagens
   Semelhante ao Message.format() do Java!

 1. Cria-se um template.
 2. Cria-se um formatador.
 3. Aplica-se o formatador.

 var template = “,0-, ,1-, esta é sua ,2- visita. Grande ,1-!! ”;
 var formatter = jQuery.format(msg);
 var msg = template(‘Bom Dia’, ‘Sr. Ricardex’, ‘quinta’);


   O valor da variável msg seria:
     Bom Dia, Sr. Ricardex, esta é sua quinta visita. Grande Sr. Ricardex!!
Métodos de Validação
   form();
     Valida um formulário, retorna true se for válido,
      caso contrário false.


    $("#meuFormulario").validate().form()
Métodos de Validação
   element(x);
     Valida um único elemento, retorna true se for válido
      caso contrário false.

     $("#meuFormulario").validate().element("#idade");
Métodos de Validação
   resetForm();
     Redefine os campos com seus valores originais,
     remove as classes CSS que indicam elementos
     inválidos e esconde mensagens de erro.


   var validator = $("#meuForm").validate();
    validator.resetForm();
Métodos de Validação
   showErrors
     Adiciona e exibe uma mensagem de erro
     programaticamente.


   var validator = $("#myform").validate();
    validator.showErrors(,“primeiroNome": “Eu
    sei que o seu primeiro nome é Bob, Bob!"});
Métodos de Validação
   addMethod()
     Adiciona um novo tipo de validação.


   Ex: Validator que verifica se uma url é de um
    domínio.
     jQuery.validator.addMethod("domain",
     function(value) {
      ○ return this.optional(element) ||
        /^http://bluesoft.com.br/.test(value); -, “Por favor,
        Especifique o domínio correto");
Métodode de Validação
   addClassRules(name, rules) / addClassRules(rules)
     Associa regras de validação a uma Classe CSS.

   jQuery.validator.addClassRules({
     cep: {
      ○ required: true,
      ○ minlength: 8,
      ○ maxlength: 8
     }
   });

   <input type=‘text’ name=‘cep’ class=‘cep’/>
required()
   $("#formulario").validate(
     { rules: { nomeDoCampo: "required" }
   });

   CSS
     label.error {
      ○ background: url(‘unchecked.gif') no-repeat; padding-left: 16px;
        margin-left: .3em; }
     label.valid {
      ○ background: url(‘checked.gif') no-repeat; display: block; width:
        16px; height: 16px; }
required( dependency-expression )
   $("#formulario").validate({
     rules: {
      ○ campoTexto: {
                                                 Se o ‘CheckBox’ for
           required: "#campoCheckBox:checked“   selecionado o campo
                                                 de texto torna-se
      ○}                                         obrigatório
    }                                           (required).

 });
 $("#campoCheckBox").click(function() {
     $("#campoTexto").valid();
   });
required( dependency-callback )
   Torna o elemento ‘required’, dependendo do resultado da
    chamada de um ‘callback’.

   $("#formulario").validate({
     rules: {
          ○ idade: { required: true, min: 3 },
          ○ pai: {
              required: function(element) {
                - return $("#idade").val() < 13;
              }
          ○ }                                      Se a idade (age) for menor
     }                                            que 13 o preenchimento
                                                   do campo pai (parent)
   });                                            torna-se obrigatório!
   $("#idade").blur(function() {
     $("#pai").valid();
   });
remote(url)
   Realiza um ‘request’ em uma ‘URL’ para
    verificar se um elemento é válido.

   Ex: Verifica se o nome de usuário já existe.
   $("#fomulario").validate({
     rules: {
      ○ usuario: {
             required: true,
             remote: “verificaUsuario.jsp“
          ○ }
     }
   });
minlength(x) / maxlength(x)
   $("#formulario").validate({
     rules: {
      ○ field: {
           required: true,
           minlength: 3,
           maxlength: 4,
           // rangelength: [3, 4]
      ○}
    }
   });
min() / max()
   $("#formulario").validate({
     rules: {
      ○ field: {
           required: true,
           min: 13,
           max: 23,
           // range: [13, 23]
      ○}
    }
   });
Números
   min:4
     Verifica se o número é maior que 4
   max: 100
     Verifica se o número é menor que 100
   range: [10,20]
     Verifica se o número está entre 10 e 20.
   number:true
     Valida números no padrão americano (100.00)
   numberDE:true
     Valida números no padrão alemão (100,00)
   creditcard:true
     Valida números de cartão de crédito
   digits:true
     Permite apenas números inteiros
Datas
   date: true
     Valida Datas
   dateISO: true
     Valida datas no padrão ISO
   dataDE: true
     Valida datas no Padrão Alemão (1.1.2008)
equalsTo
   Verifica se o valor de campo é igual ao valor de outro.

   $("#myform").validate({
     rules: {
      ○ password: "required",
      ○ passwordConfirmation: {
             equalTo: "#password“
          ○ }
     }
   });
Mais validadores
   email: true
     Valida endereços de e-mail.
   url: true
     Valida URL’s
   accept: "xls|csv“
     Permite apenas Strings que terminem com .xls
      ou .cvs, usado para valiadar extensões de
      arquivos.
Dúvidas
Referências Bibliográficas

   http://docs.jquery.com/Main_Page
   http://dev.jquery.com/view/trunk/tools/api-browser/
   http://docs.jquery.com/UI/Tabs
   http://blogs.pathf.com/agileajax/2008/03/jquery-form-and.html
   http://docs.jquery.com/Plugins/Validation
   http://www.malsup.com/jquery/form/
   http://simplesideias.com.br
André Faria
andrefaria@bluesoft.com.br

Mais conteúdo relacionado

Mais procurados

Estrutura de dados - Aula de Revisão (Linguagem C/C++, Função, Vetor, Matriz,...
Estrutura de dados - Aula de Revisão (Linguagem C/C++, Função, Vetor, Matriz,...Estrutura de dados - Aula de Revisão (Linguagem C/C++, Função, Vetor, Matriz,...
Estrutura de dados - Aula de Revisão (Linguagem C/C++, Função, Vetor, Matriz,...
Leinylson Fontinele
 
Aula 09 - introducao oo
Aula 09 - introducao ooAula 09 - introducao oo
Aula 09 - introducao oo
Moacir Jóse Ferreira Junior Ferreira
 
Banco de Dados I - Aula 05 - Banco de Dados Relacional (Modelo Conceitual)
Banco de Dados I - Aula 05 - Banco de Dados Relacional (Modelo Conceitual)Banco de Dados I - Aula 05 - Banco de Dados Relacional (Modelo Conceitual)
Banco de Dados I - Aula 05 - Banco de Dados Relacional (Modelo Conceitual)
Leinylson Fontinele
 
POO - Unidade 2 (parte 1) - Diagrama de Classe - Associação (versão 2)
POO   - Unidade 2 (parte 1) - Diagrama de Classe - Associação (versão 2)POO   - Unidade 2 (parte 1) - Diagrama de Classe - Associação (versão 2)
POO - Unidade 2 (parte 1) - Diagrama de Classe - Associação (versão 2)
Marcello Thiry
 
Árvores: Conceitos e binárias
Árvores:  Conceitos e bináriasÁrvores:  Conceitos e binárias
Árvores: Conceitos e bináriasSérgio Souza Costa
 
Começando com Vue.js
Começando com Vue.jsComeçando com Vue.js
Começando com Vue.js
marcusbalbi
 
Java orientação a objetos (associacao, composicao, agregacao)
Java   orientação a objetos (associacao, composicao, agregacao)Java   orientação a objetos (associacao, composicao, agregacao)
Java orientação a objetos (associacao, composicao, agregacao)Armando Daniel
 
A utilização do Bootstrap Para a Otimização de Páginas
A utilização do Bootstrap Para a Otimização de PáginasA utilização do Bootstrap Para a Otimização de Páginas
A utilização do Bootstrap Para a Otimização de Páginas
Ramon Sousa
 
Gráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVGGráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVG
Helder da Rocha
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Rodrigo Bueno Santa Maria, BS, MBA
 
Python - Programação funcional
Python - Programação funcionalPython - Programação funcional
Python - Programação funcional
fabiocerqueira
 
Estrutura de dados
Estrutura de dadosEstrutura de dados
Estrutura de dados
Daniel Fernandes Costa
 
Aula 2 - Comandos DDL DML DQL E DCL
Aula 2 - Comandos DDL DML DQL E DCLAula 2 - Comandos DDL DML DQL E DCL
Aula 2 - Comandos DDL DML DQL E DCL
César Augusto Pessôa
 
Programação Orientada a Objetos
Programação Orientada a ObjetosProgramação Orientada a Objetos
Programação Orientada a Objetos
Igor Takenami
 

Mais procurados (20)

Estrutura de dados - Aula de Revisão (Linguagem C/C++, Função, Vetor, Matriz,...
Estrutura de dados - Aula de Revisão (Linguagem C/C++, Função, Vetor, Matriz,...Estrutura de dados - Aula de Revisão (Linguagem C/C++, Função, Vetor, Matriz,...
Estrutura de dados - Aula de Revisão (Linguagem C/C++, Função, Vetor, Matriz,...
 
Google apps script - Parte 2
Google apps script - Parte 2Google apps script - Parte 2
Google apps script - Parte 2
 
Aula 09 - introducao oo
Aula 09 - introducao ooAula 09 - introducao oo
Aula 09 - introducao oo
 
Banco de Dados I - Aula 05 - Banco de Dados Relacional (Modelo Conceitual)
Banco de Dados I - Aula 05 - Banco de Dados Relacional (Modelo Conceitual)Banco de Dados I - Aula 05 - Banco de Dados Relacional (Modelo Conceitual)
Banco de Dados I - Aula 05 - Banco de Dados Relacional (Modelo Conceitual)
 
POO - Unidade 2 (parte 1) - Diagrama de Classe - Associação (versão 2)
POO   - Unidade 2 (parte 1) - Diagrama de Classe - Associação (versão 2)POO   - Unidade 2 (parte 1) - Diagrama de Classe - Associação (versão 2)
POO - Unidade 2 (parte 1) - Diagrama de Classe - Associação (versão 2)
 
Formulário HTML
Formulário HTMLFormulário HTML
Formulário HTML
 
Árvores: Conceitos e binárias
Árvores:  Conceitos e bináriasÁrvores:  Conceitos e binárias
Árvores: Conceitos e binárias
 
Estrutura de Dados em Java (Introdução)
Estrutura de Dados em Java (Introdução)Estrutura de Dados em Java (Introdução)
Estrutura de Dados em Java (Introdução)
 
Começando com Vue.js
Começando com Vue.jsComeçando com Vue.js
Começando com Vue.js
 
Java orientação a objetos (associacao, composicao, agregacao)
Java   orientação a objetos (associacao, composicao, agregacao)Java   orientação a objetos (associacao, composicao, agregacao)
Java orientação a objetos (associacao, composicao, agregacao)
 
A utilização do Bootstrap Para a Otimização de Páginas
A utilização do Bootstrap Para a Otimização de PáginasA utilização do Bootstrap Para a Otimização de Páginas
A utilização do Bootstrap Para a Otimização de Páginas
 
Gráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVGGráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVG
 
Aula - Metodologias Ágeis
Aula - Metodologias ÁgeisAula - Metodologias Ágeis
Aula - Metodologias Ágeis
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
 
Python - Programação funcional
Python - Programação funcionalPython - Programação funcional
Python - Programação funcional
 
Estrutura de dados
Estrutura de dadosEstrutura de dados
Estrutura de dados
 
POO - 03 - Alocação de Memória em Java
POO - 03 - Alocação de Memória em JavaPOO - 03 - Alocação de Memória em Java
POO - 03 - Alocação de Memória em Java
 
Aula 2 - Comandos DDL DML DQL E DCL
Aula 2 - Comandos DDL DML DQL E DCLAula 2 - Comandos DDL DML DQL E DCL
Aula 2 - Comandos DDL DML DQL E DCL
 
Programação Orientada a Objetos
Programação Orientada a ObjetosProgramação Orientada a Objetos
Programação Orientada a Objetos
 
Estrutura de dados em Java - Pilhas
Estrutura de dados em Java - PilhasEstrutura de dados em Java - Pilhas
Estrutura de dados em Java - Pilhas
 

Semelhante a Introdução à JQuery

Aprenda jQuery 1.3
Aprenda jQuery 1.3Aprenda jQuery 1.3
Aprenda jQuery 1.3
Helton Marinho
 
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScriptjQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
Everaldo Wanderlei Uavniczak
 
jQuery - Visão Geral
jQuery - Visão GeraljQuery - Visão Geral
jQuery - Visão Geral
Kaio Valente
 
jQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê FajolijQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê Fajoli
Caue Fajoli
 
J query javascript para seres humanos
J query   javascript para seres humanosJ query   javascript para seres humanos
J query javascript para seres humanosnobios
 
JQuery - JS 101
JQuery - JS 101JQuery - JS 101
JQuery - JS 101TheCoreh
 
Jquery a technical overview
Jquery a technical overviewJquery a technical overview
Jquery a technical overview
Alexandre Marreiros
 
Simplificando o Javascrip
Simplificando o JavascripSimplificando o Javascrip
Simplificando o Javascrip
Miquéias Amaro
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdf
GabrielaMota46
 
JQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBJQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEB
Luciano Borges
 
Javascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQueryJavascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQuery
Wesley Lemos
 
Menu dinâmico com kendoUI
Menu dinâmico com kendoUIMenu dinâmico com kendoUI
Menu dinâmico com kendoUI
Douglas Lira
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
Victor Adriel Oliveira
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
Victor Adriel Oliveira
 
JQuery
JQuery JQuery
Java script aula 09 - JQuery
Java script   aula 09 - JQueryJava script   aula 09 - JQuery
Java script aula 09 - JQuery
Cristiano Pires Martins
 
Escrevendo plugins JQuery
Escrevendo plugins JQueryEscrevendo plugins JQuery
Escrevendo plugins JQuery
Zigotto Tecnologia
 
MiniCurso Jquery - IV SimSis
MiniCurso Jquery - IV SimSisMiniCurso Jquery - IV SimSis
MiniCurso Jquery - IV SimSis
Thiago Miranda
 

Semelhante a Introdução à JQuery (20)

Minicurso de jQuery
Minicurso de jQueryMinicurso de jQuery
Minicurso de jQuery
 
Aprenda jQuery 1.3
Aprenda jQuery 1.3Aprenda jQuery 1.3
Aprenda jQuery 1.3
 
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScriptjQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
 
jQuery - Visão Geral
jQuery - Visão GeraljQuery - Visão Geral
jQuery - Visão Geral
 
jQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê FajolijQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê Fajoli
 
J query javascript para seres humanos
J query   javascript para seres humanosJ query   javascript para seres humanos
J query javascript para seres humanos
 
JQuery - JS 101
JQuery - JS 101JQuery - JS 101
JQuery - JS 101
 
Jquery a technical overview
Jquery a technical overviewJquery a technical overview
Jquery a technical overview
 
Simplificando o Javascrip
Simplificando o JavascripSimplificando o Javascrip
Simplificando o Javascrip
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdf
 
JQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBJQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEB
 
Javascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQueryJavascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQuery
 
Introdução ao JQuery e AJAX
Introdução ao JQuery e AJAXIntrodução ao JQuery e AJAX
Introdução ao JQuery e AJAX
 
Menu dinâmico com kendoUI
Menu dinâmico com kendoUIMenu dinâmico com kendoUI
Menu dinâmico com kendoUI
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
 
JQuery
JQuery JQuery
JQuery
 
Java script aula 09 - JQuery
Java script   aula 09 - JQueryJava script   aula 09 - JQuery
Java script aula 09 - JQuery
 
Escrevendo plugins JQuery
Escrevendo plugins JQueryEscrevendo plugins JQuery
Escrevendo plugins JQuery
 
MiniCurso Jquery - IV SimSis
MiniCurso Jquery - IV SimSisMiniCurso Jquery - IV SimSis
MiniCurso Jquery - IV SimSis
 

Mais de André Faria Gomes

Meetup Escale - Gestão para Equipes de Alta Performance
Meetup Escale - Gestão para Equipes de Alta PerformanceMeetup Escale - Gestão para Equipes de Alta Performance
Meetup Escale - Gestão para Equipes de Alta Performance
André Faria Gomes
 
Protagonistas da inovação - Como criar e gerir os negócios do futuro
Protagonistas da inovação - Como criar e gerir os negócios do futuroProtagonistas da inovação - Como criar e gerir os negócios do futuro
Protagonistas da inovação - Como criar e gerir os negócios do futuro
André Faria Gomes
 
A Mobilidade como Propulsor da Transformação Digital
A Mobilidade como Propulsor da Transformação DigitalA Mobilidade como Propulsor da Transformação Digital
A Mobilidade como Propulsor da Transformação Digital
André Faria Gomes
 
Além da Agilidade 2019 - KickOff Wow
Além da Agilidade 2019 - KickOff WowAlém da Agilidade 2019 - KickOff Wow
Além da Agilidade 2019 - KickOff Wow
André Faria Gomes
 
Modern systems architectures: Uber, Lyft, Cabify
Modern systems architectures: Uber, Lyft, CabifyModern systems architectures: Uber, Lyft, Cabify
Modern systems architectures: Uber, Lyft, Cabify
André Faria Gomes
 
Breaking the monolith
Breaking the monolithBreaking the monolith
Breaking the monolith
André Faria Gomes
 
Agilidade - APAS
Agilidade - APASAgilidade - APAS
Agilidade - APAS
André Faria Gomes
 
Principles and Radical Transparency - Lessons Learned from Ray Dalio
Principles and Radical Transparency - Lessons Learned from Ray DalioPrinciples and Radical Transparency - Lessons Learned from Ray Dalio
Principles and Radical Transparency - Lessons Learned from Ray Dalio
André Faria Gomes
 
Bluesoft @ AWS re:Invent 2017 + AWS 101
Bluesoft @ AWS re:Invent 2017 + AWS 101Bluesoft @ AWS re:Invent 2017 + AWS 101
Bluesoft @ AWS re:Invent 2017 + AWS 101
André Faria Gomes
 
Boas Práticas da Rede Supermercadista Wegmans
Boas Práticas da Rede Supermercadista WegmansBoas Práticas da Rede Supermercadista Wegmans
Boas Práticas da Rede Supermercadista Wegmans
André Faria Gomes
 
Boas Práticas para Supermercadistas inspiradas no Whole Foods, Sprouts Marke...
Boas Práticas para Supermercadistas inspiradas no Whole Foods, Sprouts Marke...Boas Práticas para Supermercadistas inspiradas no Whole Foods, Sprouts Marke...
Boas Práticas para Supermercadistas inspiradas no Whole Foods, Sprouts Marke...
André Faria Gomes
 
Change management - Kotter’s eight-step model
Change management - Kotter’s eight-step model Change management - Kotter’s eight-step model
Change management - Kotter’s eight-step model
André Faria Gomes
 
Palestra na Uninove sobre Agilidade
Palestra na Uninove sobre AgilidadePalestra na Uninove sobre Agilidade
Palestra na Uninove sobre Agilidade
André Faria Gomes
 
Pensando Rápido e Devagar
Pensando Rápido e DevagarPensando Rápido e Devagar
Pensando Rápido e Devagar
André Faria Gomes
 
What happened to Google Reader?
What happened to Google Reader?What happened to Google Reader?
What happened to Google Reader?
André Faria Gomes
 
Gestão Ágil com Management 3.0
Gestão Ágil com Management 3.0Gestão Ágil com Management 3.0
Gestão Ágil com Management 3.0
André Faria Gomes
 
Lições aprendidas em 10 anos de agilidade
Lições aprendidas em 10 anos de agilidadeLições aprendidas em 10 anos de agilidade
Lições aprendidas em 10 anos de agilidade
André Faria Gomes
 
Os 7 hábitos das pessoas altamente eficazes
Os 7 hábitos das pessoas altamente eficazesOs 7 hábitos das pessoas altamente eficazes
Os 7 hábitos das pessoas altamente eficazes
André Faria Gomes
 
Objetividade: A Virtude Esquecida
Objetividade: A Virtude EsquecidaObjetividade: A Virtude Esquecida
Objetividade: A Virtude Esquecida
André Faria Gomes
 
Bematech IFRS
Bematech IFRSBematech IFRS
Bematech IFRS
André Faria Gomes
 

Mais de André Faria Gomes (20)

Meetup Escale - Gestão para Equipes de Alta Performance
Meetup Escale - Gestão para Equipes de Alta PerformanceMeetup Escale - Gestão para Equipes de Alta Performance
Meetup Escale - Gestão para Equipes de Alta Performance
 
Protagonistas da inovação - Como criar e gerir os negócios do futuro
Protagonistas da inovação - Como criar e gerir os negócios do futuroProtagonistas da inovação - Como criar e gerir os negócios do futuro
Protagonistas da inovação - Como criar e gerir os negócios do futuro
 
A Mobilidade como Propulsor da Transformação Digital
A Mobilidade como Propulsor da Transformação DigitalA Mobilidade como Propulsor da Transformação Digital
A Mobilidade como Propulsor da Transformação Digital
 
Além da Agilidade 2019 - KickOff Wow
Além da Agilidade 2019 - KickOff WowAlém da Agilidade 2019 - KickOff Wow
Além da Agilidade 2019 - KickOff Wow
 
Modern systems architectures: Uber, Lyft, Cabify
Modern systems architectures: Uber, Lyft, CabifyModern systems architectures: Uber, Lyft, Cabify
Modern systems architectures: Uber, Lyft, Cabify
 
Breaking the monolith
Breaking the monolithBreaking the monolith
Breaking the monolith
 
Agilidade - APAS
Agilidade - APASAgilidade - APAS
Agilidade - APAS
 
Principles and Radical Transparency - Lessons Learned from Ray Dalio
Principles and Radical Transparency - Lessons Learned from Ray DalioPrinciples and Radical Transparency - Lessons Learned from Ray Dalio
Principles and Radical Transparency - Lessons Learned from Ray Dalio
 
Bluesoft @ AWS re:Invent 2017 + AWS 101
Bluesoft @ AWS re:Invent 2017 + AWS 101Bluesoft @ AWS re:Invent 2017 + AWS 101
Bluesoft @ AWS re:Invent 2017 + AWS 101
 
Boas Práticas da Rede Supermercadista Wegmans
Boas Práticas da Rede Supermercadista WegmansBoas Práticas da Rede Supermercadista Wegmans
Boas Práticas da Rede Supermercadista Wegmans
 
Boas Práticas para Supermercadistas inspiradas no Whole Foods, Sprouts Marke...
Boas Práticas para Supermercadistas inspiradas no Whole Foods, Sprouts Marke...Boas Práticas para Supermercadistas inspiradas no Whole Foods, Sprouts Marke...
Boas Práticas para Supermercadistas inspiradas no Whole Foods, Sprouts Marke...
 
Change management - Kotter’s eight-step model
Change management - Kotter’s eight-step model Change management - Kotter’s eight-step model
Change management - Kotter’s eight-step model
 
Palestra na Uninove sobre Agilidade
Palestra na Uninove sobre AgilidadePalestra na Uninove sobre Agilidade
Palestra na Uninove sobre Agilidade
 
Pensando Rápido e Devagar
Pensando Rápido e DevagarPensando Rápido e Devagar
Pensando Rápido e Devagar
 
What happened to Google Reader?
What happened to Google Reader?What happened to Google Reader?
What happened to Google Reader?
 
Gestão Ágil com Management 3.0
Gestão Ágil com Management 3.0Gestão Ágil com Management 3.0
Gestão Ágil com Management 3.0
 
Lições aprendidas em 10 anos de agilidade
Lições aprendidas em 10 anos de agilidadeLições aprendidas em 10 anos de agilidade
Lições aprendidas em 10 anos de agilidade
 
Os 7 hábitos das pessoas altamente eficazes
Os 7 hábitos das pessoas altamente eficazesOs 7 hábitos das pessoas altamente eficazes
Os 7 hábitos das pessoas altamente eficazes
 
Objetividade: A Virtude Esquecida
Objetividade: A Virtude EsquecidaObjetividade: A Virtude Esquecida
Objetividade: A Virtude Esquecida
 
Bematech IFRS
Bematech IFRSBematech IFRS
Bematech IFRS
 

Introdução à JQuery

  • 1.
  • 2.  Biblioteca JavaScript OpenSource.  Simplifica a interação entre HTML e JavaScript.  Excelente comunidade.  Centenas de posts diários em fóruns .  Plugins e extensões.  Funciona nos principais browsers.  Possui apenas 20Kb.
  • 4. $(‘jQuery’)  Possui uma sintaxe extremamente simples com a finalidade de encontrar elementos em uma página HTML e permitir que se faça algo com eles.  Sua Sintaxe Básica é $(‘elemento’)  Fluent Interfaces
  • 6. Selecionar Elementos por Tipo  Todos os elementos div  $(‘div’)  Todas as tabelas  $(‘table’)  Todos os elementos div, h1 e h2  $('h1,h2,div');  Todos os Elementos  $(‘*’)
  • 7. Por Id ou Class  <div id=“menu”>  <div id=“home”> Home </div>  <div class=“red”> Links </div>  </div>  $(‘#menu’) //obtem o item menu  $(‘#home’)  $(‘.red’) //obtem o div com class=‘red’
  • 8. Por Estado  $('div:empty'); //Sem sub-elementos  $('input:enabled'); //Habilitados  $('input:disabled');  $('input:checked');  $('option:selected');  $(‘div:visible'); // Visíveis  $('div:hidden'); // Invisíveis
  • 9. Por Atributos  Elementos que possuam um atributo checked.  $(':checkbox[checked]');  $("a[@name]");  $(‘div*name=item+'); //igual a item  $(‘*name^=item+'); //começe com item  $('[name$=item]'); //termine com item  $(‘*name*=item+'); //contenha item
  • 10. Por Pais e Filhos  $('p strong'); //Obtem um elemento strong que possua um parágrafo.  Obtem um elemento li que esteja dentro de um elemento ul.  $(‘li > ul');  Elementos h3 com filhos (inclusive textos)  $('h3:parent');  Elementos li com o texto “Bluesoft”  $('li:contains(“Bluesoft")');
  • 11. Formulários  $(‘:input’): //Todos os elementos input  $(‘:text’): //Todos os elementos input type=“text”  $(‘:password’)  $(‘:radio’)  $(‘:checkbox’)  $(‘:file’)  $(‘:submit’)  $(‘:image’)  $(‘:reset’)  $(‘:button’): //type="button" ou <button/>
  • 12. Por Índice? <select id=“numeroFuncionarios”> <option>até 50</option> <option>até 200</option> <option>até 500</option> <option>500 ou mais</option> </select>  $('option:even'); //par  $('option:odd'); //impar  $('option:eq(0)'); //obtem o elemento de índice 0  $('option:nth(1)'; //obtem o elemento de índice 1  $(''option:gt(1)'); // todos com índices maiores que 1  $(''option:lt(4)'); // todos com índices menores que 4  $(‘'option:first'); //o primeiro  $(‘'option:last'); //o último  $("option").slice(1,3); //Do Índice 1 até o 3  Observe que o índice inicia no Zero
  • 13. Encontrando o Índice  Pesquisa em todos os elementos selecionados e retorna o indice do elemento se encontrado, inicia em 0.  Retorna -1 se o elemento não for encontrado.  <div id="foobar"><b></b><span id="foo"></span></div>  $("*").index( $('#foobar')[0]);  Retornaria 0  $("*").index( $('#foo')[0]);  Retornaria 1  $("*").index( $('#bar')[0]);  Retornaria -1
  • 14. Chaining  $(“#el”).hide();  $(“# el”).hide().color(”red”);  $(“# el”).hide().color(”red”).slideDown();
  • 15. Modificando Seletores  add()  children()  eq()  filter()  find()  gt()  lt(),  next()  not()  parent()  parents()  siblings()  end()
  • 16. CSS  <p id=“xx" style="color:red“>a</p>  css(‘’) para obter  $("# xx ").css('color') //retorna red  css(‘’,’’) para alterar  $("# xx ").css('color','blue');  $("#xx").css({'color':'cyan', 'font-size':'90'});
  • 17. Offset  Obtem o posicionamento do Elemento  var top = $("#menu").offset().top;  var left = $("#menu").offset().left;
  • 18. Altura e Comprimento  Obter a altura  $(‘el’).height();  Alterar a altura  $(‘el’). height(20);  Obter o comprimento  $(‘el’). width();  Alterar o comprimento  $(‘el’). Width(100);
  • 19. Length / Size  Retorna o número de elementos selecionados.  <img src="test1.jpg"/> <img src="test2.jpg"/>  $("img").length;  Retornaria 2  $("img").size;  Retornaria 2
  • 20. DOM
  • 21. attr  Altera um atributo de um elemento.  <img id=“imagem” src=“scrum.jpg”/>  Acessar um atributo  $(‘# imagem’).attr(‘src’) ○ Retornaria “scrum.jpg”  Alterar um atributo  $(“#imagem").attr("src",“openup.jpg"); ○ Altera o src do elemento img.
  • 22. attr  Altera um atributo de um elemento, através de uma função personalizada.  $("img").attr("title", function(index) {  return this.src;  });  Antes  <img src="test.jpg" />  Depois  <img src="test.jpg" title="test.jpg" />
  • 23. removeAttr  Remove um atributo de um elemento.  $("input").removeAttr("disabled")  Antes  <input type=“text” name=“idade” disabled="disabled"/>  Depois  <input type=“text” name=“idade”/>
  • 24. val  <input id=“a” type=“text” value=“444”>  Obter o valor de um elemento  $(‘#a’).val(); ○ Retonaria “444”  Alterar o valor de um elemento  $(‘#a’).val(“222”) Não recomendado para elementos com multiplos (multi-select, multi-checkbox)
  • 25. class  addClass();  hasClass();  toggleClass();  removeClass();  $(‘div’).addClass(‘vermelho’);
  • 26. html() / text()  <div id=“story”>  Era uma vez....  </div>  Retorna o conteúdo do div story  $(‘#story’).html();  Altera o conteúdo do div story  $(‘#story’).html(‘Novo Conteúdo!!!!’);  O mesmo conceito é aplicado para text() e text(‘...’).
  • 27. Inserindo Dentro do Elemento  <div id=“item”> Compras </div>  $(#item).append(‘ OK ’)  Compras OK  $(# item).prepend(‘ - ’)  - Compras  $("p").appendTo("#foo");  $("p").prependTo("#foo");
  • 28. Inserindo Fora do Elemento  <div id=“item”> Compras </div>  Insere depois do elemento  $(‘#item’).after(‘<div>fim</div>’);  Insere antes do elemento  $(‘#item’).before(‘<div>inicio</div>’);  $("p").insertAfter("#foo");  $("p").insertBefore("#foo");
  • 29. Clone  Clonar um elemento  clone();  Clonar um elemento incluindo eventos  clone(true);  $("b").clone().prependTo("p");
  • 30. Empty  Remove todos os elementos filhos (child nodes) de um elemento.  $("p").empty();  Antes  <p>Hello, <span>Person</span> <a href="#">and person</a></p>  Depois  <p></p>
  • 31. E tem mais....  replaceWith();
  • 32. remove()  Remove todos os objetos selecionados  $(‘remove’)  Antes ○ <p>Hello</p> how are <p>you?</p>  Depois ○ how are  $("p").remove(".hello");  Antes ○ <p class="hello">Hello</p> how are <p>you?</p>  Depois ○ how are <p>you?</p>
  • 33. wrap();  <p>Test Paragraph.</p>  Antes ○ <p>Test Paragraph.</p>  Depois ○ <div class='wrap'><p>Test Paragraph.</p></div>
  • 34. add(expression)  Adiciona mais elementos a seleção atual.  $("p").add("span“);
  • 35. add(HTML)  Adiciona mais elementos, criados “on the fly”, para o conjunto de elementos selecionados.  $("p").add("<span>Again</span>")
  • 36. add(element)  Adiciona um ou mais elementos para o conjunto de elementos selecionados.  $("p").add(document.getElementById("a"));  $("p").add(document.forms[0].elements );
  • 37. children(expr)  Obtem o conjunto de elementos que contenha todos os filhos de cada elemento do conjunto de selecionados. Pode-se utilizar filtros. <a>x<a>  <p>Hello</p><div><span>Hello Again</span><a>x</a></div><p>And Again</p>  $("div").children();  <span>Hello Again</span><a>x</a>  $("div").children(‘a’);  <a>x</a>
  • 38. contains(str)  Filtra o conjunto de elementos que contanha o texto especificado.  <p>This is just a test.</p><p>So is this</p>  $("p").contains("test")  <p>This is just a test.</p>
  • 39. filter(expression)  Remove elementos que não correspondam a expressão.  <p class="selected">Hello</p><p>How are you?</p>  $("p").filter(".selected")  <p class="selected">Hello</p>  <p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>  $("p").filter(".selected, :first")  <p>Hello</p>, <p class="selected">And Again</p>
  • 40. filter(function)  Permite que se escreva uma função com os critérios para filtragem de elementos.  <p><ol><li>Hello</li></ol></p><p>How are you?</p>  $("p").filter(function(index) {  return $("ol", this).length == 0;  })  <p>How are you?</p>
  • 41. find(expression)  Procura por todos os elementos que combinem com a expressão. Esse método é ideal para encontrar elementos descendentes.  <p><span>Hello</span>, how are you?</p>  $("p").find("span");  <span>Hello</span>
  • 42. is(expression)  Verifica a seleção atual contra a expressão e retorna true caso ao menos um elemento da seleção combine com a expressão.  <form><input type="checkbox" /></form>  $("input[@type='checkbox']").parent().is("form");  true
  • 43. next(exp) / previous(exp)  Obtem os próximos elementos. A utilização do filtro é opcional.  <p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>  $("p").next()  <p>Hello Again</p>, <div><span>And Again</span></div>
  • 44. not(el)  Remove o elemento especificado do conjunto de elementos.  <p>Hello</p><p id="selected">Hello Again</p>  $("p").not( $("#selected")[0] );  <p>Hello</p>
  • 45. not(expression)  Remove os elementos que combinem com determinada expressão.  <p>Hello</p><p id="selected">Hello Again</p>  $("p").not("#selected")  <p>Hello</p>
  • 46. parent();  <div><p>Hello</p><p>Hello</p></div>  $("p").parent()  <div><p>Hello</p><p>Hello</p></div>  <div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>  $("p").parent(".selected")  <div class="selected"><p>Hello Again</p></div>
  • 47. parents(expression);  Obtem todos os objetos pai menos o root (<html>). O filtro é opcional.
  • 48. Obter elementos DOM  Utiliza-se a função get();  Obter todos os elementos IMG  $("img").get(); Seleciona todas os elementos IMG e retorna o primeiro  $("img").get(0); Seleciona todas os elementos IMG e retorna todos menos os três primeiros. (Obs: gt = Greater Than = Maior que)  $("img").gt(2).get(); Seleciona todas os elementos IMG e retorna os dois primeiros. (Obs: lt = Less Than = Menor que)  $("img").lt(2) .get();
  • 49. Criar Elementos DOM  Cria um elemento DOM “on-the-fly” através de uma string com tags HTML.  $("<div><p>Olá</p></div>").appendTo("body")  O exemplo acima cria um elemento div com um paragrafo e o insere dentro do elemento body.
  • 50. Extendendo o jQuery  Extende o próprio objeto jQuery.  Pode ser usado para adicionar funções ao namespace do jQuery ou funções de plugin.
  • 51. Adicionando Funções ao Namespace  jQuery.extend({  min: function(a, b) { return a < b ? a : b; },  max: function(a, b) { return a > b ? a : b; }  });  $.min(10,20);  $.min(10,20);
  • 52. Adicionando Funções de Plugin  jQuery.fn.extend({  check: function() {  return this.each(function() { this.checked = true; });  },  uncheck: function() {  return this.each(function() { this.checked = false; });  }  });  $("input[@type=checkbox]").check();  $("input[@type=radio]").uncheck();
  • 54. Ready  O código inserido dentro da função “ready” é executado somente quando os objetos DOM estiverem prontos para serem manipulados.  Sintaxe  $(document).ready(function(){//seu código failsafe});  $(function(){ //seu código failsafe });  jQuery(function($) { //seu código failsafe });
  • 55. Event Handling  Bind  $("p").bind("click", function(e){  alert('clicou no parágrafo!')  });  Unbind  $("p").unbind("click“);  One  $("p").one("click", function(e){  alert('clicou no parágrafo!')  });  //Só exibe o alerta a primeira vez que clicar!
  • 56. Triggers  $("button:first").click(function () {  alert('a');  });  $("button:last").click(function () {  $("button:first").trigger('click');  alert('b');  });  Ao Clicar no último botão serão exibidos dois alerts.
  • 57. Hover / Toggle  $(“a").hover(function(),…-, function(),…-);  Executa f1 quando ganha foco e f2 quando perde.  $(“a").toggle(function(),…-, function(),…-);  Alterna entre a execução f1() e f2() a cada clique.
  • 58. Event Helpers  Existem alguns facilitadores para fazer bind de eventos comuns...  click(f); // $(‘p’).click(function(){...})  Equivale a $(‘p’).bind(‘click’,... function(){...})  $(‘p’).click();  Executa o evento click dos elementos ‘p’.
  • 59. Event Helpers  click( ) mousemove( )  dblclick( ) mouseout( )  error( ) mouseover( )  focus( ) mouseup( )  keydown( ) resize( ) scroll( )  keypress( ) select( )  keyup( ) submit( )  load( ) unload( )  mousedown( )
  • 61. Show / Hide  Exibe um elemento  $("p").show()  $("p").show(‘slow’) //slow, normal, fast  Esconde um elemento  $("p").hide()  $("p"). hide(‘slow’) //slow, normal, fast  Se estiver escondido exibe senão esconde  $("p").toggle()
  • 62. Sliding / Fading  slideIn  slideOut  slideToggle  fadeIn  fadeOut  Você também pode criar seus próprios efeitos e animações.
  • 63. AJAX
  • 64. Load  Carrega a página napa.jsp no elemento e  $("#e").load(“napa.jsp ");  Com parametrôs e evento  $("#feeds").load(“napa.jsp",  {limit: 25}, function(){ ○ alert("The last 25 entries in the feed have been loaded");  });
  • 65. Get  $.get(“pedido.action",  { codigo: “1234", fornecedor: “44" -  );  $.get("test.cgi",  { name: "John", time: "2pm" },  function(data){ alert("Data Loaded:" + data); }  );
  • 66. JSON  $.getJSON(  "test.js",  function(json){ alert("JSON Data: " + json.users[3].name); }  );
  • 67. Executando Scripts  $.ajax({  type: "GET",  url: "test.js",  dataType: "script" });  $.getScript("test.js", ○ function(){ alert("Script loaded and executed."); }  );
  • 68. Enviando dados  $.ajax({  type: "POST",  url: “wendola.jsp",  data: "name=John&location=Boston", success: function(msg){ ○ alert( "Data Saved: " + msg ); }  });
  • 69. Última Versão  $.ajax({  url: "test.html",  cache: false,  timeout: 20,  Data: ,devedor:’bolha’, pagador:’wendola’-,  type: ‘POST’,  username: ‘juniao’  password: ‘cocazero’,  error: function(){alert(‘error’)-,  success: function(html){ ○ $("#results").append(html); }  });
  • 70. Sincronicidade  var html = $.ajax({ ○ url: "some.php", ○ async: false }  ).responseText;
  • 71. Serialização  function showValues() {  var str = $("form").serialize();  $("#results").text(str);  }  single=Single&multiple=Multiple&multiple=Mu ltiple3&check=check2&radio=radio1
  • 73. Each  var arr = [ "one", "two", "three", "four", "five" ];  var obj = { one:1, two:2, three:3, four:4, five:5 };  jQuery.each(arr, function() {  $("#" + this).text("My id is " + this + ".");  return (this != "four"); // will stop running to skip "five“  });  jQuery.each(obj, function(i, val) {  $("#" + i).append(document.createTextNode(" - " + val));  });  Percorre um objeto ou array executando a função para cada elemento encontrado.
  • 74. Grep  var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];  $("div").text(arr.join(", "));  arr = jQuery.grep(arr, function(n, i){  return (n != 5 && i > 4);  });  $("p").text(arr.join(", "));  arr = jQuery.grep(arr, function (a) { return a != 9; });  $("span").text(arr.join(", "));  //Age como um filtro de elementos
  • 75. Mais  Retira espaços em branco  jQuery.trim( str )  Verifica se o objeto é uma função  jQuery.isFunction( obj )  Remove elementos duplicados  jQuery.unique( array )  Une dois arrays sem repetir os elementos.  jQuery.merge(array, array)
  • 76. Browser  if($.browser.safari || $.browser.msie) {  $( function() { ○ alert("this is safari!");  } );  }
  • 78. jQuery UI  Drag and dropping  Sorting  Selecting  Resizing  Accordions  Date pickers  Dialogs  Sliders  Tabs.
  • 80. tabs()  <div id="example" class="flora">  <ul>  <li><a href="#fragment-1"><span>One</span></a></li>  <li><a href="#fragment-2"><span>Two</span></a></li>  <li><a href="#fragment-3"><span>Three</span></a></li>  </ul>  <div id="fragment-1">conteúdo da aba 1</div>  <div id="fragment-2">conteúdo da aba 2</div>  <div id="fragment-3">conteúdo da aba 3</div>  </div>  $("#example > ul").tabs();
  • 81. jQuery Tabs - Eventos  tabsselect – dispara ao selecionar uma aba  tabsload – dispara ao carregar uma aba  tabsshow – dispara ao exibir uma aba  tabsadd – dispara ao adicionar uma aba  tabsremove – dispara ao remover uma aba  tabsenable – dispara ao habilitar uma aba.  tabsdisable – dispara ao desabilitar uma aba.
  • 83. Validação  Evitar que o usuário mude de aba caso a aba atual não passe na validação.  $('#example').tabs({  select: function(ui) {  var isValid = ... // form validation returning true or false  return isValid;  }  });
  • 84. Métodos  tabs( options ) ]  Cria uma novo componente jQuery UI Tabs  tabs( "add", url, label, index )  Adiciona uma nova aba  tabs( "remove", index )  Remove uma aba  tabs( "enable", index ) / tabs( "disable", index )  Habilita / Desabilita uma aba  tabs( "select", index )  Seleciona uma aba  tabs( "load", index )  Carrega uma aba com ajax  tabs( "url", index, url )  Carrega uma url em uma aba com ajax  tabs( "destroy" )  Destroi o componente  tabs( "length" )  Retorna o número de abas  tabs( "rotate", ms, continuing )  Realiza um rodízio automático entre as abas
  • 85. jQuery Form Plugin  O jQuery Form Plugin permite que você facilmente transforme formulários HTML comuns em formulários AJAX.
  • 86. jQuery Form Plugin  <form id="myForm" action="comment.php" method="post"> Name: <input type="text" name="name" /> Comment: <textarea name="comment"></textarea> <input type="submit" value="Submit Comment" /> </form>  $('#myForm').ajaxForm(function() { alert("Thank you for your comment!"); });
  • 87. Opções  $(document).ready(function() { var options = { target: '#output1', // target element(s) to be updated with server response beforeSubmit: showRequest, // pre-submit callback (return false = abort) success: showResponse // post-submit callback url: url // override for form's 'action' attribute type: type // 'get' or 'post', override for form's 'method' attribute dataType: null // 'xml', 'script', or 'json' (expected server response type) clearForm: true // clear all form fields after successful submit resetForm: true // reset the form after successful submit // the $.ajax options can be used here too, for example: //timeout: 3000 }; // bind form using 'ajaxForm' $('#myForm1').ajaxForm(options); });
  • 88. jQuery Validator  Simplicidade  Maturidade (Julho 2006)  Padronização  Mensagens de Erro  http://docs.jquery.com/Plugins/Validation
  • 89. Seletores Especiais :blank :filled :unchecked • Traz todos • Traz todos • Traz todos os os os elementos elementos elementos em branco preenchidos não ‘checados’
  • 90. Formatador de Mensagens  Semelhante ao Message.format() do Java!  1. Cria-se um template.  2. Cria-se um formatador.  3. Aplica-se o formatador.  var template = “,0-, ,1-, esta é sua ,2- visita. Grande ,1-!! ”;  var formatter = jQuery.format(msg);  var msg = template(‘Bom Dia’, ‘Sr. Ricardex’, ‘quinta’);  O valor da variável msg seria:  Bom Dia, Sr. Ricardex, esta é sua quinta visita. Grande Sr. Ricardex!!
  • 91. Métodos de Validação  form();  Valida um formulário, retorna true se for válido, caso contrário false. $("#meuFormulario").validate().form()
  • 92. Métodos de Validação  element(x);  Valida um único elemento, retorna true se for válido caso contrário false.  $("#meuFormulario").validate().element("#idade");
  • 93. Métodos de Validação  resetForm();  Redefine os campos com seus valores originais, remove as classes CSS que indicam elementos inválidos e esconde mensagens de erro.  var validator = $("#meuForm").validate(); validator.resetForm();
  • 94. Métodos de Validação  showErrors  Adiciona e exibe uma mensagem de erro programaticamente.  var validator = $("#myform").validate(); validator.showErrors(,“primeiroNome": “Eu sei que o seu primeiro nome é Bob, Bob!"});
  • 95. Métodos de Validação  addMethod()  Adiciona um novo tipo de validação.  Ex: Validator que verifica se uma url é de um domínio.  jQuery.validator.addMethod("domain", function(value) { ○ return this.optional(element) || /^http://bluesoft.com.br/.test(value); -, “Por favor, Especifique o domínio correto");
  • 96. Métodode de Validação  addClassRules(name, rules) / addClassRules(rules)  Associa regras de validação a uma Classe CSS.  jQuery.validator.addClassRules({  cep: { ○ required: true, ○ minlength: 8, ○ maxlength: 8  }  });  <input type=‘text’ name=‘cep’ class=‘cep’/>
  • 97. required()  $("#formulario").validate(  { rules: { nomeDoCampo: "required" }  });  CSS  label.error { ○ background: url(‘unchecked.gif') no-repeat; padding-left: 16px; margin-left: .3em; }  label.valid { ○ background: url(‘checked.gif') no-repeat; display: block; width: 16px; height: 16px; }
  • 98. required( dependency-expression )  $("#formulario").validate({  rules: { ○ campoTexto: { Se o ‘CheckBox’ for  required: "#campoCheckBox:checked“ selecionado o campo de texto torna-se ○} obrigatório } (required).  });  $("#campoCheckBox").click(function() {  $("#campoTexto").valid();  });
  • 99. required( dependency-callback )  Torna o elemento ‘required’, dependendo do resultado da chamada de um ‘callback’.  $("#formulario").validate({  rules: { ○ idade: { required: true, min: 3 }, ○ pai: {  required: function(element) { - return $("#idade").val() < 13;  } ○ } Se a idade (age) for menor  } que 13 o preenchimento do campo pai (parent)  }); torna-se obrigatório!  $("#idade").blur(function() {  $("#pai").valid();  });
  • 100. remote(url)  Realiza um ‘request’ em uma ‘URL’ para verificar se um elemento é válido.  Ex: Verifica se o nome de usuário já existe.  $("#fomulario").validate({  rules: { ○ usuario: {  required: true,  remote: “verificaUsuario.jsp“ ○ }  }  });
  • 101. minlength(x) / maxlength(x)  $("#formulario").validate({  rules: { ○ field: {  required: true,  minlength: 3,  maxlength: 4,  // rangelength: [3, 4] ○} }  });
  • 102. min() / max()  $("#formulario").validate({  rules: { ○ field: {  required: true,  min: 13,  max: 23,  // range: [13, 23] ○} }  });
  • 103. Números  min:4  Verifica se o número é maior que 4  max: 100  Verifica se o número é menor que 100  range: [10,20]  Verifica se o número está entre 10 e 20.  number:true  Valida números no padrão americano (100.00)  numberDE:true  Valida números no padrão alemão (100,00)  creditcard:true  Valida números de cartão de crédito  digits:true  Permite apenas números inteiros
  • 104. Datas  date: true  Valida Datas  dateISO: true  Valida datas no padrão ISO  dataDE: true  Valida datas no Padrão Alemão (1.1.2008)
  • 105. equalsTo  Verifica se o valor de campo é igual ao valor de outro.  $("#myform").validate({  rules: { ○ password: "required", ○ passwordConfirmation: {  equalTo: "#password“ ○ }  }  });
  • 106. Mais validadores  email: true  Valida endereços de e-mail.  url: true  Valida URL’s  accept: "xls|csv“  Permite apenas Strings que terminem com .xls ou .cvs, usado para valiadar extensões de arquivos.
  • 108. Referências Bibliográficas  http://docs.jquery.com/Main_Page  http://dev.jquery.com/view/trunk/tools/api-browser/  http://docs.jquery.com/UI/Tabs  http://blogs.pathf.com/agileajax/2008/03/jquery-form-and.html  http://docs.jquery.com/Plugins/Validation  http://www.malsup.com/jquery/form/  http://simplesideias.com.br