Neste mês irei abordar um assunto muito utilizado em praticamente toda aplicação Web, o uso do JQuery 2.x. Neste artigo irei ressaltar algumas informações específicas sobre esta nova versão, seguindo de como devemos adquiri-la e instalá-la manualmente e automaticamente em uma solução com a ferramente de desenvolvimento da Microsoft, o Microsoft Visual Studio 2013. Explicarei também conceitos e informações de Seletores (“Selectors”) e os Eventos (“Events”).
Conceito
Tendo como referência o site oficial, podemos afirmar que jQuery é uma biblioteca de JavaScript com funcionalidades rápidas, pequena e rica em recursos. Possui características marcantes como: manipulação de HTML, uso de Eventos, implementação com o Ajax, entre outros, se tornando muito simples com uma API de fácil aprendizado e que funciona através de uma multiplicidade de navegadores. Com esta biblioteca, a tarefa de adicionar interatividade a uma página web se torna muito mais fácil e prática.
Informações importantes sobre a versão jQuery 2.x
-
Em relação a versão anterior (JQuery 1.x), esta segunda foi desenvolvida para a Web moderna, abandonando o suporte aos browsers mais antigos (Internet Explorer 6/7/8).
-
Possibilidade de personalização da biblioteca, tendo inúmeros módulos diferentes, como por exemplo o ajax, ajax/xhr, ajax/script, css, dimensions, effects, wrap, etc ... (Não irei entrar em detalhes sobre os mesmos).
-
O JQuery 2.x é 12% mais leve do que a versão anterior, justamente pelo fato da remoção de patches de compatibilidade do Internet Explorer (como foi comentado no primeiro tópico).
Baixando e Instalando
Para adquirir a biblioteca jQuery será necessário entrar no site oficial (https://jquery.com/) e clicar no item de menu “Download”, Ver Imagem 01.
Figura 01: Site Oficial.
Na próxima etapa seremos redirecionados para os links das bibliotecas jQuery 1.x e jQuery 2.x.
Para cada versão possuímos quatro links, sendo:
Download the compressed
Cópias comprimidas de arquivos jQuery, economia de espaço e aumento de desempenho na produção.
Download the uncompressed
Cópias não comprimidas de arquivos jQuery, sendo melhor utilizado durante o desenvolvimento ou a depuração.
Download the map file
Arquivo para uso quando a depuração utilizar um arquivo compactado. Este arquivo não é necessário para que os usuários executem jQuery, só auxilia a depuração do desenvolvedor.
Release notes
Informações sobre os recentes lançamentos e atualizações.
Podemos realizar o download do jQuery 2.x, versão compactada. (A versão atual até a data deste artigo é a “jQuery 2.1.4”). Para isto clique com o botão direito sobre o link escolhendo “Salvar Link como...” Crie uma pasta “jquery” para futuras implementações em seu projeto.
Confira os detalhes na Figura 02
Figura 02: Download jQuery 2.x, versão comprimida.
O arquivo baixado é de extensão “js”, com tamanho de aproximadamente 83kb. Ver Imagem 03.
Figura 03: Biblioteca jQuery 2.1.4.
Recomendo realizar uma leitura no próprio site, pois o mesmo contém todas as informações e dicas referentes à esta biblioteca.
Instalação Automática
Os passos descritos acima demonstra como devemos proceder para realizar a instalação da biblioteca jQuery de uma forma manual. Poderíamos nos poupar deste trabalho e instalá-la de uma outra forma no Microsoft Visual Studio através do “Nuget Package Manager”, clicando no item de menu “Tools/Manage Nuget Package/Manage Nuget Package for Solutions...”. Pesquise por jQuery, Ver Figura 04.
Figura 04: Manage Nuget Packages.
Na região superior direita podemos conferir algumas informações como Nome do fabricante, versão, ultima publicação, descrição, entre outros dados. Basta clicarmos no botão “Install” para obtermos o jQuery instalado em nosso projeto.
Projeto Base
Estarei utilizando o Microsoft Visual Studio 2013 para criar os exemplos de utilização do jQuery. Para isto inicie um projeto do zero clicando no menu File/New Web Site. Para fins didáticos recomendo escolher a opção “Asp.Net Empty Web Site”, para criar um projeto com apenas os itens excenciais.
Ver Figura 05.
Figura 05: Criando um novo projeto Asp.Net.
Poderemos concentrar os nossos exemplos a partir de um Web Form, para isto clicando com o botão direito sobre a “Solution” o adicione navegando até a opção “Add/New Item...” Neste caso uma sugestão de nome como por exemplo “FrmjQuery”. Ver Imagem 06.
Figura 06: Criando um Web Form.
Como foi descrito no tópico anterior, deveremos disponibilizar a Biblioteca jQuery dentro da pasta deste projeto, como ilustra a imagem 07.
Figura 07: Padrão de pastas do projeto de exemplo.
O nosso Projeto deverá estar conforme Imagem 08.
Figura 08: Projeto de Exemplo.
Declaração e Sintaxe
O primeiro exemplo servirá de base para o restante do artigo, utilizamos a função “Hide()” para ocultar todos os dados contidos nas tags <p> (“Selectors” e “Events” serão exemplificados nos próximos tópicos). Para isto, clique sobre o “FrmjQuery.aspx” e em Source adicione o código contido na Listagem abaixo.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmjQuery.aspx.cs" Inherits="FrmjQuery" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> Exemplos jQuery 2.x</title>
<script src="jquery/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function ()
{
$("button").click(function ()
{
$("p").hide();
});
});
</script>
A parte que nos interessa e a mais importante deste Web Form é a inclusão do arquivo js (JQuery), o mesmo sendo responsável pelo código da biblioteca jQuery. Esta inclusão deverá sempre estar localizada dentro da TAG <Head> junto com a função “Hide()”.
</head>
<body>
<div>
<h2>Este é o Título</h2>
<p>Tudo o que está escrito aqui será ocultado!</p>
<p>The Club - Aqui também será ocultado.</p>
<button>Ocultar Linhas</button>
</div>
</body>
</html>
Observe como usamos o identificador da <DIV> para chamar o método Hide(), todos os valores contidos entre as Tags <p> serão ocultados ao clicarmos no botão “Ocultar Linhas”. Ver Imagem 09 para maiores detalhes.
Figura 09: Exemplo prático.
Após entendermos como funciona a declaração, utilização e sintaxe da biblioteca jQuery, gostaria de apresentar nas próximas páginas outras partes importantes como por exemplo os “Selectors” (Seletores) e os “Events” (Eventos).
O que são os “Selectors”?
Os seletores JQuery são de extrema importância na biblioteca jQuery, pois permitem selecionar e manipular elementos HTML. Eles são usados para “Localizar” elementos HTML com base no ID, tipos, classes, atributos, valores de atributos, entre outros. Todos os seletores jQuery deverão começar com o sinal de dólar e parênteses, exemplo: $ ().
Element Selector (Seletor por Elemento)
O seletor de elemento jQuery seleciona elementos com base no nome do mesmo. Poderemos selecionar todos os elementos contidos entre a TAG <p> de uma página.
Sintaxe:
$("p").hide();
Exemplo:
<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>Este é o Título</h2>
<p>Tudo que está aqui será ocultado!</p>
<button>Ocultar</button>
</body>
</html>
Quando um usuário clica em um botão , todos os elementos <p> ficarão ocultos. (Vide exemplo anterior para maiores detalhes)
#id Selector (Seletor por #id)
O seletor #id jQuery usa o atributo id de uma tag HTML para encontrar o elemento específico. Um id deve ser único dentro de uma página , por isto deveremos usar o seletor #id quando desejamos
encontrar um único elemento. Quando um usuário clica em um botão , o elemento com id = "teste" será ocultado, veja a sintaxe e o exemplo a seguir.
Sintaxe:
$("#test").hide();
Exemplo:
<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-2.1.4.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>Este é o Título</h2>
<p>The Club.</p>
<p id="test"> Tudo que está aqui será ocultado!</p>
<button>Ocultar</button>
</body>
</html>
Class Selector (Seletor por Classe)
O seletor de classe jQuery encontra elementos de acordo com uma classe específica. Quando um usuário clica em um botão , os elementos com class = "teste" será escondido.
Sintaxe:
$ (".test")
Exemplo:
<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">Este é o Título</h2>
<p class="test"> Tudo que está aqui será ocultado!</p>
<button>Ocultar</button>
</body>
-
Outros Seletores importantes:
Possuímos inúmeros seletores na biblioteca jQuery, na sequência gostaria de apresentá-los com a sintaxe e uma leve descrição dos mesmos.
$( "*") : Seleciona todos os elementos.
$(this): Seleciona o elemento HTML atuais.
$("p.intro"): Seleciona todos os elementos <p> com class = " intro".
$("p:first"): Seleciona o primeiro elemento <p> contido entre a tag.
$("ul li : first"): Seleciona o primeiro elemento <li> da primeira <ul>.
$("ul li : first-child"): Seleciona o primeiro elemento <li> de cada <ul>.
$("[ href ]" ): Seleciona todos os elementos com um atributo href.
$("a[target = ' _ blank ']"): Seleciona todos os elementos <a> com um valor igual a "_blank”.
$("a [target! = ' _ blank ']"): Seleciona todos os elementos <a> com um alvo valor diferente de " _blank ".
$(":button"): Seleciona todos os elementos <button> e <input> elementos de type = "button".
$("tr: even"): Seleciona todos os elementos even <tr >.
$("tr : odd"): Seleciona todos os elementos odd <tr>.
O que são os “Events”?
Pode-se dizer que os eventos são um dos elementos mais importantes no desenvolvimento de aplicações web, são ações ocorridas na página, à medida que o usuário a utiliza. Um evento representa o exato momento em que algo acontece. Um bom exemplo disto seria o movimento do mouse sobre um elemento, selecionando o radio button ou até mesmo o ato de clicar sobre algum lugar.
Abaixo temos os principais tipos de eventos, sendo:
Eventos do Mouse: click, dblclick, mouseenter, mouseleave.
Eventos do Teclado: keypress, keydown, keyup.
Para atribuir um evento de clique para todos os parágrafos em uma página, podemos fazer da seguinte maneira:
$("p").click();
Após definir o evento, deveremos programar o que acontecerá quando este evento é acionado. Exemplo:
$("p").click(function()
{
// Ações
});
-
Mouse events (Eventos do Mouse)
Click()
Esta função é executada quando o usuário clica em algum elemento específico HTML. No exemplo a seguir iremos ocultar o elemento <p> ao ser disparado o evento click().
Sintaxe:
$("p").click(function(){
$(this).hide();
});
Exemplo:
<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Se clicar aqui serei ocultado.</p>
<p>Aqui também!</p>
</body>
</html>
Dblclick()
Esta função será executada quando o usuário clica duas vezes no elemento HTML.
Sintaxe:
$("p").dblclick(function(){
$(this).hide();
});
Exemplo:
<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Ao realizar um duplo clique irei ser ocultado.</p>
<p>Eu também serei!</p>
</body>
</html>
Mouseenter()
Já este evento será executado quando o mouse entrar em um elemento HTML.
Sintaxe:
$("#p1").mouseenter(function()
{
alert("Você entrou na TAG p1!");
});
Exemplo:
<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function()
{
$("#p1").mouseenter(function(){
alert("Você entrou na TAG p1!");
});
});
</script>
</head>
<body>
<p id="p1">Entre neste parágrafo!!</p>
</body>
</html>
Mouseleave()
A função é executada quando o ponteiro do mouse deixa o elemento HTML.
Sintaxe:
$("#p1").mouseleave(function()
{
alert("Você está deixando este elemento HTML!");
});
Exemplo:
<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function()
{
$("#p1").mouseleave(function(){
alert("Você está deixando este elemento HTML!");
});
});
</script>
</head>
<body>
<p id="p1">Saia deste Parágrafo!</p>
</body>
</html>
-
Keyboard events (Eventos do Teclado)
Keypress()
Este evento é disparado quando ocorre alguma ação do teclado. No exemplo abaixo temos uma situação que o usuário digita algo e logo em seguida disparamos o evento Keypress para contar o número de caracteres digitados.
Sintaxe:
$("input").keypress(function()
{
$("span").text(i += 1);
});
Exemplo:
<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-2.1.4.min.js"></script>
<script>
i = 0;
$(document).ready(function(){
$("input").keypress(function(){
$("span").text(i += 1);
});
});
</script>
</head>
<body>
Entre com seu Nome: <input type="text">
<p>Quantidade de Caracteres: <span>0</span></p>
</body>
</html>
Keydown()
Este evento é identico ao anterior, só que o mesmo é disparado quando pressionamos a tecla, descendo o dedo na tecla. Neste caso iremos alterar a cor de fundo do componente para amarelo ao executar o evento KeyDown.
Sintaxe:
$("input").keydown(function()
{
$("input").css("background-color", "yellow");
});
Exemplo:
<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color", "yellow");
});
});
</script>
</head>
<body>
Entre com o Nome: <input type="text">
</body>
</html>
Keyup()
Evento que ocorre após o KeyDown, ou seja, depois que a tecla é pressionada. No exemplo abaixo iremos alterar a cor de fundo do componente para rosa ao executar o evento KeyUp.
Sintaxe:
$("input").keyup(function()
{
$("input").css("background-color", "pink");
});
Exemplo:
<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function()
{
$("input").keyup(function(){
$("input").css("background-color", "pink");
});
});
</script>
</head>
<body>
Entre com o nome: <input type="text">
</body>
</html>
Conclusões
Neste artigo pude apresentar algumas informações importantes para quem pretende trabalhar com a biblioteca jQuery. Abordei algumas informações sobre a última versão 2.x, dicas de instalação manual e automática pelo Microsoft Visual Studio, declaração e sintaxe com base nos Seletores (Selectors) e nos Eventos (Events).
Fica aí a dica, um abraço e até o mês que vem!
Referências
|
