Se você está chegando agora na série “jQuery – Início, Meio e Fim”, fique tranquilo. Estou agrupando todos os artigos da série em uma página especial dedicada ao aprendizado destes conceitos. Se você foi apresentado recentemente a biblioteca jQuery, recomendo fortemente a leitura dos três primeiros artigos da série clicando aqui.
Nos artigos anteriores falamos um pouco sobre os fundamentos que regem a biblioteca jQuery. Falamos também sobre seletores CSS, que em parceria com seletores jQuery proporcionam alto poder de fogo ao desenvolvedor. Assim, evoluindo no aprendizado, no artigo de hoje veremos algumas funções padrão do jQuery e, através de exemplos práticos, do dia a dia, será possível entender o funcionamento de cada uma delas.
Conhecendo as funções padrão do jQuery
A biblioteca jQuery, possui algumas funções que formam a “base operacional” da framework. A seguir, veremos de forma detalhada cada uma delas.
- SeletorjQuery.css()
Como já foi mencionado em artigos anteriores, é possível dizer que um dos grandes recursos da biblioteca jQuery é a possibilidade de alterar estilos de elementos HTML em tempo de execução de acordo com a imposição de determinada ação. Pois bem, a função responsável por disponibilizar tal poder ao desenvolvedor é “css()“. A função “css()” deve ser parametrizada através de dois valores, conforme apresenta a Listagem 1. [javascript]
$(‘#ElementoAlvo’).css(‘propriedade’, ‘valor’)
[/javascript]Listagem 1: Utilização da função css()
A utilização é simples, como pode ser notado. O primeiro parâmetro recebido pela função, trata da propriedade CSS a qual deseja-se aplicar ao elemento HTML e, o segundo, trata do valor a ser atribuído ao primeiro. Assim, imaginando um caso hipotético onde desejássemos alterar o padrão visual de determinado parágrafo ao clicar de um botão, poderíamos ter o código apresentado pela Listagem 2.
[html]
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>
jQuery – Demonstração da função “css()”
</title>
<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script></head>
<body>
<p id=”paragrafo”>
Este é um exemplo de demonstração da função “css()” da biblioteca jQuery em ação. Note que, em seu estado inicial,
o texto é de cor preta e background branco, entretanto, ao clicar com o botão, o background do texto torna-se amarelo.
Correto?
</p>
<input type=”button” id=”btnMuda” value=”Mudar estilo >>” /><script type=”text/javascript” language=”javascript”>
$(‘#btnMuda’).click(function () {
$(‘#paragrafo’).css(‘background’, ‘Yellow’).fadeIn();
});
</script></body>
</html>
[/html]Listagem 2: Modificando o estilo do parágrafo com a função “css()“
Agora imagine as muitas as muitas possibilidades disponíveis? Imagine por exemplo que, ao usuário tentar enviar informações através de um formulário de contato em seu site, ao verificar que as informações estão incorretas, você modifique as bordas dos campos cujas informações são inválidas para vermelho, por exemplo, indicando o erro? A Figura 1 apresenta o exemplo da Listagem 2 em ação.
Uma observação importante em relação ao código apresentado pela Listagem 2, é que o script jQuery vem após o parágrafo que ele manipula. Isto ocorre por um motivo muito simples: como JavaScript é uma linguagem interpretada (saiba mais sobre linguagens interpretadas aqui) o código jQuery não conhece todos os elementos que compõem a página, logo, não consegue manipulá-los. Assim, para que a ação possa ser executada corretamente, é preciso que o código de script venha após a interpretação dos elementos manipulados por ele.
- $(expressão, [contexto])
Esta é outra das funções mais importantes do jQuery. Sua utilização é relativamente simples e pode ser visualizado na Listagem 3. [javascript]
$(‘ExpressaoSeletor’, [LimitacaoContexto])
[/javascript]Listagem 3: Modelo de utilização da função
Como é possível perceber, a função em questão trabalha com dois parâmetros: o primeiro faz menção ao elemento a ser manipulado. Neste caso, podemos indicar um seletor CSS, um seletor específico da biblioteca jQuery ou ainda algum elemento HTML. O segundo parâmetro, indica o contexto no qual o jQuery buscará o seletor mencionado no primeiro parâmetro. No segundo parâmetro, é possível limitar a busca a um grupo específico de elementos DOM ou a um elemento específico. Se, por acaso, o segundo parâmetro for omitido, o jQuery entende um contexto global para a busca, ou seja, toda a página.
Para que possamos entender melhor este conceito, vamos imaginar que queiramos manipular de formas diferentes, os parágrafos de uma página. Podemos realizar este tipo de operação utilizando o construtor jQuery ($()) com a opção de contexto, conforme apresenta a Listagem 4.
[html]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>jQuery – Testando a função com parâmetro de contexto</title>
</head>
<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script><script type=”text/javascript” language=”javascript”>
$(document).ready(function () {$(‘#btnTodos’).click(function () {
$(‘p’).css(‘background’, ‘Grey’);
});$(‘#btn1’).click(function () {
$(‘#p1’).css(‘background’, ‘Yellow’);
});$(‘#btn2’).click(function () {
$(‘#p2’).css(‘background’, ‘Yellow’);
});$(‘#btn3’).click(function () {
$(‘#p3’).css(‘background’, ‘Yellow’);
});$(‘#btnParcial’).click(function () {
$(‘p’, $(‘div’)).css(‘background’, ‘Yellow’);
});});
</script><body>
<div>
<p id=”p1″>
Texto do parágrafo 1
</p><p id=”p2″>
Texto do parágrafo 2
</p>
</div>
<p id=”p3″>
Texto do parágrafo 3
</p><input type=”button” id=”btnTodos” value=”Mudar todos os parágrafos” /><br />
<input type=”button” id=”btn1″ value=”Mudar primeiro parágrafo”; /><br />
<input type=”button” id=”btn2″ value=”Mudar segundo parágrafo”; /><br />
<input type=”button” id=”btn3″ value=”Mudar terceiro parágrafo”; /><br />
<input type=”button” id=”btnParcial” value=”Mudar dois primeiros” />
</body>
</html>
[/html]Listagem 4: Exemplo da utilização com e sem a opção de contexto
O código apresentado pela Listagem 4 traz uma diferença básica em relação ao exemplo apresentado pela Listagem 2. Observe as linhas 27, 28 e 29. Na linha 27 estamos indicando que determinada ação deve ocorrer ao clicar do botão “btnParcial“. Até aí, sem novidade. A novidade se encontra na linha 28. A ação a ser executada ao botão “btnParcial” ser clicado é: modificar o background de todos os parágrafos que estejam agrupados por div’s. Note que, neste caso, o contexto válido é justamente o elemento div. Como em nosso exemplo, temos dois parágrafos sendo encapsulados por uma div, os backgrounds modificados são apenas os dois primeiros. A Figura 3 apresenta nosso exemplo em pleno funcionamento.
Figura 2: Testando a função com e sem contexto definidos
- $(html)
Outra função que, se bem utilizada, pode agregar valor a aplicação é utilizar o construtor do jQuery em parceria com uma string HTML (explicando melhor, uma string que represente uma sentença HTML). É importante observar que, o parâmetro passado para o construtor pode ser uma string manual, isto é, uma sentença HTML que você defina manualmente e simplesmente a passe como parâmetro. Além disso, é possível utilizar um gerador de temas/layouts/templates para parametrizar o construtor, ou ainda, utilizar respostas assíncronas (via AJAX).Para que possamos entender melhor a forma de utilização desta função, imaginemos que, ao clicar em determinado botão, precisemos adicionar um novo input do tipo texto a um formulário web qualquer que possuamos em nossa homepage. Poderíamos ter sugestivamente, a solução apresentada pela Listagem 5. [html]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>jQuery – Exemplificando a passagem de sentenca HTML para jQuery</title>
<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script>
</head><script type=”text/javascript” language=”javascript”>
$(document).ready(function () {
$(‘#btnAdicionar’).click(function () {
$(‘<tr><td style=”width:100px; text-align:right;”>Campo:</td><td style=”width:500px; text-align:left;”><input type=”text” /></td></tr>’).prependTo(‘table’);
});
});
</script><body>
<table style=”width:580px; padding:10px;”>
<tr><td style=”width:100px; text-align:right;”>
Campo:
</td><td style=”width:500px; text-align:left;”>
<input type=”text” />
</td></tr>
</table><input type=”button” id=”btnAdicionar” value=”+ Adicionar campo” />
</body>
</html>
[/html]Listagem 5: Adicionando campos dinamicamente a página com sentença HTML e jQuery
Conforme pode ser visualizado no exemplo acima, ao clique do botão “btnAdicionar”, temos novos campos do tipo “text” sendo adicionados dinâmicamente a nossa página web. Imagine agora, a utilidade algo deste tipo, em uma tela de ítens de pedido, por exemplo, onde, os ítens vão sendo adicionados dinamicamente?
Muito embora a técnica seja bem útil, ela possui algumas limitações. Se você pedir para visualizar o código fonte gerado para nossa página, você irá constatar facilmente que, o HTML dos campos adicionados não aparecem, e isso, pode incorrer em alguns problemas. É preciso estar ciente da limitação da técnica para não se decepcionar futuramente :-). A Figura 3 apresenta nosso exemplo em funcionamento.
Figura 3: Construtor jQuery adicionando campos em tempo de execução
- SeletorjQuery.each(callback)
Esta função possui a responsabilidade de percorrer a estrutura DOM e aplicar determinada ação sobre cada elemento encontrado na callback. Sua utilização é simples e, sua correta utilização oferece grande poder de fogo ao desenvolvedor. Exemplificando, imagine que precisemos, ao clicar de um botão, adicionar bordas a todas as div’s de determinada aplicação. Poderíamos realizar esta tarefa utilizando a função each, conforme sugere a Listagem 6.[html]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>jQuery – Função each()</title>
<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script>
<style type=”text/css”>
div { width:300px; height:200px; padding:10px; background:#efefef; }
</style>
</head><script type=”text/javascript” language=”javascript”>
$(document).ready(function () {
$(‘#btnBordas’).click(function () {
$(‘div’).each(function (elementoCorrente) {
$(this).css(‘border’, ‘1px solid #000’);
});
});
});
</script><body>
<div>Texto da div 1</div><p>Texto do parágrafo</p>
<div>Texto da div 2</div>
<p>Texto do parágrafo</p>
<div>Texto da div 2</div>
<input type=”button” id=”btnBordas” value=”+ Adicionar bordas” />
</body>
</html>
[/html]Listagem 6: Função each() em funcionamento
O resultado final do código apresentado pela Listagem 6 pode ser visualizado na Figura 4.
Figura 4: Aplicação exemplo da função each() em funcionamento
Bom, por hoje é isso. No próximo artigo, falaremos um pouco mais a fundo sobre seletores jQuery. Entenderemos como funcionam e como podem ser aplicados de forma eficiente em nossas web applications.
Não se esqueça de deixar seus comentários. Eles são de fundamental importância para melhorarmos a qualidade dos textos. Grande abraço e até o próximo!
Facebook
Twitter
Instagram
LinkedIn
RSS