• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
J query aula01
 

J query aula01

on

  • 2,080 views

 

Statistics

Views

Total Views
2,080
Views on SlideShare
2,078
Embed Views
2

Actions

Likes
2
Downloads
44
Comments
0

1 Embed 2

http://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    J query aula01 J query aula01 Presentation Transcript

    •  
    • O que é jQuery?
      •      jQuery é uma biblioteca javascript rápida e concisa que simplifica a manipulação de um documento HTML, trabalho com eventos, animações e interações AJAX para um rápido desenvolvimento web.
      • http://jquery.com/
    • O que é jQuery?
      • • percorrer o DOM
      • • manipulação de evento
      • • animações
      • • interações AJAX
    • jQuery é JavaScript
      •      jQuery é apenas um conjunto de métodos prontos em
      • JavaScript, não há nenhuma mágica!
    • Como inserir o jQuery na página
      •      <script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;></script>
      •      <script type=&quot;text/javascript&quot;>
      •        // javaScript por aqui
      •      </script>
    • Como inserir o jQuery na página
      •      <script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;></script>
      •      <script type=&quot;text/javascript&quot;>
      •        // javaScript por aqui
      •      </script>
    • Como inserir o jQuery na página
      • <script 
      •    type=&quot;text/javascript&quot;    src=&quot;http://ajax.googleapis.com/ajax/
      • libs/jquery/1.4.2/jquery.min.js&quot;>
      • </script>
    • Vamos colocar o jQuery pra funcionar
      • <script type=&quot;text/javascript&quot;>
      •    window.onload = function() {
      •      // muita coisa rolando aqui
      •    } 
      • </script>
    • Vamos colocar o jQuery pra funcionar
      • <script type=&quot;text/javascript&quot;>
      •    jQuery(document).ready( function() {
      •      // aqui é melhor!!!
      •    }); 
      • </script>
    • jQuery é mais simples!
      • var elemento = document.getElementById
      • (‘nomeElemento’);
      • elemento.style = “display: none;”
      • $(‘#nomeElemento’).hide();
    • jQuery é mais simples!
      • var elemento = document.getElementById
      • (‘nomeElemento’);
      • elemento.style = “display: block;”
      • $(‘#nomeElemento’).show();
    • jQuery é muito mais simples!
      • $(‘#nomeElemento’).hide(‘fast’);
      • $(‘#nomeElemento’).show(‘slow’);
      • $(‘#nomeElemento’).toggle(1000);
    • jQuery é ainda mais simples!
      • $(‘#nomeElemento’)
      •    .hide(‘fast’)
      •    .show(‘slow’);
      • Corrente de métodos
    • jQuery: Conceitos Básicos
      • <a id=”ancoraEspecial” href=”#”>Pode clicar</a>
      • <script type=”text/javascript”>
      •    $(‘#ancoraEspecial’).click( function(evento) { 
      •      alert( ‘Oi!’ );
      •      evento.preventDefault();
      •    });
      • </script>
    • Seletores do jQuery
      • Seletores CSS
      • tag                                div
      • .classe                         .varios
      • tag[atributo=valor]        input[type=text]
      • #id                                #elemento
    • Seletores do jQuery
      • <div class=”caixa”>
      •    <a id=”link” href=”#”>Clique aqui</a>
      • </div>
      • <input type=”text” value=”” />
      • <ul>
      •    <li class=”marcado”>Futebol</li>
      •    <li>Vôlei</li>
      •    <li class=”marcado”>Basquete</li>
      • </ul>
    • Seletores do jQuery
      • <div class=”caixa”>
      •    <a id=”link” href=”#”>Clique aqui</a>
      • </div>
      • <input type=”text” value=”” />
      • <ul>
      •    <li class=”marcado”>Futebol</li>
      •    <li>Vôlei</li>
      •    <li class=”marcado”>Basquete</li>
      • </ul>
      • $(‘#link’)
    • Seletores do jQuery
      • <div class=”caixa”>
      •    <a id=”link” href=”#”>Clique aqui</a>
      • </div>
      • <input type=”text” value=”” />
      • <ul>
      •     <li class=”marcado”>Futebol</li>
      •    <li>Vôlei</li>
      •    <li class=”marcado”>Basquete</li>
      • </ul>
      • $(‘li’)
    • Seletores do jQuery
      • <div class=”caixa”>
      •    <a id=”link” href=”#”>Clique aqui</a>
      • </div>
      • <input type=”text” value=”” />
      • <ul>
      •     <li class=”marcado”>Futebol</li>
      •    <li>Vôlei</li>
      •    <li class=”marcado”>Basquete</li>
      • </ul>
      • $(‘.marcado’)
    • Seletores do jQuery
      • <div class=”caixa”>
      •    <a id=”link” href=”#”>Clique aqui</a>
      • </div>
      • <input type=”text” value=”” />
      • <ul>
      •    <li class=”marcado”>Futebol</li>
      •    <li>Vôlei</li>
      •    <li class=”marcado”>Basquete</li>
      • </ul>
      • $(‘input[type=text]’)
    • Hierarquia dos Seletores
      • < div id=”elemento”>
      •    <a href=”#”>Link selecionado</a>
      •    <p>Um parágrafo qualquer</p>
      •    <p>
      •      Outro <a href=”#”>link</a> selecionado
      •    </p>
      • </div>
      • <a href=”#”>Link não selecionado</a>
      • <div>
      •    Esse <a href=”#”>aqui</a> não entra
      • </div>
    • Hierarquia dos Seletores
      • $(‘#elemento a’) 
      • $(‘#elemento’).find(‘a’)
    • Hierarquia dos Seletores
      • <div id=”elemento”>
      •    <a href=”#”>Link selecionado</a>
      •    <p>
      •      Outro <a href=”#”>link</a> não selecionado
      •    </p>
      • </div>
      • <a href=”#”>Link não selecionado</a>
      • <div>
      •    Esse <a href=”#”>aqui</a> agora entra
      • </div>
    • Hierarquia dos Seletores
      • $(‘div > a’) 
      • $(‘div’).children(‘a’)
    • Hierarquia dos Seletores
      • <ul>
      •    <li><a href=”#”>link 1</a></li>
      •    <li><a href=”#” class=‘marca’>link 2</a></li>
      •    <li><a href=”#”>link 3</a></li>
      •    <li> <p><a href=”#” class=‘marca’>link 4</a></p> </li>
      •    <li><a href=”#”>link 5</a></li>
      • </ul>
    • Hierarquia dos Seletores
      •  
      • $(‘a.marca’).parent()
    • Hierarquia dos Seletores
      • <ul>
      •    <li><a href=”#”>link 1</a></li>
      •    <li><a href=”#” id=‘item’>link 2</a></li>
      •    <li><a href=”#”>link 3</a></li>
      •    <li><a href=”#”>link 4</a></li>
      •    <li><a href=”#”>link 5</a></li>
      • </ul>
    • Hierarquia dos Seletores
      •  
      • $(‘#item’).next()
    • Hierarquia dos Seletores
      • <ul>
      •    <li><a href=”#”>link 1</a></li>
      •    <li><a href=”#” id=‘item’>link 2</a></li>
      •    <li><a href=”#”>link 3</a></li>
      •    <li><a href=”#”>link 4</a></li>
      •    <li><a href=”#”>link 5</a></li>
      • </ul>
    • Hierarquia dos Seletores
      •  
      • $(‘#item’).prev()
    • Hierarquia dos Seletores
      • <ul>
      •     <li><a href=”#”>link 1</a></li>
      •    <li><a href=”#” id=‘item’>link 2</a></li>
      •    <li><a href=”#”>link 3</a></li>
      •    <li><a href=”#”>link 4</a></li>
      •    <li><a href=”#”>link 5</a></li>
      • </ul>
    • Hierarquia dos Seletores
      •  
      • $(‘#item’).siblings()
    • Adicionar e Remover Classes
      •  
      • $(‘#menu > li’).addClass(‘menuItem’);
      • $(‘#menu > li’).removeClass(‘menuItem’);
      • $(‘#menu > li’).toggleClass(‘alternado’);
    • Manipulação direta
      • $(‘#menu > li’).css(‘color’, ‘red’);
    • Largura e Altura
      • alert( $(‘#caixa’).width() );
      • alert( $(‘#caixa’).height() );
    • Largura e Altura
      • $(‘#caixa’).width(‘300px’);
      • $(‘#caixa’).height(200);
    • Atributos
      • <a href=”#” rel=”nofollow”>Link externo</a>
      • <script type=”text/javascript”>
      •    jQuery(‘a’).attr(‘rel’, ‘’);
      • </script>
    • Modificando elementos
      • <a href=”#”>Link externo</a>
      • <script type=”text/javascript”>
      •    alert( $(‘a’).text() );
      •    $(‘a’).text(‘Clique aqui!’);
      • </script>
    • Modificando elementos
      • <p id=”mudar”>
      •    <a href=”#”>Link</a>
      • </p>
      • <script type=”text/javascript”>
      •    alert( $(‘#mudar’).html() );
      •    $(‘#mudar’).html(‘<span>sem 
      • link!</span>’);
      • </script>
    • Adicionando elementos
      • <div id=”adicionar”>
      •    <p>Algum parágrafo</p>
      • </div>
      • <script type=”text/javascript”>
      •    jQuery(‘#adicionar’).append(‘<p>um depois</p>’);
      •    jQuery(‘#adicionar’).prepend(‘<p>um antes</p>’);
      • </script>
    • Removendo elementos
      • <div id=”adicionar”>
      •    <p>um antes</p>
      •    <p class=”remover”>Algum parágrafo</p>
      •    <p>um depois</p>
      • </div>
      • <script type=”text/javascript”>
      •    jQuery(‘.remover’).remove();
      • </script>
    • Trabalhando com eventos
      • click // um clique do mouse no elemento
      • hover // ponteiro do mouse por cima do elemento
      • focus // elemento ganha foco
      • blur // elemento perde o foco
      • submit // um form é submetido
      • keyup // uma tecla acaba de ser pressionada
    • Referência $(this)
      • $(‘.caixa’).click( function() {
      •    $(this).hide();
      • });
      •      No exemplo acima, somente o elemento
      • clicado é selecionado em $(this). Os demais
      • elementos com class = ‘caixa’ são
      • ignorados.