jQuery - jQuery

Da Wikipédia, a enciclopédia livre

jQuery
JQuery logo.svg
autor original (s) John Resig
Desenvolvedor (s) A Equipe do jQuery
lançamento inicial 26 agosto de 2006 ; Há 12 anos ( 2006-08-26 )
Versão estável
3.3.1 / (20 janeiro de 2018 ; 10 meses atrás ) ( 2018/01/20 )
Repositório Editar esta em wikidata
Escrito em JavaScript
Plataforma Veja suporte ao navegador
Tamanho
ver gzip estímulo dev
1.x 31kb 90.9kb 266kb
2.x 27.7kb 81.6kb 236KB
3.x 29.9kb 86.3kb 263KB
( KB )
Tipo biblioteca de JavaScript
Licença MIT
Local na rede Internet jquery .com

jQuery é uma biblioteca JavaScript projetado para simplificar HTML DOM passagem de árvore e manipulação, bem como manipulação de eventos , animação e Ajax . É software livre, de código aberto usando o permissiva licença MIT . Web análise indica que é a biblioteca JavaScript mais amplamente implantado por uma larga margem.

sintaxe do jQuery é projetado para torná-lo mais fácil de navegar um documento, selecione DOM elementos, criar animações , lidar com eventos e desenvolver Ajax aplicações. jQuery também fornece recursos para os desenvolvedores para criar plug-ins no topo da biblioteca JavaScript. Isto permite aos desenvolvedores criar abstrações para a interação de baixo nível e animação, efeitos avançados e de alto nível, os widgets personalizável. A abordagem modular para a biblioteca jQuery permite a criação de poderosas páginas web dinâmicas e aplicativos da Web.

O conjunto de núcleo jQuery apresenta seleções -DOM elemento, transversal e manipulação habilitado pelo seu motor selector (chamado "chiar" da v1.3), criou um novo "estilo de programação", algoritmos de fusão e estruturas de dados DOM. Este estilo influenciou a arquitetura de outros frameworks JavaScript como v3 YUI e Dojo , mais tarde, estimulando a criação do padrão API Seletores .

Microsoft e Nokia agrupar jQuery em suas plataformas. Microsoft inclui-lo com Visual Studio para uso dentro da Microsoft ASP.NET AJAX e ASP.NET MVC quadros enquanto a Nokia integrou-o na plataforma de desenvolvimento Widget Web Run-Time.

visão global

jQuery, no seu núcleo, é um objecto do documento Modelo biblioteca de manipulação (DOM). O DOM é uma representação em árvore-estrutura de todos os elementos de uma página Web. jQuery simplifica a sintaxe para encontrar, seleccionando, e manipular estes 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 h1 tag), mudando um ou mais dos seus atributos (por exemplo, cor, visibilidade), ou tornando-se responder a um evento ( por exemplo, um clique do mouse).

jQuery também fornece um paradigma para o tratamento de eventos que vai além da selecção elemento DOM básica e manipulação. A atribuição evento e a definição da função de retorno de chamada de evento são feitas em uma única etapa em um único local no código. jQuery também pretende incorporar outras funcionalidades JavaScript altamente utilizado (por exemplo, se desvanece ins e desaparecer saídas quando escondendo os elementos, através da manipulação de animações CSS propriedades).

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

  • Separação de JavaScript e HTML: A biblioteca jQuery fornece uma sintaxe simples para adicionar evento manipuladores para o DOM usando JavaScript, em vez de adicionar evento atributos HTML para chamar funções de JavaScript. Assim, ele incentiva os desenvolvedores a separar completamente o código JavaScript de marcação HTML.
  • Concisão e clareza: jQuery promove concisão e clareza com recursos como funções "chainable" e nomes de função de taquigrafia.
  • Eliminação de incompatibilidades entre navegadores: Os motores de JavaScript de diferentes navegadores diferem ligeiramente de modo código JavaScript que funciona para um navegador pode não funcionar para outra. À semelhança de outros kits de ferramentas JavaScript, jQuery lida com todas essas inconsistências cross-browser e fornece uma interface consistente que funciona em diferentes navegadores.
  • Extensibilidade: Novos eventos, elementos e métodos podem ser facilmente adicionados e depois reutilizados como um plugin.

História

jQuery foi originalmente criado em janeiro de 2006 em BarCamp NYC por John Resig , influenciado pelo início Dean Edwards' cssQuery biblioteca. Ele é atualmente mantido por uma equipe de desenvolvedores liderados por Timmy Willison (com o motor jQuery seletor, Sizzle, sendo liderado por Richard Gibson).

jQuery foi originalmente licenciado sob a CC BY-SA 2.5 , e relicensed à licença MIT em 2006. No final de 2006, era dual-licenciado sob GPL licenças e MIT. Como isso levou a alguma confusão, em 2012, a GPL foi abandonada e agora só é licenciado sob a licença MIT.

