jQuery - A poderosa Biblioteca JavaScript - Minicurso

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, 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údos
Modificar apresentação e estilização
Simplificar 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 lista
3. $('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 blog
Twitter-> http://twitter.com/clovesmjunior

Referências Bibliográficas:
http://docs.jquery.com/
jQuery: A Bíblia do Programador
JavaScript – Mauricio Samy Silva

jQuery - A poderosa Biblioteca JavaScript - Minicurso

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (13)

Similaire à jQuery - A poderosa Biblioteca JavaScript - Minicurso

Similaire à jQuery - A poderosa Biblioteca JavaScript - Minicurso (20)

jQuery - A poderosa Biblioteca JavaScript - Minicurso