JQuery

jQuery
Cleiton Gonalves de Almeida

Sistemas de Informao Universidade Federal de Mato Grosso do Sul (UFMS)
Caixa Postal 79400-000 Coxim MS Brazil
cleitonufms@hotmail.com
Abstract. This article aims to educate people interested in using jQuery and is
intended for users with basic knowledge of javascript. This article will address
what jQuery is, what it does, how to install, when it should be used and
contains an explanatory example, demonstrating some methods and functions
of easy understand of the jQuery library.
Resumo. Este artigo visa instruir as pessoas interessadas em utilizar jQuery e
destinada a usurios com conhecimento bsico em javascript. Este artigo ir
abordar o que jQuery, para que serve, como instalar, quando deve ser
utilizado e contm um exemplo explicativo de fcil entendimento
demonstrando alguns mtodos e funes da biblioteca jQuery.
1. Introduo
Todos jQuery no uma linguagem de programao mas sim uma biblioteca javaScript.
Foi lanada em dezembro de 2006 por John Resig no BarCamp de Nova York. John
Resig no prefcio do livro jQuey in Action diz, traduzido para o portugus, o seguinte:
O foco principal da biblioteca jQuery a simplicidade. Por que submeter os
desenvolvedores ao martrio de escrever longos e complexos cdigos para criar simples
efeitos? . jQuery usada por cerca de 77% dos 10 mil sites mais visitados do mundo e
a mais popular das bibliotecas javaScript.
2. O que jQuery?
uma biblioteca javaScript desenvolvida para simplificar os scripts do lado do cliente
que interagem com o HTML. jQuery est disponibilizado como software livre e aberto,
ou seja, significa que voc pode usar a biblioteca gratuitamente tanto em
desenvolvimento de projetos pessoais como comerciais. Para maiores detalhes sobre
esses tipos de licena consulte os seguintes endereos na internet:
http://pt.wikipedia.org/wiki/Mit_license
http://pt.wikipedia.org/wiki/GNU_Gener
2. Para que serve jQuery?

jQuery se destina a adicionar interatividade e dinamismo s pginas e tambm torna o
javaScript muito mais fcil de ser utilizado em projetos e websites. Utilizamos jQuery
quando queremos dinamizar nossas pginas web.
Use o jQuery em sua pgina para:
Adicionar efeitos visuais e animaes;

Acessar e manipular o DOM;
Buscar informaes no servidor sem necessidade de recarregar a pgina;
Power interatividade;
Alterar contedos;
Modificar tarefas especficas de javaScript;
Realizar outras tarefas relacionadas s descritas;
3. Padro Web
jQuery foi criada com a preocupao de ser uma biblioteca em conformidade
com os padres web, ou seja, compatvel com qualquer sistema operacional,
navegador e com suporte total para CSS3. Cabe a voc desenvolvedor escrever
seus scripts em conformidade com W3C.
4. Como instalar jQuery?
A instalao do jQuery simples e fcil de ser executada. A biblioteca constituda de
um arquivo (meu_arquivo.js) que ficar localizado em um local externo ao seu
documento HTML e que ser chamado atravs de um script e seus atributos type e src
colocado na seo head do documento.
A verso que vamos utilizar no exemplo a 2.1.1. Para utilizar a biblioteca em um
determinado documento, voc precisar marc-lo em sua seo head com o script
abaixo:
...
<head>

<script type=text/javascript src=/caminho/jquery-2.1.1.js></script>
</head>
O valor do atributo src indica o caminho (diretrio) no qual se encontra o arquivo da
biblioteca.
Com o script pronto, iremos acessar o site oficial http://jquery.com/download/. Faa o
download da biblioteca como mostra a figura 1.
Figura 1. Print do site oficial da biblioteca jQuery.
5. jQuery na Prtica
Utilizaremos o exemplo de criao de uma tabela dinmica manipulando as
propriedades do DOM com o uso de jQuery. A tabela dever ser exibida e mostrar a
quantidade de cada caractere inserido no campo ao clicar no boto Calcular. A figura
1.2 mostra o documento html que ser utilizado no exemplo.
Figura 1.2 Documento HTML (Pgina que mostra a interao coma tabela).
O cdigo abaixo ir capturar o click do mouse, ou seja, quando clicarmos no boto

calcular (<button id=btnCalcular>Calcular</button>) o cdigo que estiver dentro
da function ser executado, como mostra a figura 1.3:
Figura 1.3 Cdigo que captura a ao do boto com id=btnCalcular.
5.1 Obter valor

Para criar nossa tabela precisaremos obter o valor do elemento input utilizando o
construtor e alguns mtodos contidos na biblioteca jQuery, como mostra a figura 1.4 :
Figura 1.4 Cdigo que limpa a div com id=container e obtm o valor do elemento
input com id=entrada
5.2 Aplicando o algoritmo

Agora que temos o valor, vamos executar um algoritmo que conta a quantidade de caracteres,
dado um conjunto de caracteres. Figura 1.5:
Figura 1.5 Algoritmo que prepara os dados para insero na tabela.
Function que auxlia o algoritmo:

function letraVerificada(letra, vetor){
for (var k = 0; k < vetor.length; k++) {
if(vetor[k]===letra){
return true;
}
};
return false;
}
5.3 Criando a tabela

Agora que tratamos o valor obtido do elemento input iremos criar a tabela manipulando as
propriedades do DOM e preenche-la na figura 1.6:
Figura 1.6 Cdigo que cria e preenche a tabela utilizando as propriedades do DOM
atravs do jQuery
Se executarmos o conjunto de cdigos dos passos antgeriores obteremos o seguinte

resultado, figura 1.7:
Figura 1.7 Resultado
6. Referncias
Maurcio Samy Silva, 2008 A Biblioteca do Programador JavaScript, Novatec.
jQuery, http://jquery.com/, outubro 2014
jQuery, http://pt.wikipedia.org/wiki/JQuery, outubro 2014
DOM, http://www.w3schools.com/js/js_htmldom.asp, outubro 2014

JQuery

Enviado por

Dados do documento

Descrição:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Descrição:

Direitos autorais:

Formatos disponíveis

JQuery

Enviado por

Descrição:

Direitos autorais:

Formatos disponíveis

jQuery

Cleiton Gonalves de Almeida

2. Para que serve jQuery?

Use o jQuery em sua pgina para:

Adicionar efeitos visuais e animaes;

Figura 1. Print do site oficial da biblioteca jQuery.

O cdigo abaixo ir capturar o click do mouse, ou seja, quando clicarmos no boto

Figura 1.3 Cdigo que captura a ao do boto com id=btnCalcular.

5.1 Obter valor

5.2 Aplicando o algoritmo

Figura 1.5 Algoritmo que prepara os dados para insero na tabela.

Function que auxlia o algoritmo:

5.3 Criando a tabela

Se executarmos o conjunto de cdigos dos passos antgeriores obteremos o seguinte

Figura 1.7 Resultado

DOM, http://www.w3schools.com/js/js_htmldom.asp, outubro 2014

Interesses relacionados

Você também pode gostar