Em 2015, jQuery foi usado em 63% dos top 1 milhão de sites (de acordo com BuiltWith ), e 17% de todos os sites da Internet. A partir de Junho de 2018, jQuery é usado em 73% dos sítios de topo 1 milhão, e por 22,4% de todos os sítios de (de acordo com a BuiltWith).

Características

jQuery inclui os seguintes recursos:

  • DOM seleções elemento usando o multi-navegador open source motor selector Sizzle , um spin-off do projeto jQuery
  • manipulação DOM com base em seletores CSS que utiliza nomes e os atributos dos elementos, tais como id e classe, como critérios para selecionar os nós no DOM
  • Eventos
  • Efeitos e animações
  • Ajax
  • Diferido e Promise objetos para controlar o processamento assíncrono
  • JSON análise
  • Extensibilidade através de plug-ins
  • Utilidades, tais como detecção de recurso
  • Métodos de compatibilidade que estão disponíveis nativamente em navegadores modernos, mas precisam fallbacks para navegadores mais antigos, tais como jQuery.inArray()e jQuery.each().
  • Cross-browser suporte

suporte ao navegador

jQuery 3.0 e mais recentes suporta "em andamento 1-versões" (que significa a versão estável atual do navegador e a versão que o precedeu) do Firefox (e ESR), Chrome , Safari e Borda , bem como Internet Explorer 9 e mais recente. No celular suporta iOS 7 e mais recente e Android 4.0 e mais recente.

Distribuição

A biblioteca jQuery é normalmente distribuído 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 através da ligação a uma cópia local, ou através da ligação a uma das muitas cópias disponíveis a partir de servidores públicos. jQuery tem uma rede de distribuição de conteúdo (CDN) hospedado por MaxCDN. Google e Microsoft sediar a biblioteca também.

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

<script src="jquery.js"></script>

Exemplo de ligar uma cópia da biblioteca de CDN pública do jQuery:

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

Interface

Funções

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

Ambos são acessados através de identificador principal do jQuery: jQuery. Esse identificador tem um alias chamado $. Todas as funções podem ser acessadas através de qualquer um destes dois nomes.

métodos do jQuery

A jQueryfunção é uma fábrica para a criação de um objecto jQuery que representa um ou mais nós DOM. objetos jQuery tem métodos para manipular estes nodos. Estes métodos (por vezes chamados de comandos) , são encadeável como cada método também devolve um objecto jQuery.

O acesso e manipulação de vários nós DOM em jQuery normalmente começa com chamar a $função com uma corda seletor CSS. Isso retorna um objeto jQuery referenciar todos os elementos correspondentes no HTML page. $("div.test"), Por exemplo, devolve um objecto 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 agem directamente sobre um objecto jQuery. Eles são acessados como métodos estáticos no jQuery ou US $ identificador. Por exemplo, $.ajax()é um método estático.

No-conflito modo

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

Típico start-ponto

Normalmente, jQuery é usado por colocar código de inicialização e manipulação de funções no evento . Esta é desencadeada por jQuery quando o navegador tenha terminado a construção do 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-facto para a execução de código após o DOM está pronto. No entanto, desde jQuery 3.0, os desenvolvedores são encorajados a usar o muito mais curto $(handler)assinatura em seu lugar.

encadeamento

métodos objeto jQuery tipicamente também devolver um objecto jQuery, o que permite o uso de cadeias de métodos :

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

Esta linha encontra todos div elemento com atributo de classe test, em seguida, registra um manipulador de eventos em cada elemento para o evento "click", em seguida, adiciona o atributo de classe foopara cada elemento.

Certos métodos de objeto jQuery recuperar valores específicos (em vez de modificar o estado). Um exemplo disto é o val()método, que devolve o valor actual de uma entrada de texto elemento. Nestes casos, uma declaração como $('#user-email').val()não pode ser usado para encadear como o valor de retorno não faz referência a um objeto jQuery.

Criação de novos elementos DOM

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

$('select#car-brands')
  .append($('<option>')
    .attr({ value: 'VAG' })
    .text('Volkswagen')
  );

Ajax

É possível fazer Ajax pedidos (com cross-browser suporte) com $.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 os dados name=Johne location=Bostonpara /process/submit.phpno servidor. Quando este pedido termina a função de sucesso é chamado para alertar o usuário. Se a solicitação falhar, ele irá alertar o usuário para a falha, o status da solicitação, e o erro específico.

O exemplo acima usa os .then()e .catch()métodos para registar as chamadas de retorno que são executados quando a resposta foi concluída. Esses retornos de chamada promessa deve ser utilizado devido à natureza assíncrona do Ajax pedidos.

plug-ins jQuery

A arquitetura do jQuery permite aos desenvolvedores criar plug-in de código para estender a sua função. Existem milhares de jQuery plug-ins disponíveis na Web que cobrem uma gama de funções, tais como ajudantes Ajax, serviços Web , datagrids, listas dinâmicas, XML e XSLT ferramentas, arrastar e soltar , eventos, bolinho manuseio e janelas modais .

