O documento descreve a biblioteca jQuery, incluindo sua criação por John Resig em 2006, seu foco na simplicidade ao manipular o DOM e realizar requisições AJAX, e como pode ser usada para adicionar interatividade e efeitos a páginas web.
2. Quem sou Eu?
Faço Sistemas de Informação
Trabalho como Desenvolvedor Java
Sou um entusiasta jQuery!!!!
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. 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.
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. 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. É 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. 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. 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. 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. Para carregar a biblioteca é somente
efetuar o carregamento externo:
<script type=”text/javascript” src=”
jquery.js”>
</script>
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. <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. 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. 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. 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
21. Como me encontrar...
Fórum Clube da Programação ->
www.clubedaprogramacao.com
clovesmjunior.blogspot.com -> meu blog
Twitter-> http://twitter.com/clovesmjunior