Preciso estudar sempre: outubro 2015

Bem-vindos ao blog Preciso Estudar Sempre. Meu nome é João Paulo Maida e minha paixão é estudar. O que vamos ver hoje aqui é uma coletânea de métodos e estruturas JQuery que, as vezes podem cair como uma luva no nosso dia a dia. Caso você não saiba o que é JQuery, pode ficar tranquilo que eu te explico.

Segundo o site jquery.com, JQuery é:

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Traduzindo em miúdos:

JQuery é biblioteca rápida, pequena e repleta de características, construída em JavaScript. Ela realiza manipulações de objetos do DOM, manipulação de eventos, animações, e torna a experiência Ajax muito mais simples e isso tudo com uma API fácil de se usar a qual, funciona através de diversos browsers. ...

Figura 1 - JQuery, escreva menos, faça mais

Essa API foi escrita por John Resig.

Figura 2 - Criador da API JQuery

Quem quiser dar uma olhada no site dele e ver os projetos em que ele está envolvido, clique aqui ou dê uma olhada nas referências.

Como descrito no parágrafo acima, o JQuery nos provê diversos métodos e estruturas para realizar diversos tipos de trabalho. A minha meta aqui é apresentar os que mais usei e os que acho mais "mão na roda" logo assim, formando um canivete suíço. Apresentar de forma minuciosa todos os métodos seria muito complicado pois, um post muito extenso, seria o resultado.

Nosso canivete constará de seletores e métodos.

Seletores

$(elemento)
$("#id")
$(".class")

Falar de seletores é algo básico para quem quer aprender JQuery e minha primeira experiências com essas lindas estruturas as quais, tornariam-se minhas amigas no futuro foi um tanto complicado. De vez em sempre, dúvidas apareciam sobre JavaScript e eu tinha de pesquisar na internet. Nas minhas pesquisas, sempre encontrava pessoas usando esses seletores acima e eu me perguntava:

"Má que raios é isso ?"

Então, um dia eu achei a solução. Os seletores JQuery são estruturas providas pela API que nos permitem realizar buscas por elementos na nossa árvore DOM. Podemos pesquisar por ids, classes css, por tipo de elemento (tag html), por tipo de elemento especificando atributos, fazer casting de objetos implícitos JavaScript, etc.

$(elemento)

É possível acessar um objeto implícito JavaScript, como por exemplo o objeto document e fazer um casting para um objeto JQuery. A consequência disso é o acesso à métodos JQuery. Agora, quando você ver o trecho de código abaixo, não terá mais dúvidas.

Figura 3 - Seletor de elemento e o método ready

Tudo ficou claro não ? O que estamos fazendo acima, é o casting do objeto document e acessando o método ready do novo objeto JQuery criado. Aproveitando o "barco", podemos aprender um pouco sobre o método. Ele especifica uma função a ser executada quando o DOM é totalmente carregado. Nesta função handler podemos carregar imagens, realizar requisições AJAX, adicionar listeners a eventos, entre outras coisas. Nas referências, é possível acessar a documentação relacionada a este método.

$("#id")

