jQuery
A poderosa biblioteca JavaScript.
Cloves Moreira Junior
Quem sou Eu?
Faço Sistemas de Informação
Trabalho como Desenvolvedor Java
Sou um entusiasta jQuery!!!!
jQuery
jQuery é uma biblioteca JavaScript criada
por John Resig e disponibilizada como
software livre e aberto, ou seja, ...
Quem Criou jQuery?
Após cinco meses da publicação de um
artigo sobre a sua frustração em escrever
código JavaScript no se...
“jQuery, a nova onda para JavaScript”,
Porque Surgiu jQuery?
De acordo com John Resig, “o foco
principal da biblioteca jQuery é a
simplicidade. Por que submeter...
O Foco de jQuery
Destina-se a adicionar interatividade e
dinamismo às páginas web,
proporcionando ao desenvolvedor
funcio...
É recomendado utilizar jQuery para:
Adicionar efeitos visuais e animações;
Acessar e manipular o DOM;
Realizar requisiç...
OFF – Definição de DOM
 Document Object Model- São modelos
de objetos( com suas propriedades e
métodos), expostos ao prog...
Como características, pode-se citar
que o jQuery
Utiliza seletores CSS para localizar elementos
componentes da estrutura ...
E AJAX, O Que é?
AJAX é a sigla em inglês
para Asynchronous JavaScript and XML e
trata-se de uma técnica de carregamento
...
Para carregar a biblioteca é somente
efetuar o carregamento externo:
<script type=”text/javascript” src=”
jquery.js”>
</s...
Usando a biblioteca:
<script>
$(document).ready(
function(){
$(‘h1’).css({“background”:”#CCCCCC”});
}
);
</script>
Utilizando jQuery:
O símbolo $ é um pseudônimo ou
comumente chamado alias da biblioteca,
que por sua vez foi escrita com ...
<html>
<head>
<script src="jquery.js"></script>
<script> var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(docume...
Voce também pode....
Inserir html passando a marcação html
como string.
Ex: $(‘<h1>Oi, eu estudo na
PUC</h1>’).prependTo...
Seletores CSS 3
Outra característica que é extremamente
expressiva e interessante é que a
biblioteca implementa os podero...
Pseudoseletor :eq()
Uma funcionalidade poderosa da biblioteca jQuery é que
as seleções retornam um conjunto que pode ser...
Outro exemplo:
$('#tres')
next()
.children('li:first-child')
.css('fontWeight, 'bold');
Seleciona o elemento
com id="tr...
Como me encontrar...
Fórum Clube da Programação ->
www.clubedaprogramacao.com
clovesmjunior.blogspot.com -> meu blog
Tw...
Referências Bibliográficas:
http://docs.jquery.com/
jQuery: A Bíblia do Programador
JavaScript – Mauricio Samy Silva
Mãos à Obra...
jQuery - A poderosa Biblioteca JavaScript - Minicurso
Upcoming SlideShare
Loading in …5
×

jQuery - A poderosa Biblioteca JavaScript - Minicurso

4,900 views
4,719 views

Published on

Este foi a apresentação para o minicurso ministrado na semana da computação na Puc Minas no segundo semestre de 2009.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,900
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
111
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

jQuery - A poderosa Biblioteca JavaScript - Minicurso

  1. 1. jQuery A poderosa biblioteca JavaScript. Cloves Moreira Junior
  2. 2. Quem sou Eu? Faço Sistemas de Informação Trabalho como Desenvolvedor Java Sou um entusiasta jQuery!!!!
  3. 3. jQuery jQuery é uma biblioteca JavaScript criada por John Resig e disponibilizada como software livre e aberto, ou seja, de emprego e uso regido segundo licença conforme as regras estabelecidas pelo MIT (Massachusetts Institute of Tecnology) e pelo GPL (GNU General Public Licence).
  4. 4. Quem Criou jQuery? Após cinco meses da publicação de um artigo sobre a sua frustração em escrever código JavaScript no seu blog, apresentou publicamente os resultados de seus estudos em uma palestra com o nome de “jQuery, a nova onda para JavaScript”, proferida no BarCampNYC – Wrap Up, no dia 14 de janeiro de 2006.
  5. 5. “jQuery, a nova onda para JavaScript”,
  6. 6. Porque Surgiu jQuery? De acordo com John Resig, “o foco principal da biblioteca jQuery é a simplicidade. Por que submeter os desenvolvedores ao martírio de escrever longos e complexos códigos para criar simples efeitos?”, e vemos que isto realmente é real no desenvolvimento hoje em dia.
  7. 7. O Foco de jQuery Destina-se a adicionar interatividade e dinamismo às páginas web, proporcionando ao desenvolvedor funcionalidades necessárias à criação de scripts que visem a incrementar de forma progressiva e não obstrutiva a usabilidade, a acessibilidade e o design.
  8. 8. É recomendado utilizar jQuery para: Adicionar efeitos visuais e animações; Acessar e manipular o DOM; Realizar requisições AJAX; Prover interatividade; Alterar conteúdos Modificar apresentação e estilização Simplificar tarefas específicas de JavaScript
  9. 9. OFF – Definição de DOM  Document Object Model- São modelos de objetos( com suas propriedades e métodos), expostos ao programador DHTML. Através do envio de mensagens a estes objetos, o programador a estes objetos, o programador pode explorar como está ocorrendo a interatividade com o usuário.
  10. 10. Como características, pode-se citar que o jQuery Utiliza seletores CSS para localizar elementos componentes da estrutura de marcação HTML da página; Possui arquitetura compatível com a instalação de plug-ins e extensões em geral; É indiferente às inconsistências de renderização entre navegadores; É capaz de interação implícita; Admite programação encadeada; É extensível.
  11. 11. E AJAX, O Que é? AJAX é a sigla em inglês para Asynchronous JavaScript and XML e trata-se de uma técnica de carregamento de conteúdos em uma página web com uso de JavaScript e XML, HTML, PHP, ASP, JSON ou qualquer linguagem de marcação ou de programação capaz de ser recuperada de um servidor.
  12. 12. Para carregar a biblioteca é somente efetuar o carregamento externo: <script type=”text/javascript” src=” jquery.js”> </script>
  13. 13. Usando a biblioteca: <script> $(document).ready( function(){ $(‘h1’).css({“background”:”#CCCCCC”}); } ); </script>
  14. 14. Utilizando jQuery: O símbolo $ é um pseudônimo ou comumente chamado alias da biblioteca, que por sua vez foi escrita com o identificador jQuery, assim pode-se acessá-la com o símbolo $ ou jQuery. Existe também a função jQuery.noConflict() que permite criar um pseudônimo diferente para evitar possíveis conflitos.
  15. 15. <html> <head> <script src="jquery.js"></script> <script> var $j = jQuery.noConflict(); // Use jQuery via $j(...) $j(document).ready(function(){ $j("div").css({“color”:”#cccccc”}); }); $(‘#meuId').hide(); </script> </head> <body> </body> </html>
  16. 16. Voce também pode.... Inserir html passando a marcação html como string. Ex: $(‘<h1>Oi, eu estudo na PUC</h1>’).prependTo(‘body’); E também efetuar a alteração em mais elementos ao mesmo tempo: Ex: $(‘div,li’).css(‘background’,’#fff000’);
  17. 17. Seletores CSS 3 Outra característica que é extremamente expressiva e interessante é que a biblioteca implementa os poderosos seletores CSS 3 mesmo que estas não foram distribuídas ainda, e alguns seletores que pertencem somente à biblioteca. Vemos um exemplo a seguir:
  18. 18. Pseudoseletor :eq() Uma funcionalidade poderosa da biblioteca jQuery é que as seleções retornam um conjunto que pode ser manipulado como array. Isto significa que ao contrário do que ocorre com a linguagem JavaScript formal não há necessidade de construção de loops para se percorrer uma seleção de elementos no DOM. O pseudo seletor :eq() permite selecionar uma ou mais ocorrências de uma seleção jQuery, conforme esclarecem os exemplos a seguir. 1. $('h2:eq(0)'); // seleciona a 1a. ocorrência de h2 2. $('ul li:eq(5)'); // seleciona a 6a. ocorrência do item de uma lista 3. $('p:eq(2n)'); // seleciona parágrafos de ordem ímpar
  19. 19. Outro exemplo: $('#tres') next() .children('li:first-child') .css('fontWeight, 'bold'); Seleciona o elemento com id="tres" (terceira ocorrência de h2), usa o método next() para selecionar o elemento que vem depois dele (lista ul), procura entre os filhos children() de ul aquele que é o primeiro filho first-child e a ele aplica negrito.
  20. 20. Como me encontrar... Fórum Clube da Programação -> www.clubedaprogramacao.com clovesmjunior.blogspot.com -> meu blog Twitter-> http://twitter.com/clovesmjunior
  21. 21. Referências Bibliográficas: http://docs.jquery.com/ jQuery: A Bíblia do Programador JavaScript – Mauricio Samy Silva
  22. 22. Mãos à Obra...

×