jQuery - jQuery

jQuery

Autor (es) original (is)	John Resig
Desenvolvedor (s)	A equipe jQuery
lançamento inicial	26 de agosto de 2006 ; 15 anos atrás ( 2006-08-26 )
Versão estável	3.6.0 / (2 de março de 2021 ; 7 meses atrás ) ( 2021-03-02 )
Repositório
Escrito em	JavaScript
Plataforma	Veja § Suporte do navegador
Tamanho	27-274 KB
Modelo	Biblioteca JavaScript
Licença	MIT
Local na rede Internet	jquery .com

jQuery é uma biblioteca JavaScript projetada para simplificar a passagem e a manipulação da árvore HTML DOM , bem como o tratamento de eventos , animação CSS e Ajax . É um software de código aberto gratuito que usa a licença MIT permissiva . Em maio de 2019, o jQuery é usado por 73% dos 10 milhões de sites mais populares. A análise da Web indica que é a biblioteca JavaScript mais amplamente implantada por uma grande margem, tendo pelo menos 3 a 4 vezes mais uso do que qualquer outra biblioteca JavaScript.

A sintaxe do jQuery foi projetada para facilitar a navegação em um documento, selecionar elementos DOM , criar animações , manipular eventos e desenvolver aplicativos Ajax . O jQuery também fornece recursos para desenvolvedores criarem plug-ins na biblioteca JavaScript. Isso permite que os desenvolvedores criem abstrações para interação e animação de baixo nível, efeitos avançados e widgets temáticos de alto nível. A abordagem modular da biblioteca jQuery permite a criação de poderosas páginas da web dinâmicas e aplicativos da web.

O conjunto de recursos básicos do jQuery - seleção, passagem e manipulação de elementos DOM - habilitado por seu mecanismo seletor (denominado "Sizzle" da v1.3), criou um novo "estilo de programação", combinando algoritmos e estruturas de dados DOM. Esse estilo influenciou a arquitetura de outras estruturas JavaScript como YUI v3 e Dojo , estimulando posteriormente a criação da API Seletores padrão . Posteriormente, esse estilo foi aprimorado com uma fusão mais profunda de algoritmo-dados em um herdeiro do jQuery, o framework D3.js.

Microsoft e Nokia empacotam jQuery em suas plataformas. A Microsoft o inclui com o Visual Studio para uso nas estruturas ASP.NET AJAX e ASP.NET MVC da Microsoft, enquanto a Nokia o integrou à plataforma de desenvolvimento de widget Web Run-Time.

Visão geral

jQuery, em seu núcleo, é uma biblioteca de manipulação de Document Object Model (DOM). O DOM é uma representação em estrutura de árvore de todos os elementos de uma página da web. jQuery simplifica a sintaxe para localizar, selecionar e manipular esses elementos DOM. Por exemplo, jQuery pode ser usado para encontrar um elemento no documento com uma determinada propriedade (por exemplo, todos os elementos com uma tag h1 ), alterando um ou mais de seus atributos (por exemplo, cor, visibilidade), ou fazendo com que ele responda a um evento ( por exemplo, um clique do mouse).

O jQuery também fornece um paradigma para manipulação de eventos que vai além da seleção e manipulação de elementos DOM básicos. A atribuição do evento e a definição da função de retorno de chamada do evento são feitas em uma única etapa em um único local no código. O jQuery também tem como objetivo incorporar outras funcionalidades JavaScript altamente utilizadas (por exemplo, fade ins e fade outs ao ocultar elementos, animações por manipulação de propriedades CSS ).

Os princípios de desenvolvimento com jQuery são:

• Separação de JavaScript e HTML: A biblioteca jQuery fornece sintaxe simples para adicionar manipuladores de eventos ao DOM usando JavaScript, em vez de adicionar atributos de evento HTML para chamar funções JavaScript. Portanto, incentiva os desenvolvedores a separar completamente o código JavaScript da marcação HTML.
• Brevidade e clareza: jQuery promove brevidade e clareza com recursos como funções "encadeadas" e nomes de funções abreviadas.
• Eliminação de incompatibilidades entre navegadores: os mecanismos JavaScript de navegadores diferentes são ligeiramente diferentes, portanto, o código JavaScript que funciona para um navegador pode não funcionar para outro. Como outros kits de ferramentas JavaScript, o jQuery lida com todas essas inconsistências entre navegadores e fornece uma interface consistente que funciona em diferentes navegadores.
• Extensibilidade: novos eventos, elementos e métodos podem ser facilmente adicionados e reutilizados como um plugin.

História

jQuery foi originalmente criado em janeiro de 2006 no BarCamp NYC por John Resig , influenciado pela biblioteca cssQuery anterior de Dean Edwards . Atualmente, é mantido por uma equipe de desenvolvedores liderada por Timmy Willison (com o mecanismo seletor jQuery, Sizzle, sendo liderado por Richard Gibson).

jQuery foi originalmente licenciado sob a CC BY-SA 2.5 e relicenciado para a licença MIT em 2006. No final de 2006, foi licenciado duas vezes sob as licenças GPL e MIT. Como isso gerou alguma confusão, em 2012 a GPL foi abandonada e agora está licenciada apenas sob a licença do MIT.

Popularidade

• Em 2015, o jQuery foi usado em 62,7% do 1 milhão de sites principais (de acordo com a BuiltWith) e em 17% de todos os sites da Internet.
• Em 2017, o jQuery foi usado em 69,2% do 1 milhão de sites principais (de acordo com Libscore).
• Em 2018, o jQuery era usado em 78% dos 1 milhão de sites principais.
• Em 2019, o jQuery foi usado em 80% dos 1 milhão de sites principais (de acordo com a BuiltWith) e em 74,1% dos 10 milhões principais (por W3Techs).
• Em abril de 2021, o jQuery é usado por 77,8% dos 10 milhões de sites principais (de acordo com a W3Techs) .

Recursos

jQuery inclui os seguintes recursos:

• Seleções de elementos DOM usando o mecanismo seletor de código aberto multi-navegador Sizzle , um spin-off do projeto jQuery
• Manipulação DOM com base em seletores CSS que usam nomes e atributos de elementos, como id e classe, como critérios para selecionar nós no DOM
• Eventos
• Efeitos e animações
• Ajax
• Objetos adiados e promissores para controlar o processamento assíncrono
• Análise JSON
• Extensibilidade por meio de plug-ins
• Utilitários, como detecção de recursos
• Métodos de compatibilidade que estão nativamente disponíveis em navegadores modernos, mas precisam de substitutos para navegadores mais antigos, como jQuery.inArray()e jQuery.each().
• Suporte para vários navegadores

Suporte de navegador

O jQuery 3.0 e mais recentes suportam "versões atuais − 1" (significando a versão estável atual do navegador e a versão que a precedeu) do Firefox (e ESR), Chrome , Safari e Edge , bem como Internet Explorer 9 e mais recente. No celular, ele suporta iOS 7 e mais recente e Android 4.0 e mais recente.

Distribuição

A biblioteca jQuery é normalmente distribuída como um único arquivo JavaScript que define todas as suas interfaces, incluindo DOM, eventos e funções Ajax. Ele pode ser incluído em uma página da Web vinculando-se a uma cópia local ou a uma das muitas cópias disponíveis em servidores públicos. jQuery tem uma rede de distribuição de conteúdo (CDN) hospedada por MaxCDN. O serviço Google in Google Hosted Libraries e a Microsoft também hospedam a biblioteca.

Exemplo de vinculação de uma cópia da biblioteca localmente (do mesmo servidor que hospeda a página da Web):

<script src="jquery-3.5.1.min.js"></script>

Exemplo de vinculação de uma cópia da biblioteca do CDN público da jQuery:

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

Interface

Funções

jQuery fornece dois tipos de funções , funções de utilitário estático e métodos de objeto jQuery . Cada um tem seu próprio estilo de uso.

Ambos são acessados através de identificador principal do jQuery: jQuery. Este identificador possui um alias denominado $. Todas as funções podem ser acessadas por meio de um desses dois nomes.

