jQuery – Seletores e estilização

Esta matéria tem por finalidade mostrar os fundamentos básicos de seleção e estilização com uso da biblioteca jQuery.

Leia Mais em: Debugando.com

Uma aula prática de jQuery

Nomenclatura

Durante o texto vou me referir à função $ como função jQuery, pois na verdade elas são a mesma coisa. A diferença é que a função $ não estará disponível se você optar por utilizá-la sem conflitos.

Como começar

Antes de escrever qualquer código JavaScript, faço questão de utilizar aquela técnica clássica onde o nosso código JS começa a ser executado apenas quando o DOM terminou de ser carregado:

$(document).ready(function() {
    // aqui vai o código específico da sua aplicação
});

Esse código eu deixo em um arquivo externo, e o referencio a partir da tag <script> presente no meu template HTML (independente do framework que você estiver – ou não – utilizando, manter o código JS fora do seu template HTML é uma forma simples de separar apresentação e comportamento).

Deste ponto em diante passo a omitir essas linhas de inicialização. Todo o código que for exibido pode ser posicionado na linha 2 da listagem de código acima.

Leia Mais em: Debugando.com

Uma aula prática de jQuery

Nomenclatura

Durante o texto vou me referir à função $ como função jQuery, pois na verdade elas são a mesma coisa. A diferença é que a função $ não estará disponível se você optar por utilizá-la sem conflitos.

Como começar

Antes de escrever qualquer código JavaScript, faço questão de utilizar aquela técnica clássica onde o nosso código JS começa a ser executado apenas quando o DOM terminou de ser carregado:

$(document).ready(function() {
    // aqui vai o código específico da sua aplicação
});

Esse código eu deixo em um arquivo externo, e o referencio a partir da tag <script> presente no meu template HTML (independente do framework que você estiver – ou não – utilizando, manter o código JS fora do seu template HTML é uma forma simples de separar apresentação e comportamento).

Deste ponto em diante passo a omitir essas linhas de inicialização. Todo o código que for exibido pode ser posicionado na linha 2 da listagem de código acima.

Leia Mais em: Debugando.com

Inserindo dados usando AJAX e jQuery

O jQuery é um framework de Javascript na minha opinião de fácil apreendizado.

Este artigo é composto por um exemplo que aboradará a inserção de dados usando jQuery e AJAX em um formulário simples.

Arquivo exemplo1.js:

/**
$(): utilizado em todas as funções que devem ser referenciadas a jQuery
document: expressão que indica o documento HTML
ready(): associado a leitura do documento enquanto está sendo carregado
*/
$(document).ready(function(){

    // Crio uma variável chamada $forms que pega o valor da tag form
    $forms = $('form');

    // hide(): esconde a div cadastro enquanto carrega o ready()
    $('#cadastro').hide();

    /**
     bind(): é manipulador de evento exemplo submit, click e/ou double click
     a: é a tag <a href>
    */

    $('a').bind('click', function(){
        switch(this.id){
            case 'c':
                $('#cadastro').show(); // show(): mostra div que está oculta (hide()).
                return false;
                break;
        }
    })

    $forms.bind('submit', function(){

        /**
        Crio a variável $button
        attr(): set a propriedade de um atributo, nesse exemplo foi desativado o botão com a tag button
        */
        var $button = $('button',this).attr('disabled',true);

        /**
       Criada a variável params
        serialize(): pega os dados inseridos no formulário
        */
        var params = $(this.elements).serialize();

        var self = this;
        $.ajax({

            // Usando metodo Post
            type: 'POST',

            // this.action pega o script para onde vai ser enviado os dados
             url: this.action,

            // os dados que pegamos com a função serialize()
            data: params,

            // Antes de enviar
            beforeSend: function(){
                // mostro a div loading
                $('#loading').show();

                // html(): equivalente ao innerHTML
                $('#loading').html("Carregando...");
            },
            success: function(txt){
                // Ativo o botão usando a função attr()
                $button.attr('disabled',false);

                // Escrevo a mensagem
                $('#loading').html(txt);

                // Limpo o formulário
                self.reset();
            },

            // Se acontecer algum erro é executada essa função
            error: function(txt){
                $('#loading').html(txt);
            }
        })
        return false;
    });
});

