Outros usos da função $()

A função jQuery(), ou com sua abreviação $(), possui outros usos interessantes quando lhe enviamos parâmetros diferentes daqueles vistos no artigo anterior.

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 20/1/11
Valorize este artigo:
No capítulo anterior do manual de jQuery vimos umas primeiras notas sobre o Core de jQuery e começamos a explicar a função jQuery(), que é a mais importante neste framework Javascript. Agora veremos como esta função, que também pode ser acessada por meio do símbolo dólar $(), pode ter outras aplicações úteis, quando recebe parâmetros diferentes dos vistos anteriormente.

Função jQuery passando um HTML

Uma possibilidade de trabalhar com a função jQuery é enviar-lhe uma string com um HTML. Isto cria esses elementos na página e lhes coloca os conteúdos indicados na string. Atenção, que o HTML tem que estar bem formado para que funcione em qualquer navegador, isto é, que se coloquem etiquetas que possam ser inseridas no BODY da página e que todas as etiquetas tenham seu fechamento.

var novosElementos = $("<div>Elementos que crio em <b>tempo de execucao</b>.<h1>Em execucao...</h1></div>");

Isto criará na variável novosElementos os elementos HTML que tenhamos especificado na string. Em seguida, poderemos fazer o que quisermos com eles, como colocá-los na página com o método appendTo(), por exemplo, desta maneira:

novosElementos.appendTo("body");

Nota: o método appendTo() não pertence ao Core, mas é bom utilizá-lo e assim fazer algo com os elementos que acabamos de criar.

Vejamos o código completo de uma página que usa este exemplo:

<html>
<head>
   <title>funcao jquery</title>
   <script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
   var novosElementos = $("<div>Estes elementos ..</b>.<h1>Título...</h1></div>");
   novosElementos.appendTo("body");
});

</script>
</head>
<body>
<p>Isto é o corpo da página, que tem pouca coisa...</p>
</body>
</html>

Agora, deixamos o link para ver o exemplo em uma página à parte.

Função jQuery passando elementos

Outro possível valor que podemos enviar à função jQuery é um elemento ou uma hierarquia de elementos do DOM, para ampliá-los com as funcionalidades que aporta o framework aos elementos.

Por exemplo:

var documento = $(document.body);
documento.css("background-color", "#ff8833");

Com a primeira linha criamos uma variável chamada documento, à que atribuímos o valor que retorna o método $() enviando o parâmetro document.body.

Nota: A variável document.body corresponde a um elemento do DOM de Javascript, criado automaticamente pelo navegador e faz referência ao documento da página.

Com isso conseguimos um objeto que é o corpo da página (document.body) ao que adicionamos todas as funcionalidades do framework jQuery para os elementos.

Assim, na linha seguinte invocamos o método css() sobre a variável "documento", que é o próprio documento da página ampliado. Por isso o método css(), que é de jQuery(), funciona sobre esse objeto.

Algo como isto não funcionaria porque estaríamos tentando lançar um método de jQuery diretamente sobre o objeto DOM sem havê-lo ampliado:

document.body.css("background-color", "#ff8833");

Não funcionará porque não podemos chamar um método jQuery sobre um objeto DOM, se não o tivermos ampliado com a função $().

Nota: Esta função aceita documentos XML e objetos Window, embora não sejam propriamente elementos do DOM.

Podemos ver agora uma página onde se encontra este exemplo em funcionamento.

Função jQuery passando uma função

Na função $() uma última possibilidade é passar-lhe como parâmetro uma função e então o que temos é uma função callback que se invoca automaticamente quando o DOM está pronto.

Nota: Já explicamos o que era um callback no artigo Callback de funções jQuery

Nessa função podemos colocar qualquer código, que se executará somente quando o DOM estiver pronto para receber comandos que o modifiquem. Com isso, esta função nos serve perfeitamente para fazer qualquer coisa dentro da página que afete o DOM.

Exemplo:

$(function (){
   //Aqui posso fazer qualquer coisa com o DOM
});

Este callback com a função jQuery $() seria uma abreviatura de outro método que temos visto repetidas vezes ao longo deste manual para definir ações quando o DOM está pronto:

$(document).ready(function(){
   //Aqui posso fazer qualquer coisa com o DOM
});

Inclusive podemos fazer vários callback, para adicionar diferentes ações a serem realizadas quando o DOM estiver preparado, as vezes que queiramos, igual a quando definíamos o evento ready() sobre o objeto document.

Podemos ver o código de uma página que faz uso da função dólar, passando por parâmetro uma função.

<html>
<head>
   <title>funcao jquery</title>
   <script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>

$(function (){
   var documento = $("p");
   documento.css("background-color", "#ff8833");
});

$(function (){
   var documento = $("b");
   documento.css("color", "#fff");
});

//se colocado aqui este código, não funcionaria, porque o DOM não estaria pronto para realizar ações
//var documento = $("p");
//documento.css("background-color", "#ff8833");

</script>
</head>
<body>
<p><b>Parágrafo</b>!!</p>
<p>Outro <b>parágrafo</b></p>
</body>
</html>

Pode ser visto em funcionamento em uma página à parte.

Até aqui vimos todas as possibilidades que existem para trabalhar com a função jQuery. Realmente ao longo deste manual já a tínhamos utilizado muitas vezes e de agora em diante vamos continuar usando, já que qualquer coisa que desejemos fazer em uma página web vai depender em algum momento de invocar $() em alguma de suas variantes.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato