J query aula01

43

description

 

Transcript of J query aula01

Page 1: J query aula01
Page 2: J query aula01

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/

Page 3: J query aula01

O que é jQuery?

• percorrer o DOM• manipulação de evento• animações• interações AJAX

Page 4: J query aula01

jQuery é JavaScript

    jQuery é apenas um conjunto de métodos prontos emJavaScript, não há nenhuma mágica!

Page 5: J query aula01

Como inserir o jQuery na página

    <script type="text/javascript" src="jquery.js"></script>    <script type="text/javascript">      // javaScript por aqui    </script>

Page 6: J query aula01

Como inserir o jQuery na página

    <script type="text/javascript" src="jquery.js"></script>    <script type="text/javascript">      // javaScript por aqui    </script>

Page 7: J query aula01

Como inserir o jQuery na página

<script    type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Page 8: J query aula01

Vamos colocar o jQuery pra funcionar

<script type="text/javascript">  window.onload = function() {    // muita coisa rolando aqui  } </script>

Page 9: J query aula01

Vamos colocar o jQuery pra funcionar

<script type="text/javascript">  jQuery(document).ready( function() {    // aqui é melhor!!!  }); </script>

Page 10: J query aula01

jQuery é mais simples!

var elemento = document.getElementById(‘nomeElemento’);elemento.style = “display: none;”

$(‘#nomeElemento’).hide();

Page 11: J query aula01

jQuery é mais simples!

var elemento = document.getElementById(‘nomeElemento’);elemento.style = “display: block;”

$(‘#nomeElemento’).show();

Page 12: J query aula01

jQuery é muito mais simples!

$(‘#nomeElemento’).hide(‘fast’);

$(‘#nomeElemento’).show(‘slow’);

$(‘#nomeElemento’).toggle(1000);

Page 13: J query aula01

jQuery é ainda mais simples!

$(‘#nomeElemento’)  .hide(‘fast’)  .show(‘slow’);

Corrente de métodos

Page 14: J query aula01

jQuery: Conceitos Básicos

<a id=”ancoraEspecial” href=”#”>Pode clicar</a><script type=”text/javascript”>  $(‘#ancoraEspecial’).click( function(evento) {     alert( ‘Oi!’ );    evento.preventDefault();  });</script>

Page 15: J query aula01

Seletores do jQuery

Seletores CSS

tag                                div.classe                         .variostag[atributo=valor]        input[type=text]#id                                #elemento

Page 16: J query aula01

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>

Page 17: J query aula01

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’)

Page 18: J query aula01

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’)

Page 19: J query aula01

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’)

Page 20: J query aula01

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]’)

Page 21: J query aula01

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>

Page 22: J query aula01

Hierarquia dos Seletores$(‘#elemento a’) 

$(‘#elemento’).find(‘a’)

Page 23: J query aula01

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>

Page 24: J query aula01

Hierarquia dos Seletores$(‘div > a’) 

$(‘div’).children(‘a’)

Page 25: J query aula01

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>

Page 26: J query aula01

Hierarquia dos Seletores 

$(‘a.marca’).parent()

Page 27: J query aula01

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>

Page 28: J query aula01

Hierarquia dos Seletores 

$(‘#item’).next()

Page 29: J query aula01

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>

Page 30: J query aula01

Hierarquia dos Seletores 

$(‘#item’).prev()

Page 31: J query aula01

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>

Page 32: J query aula01

Hierarquia dos Seletores 

$(‘#item’).siblings()

Page 33: J query aula01

Adicionar e Remover Classes 

$(‘#menu > li’).addClass(‘menuItem’);

$(‘#menu > li’).removeClass(‘menuItem’);

$(‘#menu > li’).toggleClass(‘alternado’);

Page 34: J query aula01

Manipulação direta

$(‘#menu > li’).css(‘color’, ‘red’);

Page 35: J query aula01

Largura e Altura

alert( $(‘#caixa’).width() );

alert( $(‘#caixa’).height() );

Page 36: J query aula01

Largura e Altura

$(‘#caixa’).width(‘300px’);

$(‘#caixa’).height(200);

Page 37: J query aula01

Atributos

<a href=”#” rel=”nofollow”>Link externo</a>

<script type=”text/javascript”>  jQuery(‘a’).attr(‘rel’, ‘’);</script>

Page 38: J query aula01

Modificando elementos

<a href=”#”>Link externo</a>

<script type=”text/javascript”>  alert( $(‘a’).text() );  $(‘a’).text(‘Clique aqui!’);</script>

Page 39: J query aula01

Modificando elementos<p id=”mudar”>  <a href=”#”>Link</a></p>

<script type=”text/javascript”>  alert( $(‘#mudar’).html() );  $(‘#mudar’).html(‘<span>sem link!</span>’);</script>

Page 40: J query aula01

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>

Page 41: J query aula01

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>

Page 42: J query aula01

Trabalhando com eventosclick // um clique do mouse no elementohover // ponteiro do mouse por cima do elementofocus // elemento ganha focoblur // elemento perde o focosubmit // um form é submetidokeyup // uma tecla acaba de ser pressionada

Page 43: J query aula01

Referência $(this)

$(‘.caixa’).click( function() {  $(this).hide();});

    No exemplo acima, somente o elementoclicado é selecionado em $(this). Os demaiselementos com class = ‘caixa’ sãoignorados.