Utilizamos o seletor $("#id") para obter elementos do nosso DOM através de seus respectivos ids. Para utilizar este seletor, é necessário informar qual é o id juntamente com caractere jogo da velha (#). Este seletor é muito parecido com algo que o próprio JavaScript nos fornece.

 document.getElementById("meuId")

Exemplo:

 <html>  
 <head>  
      <title>Teste $('#id')</title>  
      <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>  
 </head>  
 <body>  
 <h1>Exemplo com seletor de Id</h1>  
 <input type="text" id="meuId" />  
 </body>  
 <script type="text/javascript">  
      $(document).ready(function(){  
           alert($('#meuId'));  
      });  
 </script>  
 </html>

Caso existam mais um de 1 elemento com o mesmo id, o que será retornado é o primeiro a ser encontrado. Caso nada seja encontrado, é retornado um objeto vazio [ ].

$(".class")

Se o seletor de ids retorna um único elemento, o seletor de classes css funciona de forma contrária visto que, uma classe css pode ser aplicada a vários elementos HTML e um id não. Para utilizar este seletor, é necessário informar qual é a classe juntamente com caractere ponto (.).

Exemplo:

 <html>  
 <head>  
      <title>Teste Seletor de Classes</title>  
      <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>  
 </head>  
 <body>  
 <h1>Exemplo com seletor de classes css</h1>  
 <ul>  
      <li class="listagem">Primeiro</li>  
      <li class="listagem">Segundo</li>  
      <li class="listagem">Terceiro</li>  
      <li class="listagem">Quarto</li>  
      <li class="listagem">Quinto</li>  
 </ul>  
 </body>  
 <script type="text/javascript">  
      $(document).ready(function(){  
           alert($('.listagem'));  
      });  
 </script>  
 </html>

Independemente da existência de 1 único elemento ou de vários, este seletor sempre retorna uma lista onde, o tamanho dela varia de acordo com a quantidade de elementos que possuem a classe css correspondente ao seletor. Caso nada seja encontrado, é retornado um objeto vazio [ ].

--------------------------------------------------------------------------------------------------------------------------

CURIOSIDADE: O caractere dólar $ utilizado nos seletores é um objeto JQuery. Este objeto é definido dentro da API e é possível modificar o caractere usado. Existem alguns método que são acessíveis diretamente do caractere dólar, para mais informações ver a documentação.

--------------------------------------------------------------------------------------------------------------------------

Recuperar elementos via JQuery é uma tarefa que já sabemos realizar. Então, vamos abordar métodos que agilizam o dia a dia do desenvolvimento de nossos softwares.

Métodos:

attr
css
each
hide
html
remove
show
val

attr

Retorna o valor de um atributo para o primeiro elemento do conjunto de elementos correspondentes ao seletor ou configura um ou mais atributos para todo elemento correspondente.

Exemplo:

 <!DOCTYPE html>  
 <html>  
 <head>  
      <title>Teste método attr</title>  
      <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>  
      <meta charset="UTF-8">  
 </head>  
 <body>  
 <h1>Exemplo método attr</h1>  
 <input type="text" id="meuId" />  
 <button onclick="mudarAttr()">Mudar</button>  
 </body>  
 <script type="text/javascript">  
      function mudarAttr(){  
           $('#meuId').attr('type','radio');  
           alert("Novo type do input: " + $('#meuId').attr('type'));  
      }  
 </script>  
 </html>

css

Retorna o valor de uma propriedade css para o primeiro elemento do conjunto de elementos correspondentes ao seletor ou configura uma ou mais propriedades CSS para todo elemento correspondente.

Exemplo:

 <!DOCTYPE html>  
 <html>  
 <head>  
      <title>Teste método css</title>  
      <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>  
      <meta charset="UTF-8">  
 </head>  
 <body>  
 <h1>Exemplo método css</h1>  
 <input type="text" id="meuId" style="color: #FF0000" />  
 <button onclick="mudarCss()">Mudar</button>  
 </body>  
 <script type="text/javascript">  
      function mudarCss(){  
           $('#meuId').css('color','#00FF00');  
           alert("A nova cor do input é: " + $('#meuId').css('color'));  
      }  
 </script>  
 </html>

each

Itera sobre objeto JQuery, executando uma função para cada elemento correspondente.

Exemplo:

 <!DOCTYPE html>  
 <html>  
 <head>  
      <title>Teste método each</title>  
      <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>  
      <meta charset="UTF-8">  
 </head>  
 <body>  
 <h1>Exemplo método each</h1>  
 <ul>  
      <li>Primeiro</li>  
      <li>Segundo</li>  
      <li>Terceiro</li>  
      <li>Quarto</li>  
      <li>Quinto</li>  
 </ul>  
 <button onclick="each()">Mostrar</button>  
 </body>  
 <script type="text/javascript">  
      function each(){  
           $('ul li').each(function(index, value){  
                alert("Index: " + index + " - " + "valor: " + value);  
           });            
      }  
 </script>  
 </html>

hide

Retira visibilidade de elementos. Este método é uma melhor escolha do que a manipulação de propriedades CSS (display='block' ou display='none') porque, ele funciona em múltiplos browsers. Logo, você não perderá tempo.

 <!DOCTYPE html>  
 <html>  
 <head>  
      <title>Teste método hide</title>  
      <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>  
      <meta charset="UTF-8">  
 </head>  
 <body>  
 <h1>Exemplo método hide</h1>  
 <ul id="meuUl">  
      <li>Primeiro</li>  
      <li>Segundo</li>  
      <li>Terceiro</li>  
      <li>Quarto</li>  
      <li>Quinto</li>  
 </ul>  
 <button onclick="hide()">Esconder</button>  
 </body>  
 <script type="text/javascript">  
      function hide(){  
           $('#meuUl').hide();  
      }  
 </script>  
 </html>

html

Retorna o conteúdo HTML do primeiro elemento do conjunto de elementos correspondentes ao seletor ou configura o conteúdo HTML para todo elemento correspondente.

 <!DOCTYPE html>  
 <html>  
 <head>  
      <title>Teste método html</title>  
      <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>  
      <meta charset="UTF-8">  
 </head>  
 <body>  
 <h1>Exemplo método html</h1>  
 <textarea id="meuTextarea">Lorem ipsum dolor sit amet.</textarea>  
 <button onclick="html()">Mostrar</button>  
 </body>  
 <script type="text/javascript">  
      function html(){  
           alert("Conteúdo do textarea: " + $('#meuTextarea').html());  
      }  
 </script>  
 </html>

remove

Remove um conjunto de elementos do DOM os quais, são correspondentes ao seletor JQuery.

 <!DOCTYPE html>  
 <html>  
 <head>  
      <title>Teste método remove</title>  
      <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>  
      <meta charset="UTF-8">  
 </head>  
 <body>  
 <h1>Exemplo método remove</h1>  
 <input type="text" class="remocao" value="1" /> <br/>  
 <input type="text" value="2"/> <br/>  
 <input type="text" value="3"/> <br/>  
 <input type="text" class="remocao" value="4"/> <br/>  
 <input type="button" onclick="remover()" value="Remover" />  
 </body>  
 <script type="text/javascript">  
      function remover(){  
           var length = $('.remocao').length;  
           alert("Quantidade de elementos removidos: " + length);  
           $('.remocao').remove();  
      }  
 </script>  
 </html>

Note que quando os elementos sumiram, eles foram realmente removidos do DOM, ou seja, foram destruídos. Você não conseguirá acessar mais eles. A quantidade de elementos removidos é obtida através do length do array do seletor, conceito o qual, foi citado acima.

show

Dá visibilidade a elementos. Este método é uma melhor escolha do que a manipulação de propriedades CSS (display='block' ou display='none) porque, ele funciona em múltiplos browsers. Logo, você não perderá tempo.

 <!DOCTYPE html>  
 <html>  
 <head>  
      <title>Teste método show</title>  
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>  
      <meta charset="UTF-8" />  
 </head>  
 <body>  
 <h1>Exemplo método show</h1>   
  <ul id="meuUl" hidden>  
    <li>Primeiro</li>  
    <li>Segundo</li>  
    <li>Terceiro</li>  
    <li>Quarto</li>  
    <li>Quinto</li>  
  </ul>   
 <button onclick="show()">Mostrar</button>  
 </body>  
 <script type="text/javascript">  
      function show () {            
           $('#meuUl').show();  
      }  
 </script>  
 </html>

val

Retorna o valor atual do primeiro elemento do conjunto de elementos correspondentes ao seletor ou define o valor de todo elemento correspondente.

 <!DOCTYPE html>  
 <html>  
 <head>  
      <title>Teste método val</title>  
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>  
      <meta charset="UTF-8" />  
 </head>  
 <body>  
 <h1>Exemplo método val</h1>   
 <input id="meuId" type="text" />  
 <br/>  
 <button onclick="val()">Mostrar valor</button>  
 </body>  
 <script type="text/javascript">  
      function val () {  
           alert("Antigo valor: " + $('#meuId').val());  
           $('#meuId').val('Novo valor !!');  
      }  
 </script>  
 </html>

Para baixar todos os exemplos, clique aqui.

Dúvidas !? Sugestões ?! Críticas ou elogios ?!

Deixe aí nos comentários ou na nossa página do facebook.
Facebook: https://www.facebook.com/precisoestudarsempre/

Referências:
jQuery API - https://api.jquery.com/
John Resig - http://ejohn.org/
.ready() - http://api.jquery.com/ready/
.attr() - http://api.jquery.com/attr/
.css() - http://api.jquery.com/css/
.each() - http://api.jquery.com/each/
.hide() - https://api.jquery.com/hide/
.html() - https://api.jquery.com/html/
.show() - https://api.jquery.com/show/
.remove() - https://api.jquery.com/remove/
.val() - https://api.jquery.com/val/

sábado, 31 de outubro de 2015

Canivete suíço JQuery