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 emJavaScript, não há nenhuma mágica!

Como inserir o jQuery na página

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

Como inserir o jQuery na página

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

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>

Vamos colocar o jQuery pra funcionar

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

Vamos colocar o jQuery pra funcionar

<script type="text/javascript">  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                         .variostag[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 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

Referência $(this)

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

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