métodos jQuery

A jQueryfunção é uma fábrica para a criação de um objeto jQuery que representa um ou mais nós DOM. Os objetos jQuery têm métodos para manipular esses nós. Esses métodos (às vezes chamados de comandos) podem ser encadeados, pois cada método também retorna um objeto jQuery.

O acesso e a manipulação de vários nós DOM no jQuery normalmente começam com a chamada da $função com uma string de seletor CSS. Isso retorna um objeto jQuery referenciando todos os elementos correspondentes na página HTML . $("div.test"), por exemplo, retorna um objeto jQuery com todos os divelementos da classe test. Este conjunto de nós pode ser manipulado chamando métodos no objeto jQuery retornado.

Utilitários estáticos

Estas são funções utilitárias e não atuam diretamente sobre um objeto jQuery. Eles são acessados ​​como métodos estáticos no jQuery ou $ identifier. Por exemplo, $.ajax()é um método estático.

Modo sem conflito

jQuery fornece uma $.noConflict()função, que renuncia ao controle do $nome. Isso é útil se jQuery for usado em uma página da Web também vinculando outra biblioteca que exige o $símbolo como seu identificador. No modo sem conflito, os desenvolvedores podem usar jQuerycomo um substituto $sem perder a funcionalidade.

Ponto de partida típico

Normalmente, jQuery é usado colocando o código de inicialização e funções de manipulação de eventos . Isso é acionado por jQuery quando o navegador termina de construir o DOM para a página da Web atual. $(handler)

$(function () {
        // This anonymous function is called when the page has completed loading.
        // Here, one can place code to create jQuery objects, handle events, etc.
});

ou

$(fn); // The function named fn, defined elsewhere, is called when the page has loaded.

Historicamente, $(document).ready(callback)tem sido o idioma de fato para a execução de código depois que o DOM está pronto. No entanto, desde o jQuery 3.0, os desenvolvedores são encorajados a usar a $(handler)assinatura muito mais curta .

Encadeamento

Os métodos de objeto jQuery normalmente também retornam um objeto jQuery, que permite o uso de cadeias de método :

$('div.test')
  .on('click', handleTestClick)
  .addClass('foo');

Essa linha encontra todos os div elementos com atributo de classe test, registra um manipulador de eventos em cada elemento para o evento "click" e adiciona o atributo de classe fooa cada elemento.

Certos métodos de objeto jQuery recuperam valores específicos (em vez de modificar o estado). Um exemplo disso é o val()método, que retorna o valor atual de um elemento de entrada de texto . Nesses casos, uma instrução como $('#user-email').val()não pode ser usada para encadeamento, pois o valor de retorno não faz referência a um objeto jQuery.

Criação de novos elementos DOM

Além de acessar os nós DOM existentes através do jQuery, também é possível criar novos nós DOM, se a string passada como argumento para a fábrica $ () for semelhante a HTML. Por exemplo, o código a seguir encontra um selectelemento HTML e cria um novo optionelemento com o valor "VAG" e o rótulo "Volkswagen", que é anexado ao menu de seleção :

$('select#car-brands')
  .append($('<option>')
    .prop(value,"VAG")
    .text('Volkswagen')
  );

Ajax

É possível fazer solicitações Ajax (com suporte para vários navegadores ) $.ajax()para carregar e manipular dados remotos.

$.ajax({
  type: 'POST',
  url: '/process/submit.php',
  data: {
    name : 'John',
    location : 'Boston',
  },
}).then(function(msg) {
  alert('Data Saved: ' + msg);
}).catch(function(xmlHttpRequest, statusText, errorThrown) {
  alert(
    'Your form submission failed.\n\n'
      + 'XML Http Request: ' + JSON.stringify(xmlHttpRequest)
      + ',\nStatus Text: ' + statusText
      + ',\nError Thrown: ' + errorThrown);
});

Este exemplo mensagens a dados name=Johne location=Bostonpara /process/submit.phpno servidor. Quando essa solicitação termina, a função de sucesso é chamada para alertar o usuário. Se a solicitação falhar, ele alertará o usuário sobre a falha, o status da solicitação e o erro específico.

