JQUERY – PARTE 1
Programação de Scripts

jQuery é uma excelente e leve biblioteca para
desenvolvimento rápido de javascripts que
interagem com sua página html, com ela podemos
atribuir eventos, definir efeitos, alterar ou criar
elementos na página, dentre diversas outras
infinidades de ações.


Sem entrar em considerações teóricas mais
profundas e usando uma linguagem despida de
caráter técnico, a biblioteca jQuery se resume a um
arquivo JavaScript gravado com a típica
extensão .js cuja função é simplificar a sintaxe
JavaScript.
Veja dois exemplos de simplificação:


Alerta: A sintaxe jQuery é própria, contudo no
desenvolvimento com seu uso você pode usar a
sintaxe formal JavaScript sempre que necessário.
Por exemplo:
Não existe uma sintaxe jQuery específica para um
pop-up de alerta, mas você pode usar o seu
conhecidoalert("mensagem de alerta").
Quais as vantagens de usar jQuery?








Acesso direto a qualquer componente do DOM, ou seja, não há necessidade de
várias linhas de código para acessar determinados pontos no DOM.
O uso de regras de estilo não sofre qualquer tipo de limitação devido as
inconsistências dos navegadores. Mesmo os seletores CSS3 podem ser usados sem
qualquer restrição.
Manipulação de conteúdos, sem limitações, com algumas poucas linhas de código.
Suporte para toda a gama de eventos de interação com o usuário sem limitações
impostas pelos navegadores.
Possibilidade de inserir uma grande variedade de efeitos de animação com uma
simples linha de código.
Uso simplificado e sem restrições com AJAX e linguagens de programação, como
PHP e ASP.
Simplificação na criação de scripts.
Emprego cross-browser.
Onde eu consigo o arquivo da biblioteca
jQuery?

jquery-1.2.6.jsTrata-se de um arquivo JavaScript
comentado e com espaçamento entre as linhas do
código. Seu tamanho é de 97.8 KBFoi criado com a
finalidade de poder ser facilmente lido e
entendido por quem se disponha a estudá-lo com
qualquer finalidade.Download
em: http://code.google.com/p/jqueryjs/downloads
/detail?name=jquery-1.2.6.js

jquery-1.2.6.min.jsTrata-se do mesmo arquivo
JavaScript no qual foram retirados todos os
espaçamento do código. Seu tamanho é de 54.5
KBé uma versão mais compacta que a versão
anterior e é a recomendada para uso em
desenvolvimento e hospedagem definitiva para o
site no ar. Use esta versão nos seus
projetos.Download
em: http://code.google.com/p/jqueryjs/downloads
/detail?name=jquery-1.2.6.min.js
Como eu instalo a biblioteca jQuery?


A biblioteca jQuery não requer instalação. Por se
tratar de um arquivo JavaScript formal, basta que
você crie um link para o arquivo, na seção head do
documento onde o script irá rodar, tal como faz
com qualquer arquivo JavaScript tradicional.
Supondo que você fez o download e descompactou
a versão mini da biblioteca, crie o link como
mostrado a seguir:
Como eu instalo a biblioteca jQuery?

<script type="text/javascript" src="../jquery1.2.6.mini.js"></script>
Sintaxe do jquery






A sintaxe jQuery é feito sob medida para selecionar
elementos HTML e realizar alguma ação no elemento s.
A sintaze basica é: $(selector).action()
O sinal $ define aceso ao jequery jQuery
O (seleção) e usando para procurar elementos do HTML
O evento action() esta associado ao metodo
Exemplos:




$(this).hide() – esconde o elemento corrente.
$("p").hide() – esconde todas as tags <p>.
$(".test").hide() – esconde todos os elementos da classe="test".
$("#test").hide() – esconde todos os elementos do id="test".
O evento Document Ready


Isso é para evitar qualquer código jQuery seja
executado antes que o documento é terminar de
carregar.
É uma boa prática para aguardar o documento
para ser completamente carregados e prontos
antes de trabalhar com ele. Isso também permite
que você tenha seu código JavaScript antes do
corpo do documento, na seção da cabeça.
O evento Document Ready

$(function(){
// jQuery methods go here...
});
Seletores JQuery



Seletores jQuery é uma das partes mais
importantes da biblioteca jQuery.
Seletores de consulta permitem selecionar e
manipular elementos HTML (s).
Com seletores jQuery você pode encontrar
elementos com base em sua ID, classes, tipos,
atributos, valores de atributos e muito mais. É com
base nos seletores CSS existentes, e, além disso, tem
alguns próprios seletores personalizados.
Seletores JQuery


