J query aula01
Upcoming SlideShare
Loading in...5
×
 

J query aula01

on

  • 2,174 views

 

Statistics

Views

Total Views
2,174
Views on SlideShare
2,170
Embed Views
4

Actions

Likes
2
Downloads
45
Comments
0

1 Embed 4

http://www.linkedin.com 4

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
    View slide
  • jQuery é JavaScript
    •      jQuery é apenas um conjunto de métodos prontos em
    • JavaScript, não há nenhuma mágica!
    View slide
  • 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.