Zebrar tabelas é um recurso amplamente utilizado para facilitar a leitura em documentos, além de dar um charme no projeto.

Para pintar alternadamente as linhas de uma tabela com Javascript na sintaxe nativa, teríamos que fazer um algoritmo para identificar se o elemento é par ou ímpar, e assim ir dando formatação as linhas.

O jQuery possui uma gama enorme de seletores próprios, que praticamente nos possibilita o controle total da interface. Vamos usar um desses seletores para identificar quais elementos <tr> da interface são pares, e atribuir cor a esses elementos.

Para este exercício, vamos criar uma estrutura HTML com uma tabela e uma classe CSS que vamos adicionar as linhas pares, e por fim o código JavaScript que será escrito com a sintaxe da biblioteca jQuery.

CSS

Caso você queira deixar as coisas mais bonitas e elegantes, acrescente mais regras aqui no CSS.

.par{background:#eee}

HTML

Uma estrutura de tabela bem simples e sem semântica, caso você vá aplicar isso ao seu projeto, veja a possibilidade de escrever a tabela o mais semântico possível, utilizando as tags thead, tbody etc…

<table>
    <tr>
        <td>elemento 1 da primeira linha</td>
        <td>elemento 2 da primeira linha</td>
        <td>elemento 3 da primeira linha</td>
        <td>elemento 4 da primeira linha</td>
    </tr>
    <tr>
    <td>elemento 1 da segunda linha</td>
        <td>elemento 2 da segunda linha</td>
        <td>elemento 3 da segunda linha</td>
        <td>elemento 4 da segunda linha</td>
    </tr>
    <tr>
        <td>elemento 1 da terceira linha</td>
        <td>elemento 2 da terceira linha</td>
        <td>elemento 3 da terceira linha</td>
        <td>elemento 4 da terceira linha</td>
    </tr>
    <tr>
        <td>elemento 1 da quarta linha</td>
        <td>elemento 2 da quarta linha</td>
        <td>elemento 3 da quarta linha</td>
        <td>elemento 4 da quarta linha</td>
    </tr>
</table>

jQuery

Agora vamos dar ação com o código javaScript…

$(document).ready(function(){

    $('table tr:even').addClass('par');

});

Na linha 4 utilizamos o seletor “even” que é responsável por identificar quais são os elementos pares que ficam na estrutura do DOM, e adicionamos a classe “par”. Essa técnica funciona em todos os browsers que tem suporte ao jQuery.

Caso você queira modificar os elementos impar, utilize no lugar do even o “odd”. Esses seletores servem não somente para elementos table, mas funcionam bem em listas, divs, parágrafos e vários outros elementos.

Como podemos ver, com a sintaxe do jQuery não passamos de uma linha para fazer esse efeito tão gracioso que é amplamente utilizado em projetos.

Não deixe de conhecer a documentação oficial do jQuery para seletores, tem a descrição destes e de vários outros seletores que deixam a nossa vida mais simples!

Algumas explicações prévias:

Ha algum tempo atrás, publiquei um post sobre como fazer um menu com jQuery, utilizando um método de evento do mouse (hover). Usaremos o mesmo método, mas de uma forma um pouco diferente. Por padrão o metodo .over(), espera duas funções como argumentos, uma para quando o mouse estiver em cima (over) e outra quando o mouse sair do ponto (out).  Neste menu utilizaremos o encadeamento de métodos do jQuery e solucionaremos com apenas uma função, utilizando o sliderToggle().

HTML

A estrutura HTML é bem simples. É uma <ul> com seus nós filhos <li>´s. Filiaremos os sub-menus, que também são estrutura de <ul> e <li>,  para fazer o nosso menu com sub-nível. O interessante é aprender o conceito, depois disto você poderá fazer a estrutura de várias formas e manipular DOM através do jQuery.

<ul>
    <li><a href='#'>Item um</a>
        <ul>
            <li><a href='#'>Sub-Item um / um</a></li>
            <li><a href='#'>Sub-Item um / dois</a></li>
            <li><a href='#'>Sub-Item um / três</a></li>
            <li><a href='#'>Sub-Item um / quatro</a></li>
        </ul>
    </li>
    <li><a href='#'>Item dois</a>
        <ul>
            <li><a href='#'>Sub-Item dois / um</a></li>
            <li><a href='#'>Sub-Item dois / dois</a></li>
            <li><a href='#'>Sub-Item dois / três</a></li>
            <li><a href='#'>Sub-Item dois / quatro</a></li>
        </ul>
    </li>
    <li><a href='#'>Item três</a>
        <ul>
            <li><a href='#'>Sub-Item três / um</a></li>
            <li><a href='#'>Sub-Item três / dois</a></li>
            <li><a href='#'>Sub-Item três / três</a></li>
            <li><a href='#'>Sub-Item três / quatro</a></li>
        </ul>
    </li>
   <li><a href='#'>Item quatro</a>
       <ul>
           <li><a href='#'>Sub-Item quatro / um</a></li>
           <li><a href='#'>Sub-Item quatro / dois</a></li>
           <li><a href='#'>Sub-Item quatro / três</a></li>
           <li><a href='#'>Sub-Item quatro / quatro</a></li>
       </ul>
   </li>
</ul>

O comportamento visual desta estrutura pode e deve ser feito com CSS, para deixar o menu mais atrativo. Não vou abordar css, pois não é o sentido deste post. O comportamento visual fica por sua conta e imaginação!

jQuery

A solução em 6 linhas:

$(document).ready(function(){// quando o DOM estiver pronto execute
    $('li ul').hide();// Esconda os menus filhos de <li>
    $('li').hover(function(){// quando passar o mouse em cima da <li>
        $(this).find('ul:first').stop(true, true).slideToggle();// procure nesta li a primeira ul, se um evento estiver disparado ele para(.stop()) e alterne o slider.
    });
});

A solução é bem simples. Eu digo com as palavras do jQuery que quando o documento tiver pronto “DOM todo lido e carregado pelo browser” (.ready), execute as tarefas abaixo. Primeiro esconda as ul´s filas de li,  e espere o evento do mouse (.hover), se alguém passar ponteiro do mouse em cima de alguma li, dispara a ação “o evento” para procurar nesta li que o mouse passou em cima, a primeira ul e, alterne o comportamento dela entre slide down e up, tornando o sub menu visível e não visível.

O (.stop()) é para corrigir o comportamento do .hover() que coloca os eventos na fila, e fica mostrando e escondendo, caso o usuários passe o mouse diversas vezes.

Este menu irá utilizar um método de evento do mouse “hover” e não permite navegação através de teclado, por tantanto ele não é acessível, mas caso seu objetivo seja um menu inclusivo leia um outro post onde eu descrevo um menu drop down acessível.

Primeiro vou criar o documento de marcação para o menu, que no caso será o XHTML.

<div id="menu"><span></span>
   <ul>
      <li><a href="#">Item 1</a>
         <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
            <li><a href="#">sub 3</a></li>
         </ul>
      </li>
      <li><a href="#">Item 2</a>
         <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
            <li><a href="#">sub 3</a></li>
         </ul>
      </li>
      <li><a href="#">Item 3</a>
         <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
            <li><a href="#">sub 3</a></li>
         </ul>
      </li>
      <li><a href="#">Item 4</a>
         <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
            <li><a href="#">sub 3</a></li>
         </ul>
      </li>
      <li><a href="#">Item 5</a>
         <ul>
            <li><a href="#">sub 1</a></li>
            <li><a href="#">sub 2</a></li>
            <li><a href="#">sub 3</a></li>
         </ul>
      </li>
   </ul>
<span class="right"></span></div>

Agora que os nós do menu estão feitos,  formato ele utilizando CSS.

*{margin:0;padding:0}//um reset básico, pra gente poder controlar melhor a página
//Os códigos CSS a baixo podem variar bastante, depende da sua necessidade e criatividade
#menu{background:url(../Images/bg-menu.jpg) repeat-x; height:37px; width:80%; margin:20px auto}
#menu span{height:37px; width:5px; background:url(../Images/bg-menu-esq.jpg) no-repeat; float:left;}
#menu span.right{background:url(../Images/bg-menu-dir.jpg) no-repeat; float:right;}
#menu ul{position:relative;z-index:2;}
#menu li{float:left; list-style:none; display:inline;}
#menu a{text-decoration:none;display:block; font-size:12px; font-family:Arial;color:#000; padding:10px;}
#menu a:hover{text-decoration:none}
#menu ul li ul{position:absolute;z-index:1;background:#f5f8fd url(../Images/bg-sub-menu.jpg) repeat-x !important;border:1px solid #cfd7ea;border-top:none;
	-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
#menu ul li ul li{float:none;display:block;padding:0 10px !important; border-top:1px solid #dbe2ec;}
#menu ul li ul li:hover{background:#e2ecf8;color:#26156E;}

Agora vamos ao que interessa, o jQuery

/**
 * @author Felipe
 *Se for usar me avisa e comenta o post 
 */

$(document).ready(function(){

    $("ul li ul").hide();//aqui eu escondo as ul´s que forem filhas de li.
    $("ul li").hover(function(){//O método hover recebe dois parametros que são duas funções.
        $(this).find("ul:first").slideDown("slow"); //aqui você faz o que quiser quando o mouse estiver em cima

    }, function(){
        $(this).find("ul:first").slideUp("slow"); //aqui é como se fosse o callback e você também faz o que quiser.

O jQuery como você pode ver, é o arquivo mais simples e com poucas linhas de código.

Utilizamos o método hover que recebe dois parâmetros, que é referente a dois estados do mouse, o mouse hover e mouse down.  Em jQuery esse método pode receber duas funções como parâmetros, que é o que fizemos e após eu utilizo o this pra referenciar ao elemento que está sendo acionado e com o find peço pra ele procurar naquele elemento o elemento filho, no caso o primeiro ul que existir e por fim faço o slideDown e Up.
Escolhi esconder o ul filho de li “o sub-menu” com o jQuery, por que se o javaScript estiver desabilitado ou por algum motivo não estiver funcionando, o usuário poderá ver o menu pois ele ficará aberto, se você optar em esconder o menu inicialmente com o CSS o seu menu poderá ficar inutilizável.

Essa foi uma demonstração de um menu simples e bem interessante, porém o jQuery tem plugns incríveis e se você quiser implementar um super menu, você poderá instalar algum plugin, como alguns que vou listar.

• Superfish
• iPod-style Drilldown Menu
• Plugins de menu no site do jQuery

Não se trata de uma nova tecnologia, é apenas javaScript assim como mootools e prototype, uma das grandes vantagens em optar por jQuery é a documentação disponível no site oficial, que é bastante completa e os artigos encontrados em fóruns e blogs espalhados na web.

Neste post em especifico eu vou brincar um pouco com o jQuery pra gente sentir um pouco da biblioteca dos deuses.

O primeiro passo é baixar a biblioteca no site oficial, depois chame a biblioteca entre a tag <head> da página que você irá usar as funções do jQuery.

Deverá ficar algo assim:

<head>

<title>Brincando com jQuery</title>

<script type="text/javascript" src="js/jquery.js"></script>//js = pasta onde ficará seus arquivos javaScript, isso é você que escolhe onde ficaram os arquivos e o jquery.js é a biblioteca

</head>

Agora vamos testar se a biblioteca está instalada corretamente:

<script type="text/javascript">

$(document).ready(
//Aqui você faz o que quiser útilizando a sintax jQuery ou javaScript puro
function(){
       alert("O jQuery está funcionando e a brincadeira já pode começar!!!");//alert comum com a sintax javaScript

});

</script>

Este código espera a página ficar pronta “toda carregada” e após executa uma função que é apenas um alerta normal, com a sintaxe javaScript. Se ao carregar a página com este código e apresentar um alert é porque o jQuery está funcionando e a sua página já compreende a sintaxe jQuery e os métodos e funcionalidades podem ser usadas e isso significa que a brincadeira vai começar a ficar bom agora!

Mas se não funcionou é importante verificar se o caminho que você está chamando está correto ou se há alguma tag escrita incorreta ou sem fechamento, mas de qualquer maneira vou disponibilizar todo código citado aqui.

Uma piada ao getElementById()

O getElementById ficou famoso com a difusão da API DOM e é sem dúvidas um dos métodos mais usados, mas imagina digitar tudo isso umas vinte ou trinta vezes, e em casos extremos, que é necessário chamar esse método várias vezes, me dá tendinite só de pensar, mas com o jQuery isso é tão simples que se torna ridículo, uma verdadeira piada, foi uma das coisas que me chamou a atenção quando eu comecei com o jQuery, isso tudo se resume a “$();”,  $(“id desejado, e não só o id, mas os seletores e classes”), vamos aos exemplos para compreendermos melhor:

O método puro

Com JavaScript utilizando a API DOM
document.getElementById();
Com a biblioteca dos Deuses
$();

Manipulando CSS com jQuery

	$("#meuId").css("color", "red");

Os elementos de texto que estiverem dentro do id “meuId” ficaram com a cor vermelho.

Manipular CSS com a sintaxe de javaScript ficaria algo assim:

Forma muito usada 
      var n = document.getElementById("meuId");
       n.style.color = "red";

Forma otimizada
       document.getElementById("meuId").style.color = "red";

Os três exemplos fazem a mesma coisa, deixa os elementos de texto do meuid na cor vermelha.

Brincando de pic esconde

Ocultar e mostrar elementos sempre foi algo útil, tanto pra criar sub-menus e tudo que a necessidade do seu cliente mandar.

Fazer isso com jQuery é muito fácil e tem algumas formas interessantes, vamos ver um delas:

$(document).ready(function(){

	$("#meuId").click(function(){
		$("p").toggle("slow");

	});

});

HTML

<body>

 <span id="#meuId">Clique me!!!</span> 

         <p>paragrafo 1</p>

         <p>paragrafo 2</p>

</body>

Ajax virou brincadeira de criança

Para usar o Ajax normalmente é necessário usar uma receitinha de bolo para inicializar o objeto XMLHTTPRequest e ainda por cima fazer um IF se for o IE pra ativar o ActveX, pra funcionar em ambos ou browsers, mas com o jQuery virou outra maravilhosa piada:

Ajax com javaScript

var Ajax = false;// Ajax

	function AjaxRequest() {
		Ajax = false;
		if (window.XMLHttpRequest) {//Mozilla e safari
			Ajax = new XMLHttpRequest();
		} else if (window.ActiveXObject) {// IE
			try{
				Ajax = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try{
					Ajax = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {

				}
			}

		}
	}

Ajax com jQuery

$("#idOndeVaiCarregar").load("pagina.php", callback);

Acredito que já deu pra brincar um pouco e espero que a leitura tenha sido proveitosa.

As melhores referências de jQuery você poderá achar no site oficial, vale a pena conferir e estudar

A sintaxe é muito fácil “String.length” onde string é o objeto que queremos contar e o length é quem se encarregará pela contagem.

Obs: está propriedade também conta espaço em branco. Muito bom pra verificar se a senha foi digitada com espaço em branco.

Vamos ver um exemplo simples.

<script type="text/javascript" language="javascript">

   var caracteres = "Felipe não sabe de tudo, mas aprende um pouco a cada dia";

   var contar = caracteres.length;

   alert(contar);

</script>

O resultado será um alert com o numero 56, contando com os espaços em branco, que ele interpreta como caracteres.

Agora eu quero que o nosso código varra a variável, e teste se existe a letra “e”, se achar vai informar que achou a letra “e”, senão ele vai dizer que não achou “e”,  e vai mostrar o caractere que achou.

<script type="text/javascript" language="javascript">

 var caracteres = "Felipe";

     for(i=0; i< caracteres.length; i++){

        if(caracteres[i] == "e" || caracteres[i] == "E" ){

           alert("Achei o " + caracteres[i]);

        } else {

           alert("Não achei e, encontrei o " + caracteres[i]);

        }

     }

</script>

O resultado será uma serie de alerts até a condição ser satisfeita, e todos os caracteres serão contados e testados.

O ideal é trabalhar com DOM, e escrever no documento ao invés de alerts, mas como estamos apenas estudando a propriedade length, escolhi alert, mas você pode escolher um nó ou id do documento e escrever nele, Ex: screver = document.getElementById(“idOndeVoceQuerEscrever”).innerHTML = variável + “texto e tags”;

Mas isso é para próximos posts.