Todos os tipos de seletores em jQuery, começam
com o sinal de dólar e parênteses: $ ().
SELETOR POR TIPO DE ELEMENTO
 elementos
com base em seus nomes de marca.
 Você pode selecionar todas os TAGS <p> em uma
página como esta.
 $("p")
Seletores JQuery
Quando um usuário clica em um botão, todos os
elementos <p> será oculto:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
O seletor por #id




O jQuery seletor # id usa o atributo id de uma tag
HTML para encontrar o elemento específico.
Uma id deve ser único dentro de uma página,
então você deve usar o seletor # id quando você
quiser encontrar um elemento único, exclusivo.
Para encontrar um elemento com um id específico,
escrever um caracter, seguido do ID do elemento:
$("#test")
O seletor por #id


Quando um usuário clica em um botão, o elemento
com id = "teste" será escondido:
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
O seletor por .Classe




o seletor de classe jQuery encontra elementos com
uma classe específica.
$(".test")
Exemplo
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Mais exemplos de seletores






$("*") Todos os elementos
$(this) seleciona o elemento atual
$("p.intro") seleciona a tag P asssociao com a classe
intro
$("p:first") seleciona a primeira tag P
$("ul li:first") seleciona a primeira ta <li> da
primeira tag <ul>
$("ul li:first-child") seleciona o primeiro <li> de
todos elementos <ul>
Mais exemplos de seletores




$("[href]") seleciona todos os elementos com o
atributo HREF
$(":button seleciona todos os <button> elementos e
<input> os objetos type="button“
$("tr:even") seleciona todas as tags pares <tr>
$("tr:odd") seleciona todas as tags impares <tr>
Eventos e Métodos


jQuery é feito sob medida para responder a
eventos em uma página HTML.
O que são eventos?
 Todas
as ações do diferente do visitante que uma
página web pode responder são chamados de
eventos.
 Um evento representa o exato momento em que algo
acontece.
Eventos e Métodos
Sintaxe




Em jQuery, eventos mais DOM tem um método jQuery
equivalente.
Para atribuir um evento de clique para todos os
parágrafos em uma página, você pode fazer isso:
$("p").click();
$("p").click(function(){
// action goes here!!
});
Eventos mais comuns

click()
O
método click () atribui uma função de manipulador
de eventos a um elemento HTML.
 A função é executada quando o usuário clica no
elemento HTML.
 O exemplo a seguir diz: Quando um evento de clique
dispara em um elemento <p>; ocultar o elemento <p>
atual:
Eventos mais comuns

$("p").click(function(){
$(this).hide();
});
Eventos mais comuns

dblclick()
O
método dbclick () atribui uma função de
manipulador de eventos a um elemento HTML.
 A função é executada quando o usuário clica duas
vezes no elemento HTML:
 $("p").dblclick(function(){
$(this).hide();
});
Eventos mais comuns

mouseenter()
O
método mouseenter () atribui uma função de
manipulador de eventos a um elemento HTML.
 A função é executada quando o ponteiro do mouse
entra o elemento HTML:
 $("#p1").mouseenter(function(){
alert("You entered p1!");
});
Eventos mais comuns

mouseleave()
O
método mouseleave () atribui uma função de
manipulador de eventos a um elemento HTML.
 A função é executada quando o ponteiro do mouse
deixa o elemento HTML:
 $("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
Eventos mais comuns

mousedown()
O
método mousedown () atribui uma função de
manipulador de eventos a um elemento HTML.
 A função é executada quando o botão esquerdo do
mouse é pressionado para baixo, enquanto o mouse
está sobre o elemento HTML:
 $("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
Eventos mais comuns

mouseup()
O
método mouseup () atribui uma função de
manipulador de eventos a um elemento HTML.
 A função é executada quando o botão esquerdo do
mouse é liberado, enquanto o mouse está sobre o
elemento HTML:
 $("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
Eventos mais comuns

hover()
O método hover() leva duas funções e é uma combinação
das mouseenter () e mouseleave () métodos.
 A primeira função é executada quando o mouse entra o
elemento HTML, ea segunda função é executada quando o
mouse deixa o elemento HTML:
 $("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

Eventos mais comuns

focus()
O
método focus () atribui uma função de manipulador
de eventos para um campo de formulário HTML.
 A função é executada quando o campo de formulário
recebe o foco:
 $("input").focus(function(){
$(this).css("background-color","#cccccc");
});
Eventos mais comuns

blur()
O
método blur () atribui uma função de manipulador
de eventos para um campo de formulário HTML.
 A função é executada quando o campo de formulário
perde o foco:
 $("input").blur(function(){
$(this).css("background-color","#ffffff");
});