Veremos com detalhe a função mais importante do jQuery, e para isto
vamos ver o seu uso mais comum para começar: selecionar elementos em
uma página.
O funcionamento do jQuery se baseia nesta função. Como é dito na
própria documentação do framework, “tudo em jQuery está baseado nesta
função ou a usa em alguma forma.”
A função jQuery serve para fazer várias coisas, segundo os
parâmetros passados a ela. O uso mais simples é selecionar elementos ou
grupos de elementos de uma página web, mas também serve para criar
elementos ou para fazer um callback de funções.
Na realidade esta função pode ser chamada com o símbolo dólar $(), o
que seria uma maneira resumida de utilizá-la diminuindo o número de
caracteres no código, o tempo de carregamento e o peso da página de
scripts.
Vejamos, então, os usos distintos desta função, segundo os parâmetros que ela receber.
Função jQuery enviando um seletor e um parâmetro
Este uso da função serve para selecionar elementos da página. Recebe
uma expressão e se encarrega de selecionar todos os elementos da página
que se correspondem com ela. Adicionalmente podemos passar um parâmetro de
maneira opcional. Se não for enviado um parâmetro, seleciona os
elementos do documento completo, se indicamos um parâmetro,
conseguiremos selecionar elementos somente dentro desse parâmetro.
A expressão que devemos enviar obrigatoriamente como primeiro
prâmetro serve de seletor. Nesse primeiro parâmetro temos que utilizar
uma notação especial para poder selecionar elementos de diversas
maneiras e a verdade é que as possibilidades de seleção com jQuery são
muito grandes.
Este passo de seleção de elementos é básico em qualquer script
jQuery, para poder atuar em qualquer lugar da página e fazer nossos
efeitos e utilidades javascript sobre o lugar que queremos.
Vejamos uma forma de uso desta função:
var elem1 = $("#elem1?);Com esta linha de código selecionamos um elemento da página que tem
um identificador (atribto id do elemento HTML) “elem1? e gravamos a
informação em uma nova variável chamada elem1.
Nota: Como disse, $() é um resumo, ou forma curta de chamar a função jQuery. Também poderíamos ter escrito a linha desta maneira:
var elem1 = jQuery("#elem1?);Logo, poderíamos fazer qualquer coisa com este elemento selecionado, como o seguinte:
elem1.css("background-color", "#ff9999?);Este método css() não forma parte do núcleo, mas serve para trocar
atributos CSS de um elemento, entre outras coisas. Assim, com essa
linha, trocaremos a cor de fundo do elemento selecionado anteriormente,
que foi gravado na variável elem1.
Agora vejamos outro exemplo da seleção de elemento com a função dólar $().
var divs = $("div");
divs.css("font-size", "32pt");Aqui selecionamos todas as tags DIV da página, e colocamos um tamanho de letra de 32pt.
Veja abaixo o código fonte de uma página de exemplo.
OBS.: Não se esqueça de baixar a biblioteca jQuery.
<html>
<head>
<title>Função jQuery</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var elem1 = $("#elem1?);
//poderíamos ter escrito: var elem1 = jQuery("#elem1?);
elem1.css("background-color", "#ff9999?);
var divs = $("div");
//poderíamos ter escrito: var elem1 = jQuery("#elem1?);
divs.css("font-size", "32pt");
});
</script>
</head>
<body>
<div id="elem1?>Este elemento se chama elem1</div>
<div id="elem2?>Este outro elemento se chama elem2</div>
</body>
</html>Se quisermos, é possível utilizar o segundo parâmetro opcional, que é o
contexto. Com ele conseguiríamos selecionar elementos que pertencem a
uma zona concreta do nosso documento. Por padrão, o contexto é uma
página completa, mas podemos restringir desta forma:
var inputs = $("input",document.forms[0]);
inputs.css("coror", "red");Com a primeira linha conseguimos selecionar todos os elementos INPUT
que pertencem ao primeiro formulário da página. Com a segunda linha
estaríamos trocando a cor do texto destes elementos. Isto não
selecionaria os INPUT dos outros formulários.
Agora, para completar um pouco mais estas notas, vejamos outro
exemplo onde selecionamos todos os parágrafos (tags P), mas
restringimos o contexto unicamente aos que estão dentro de uma div com
id=”div1?.
var paragrafos_div1 = $("p","#div1?);
paragrafos_div1.hide()Na segunda linha lançamos o método hide() sobre os parágrafos selecionados, assim conseguimos ocultá-los.
Pratique bastante o uso dessa função!. Em breve teremos novos artigos sobre jQuery.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?