A função jQuery ou função $()

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.

Por | @jonathanlamimkt Programação

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 frameworks, “udo 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 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 a possibilidade 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 pois, 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, podemos utilizar o segundo parâmetro opcional, que é o contexto. Com ele conseguiriamos selecionar elementos que pertencem a uma zona concreta do nosso documento. Por padrão o contexto é uma página completa, mas podemos restringis 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, e em breve novos artigos sobre jQuery.

Mais sobre: jquery, javascript, função dólar
Share Tweet
DESTAQUESMais compartilhados
Comentários
AINDA NÃO SE INSCREVEU?

Vem ver os vídeos legais que
estamos produzindo no Youtube.