CSS:

body{
    font: 12px tahoma,verdana;
    margin:0;padding:0;
}
#loading{
    display: none;
    text-align: center;
}
a,a:active,a:hover {
    text-decoration:none;
    color:#000;
    outline:none;
}
ul {
    margin-left:5px;
}
li {
    list-style:none;
}
li a {
    float: left;
    display:block;
    background:#f1f1f1;
    width:50px;
    padding:3px;
    text-align:center;
    margin-right:1px;
    border:1px solid #555;
}
li a:hover {
    display:block;
    background:#f0f0f0;
}
#main{
    height: 100%;
    border:none;
}
#top {
    height: 50px;
}
#middle{
    margin-top:5px;
}
fieldset {
    padding:8px;
    border:1px solid #999;
}
button {
    background:#ccc;
    padding:0.5px;
}
.border {
    border: 1px solid black;
}

Arquivo index.php:

<html>
<head>
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="GENERATOR" content="PHPEclipse 1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery</title>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="exemplo1.js"></script>
</head>
<body>
<div id="main">
    <div id="loading"></div>
    <div id="top">
          <ul>
            <li><a href="" id="c">Cadastro</a></li>
          </ul>
    </div> <!-- top -->
    <div id="middle">
          <div id="cadastro">
              <form action="insert.php">
                  <fieldset>
                  <legend>Cadastro usando jQuery</legend>
                  <label>Nome</label><br/>
                  <input type="text" name="nome" size="31" maxlength="30" class="border"/><br />
                  <label>Telefone</label><br/>
                  <input type="text" name="telefone" size="31" maxlength="11" class="border" /><br/>
                  <label>E-mail</label><br/>
                  <input type="text" name="email" size="31" maxlength="100" class="border" /><br/>
                <button>Cadastrar</button>
                </fieldset>
              </form>
          </div> <!-- cadastro -->
    </div> <!-- middle -->
</div> <!-- main -->
</body>
</html>

Arquivo insert.php:

<?php
$nome = strip_tags(trim($_POST['nome']));
$telefone = strip_tags(trim($_POST['telefone']));
$email = strip_tags(trim($_POST['email']));
if(empty($nome) || empty($telefone) || empty($email)){
        echo"Você deve preencher todos os campos!";
        die();
}

$conn = mysql_connect("SERVIDOR", "USUÁRIO", "SENHA");
mysql_select_db("BANCO");

$sql = "INSERT INTO cadastro (nome, telefone, email) VALUES ('".$nome."', '".$telefone."', '".$email."')" or die(mysql_error());
mysql_query($sql);
mysql_close($conn);
echo"Cadastro realizado com sucesso!";
?>

Espero que o exemplo acima ajude e que incentive o uso da jQuery.

Botões de voltar e avançar funcionando com JQuery

Sabemos que fazer requisições assíncronas ao servidor é muito bom, mas às vezes tem seus custos. Uma das coisas que acontecem e muitas vezes atrapalham o usuário que não está acostumado é a perda do histórico de navegação dos botões de voltar avançar do navegador.

A forma de contornar isso, descrita abaixo, é usando o plugin do JQuery jquery.history

Primeiramente, precisamos adicionar a biblioteca JQuery na lista de scripts:

<script type=”text/javascript” src=”jquery.js”></script>

Depois disso temos que adicionar o plugin jquery.history

<script type=”text/javascript” src=”jquery.history.js”></script>

Agora vamos cadastrar a função que tem o poder de adicionar histórico ao browser:

<script type=”text/javascript”>
function pageload(hash) {

if(hash) {

$(“#load”).load(hash + “.html”);
} else {
$(“#load”).empty();
}
}

$(document).ready(function(){

$.historyInit(pageload);

$(“a[@rel=´imasters´]“).click(function(){
var hash = this.href;
hash = hash.replace(/^.*#/, ´´);
$.historyLoad(hash);
return false;
});
});
</script>

A função $.historyInit(pageload) permite que a função que está dentro do parâmetro, ou seja, pageLoad, adicione os históricos de navegação, lembrando que a função pageLoad poderá ser modificada de acordo com as necessidades do projeto – pois ela está bem simples no exemplo – e está apenas carregando páginas html de acordo com o parâmetro, mas serve para o entendimento do artigo, que é deixar funcionando os botões de voltar e avançar do navegador.

Se colocarmos o seguinte código html no conteúdo da página:

<a href=”#1″ rel=”imasters”>página 1</a><br />
  <a href=”#2″ rel=”imasters”>página 2</a><br />
  <a href=”#3″ rel=”imasters”>página 3</a><br />

  <hr />
  Conteúdo:<br />

  <div id=”load”></div>

Poderemos ver que o site funcionará como se estivéssemos mudando de página a cada link, mas estamos na verdade mudando apenas o conteúdo da div <div id="load"></div> , que é exatamente o que queremos.

Pronto! Agora podemos utilizar o AJAX na página como quisermos e o histórico de navegação será automaticamente adicionado ao navegador.

Para ver o exemplo acima funcionando acessem o link http://www.alantiel.com/~file/jqueryhistory

Ordenar tabelas no navegador com técnicas javascript

Olá, a todos! Vou demonstrar uma ótima ferramenta para complementar o trabalho de renderização de dados no cliente. A única dependência é a utilização do framework de desenvolvimento JQuery.

Renderizar dados com tabelas é uma técnica muito antiga e largamente utilizada. Tabelas são muito úteis para gerar relatórios e visualização dos dados de forma prática. Com o crescimento do fluxo de dados na web, e o surgimento de novas necessidades dos usuários da web em busca de informações úteis, foi preciso criar formas para ordenação de dados, pois isso facilita bastante no processo de busca da informação, pois tendo a possibilidade de deixar os dados ordenados pela coluna de nome ou de data de modificação, por exemplo, temos bastante controle dos dados, e hoje em dia já é bem comum ver sites que fazem esse tipo de tratamento.

A solução trivial que muitos sites utilizam é para cada click em determinado título de coluna, fazemos requisições para o servidor e trazemos os dados novamente para o browser. Essa técnica funciona, mas não é uma solução viável para um sistema com muitos dados, e até mesmo para poucos dados não precisamos deixar o usuário esperando essa recarga quando temos soluções melhores.

Vamos à prática!

Temos a seguinte tabela para ordenar:

<table id=”tablesorter-imasters”>
<thead>
<tr>
    <th>Codigo</th>
    <th>Nome</th>
    <th>Idade</th>
    <th>E-mail</th>
    <th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
    <td>1</td>
    <td>João Pereira dos Santos Neto</td>
    <td>28</td>
    <td>jpdsn_emailteste@gmail.com</td>
    <td>http://www.jpdnteste.com</td>
</tr>
<tr>
    <td>2</td>
    <td>Maria Antonia da Silva Filho</td>
    <td>37</td>
    <td>madsf_emailteste@gmail.com</td>
    <td>http://www.madsfteste.com</td>
</tr>
<tr>
    <td>3</td>
    <td>José da Costa Souza Junior</td>
    <td>19</td>
    <td>jdcasj_emailteste@gmail.com</td>
    <td>http://www.jdcasjteste.com</td>
</tr>

</tbody>
</table>

Essa é uma tabela html comum nos padrões W3C, com as tags “thead” para definir a área dos títulos e a “tbody” para definir onde está o corpo da tabela. Essa tabela pode perfeitamente vir de um banco de dados, xml, json… whatever, só depende da imaginação.

Para deixarmos essa tabela ordenável diretamente pelo cliente, é bem simples, precisamos importar a bilblioteca do JQuery e do JQuery table para a página:

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery.tablesorter.js”></script>

Essas bibliotecas estão no link de download no final do artigo, junto com um arquivo de css para uma estilização visual da tabela.

Agora que temos a biblioteca e seus recursos em nossa página, basta definir o comportamento para a tabela. No nosso caso temos a tabela com id = tablesorter-imasters.

Basta adicionarmos a instrução no comportamento com sistaxe JQuery, abaixo dos imports citados acima, assim:

<script type=”text/javascript”>
$(function() {
            //aqui podem ter todas as outras instruções JQuery do site, sem perda
$(“#tablesorter-imasters”).tablesorter();
            //aqui podem ter mais instruções JQuery, não importa a ordem
});
</script>

Pronto, agora temos uma tabela com dados ordenáveis de maneira bem simples…

Para quem quiser ver o exemplo completo, acesse este link.

Visão geral sobre o JQuery

No dia 22 de agosto de 2005 John Resig, um desenvolvedor americano profundo conhecedor de JavaScript, autor do livro Pro JavaScript Techniques, membro da Corporação Mozilla e graduado em ciência da computação no Rochester Institute of Technology, escreveu em seu blog um artigo relatando sua frustração com a maneira verbosa de se escrever JavaScript para obter os resultados pretendidos.

Aproximadamente cinco meses após a publicação do artigo, John Resig apresentou publicamente os resultados de seus estudos que visavam a simplificar a criação com aquela linguagem. Os resultados foram apresentados em uma palestra intitulada “jQuery a nova onda para JavaScript“, proferida no BarCampNYC – Wrap Up realizado no dia 14 de janeiro de 2006. Ali nasceu a biblioteca.

O próprio John Resing define sua criação assim:

O foco principal da biblioteca jQuery é a simplicidade. Por que submeter os desenvolvedores ao martírio de escrever longos e complexos códigos para criar simples efeitos?

E, sem dúvida, ele estava em um momento de rara inspiração quando assim definiu, pois soube resumir muito bem jQuery. Uma maneira simples e fácil de escrever JavaScript colocada ao alcance não só de programadores experientes como também de designers e desenvolvedores com pouco conhecimento de programação.

Quanto custa jQuery?

jQuery é uma biblioteca JavaScript disponibilizada como software livre e aberto, cujo emprego e uso é regido segundo as regras de licença estabelecidas pelo MIT – Massachusetts Institute of Technology e pelo GPL – GNU General Public License. Isto, resumidamente, significa que você pode usar a biblioteca gratuitamente tanto em desenvolvimento de projetos pessoais como comerciais. Para maiores detalhes sobre estes tipos de licença consulte os seguintes endereços na internet:

http://pt.wikipedia.org/wiki/Mit_license

http://pt.wikipedia.org/wiki/GNU_General_Public_License

É muito difícil o aprendizado de programação com uso de jQuery?

A mesma filosofia que norteou a criação da biblioteca – simplificar tarefas complexas – aplica-se ao seu aprendizado. Com pouquíssimo tempo de estudo você estará apto a desenvolver animações e criar interações de alto impacto visual, sem necessidade de intrincados e complexos scripts.

Os primeiros resultados são conseguidos com pouco aprendizado, contudo, como as possibilidades de emprego da biblioteca não se limitam a criar animações e interações simples, o domínio do assunto somente virá com mais tempo de estudo. Contudo, mesmo em fase avançada, a curva de aprendizado cresce muito mais rapidamente do que aquela para o aprendizado das técnicas avançadas de JavaScript.

Como pré-requisitos para estudo de jQuery você deverá ter um razoável conhecimento da sintaxe básica de JavaScript e um sólido entendimento dos seletores CSS2.1 e dos seletores CSS3. A sintaxe da biblioteca fundamenta-se nestes seletores.

Afinal, o que significa biblioteca jQuery?

Sem entrar em considerações teóricas mais profundas e usando uma linguagem despida de caráter técnico, a biblioteca jQuery se resume a um arquivo JavaScript gravado com a típica extensão .js cuja função é simplificar a sintaxe JavaScript.

Veja dois exemplos de simplificação:

Alerta: A sintaxe jQuery é própria, contudo no desenvolvimento com seu uso você pode usar a sintaxe formal JavaScript sempre que necessário. Por exemplo: Não existe uma sintaxe jQuery específica para um pop-up de alerta, mas você pode usar o seu conhecido alert(“mensagem de alerta”).

Quais as vantagens de usar jQuery?

As principais vantagens do uso de jQuery sobre JavaScript tradicional são:

• Acesso direto a qualquer componente do DOM, ou seja, não há necessidade de várias linhas de código para acessar determinados pontos no DOM.
• O uso de regras de estilo não sofre qualquer tipo de limitação devido às inconsistências dos navegadores. Mesmo os seletores CSS3 podem ser usados sem qualquer restrição.
• Manipulação de conteúdos, sem limitações, com algumas poucas linhas de código.
• Suporte para toda a gama de eventos de interação com o usuário sem limitações impostas pelos navegadores.
• Possibilidade de inserir uma grande variedade de efeitos de animação com uma simples linha de código.
• Uso simplificado e sem restrições com AJAX e linguagens de programação, como PHP e ASP.
• Simplificação na criação de scripts.
• Emprego cross-browser.

Onde eu consigo o arquivo da biblioteca jQuery?

A atual biblioteca está na sua versão 1.2.6 e é fornecida em três formatos:

• jquery-1.2.6.js

Trata-se de um arquivo JavaScript comentado e com espaçamento entre as linhas do código. Seu tamanho é de 97.8 KB.

Foi criado com a finalidade de poder ser facilmente lido e entendido por quem se disponha a estudá-lo com qualquer finalidade.

Download em: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.js

• jquery-1.2.6.min.js

Trata-se do mesmo arquivo JavaScript no qual foram retirados todos os espaçamento do código. Seu tamanho é de 54.5 KB.

É uma versão mais compacta que a versão anterior e é a recomendada para uso em desenvolvimento e hospedagem definitiva para o site no ar. Use esta versão nos seus projetos.

Download em: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js

• jquery-1.2.6.pack.js

Trata-se do arquivo JavaScript compactado com uma ferramenta de compressão de código JavaScript. O processo de compressão torna o código ilegível para humanos. Seu tamanho é de 30.3 KB.

Embora com tamanho menor que o da versão mini, o tempo de carregamento desta versão acaba sendo praticamente igual, pois há que se computar o tempo de descompressão quando o usuário recebe a página. Esta versão tem a desvantagem em relação à anterior de não ir para o cache, tendo que ser carregada novamente toda vez que o usuário volta ao site. Outra desvantagem que desaconselha seu uso é o fato de que o processo de descompressão pode, eventualmente, ser imperfeito, introduzindo bugs não existentes na versão sem compressão ou não compacta. A não ser que você tenha uma boa justificativa para usá-la, não use-a.

Download em: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.pack.js

Como eu instalo a biblioteca jQuery?

A biblioteca jQuery não requer instalação. Por se tratar de um arquivo JavaScript formal, basta que você crie um link para o arquivo, na seção head do documento onde o script irá rodar, tal como faz com qualquer arquivo JavaScript tradicional.

Supondo que você fez o download e descompactou a versão mini da biblioteca, crie o link como mostrado a seguir:

<head>
…
<script type=”text/javascript” src=”../jquery-1.2.6.mini.js”></script>
</head>
…

Integrar Javascript comum com JQuery

Quando digo javascript comum, é apenas para dizer javascript convencional, ou seja, a forma que escrevíamos javascript antes de criarem os frameworks e bibliotecas que existem hoje, como Mootools e JQuery.

Escolhi falar sobre o JQuery por alguns motivos. Primeiro, por que é uma ferramenta que está se tornando bem popular, agiliza bastante o desenvolvimento de códigos, muito rica em documentação e tem uma curva de aprendizado boa para quem vai aprender.

Para deixar sua aplicação utilizar as funcionalidades do JQuery é fácil, basta baixar a última versão no site: http://jquery.com/ renomear para jquery.js (por exemplo) e adicionar uma chamada como:

E adicionar uma chamada na área do head do site assim:

<script src=”jquery.js” type=”text/javascript”></script>

Agora podemos adicionar efeitos, manipular a árvore da página, adicionar eventos aos elementos, utilizar AJAX, carregar outros arquivos de javascript dinamicamente… Tudo isso com a facilidade do JQuery!

Usar JQuery requer apenas que você faça a manipulação dentro de um bloco de código, que nada mais é do que um evento chamado ready (pronto) para o documento, assim:

$(document).ready(function() {
   // aqui fazemos qualquer manipulação com as facilidades do jquery
});

Esse bloco acima é o modelo geral de como funcionam as coisas com JQuery: primeiro temos o elemento que vamos modificar, depois temos o evento que queremos adicionar funcionalidades, ai vem o que chamamos de função de callback, onde podemos usar tanto códigos javascript comum, quanto os do framework.

Como o $(document) que fizemos acima, temos muitas formas para seletores de elementos da página. Esses seletores são flexíveis e poupam muitas linhas de código e algum tempo de raciocínio para a criação de um algoritmo especifico.

Seguem abaixo algumas formas de se selecionar algum elemento da página e o que eles significam:

$("p") = selecionar todos os parágrafos da página (retorna um vetor)

$("#meuIdUnico") = Seleciona o elemento que possui um id com valor meuIdUnico, (retorna um elemento único)

$("input[type=´text´]") = Seleciona todos os input do tipo text

Depois de “selecionar” os elementos para manipulação, podemos adicionar computamentos de uma forma bem interativa, pois podemos criar vários tipos de eventos para um mesmo objeto, basta colocar os blocos com os eventos que precisar, temos eventos para todas as horas: click, focus, change, keypress… Veja abaixo como seria fácil adicionar duas funções a todos os elementos de parágrafo da página, vamos colocar dois eventos, mas fique claro que podemos colocoar quantas precisarmos.

$(“p”).mouseover(function(){
   //manipular o evento de mouseover
});
$(“p”).mousedown(function(){
   //manipular o evento de mousedown
});

Uma coisa que é informalmente ligada ao fato de manipularmos eventos de vários elementos de uma só vez, é saber QUAL elemento estamos manipulando em determinado momento, pois as vezes precisamos fazer alterações condicionais de acordo com o elemento.

Isso também é facilmente feito com JQuery, temos a função each que percorre todos os elementos retornador pelo seletor, então, dentro dessa função podemos manipular de uma forma melhor o elemento, para isso temos o this, que para cada iteração feita pelo each, retorna o elemento especifico da iteração.

Por exemplo, se já estamos manipulando todos os formulário em algum bloco e queremos tratar diferente algum formulário especifico podemos fazer:

$(“form”).each(function() {
  //fazer computamento padrao
  if(this.class == “resetIt”)
    this.reset();
});

O que mostrei são apenas pequenos exemplos de como podemos fazer coisas impressionantes com o JQuery. Muitas pessoas já tem muita coisa em javascript e que não quer perder ou ter que refazer… então isso não é problema pois com JQuery podemos intercalar códigos javascript comuns com suas sintaxes. Dentro do bloco de código, ou seja, dentro das chaves de abertura e fechamento de bloco, temos uma área livre para a imaginação, ali podemos fazer o que quiser desde uso de códigos comuns de javascript, até chamadas para funções externas. Assim vemos que temos total controle, pois podemos importar outros scripts e não temos o trabalho de refazer o código para colocar dentro do JQuery, apenas precisamos chamar os códigos externos dentro das funções JQuery.

Para quem quer se aprofundar no Framework, recomendo a documentação oficial: http://docs.jquery.com/Main_Page