Uma importante fonte de plugins jQuery é a plugins subdomínio do site do jQuery de Projetos. Os plugins neste subdomínio, no entanto, foram apagados acidentalmente em Dezembro de 2011, numa tentativa de livrar o site de spam. O novo site é uma GitHub repositório -hosted, o que exigiu aos desenvolvedores reenviar os seus plugins e conformar-se às novas exigências de submissão. jQuery fornece um "Centro de Aprendizagem" que pode ajudar os usuários a entender JavaScript e começar a desenvolver plugins jQuery.

histórico de lançamento

Número da versão Data de lançamento Última atualização Tamanho Prod (KB) Notas Adicionais
1.0 26 agosto de 2006 ( 2006-08-26 ) Primeiro libertação estável
1.1 14 de janeiro de 2007 ( 2007-01-14 )
1,2 10 de setembro de 2007 ( 2007-09-10 ) 1.2.6 54
1.3 14 de janeiro de 2009 ( 2009-01-14 ) 1.3.2 55,9 Sizzle Selector motor introduzido no núcleo
1,4 14 de janeiro de 2010 ( 2010-01-14 ) 1.4.4 76
1.5 31 de janeiro de 2011 ( 2011-01-31 ) 1.5.2 83 gestão callback diferido, módulo ajax reescrita
1,6 03 de maio de 2011 ( 2011-05-03 ) 1.6.4 89 melhorias de desempenho significativas para o attr () e Val () funções
1,7 03 de novembro de 2011 ( 2011-11-03 ) 1.7.2 (21 de março de 2012 )  ( 2012-03-21 ) 92 Novas APIs do Evento: .no () e .off (), enquanto as antigas APIs ainda são suportados.
1.8 09 de agosto de 2012 ( 2012-08-09 ) 1.8.3 (13 de novembro, 2012 )  ( 2012/11/13 ) 91,4 Chiar Selector Motor reescritos, animações melhoradas e flexibilidade $ (html, adereços).
1.9 15 jan 2013 ( 2013/01/15 ) 1.9.1 (4 de fevereiro de 2013 )  ( 2013/02/04 ) 90 Remoção de interfaces preterido e limpeza de código
1,10 24 de maio de 2013 ( 2013/05/24 ) 1.10.2 (03 julho de 2013 )  ( 2013/07/03 ) 91 correções de bugs incorporados e diferenças relatadas de ambos os ciclos 1.9 e 2.0 beta
1.11 24 de janeiro de 2014 ( 2014/01/24 ) 1.11.3 (28 de abril de 2015 )  ( 2015/04/28 ) 95,9
1.12 08 de janeiro de 2016 ( 2016/01/08 ) 1.12.4 (20 de maio de 2016 )  ( 2016/05/20 ) 95
2,0 18 de abril de 2013 ( 2013/04/18 ) 2.0.3 (3 de julho de 2013 )  ( 2013/07/03 ) 81,1 Caiu 6-8 suporte IE para melhorias de desempenho e redução no tamanho do arquivo
2.1 24 de janeiro de 2014 ( 2014/01/24 ) 2.1.4 (28 de abril de 2015 )  ( 2015/04/28 ) 82,4
2.2 08 de janeiro de 2016 ( 2016/01/08 ) 2.2.4 (20 de maio de 2016 )  ( 2016/05/20 ) 85,6
3,0 09 de junho de 2016 ( 2016/06/09 ) 3.0.0 (9 de junho de 2016 )  ( 2016/06/09 ) 86,3 Promessas / A + suporte para Deferreds, $ .ajax e US $ .quando, .data () compatível com HTML5
3.1 07 de julho de 2016 ( 2016/07/07 ) 3.1.1 (23 de setembro de 2016 )  ( 2016/09/23 ) 86,3 jQuery.readyException acrescentou, erros manipulador prontos agora não são silenciados
3.2 16 de março de 2017 ( 2017/03/16 ) 3.2.1 (20 março de 2017 )  ( 2017/03/20 ) 84,6 Adicionado suporte para recuperar conteúdo de <template>elementos, e depreciação de vários métodos antigos.
3,3 19 de janeiro de 2018 ( 2018/01/19 ) 3.3.1 (20 janeiro de 2018 )  ( 2018/01/20 ) 84,8 Deprecation de antigas funções, funções que aceitam aulas agora também apoiá-los em formato de matriz.

framework de testes

QUnit é um framework de automação de teste usado para testar o projeto jQuery. A equipe jQuery desenvolveu-lo como uma biblioteca de teste de unidade in-house. A equipe jQuery usa para testar o seu código e plugins, mas pode testar qualquer código JavaScript genérico, incluindo do lado do servidor de código JavaScript.

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

Veja também

Referências

Outras leituras

links externos