Upload
junior-junior
View
4.107
Download
0
Embed Size (px)
DESCRIPTION
Este foi a apresentação para o minicurso ministrado na semana da computação na Puc Minas no segundo semestre de 2009.
Citation preview
jQueryA poderosa biblioteca JavaScript.
Cloves Moreira Junior
Quem sou Eu?
Faço Sistemas de InformaçãoTrabalho como Desenvolvedor JavaSou um entusiasta jQuery!!!!
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).
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.
“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 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.
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.
É recomendado utilizar jQuery para:Adicionar efeitos visuais e animações;Acessar e manipular o DOM;Realizar requisições AJAX;Prover interatividade;Alterar conteúdosModificar apresentação e estilizaçãoSimplificar tarefas específicas de
JavaScript
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.
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.
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.
Para carregar a biblioteca é somente efetuar o carregamento externo:
<script type=”text/javascript” src=” jquery.js”>
</script>
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 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.
<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>
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’);
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:
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 lista3. $('p:eq(2n)'); // seleciona parágrafos de ordem ímpar
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.
Como me encontrar...
Fórum Clube da Programação -> www.clubedaprogramacao.com
clovesmjunior.blogspot.com -> meu blogTwitter-> http://twitter.com/clovesmjunior
Referências Bibliográficas:
http://docs.jquery.com/jQuery: A Bíblia do Programador
JavaScript – Mauricio Samy Silva
Mãos à Obra...