1. Introdução

            JQuery é uma biblioteca JavaScript criada por John Resig e disponibilizada como software livre e aberto, ou seja, de emprego e uso regido segundo licença conforme as regras estabelecidas pelo MIT(Massachusetts Institute of Tecnology) e pelo GPL(GNU General Public License). Isto, resumidamente, significa que você pode usar a biblioteca gratuitamente tanto para desenvolver projetos pessoais, comercias, etc.

            A palavra chave que resume e norteia o desenvolvimento com JQuery é a simplicidade. Linhas e mais linhas de códigos JavaScript escritos para obter um simples efeito em um objeto são substituídas por apenas algumas, escritas com sintaxe JQuery. Difíceis e às vezes confusos códigos JavaScript destinados a selecionar um determinado elemento HTML, componente da arvore do documento são substituídos por um simples método JQuery.

            Alem disso JQuery ainda tem disponíveis vários plugins para os mais diversos uso, desde galeria de imagens, banners rotativos,menu drop down,arredondamento de cantos de divs,mascaras de inputs, entre outros.

            A finalidade do uso de jQuery é controlar o comportamento de todas ou certas partes de uma pagina web.O principio de funcionamento do jQuery fundamenta-se em sua capacidade de encontrar elementos HTML e a estes anexar seus métodos.

2. Para que Server JQuery

            JQuery destina-se a adicionar interatividade e dinamismo às páginas web, proporcionando ao desenvolvedor funcionalidades necessárias à criação de scripts que visem a incrementar, de forma progressiva e não obstrutiva, a usabilidade, a acessibilidade e o design, enriquecendo a experiência do usuário,use JQuery em suas paginas para adicionar efeitos e animações, acessar e manipular DOM, prover maior interatividade com o usuário.

3. Características da biblioteca JQuery

                JQuery  é uma biblioteca JavaScript que possui as seguintes características, ela utiliza seletores CSS para localizar elementos componentes de estrutura de uma marcação HTML em pagina,possui arquitetura compatível com instalação de plugins, é indiferente a rendenização de navegadores,admite programação encadeada, ou seja cada método retorna um objeto.

            Por ser distribuída como software livre, JQuery tem o apoio e o envolvimento de uma considerável comunidade. Desenvolvedores do mundo todo tem contribuído em larga escala com novas idéias, scripts, plug-ins, extensões e toda sorte de implementações, com a finalidade de incrementar não só a biblioteca, mas também as técnicas de desenvolvimento JQuery.

4.Construtor JQuery

                O encarregado de encontrar elemento HTML em documentos jQuery é o que é denominado de construtor, e é escrita com a seguinte sintaxe:

            $()

            O construtor estará presente em todos os scripts jQuery.

            Imagine uma situação onde você queira encontrar um parágrafo em meio a um texto, seria interessante marcar esse parágrafo com um id, e depois recuperá-lo, aplicando algum efeito.

            <p id=”parag”>Meu Texto</p>

            Para mostrar o uso do construtor jQuery será feito um exemplo para aumenta a cor da fonte do parágrafo “parag”

            $(“#parag”).css(‘font-size’,’18px’);

            O construtor identifica o parágrafo pelo seu ID e atribui a ele um css determinado dentro do método .css().               

5. Seletores

            Através dos seletores você escolhe com qual elemento HTML irá trabalhar e/ou interagir. Os seletores do JQuery são muito parecidos com os seletores do CSS onde você identifica cada elemento usando uma sintaxe em particular.Suponhamos que você tenha duas DIVs em seqüência e queira colocar uma borda e uma cor de fundo para cada uma das divs:

Figura  SEQ Figura \* ARABIC 1-Exemplo de seletores

            No exemplo acima, temos duas div cada uma identificadas por seu ID, dentro de um bloco script é usado JQuery para adicionar o efeitos as div, note que como a div tem um id é importante o uso de # para identificar pelo ID ,caso a div possuísse uma classe a mesma seria identifica por ‘.’ , a função .css() é a responsável por adicionar os efeitos as divs em questão.

Figura  SEQ Figura \* ARABIC 2-Efeito final

            As possibilidades do JQuery para efeitos são inúmeras mas aqui foi dado só isso como exemplo introdutório.

            Outro ponto importante do exemplo citado acima, é a abertura do bloco de código jQuery:

            $(documet).ready(){

            ...faça algo...

            });

            A tradução a linha citada seria “Quando o documento for carregado faça algo”, o método ready(); tem uma grande vantagem pois o script está pronto para funcionar a partir do momento em que a arvore do documento tenha sido carregada, sem a necessidade que outros componentes da pagina tenham sido carregados.

6. Exemplo Prático

            Para mostrar o praticidade que o uso de JQuery trás será mostrado agora um exemplo de uso de um plugin para criação de mascara de campos input que será usado na aplicação, com integração RichFaces ‘Master of Ticktes’.

Figura  SEQ Figura \* ARABIC 3-Estrutura dos Diretórios

                Para fazer o uso do plugin é necessário baixá-lo, depois adicioná-lo na sua aplicação.

            O próximo passo será carregar o plugin dentro da pagina.

Figura  SEQ Figura \* ARABIC 4-Carregamento do plugin dentro do head

            O Plugin “mask” é carregado dentro do cabeçalho da pagina, dentro do seu head e já pode ser usado na aplicação.

Figura  SEQ Figura \* ARABIC 5-Utilização do Plugin

            A imagem mostra um campo <h:inputText> que recebe um id que no caso é cpfCliente, dentro dessa tag existe uma outra tag chamada <rich:jQuery> que é a tag que possibilita uso de JQuery com RichFaces, nessa temos um atributo selector que fará referencia ao seletor que ganhara o efeito desejado, nesse caso seletor é o ID do campo, cpfCliente, dentro do atributo query, vai a codificação JQuery que queremos utilizar, nesse caso foi chamada o metodo mask() , recebendo uma string que indica a formatação do campo determinado, e o timing define quando tal plugin será carregado.

Figura  SEQ Figura \* ARABIC 6-Efeito aplicado

                O resultado final é esse mostrado na figura 6, onde ao entrar no determinado campo, a mascara é ativada, ajudando assim na validação dos dados para cadastro

Referências

http://dicionario.babylon.com/jquery/ Acesso em 09/11/2010, às 14h43min.

http://blog.thiagobelem.net/jquery/entendendo-os-seletores-do-jquery/ Acesso em 09/11/2010, ás 16h21min.