Download - J query aula01
![Page 1: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/1.jpg)
![Page 2: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/2.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/3.jpg)
O que é jQuery?
• percorrer o DOM• manipulação de evento• animações• interações AJAX
![Page 4: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/4.jpg)
jQuery é JavaScript
jQuery é apenas um conjunto de métodos prontos emJavaScript, não há nenhuma mágica!
![Page 5: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/5.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/6.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/7.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/8.jpg)
Vamos colocar o jQuery pra funcionar
<script type="text/javascript"> window.onload = function() { // muita coisa rolando aqui } </script>
![Page 9: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/9.jpg)
Vamos colocar o jQuery pra funcionar
<script type="text/javascript"> jQuery(document).ready( function() { // aqui é melhor!!! }); </script>
![Page 10: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/10.jpg)
jQuery é mais simples!
var elemento = document.getElementById(‘nomeElemento’);elemento.style = “display: none;”
$(‘#nomeElemento’).hide();
![Page 11: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/11.jpg)
jQuery é mais simples!
var elemento = document.getElementById(‘nomeElemento’);elemento.style = “display: block;”
$(‘#nomeElemento’).show();
![Page 12: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/12.jpg)
jQuery é muito mais simples!
$(‘#nomeElemento’).hide(‘fast’);
$(‘#nomeElemento’).show(‘slow’);
$(‘#nomeElemento’).toggle(1000);
![Page 13: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/13.jpg)
jQuery é ainda mais simples!
$(‘#nomeElemento’) .hide(‘fast’) .show(‘slow’);
Corrente de métodos
![Page 14: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/14.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/15.jpg)
Seletores do jQuery
Seletores CSS
tag div.classe .variostag[atributo=valor] input[type=text]#id #elemento
![Page 16: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/16.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/17.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/18.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/19.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/20.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/21.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/22.jpg)
Hierarquia dos Seletores$(‘#elemento a’)
$(‘#elemento’).find(‘a’)
![Page 23: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/23.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/24.jpg)
Hierarquia dos Seletores$(‘div > a’)
$(‘div’).children(‘a’)
![Page 25: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/25.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/26.jpg)
Hierarquia dos Seletores
$(‘a.marca’).parent()
![Page 27: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/27.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/28.jpg)
Hierarquia dos Seletores
$(‘#item’).next()
![Page 29: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/29.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/30.jpg)
Hierarquia dos Seletores
$(‘#item’).prev()
![Page 31: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/31.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/32.jpg)
Hierarquia dos Seletores
$(‘#item’).siblings()
![Page 33: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/33.jpg)
Adicionar e Remover Classes
$(‘#menu > li’).addClass(‘menuItem’);
$(‘#menu > li’).removeClass(‘menuItem’);
$(‘#menu > li’).toggleClass(‘alternado’);
![Page 34: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/34.jpg)
Manipulação direta
$(‘#menu > li’).css(‘color’, ‘red’);
![Page 35: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/35.jpg)
Largura e Altura
alert( $(‘#caixa’).width() );
alert( $(‘#caixa’).height() );
![Page 36: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/36.jpg)
Largura e Altura
$(‘#caixa’).width(‘300px’);
$(‘#caixa’).height(200);
![Page 37: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/37.jpg)
Atributos
<a href=”#” rel=”nofollow”>Link externo</a>
<script type=”text/javascript”> jQuery(‘a’).attr(‘rel’, ‘’);</script>
![Page 38: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/38.jpg)
Modificando elementos
<a href=”#”>Link externo</a>
<script type=”text/javascript”> alert( $(‘a’).text() ); $(‘a’).text(‘Clique aqui!’);</script>
![Page 39: J query aula01](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/39.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/40.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/41.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/42.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022050807/54531ce6b1af9f7f248b573d/html5/thumbnails/43.jpg)
Referência $(this)
$(‘.caixa’).click( function() { $(this).hide();});
No exemplo acima, somente o elementoclicado é selecionado em $(this). Os demaiselementos com class = ‘caixa’ sãoignorados.