O exemplo acima usa os métodos .then()e .catch()para registrar retornos de chamada que são executados quando a resposta é concluída. Esses retornos de chamada de promessa devem ser usados ​​devido à natureza assíncrona das solicitações Ajax .

plug-ins jQuery

A arquitetura do jQuery permite que os desenvolvedores criem código de plug-in para estender sua função. Existem milhares de plug-ins jQuery disponíveis na Web que cobrem uma variedade de funções, como auxiliares Ajax, serviços da Web , datagrids, listas dinâmicas, ferramentas XML e XSLT , arrastar e soltar , eventos, manipulação de cookies e janelas modais .

Uma fonte importante de plug-ins jQuery é o subdomínio de plug-ins do site do projeto jQuery. Os plug-ins neste subdomínio, no entanto, foram excluídos acidentalmente em dezembro de 2011 em uma tentativa de livrar o site do spam. O novo site é um repositório hospedado pelo GitHub , que exigia que os desenvolvedores reenviassem seus plug-ins e se adaptassem aos novos requisitos de envio. jQuery fornece um "Centro de aprendizagem" que pode ajudar os usuários a entender JavaScript e começar a desenvolver plug-ins jQuery.

Para criar esses plug-ins, os desenvolvedores podem escolher escrever seu próprio código do zero ou construir sobre uma estrutura existente, como o jQuery Boilerplate .

Histórico de lançamento

Estrutura de teste

QUnit é uma estrutura de automação de teste usada para testar o projeto jQuery. A equipe jQuery o desenvolveu como uma biblioteca de testes de unidade interna. A equipe jQuery o usa para testar seu código e plug-ins, mas pode testar qualquer código JavaScript genérico, incluindo código JavaScript do lado do servidor.

A partir de 2011, a equipe de teste jQuery usa QUnit com TestSwarm para testar cada versão de base de código jQuery.

Alternativas para jQuery

Simplificando tarefas como passagem de documentos HTML, animação e manipulação de eventos, a robusta biblioteca jQuery JavaScript mudou a cara do desenvolvimento web. Em maio de 2019, o jQuery ainda era usado em 74% dos sites conhecidos, de acordo com o pesquisador de tecnologia da web W3Techs. No entanto, a biblioteca jQuery, que estreou em agosto de 2006, agora está sendo vista por alguns desenvolvedores como uma tecnologia mais antiga, cujo tempo já passou. Alternativas ao jQuery surgiram nos últimos anos, como a biblioteca Cash ou até mesmo o moderno JavaScript vanilla, agora que todos os navegadores da web lidam com JavaScript da mesma maneira e o jQuery não é mais necessário para resolver problemas de compatibilidade. Argumentos no Reddit e vídeos no YouTube afirmam que o jQuery se tornou obsoleto, ou pelo menos não é tão essencial quanto antes.

-  Paul Krill, InfoWorld (2019)

Como a compatibilidade entre navegadores não é mais um problema, a maior parte do jQuery pode hoje em dia ser substituída por padrões da web modernos, sem perder muita conveniência. Em parte devido a isso, o GitHub removeu o jQuery de suas páginas em 2018.

Bibliotecas alternativas

• Dinheiro
• Zepto

Veja também

• Comparação de frameworks JavaScript
• jQuery Mobile
• jQuery UI

Referências

Leitura adicional

• John Resig (palestrante) (13 de abril de 2007). John Resig: Avanço do JavaScript com bibliotecas (vídeo do YouTube) . YUI Theatre . Recuperado em 9 de janeiro de 2018 .
• Krill, Paul (31 de agosto de 2006). "JavaScript, desenvolvedores .Net ajudados em projeto separado" . InfoWorld . Recuperado em 15 de abril de 2019 .
• Taft, Darryl K. (30 de agosto de 2006). "jQuery facilita o desenvolvimento de JavaScript, AJAX" . eWeek . Recuperado em 15 de abril de 2019 .

links externos

• Website oficial