Artigos HTML e CSS jQuery e jQuery UI: Como configurar e integrar em seus projetos

Por que eu devo ler este artigo:Este artigo é útil a todo desenvolvedor que está iniciando seu aprendizado no universo web e deseja conhecer mais a fundo os recursos do jQuery (robusta biblioteca JavaScript) e de sua biblioteca de componentes visuais e widgets — o jQuery UI —, de uma forma simples e fácil. Será possível analisar como integrar essas bibliotecas em suas aplicações, utilizar seus principais eventos e funções, ter uma boa reusabilidade de código e manipular seus recursos da melhor maneira possível.

Em 2006 foi lançada a primeira versão do jQuery pelo seu criador, e atual líder de desenvolvimento, John Resig. A biblioteca, basicamente, incorpora diversas funções e eventos utilizando a árvore de elementos do DOM, CSS, JavaScript, HTML e eventos Ajax. Com isso, há uma grande reusabilidade de código, tornando-o ainda mais limpo e fácil de desenvolver. O jQuery também atua fortemente na questão da incompatibilidade entre os navegadores, sendo, consequentemente, uma solução cross-browser. Além disso, através do poder da biblioteca possível criar plugins muito facilmente, oferecendo aos desenvolvedores uma opção flexível para complementar a própria biblioteca e auxiliar o trabalho dos desenvolvedores na hora de criar funcionalidades novas, não reinventando a roda.

A maioria dos sites atuais utilizam essa biblioteca incorporada, inclusive em conjunto com outras bibliotecas, como o PrimeFaces: uma biblioteca de componentes ricos para o desenvolvimento de Java na web. A adesão só aumenta por causa da grande facilidade e colaboração de novos autores e desenvolvedores open source.

A versão atual do jQuery é a versão 3, a qual foi lançada em junho de 2016 com várias melhorias e algumas correções referentes à versão 2. Problemas de migração podem ocorrer ao atualizar a versão do jQuery utilizada. Uma recomendação para essa migração é a utilização do plugin jQuery Migrate (atualmente na versão 3.0.0 — vide seção Links), o qual resolve boa parte dos problemas de migração entre versões diferentes do jQuery e permite uma maior estabilidade em relação à versão anterior ao restaurar, por exemplo, funções e recursos depreciados que não existem mais na versão 3; isso permite que o código antigo continue funcionando, mesmo na ausência de tais funcionalidades.

Existem outros plugins do jQuery (como o Mobile, Sizzle e QUnit), com destaque especial para o jQuery UI (UI = User Interface), que nada mais é que um conjunto de widgets e componentes visuais pré-criados com jQuery para facilitar o desenvolvimento de telas e páginas na web, com a possibilidade de customizar os estilos dos mesmos via temas (pacotes de CSS e JavaScript com estilos pré-definidos contemplando desde cores, fonte do texto, estruturação dos elementos HTML, etc.).

É relevante o entendimento da biblioteca levando em conta que conhecimentos básicos de DOM, CSS, JavaScript e Ajax são pré-requisitos para tal. É importante saber debugar JavaScript, fazer uso da inspeção de elementos (o uso de plug-ins pode auxiliar bastante, como o uso do Firebug para o navegador Firefox) e utilizar do console do navegador (geralmente com o botão F12) para analisar tags e possíveis problemas de sintaxe. É recomendável no desenvolvimento sempre ter um bom editor web, como o Aptana, Dreamweaver, WebStorm, etc., para auxiliar na codificação como um todo.

Configurando o jQuery na sua aplicação

Considerando que você queira incorporar o jQuery Core + jQuery UI nas suas páginas web, os trechos representados pela Listagem 1 precisam ser acrescentados dentro da tag head doL seu HTML:

Listagem 1. Importando arquivos do jQuery + UI


  <!-- CSS jQuery UI -->
  <link href="css/jquery-ui.min.css" rel="stylesheet">
  <!-- CSS jQuery UI Default Theme -->
  <link href="css/jquery-ui.theme.min.css" rel="stylesheet">
  <!-- JS jQuery Core -->
  <script src="js/jquery-3.1.1.min.js"></script>
  <!-- JS jQuery UI -->
  <script src="js/jquery-ui.min.js"></script>

Os downloads dos referidos arquivos podem ser efetuados nos sites oficiais de cada biblioteca (vide seção Links). Feita essa configuração, é possível utilizar qualquer função da biblioteca. Por exemplo, podemos efetuar um teste para visualização da versão do jQuery. Segue o trecho de código em que é possível visualizar a mesma através de um alert do browser: 


  $(document).ready(function() {
       alert("Você está executando a versão do jQuery: " + jQuery.fn.jquery);
  });

A função ready() é amplamente usada pelo jQuery para efetuar ações assim que a página tiver seu carregamento finalizado pelo navegador.

Seletores

Ao desenvolver com JavaScript, uma tarefa bem comum é a leitura e modificação do conteúdo de uma página HTML, algo extremamente custoso de se fazer já que a linguagem disponibiliza apenas alguns métodos específicos para busca: pelo identificador do elemento (getElementById), pelo nome (atributo name) do elemento (getElementsByName), etc. O jQuery, por outro lado, pode buscar elementos na página através de seu id, classes CSS, tipos, atributos, valores de atributos, entre muitos outros. E tudo que ele faz é encapsular os seletores do CSS (as regras que criamos para instruir ao CSS onde imputar seus estilos) para atingir esse objetivo.

Em vista disso, analisando que teremos de fazer tal tarefa com demasiada frequência, o construtor do jQuery é sempre usado para receber a tal regra (o seletor) e buscar, no objeto do DOM, todos os elementos que atendem à mesma. Você pode instanciar um novo objeto do jQuery usando o seguinte trecho de código: “jQuery()”, ou simplesmente “$()” (a versão reduzida). Os termos “$” e “jQuery”, nesse formato, são reservados para uso exclusivo da biblioteca. Vejamos alguns exemplos:

  • Obtendo um elemento pelo id, considerando uma DIV com atributo id="header": 
    $('#header')
  • Obtendo elementos pela classe, considerando DIVS com atributo class="header": 
    $('.header')

É interessante ressaltar que esse tipo de seleção pode retornar tanto um objeto quanto uma lista deles, logo devemos nos preocupar em tratar sempre o retorno em nosso código.

É possível também filtrar pelo seletor mais de uma classe ou tipo de objeto:

$('.header', '.footer')

Da mesma forma que é possível para elementos do DOM: 

$('h1', 'p', 'div')

Outra possibilidade é obter elementos pelo nome de um de seus atributos e de seu respectivo valor. Poderíamos, por exemplo, obter os elementos cujos atributos HREF possuam o valor “default.html” por meio do código abaixo:

$("[href='default.html']")

Esse tipo de seleção permite ainda mais flexibilização, como regras condicionais. Por exemplo, suponha que queremos obter os elementos de todos os inputs cujo valor do atributo name contenha a palavra “man” em algum lugar:

$("input[name*='man']")
...

Quer ler esse conteúdo completo? Tenha acesso completo