J query aula01
-
Upload
suissa-corp -
Category
Documents
-
view
2.238 -
download
0
description
Transcript of 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/
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.