jQuery e jQuery UI: Como configurar e integrar em seus projetos

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:

  <!-- 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 ...