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 Programação Pular para comentários
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.

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.



	Função jQuery
	
	


	
Este outro elemento se chama elem2

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.

Compartilhe com seus amigos:
Jonathan Lamim
Jonathan Lamim Empreendedor digital, ex-programador (decidi abandonar a carreira após 12 anos), especialista em marketing de conteúdo e agora atuando exclusivamente com Marketing Digital, em projetos de Marketing de Conteúdo, produção de conteúdo para internet, além de escrever ebooks e criar cursos ligados ao marketing digital de um modo geral.
FACEBOOK // TWITTER: @jonathanlamimkt
Quer conversar com o(a) Jonathan, comente:
Carregar comentários
Últimas notícias de Programação
  • Google usa Mulher-Maravilha para ajudar meninas a programar

    Google usa Mulher-Maravilha para ajudar meninas a programar

    Meninas ganham um incentivo extra na hora de aprender a programar, a Mulher-Maravilha.

  • Criando um cadastro de usuário em Java

    Criando um cadastro de usuário em Java

    O objetivo deste artigo é desenvolver uma aplicação em JSE (Java Standard Edition) de inserção de dados utilizando alguns padrões de projeto.

  • Quer aprender PHP? Saiba mais

    Quer aprender PHP? Saiba mais

    Chegou o tão aguardado curso online de PHP do Oficina da Net. Você não pode perder. PHP é uma das linguagens mais usadas no mundo. Os conteúdos que vou mostrar no curso, são exatamente o que você precisa saber para iniciar sua carreira como programador.

  • Formulário de contato em php

    Formulário de contato em php

    Guia do PHP: Aprenda a fazer um formulário em PHP que envia via SMTP autenticado o e-mail para um destinatário.

  • Como fazer um GIF?

    Como fazer um GIF?

    Aprenda a criar um GIF animado de vídeos. Descubra como criar os GIFs, imagens animadas que você vê em na internet.

  • O que priorizar na hora de escolher o hosting para seu site?

    O que priorizar na hora de escolher o hosting para seu site?

    Com o crescimento das ofertas na web, saiba o que você deve levar em consideração na hora de escolher a melhor empresa de hosting para seu empreendimento

  • O que preciso fazer para criar um aplicativo?

    O que preciso fazer para criar um aplicativo?

    Temos visto que desenvolver aplicativos que visam o mercado mobile pode ser mais que uma alternativa rentável, pode colocá-lo no topo, deixá-lo rico. Mas nem tudo são flores, e o aspirante a desenvolvedor de app precisa seguir algumas regras.

  • WEBINAR 3.9

    WEBINAR 3.9

    Venha para o Maker e descubra como tornar o seu negócio mais competitivo.