jQuery - A poderosa Biblioteca JavaScript - Minicurso

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...

Technology

jQuery - A poderosa Biblioteca JavaScript - Minicurso