Um guia básico para JQuery para programadores Javascript

Propaganda

JQuery é uma das bibliotecas JavaScript mais populares do planeta (o que é JavaScript O que é JavaScript, e a Internet pode existir sem ele?JavaScript é uma daquelas coisas que muitos dão como certo. Todo mundo usa. consulte Mais informação ). No momento em que foi criado, o JavaScript (será chamado de JS daqui em diante) estava em um lugar muito diferente. 14 de janeiro de 2006 foi o dia em que o jQuery foi anunciado em BarCampNYC. O JS ainda estava faltando - os navegadores suportaram todas as partes dele, mas muitos hacks e soluções alternativas tiveram que ser implementadas para conformidade.

JQuery apareceu e mudou tudo. O JQuery tornou muito fácil escrever código compatível com o navegador. Você poderia animar páginas da web sem se formar em ciência da computação - viva! Dez anos depois, o jQuery ainda é rei e, se você nunca o usou antes, o que você pode fazer com isso?

Além de aprimorar suas habilidades em JavaScript, você pode ler algumas Tutoriais em HTML e CSS Aprenda HTML e CSS com estes tutoriais passo a passo

Curioso sobre HTML, CSS e JavaScript? Se você acha que tem talento para aprender a criar sites do zero - aqui estão alguns ótimos tutoriais passo a passo que vale a pena tentar. consulte Mais informação primeiro se você também não estiver familiarizado com eles.

Nós temos jQuery introduzido Tornando a Web interativa: uma introdução ao jQueryO jQuery é uma biblioteca de scripts do lado do cliente que quase todos os sites modernos usam - torna os sites interativos. Não é a única biblioteca Javascript, mas é a mais desenvolvida, mais suportada e mais usada ... consulte Mais informação antes, portanto, este guia do JQuery se concentrará na codificação real.

Começando

Você pode estar familiarizado com a maneira JS de selecionar IDs no Document Object Model (DOM):

document.getElementById ('foo');

Bem, o JQuery leva esse passo adiante. Você não precisa chamar métodos diferentes para selecionar classes, IDs ou vários elementos. Veja como você seleciona um ID:

$ ('# bar');

Fácil né? É exatamente a mesma sintaxe para selecionar quase qualquer elemento DOM. Veja como você seleciona as turmas:

$ ('.az');

Você também pode ser criativo com algum poder real. Isso seleciona todos td elementos dentro de um tabela exceto o primeiro.

$ ('tabela td'). not (': primeiro');

Observe como os nomes dos seletores correspondem quase exatamente aos seus equivalentes CSS. Você pode atribuir objetos a regular Variáveis ​​JS:

var xyzzy = $ ('# pai. filho');

Ou você pode usar variáveis ​​jQuery:

var $ xyzzy = $ ('# pai. filho');

O cifrão é usado exclusivamente para indicar que essa variável é um objeto jQuery, algo que é muito útil em projetos complexos.

Você pode selecionar o pai de um elemento:

$ ('filho'). pai ();

Ou os irmãos:

$ ('criança'). irmãos ();

Você precisa executar seu código assim que o navegador estiver pronto. Aqui está como você faz isso:

$ (document) .ready (function () {console.log ('pronto!'); });

Mais poder

Agora que você conhece o básico, vamos para algumas coisas mais complexas. Dada uma tabela html:

Faço
Modelo
Cor


Ford
Escolta
Preto


Mini
Tanoeiro
Vermelho


Ford
Cortina
Branco

Digamos que você queira que todas as outras linhas tenham uma cor diferente (conhecida como Zebra Stripes). Agora você pode usar CSS para isso:

#cars tr: enésimo filho (par) {cor de fundo: vermelho; }

É assim que isso pode ser alcançado com o jQuery:

$ ('tr: par'). addClass ('par');

Isso alcançará a mesma coisa, desde que até é uma classe definida em CSS. Observe como o ponto final antes do nome da classe não é necessário. Esses são geralmente necessário apenas para o seletor principal. Idealmente, você usaria CSS para isso, apesar de não ser grande coisa.

O JQuery também pode ocultar ou remover linhas:

$ ('# fordCortina'). hide (); $ ('# fordCortina'). remove ();

Você não precisa ocultar um elemento antes de removê-lo.

Funções

As funções JQuery são como JS. Eles usam chaves e podem aceitar argumentos. O que é realmente interessante é através de retornos de chamada. Os retornos de chamada podem ser aplicados a praticamente qualquer função jQuery. Eles especificam um pedaço de código a ser executado assim que a ação principal for concluída. Isso fornece uma enorme funcionalidade. Se eles não existissem e você escrevesse seu código esperando que ele fosse executado de maneira linear, o JS continuaria executando a próxima linha de código enquanto aguardava a anterior. Os retornos de chamada garantem que o código seja executado apenas quando a tarefa original estiver concluída. Aqui está um exemplo:

$ ('table'). hide (function () {alert ('regras MUO!'); });

Esteja avisado - esse código executa um alerta para cada elemento. Se o seu seletor estiver na página mais de uma vez, você receberá vários alertas.

Você pode usar retornos de chamada com outros argumentos:

$ ('tr: even'). addClass ('even', function () {console.log ('Hello'); });

Observe como há um ponto e vírgula após as chaves de fechamento. Normalmente, isso não seria necessário para uma função JS, no entanto, esse código ainda é considerado em uma linha (como o retorno de chamada está entre colchetes).

Animação

O JQuery facilita muito a animação de páginas da web. Você pode desvanecer ou desvanecer elementos:

$ ('. fade1'). fadeIn ('lento'); $ ('# fade2'). fadeOut (500);

Você pode especificar três velocidades (lenta, média, rápida) ou um número que represente a velocidade em milissegundos (1000 ms = 1 segundo). Você pode animar quase qualquer elemento CSS. Isso anima a largura do seletor de sua largura atual para 250 pixels.

$ ('foo'). animate ({width: '250px'});

Não é possível animar cores. Você também pode usar retornos de chamada com animação:

$ ('bar'). animate ({height: '250px'}, function () {$ ('bar'). animate ({width: '50px'} });

rotações

Loops realmente brilham em jQuery. Cada() é usado para iterar sobre todos os elementos de um determinado tipo:

$ ('li'). each (function () {console.log ($ (this)); });

Você também pode usar um índice:

$ ('li'). each (function (i) {console.log (i + '-' + $ (this)); });

Isso imprimiria 0, então 1 e assim por diante.

Você também pode usar cada() para iterar sobre matrizes, assim como no JS:

var cars = ['Ford', 'Jaguar', 'Lotus']; $ .each (carros, função (i, valor) {console.log (valor); });

Observe o argumento extra chamado valor - este é o valor do elemento da matriz.

Vale a pena notar que cada() posso as vezes ser mais lento que os loops de baunilha JS. Isso ocorre devido à sobrecarga de processamento extra que o jQuery executa. Na maioria das vezes, isso não é um problema. Se você está preocupado com o desempenho ou está trabalhando com grandes conjuntos de dados, considere comparar seu código com jsPerf primeiro.

AJAX

JavaScript e XML assíncrono ou AJAX é realmente muito fácil com o jQuery. O AJAX alimenta uma grande quantidade da Internet, e é algo que abordamos parte 5 Tutorial do jQuery (parte 5): AJAX todos eles!Quando chegamos ao final da nossa série de mini-tutoriais do jQuery, já era hora de analisarmos mais detalhadamente um dos recursos mais usados ​​do jQuery. O AJAX permite que um site se comunique com ... consulte Mais informação nosso tutorial jQuery Tutorial do jQuery - Introdução: Noções básicas e seletoresNa semana passada, falei sobre a importância do jQuery para qualquer desenvolvedor web moderno e por que ele é incrível. Esta semana, acho que é hora de sujarmos as mãos com algum código e aprendermos como ... consulte Mais informação . Ele fornece uma maneira de carregar parcialmente uma página da web - não há motivo para recarregar a página inteira quando você deseja atualizar apenas a pontuação de futebol, por exemplo. O jQuery possui vários métodos AJAX, sendo o mais fácil carga():

$ ('# baz'). load ('alguns / url / page.html');

Isso executa uma chamada AJAX para a página especificada (alguns / url / page.html) e coloca os dados no seletor. Simples!

Você pode executar HTTP GET solicitações de:

$ .get ('alguma / url', função (resultado) {console.log (resultado); });

Você também pode enviar dados usando POSTAR:

$ .post ('alguns / outros / url', {'make': 'Ford', 'model': 'Cortina'});

É muito fácil enviar dados do formulário:

$ .post ('url', $ ('form'). serialize (), função (resultado) {console.log (resultado); }

o serialize () A função obtém todos os dados do formulário e os prepara para transmissão.

Promessas

Promessas são usadas para execução adiada. Eles podem ser difíceis de aprender, mas o jQuery o torna um pouco menos problemático. ECMAScript 6 apresenta promessas nativas ao JS, no entanto, o suporte ao navegador é na melhor das hipóteses. Por enquanto, as promessas do jQuery são muito melhores no suporte a vários navegadores.

Uma promessa é quase exatamente como parece. O código fará uma promessa de retornar posteriormente quando estiver completo. Seu mecanismo JavaScript passará a executar outro código. Uma vez que a promessa resolve (retorna), algum outro pedaço de código pode ser executado. As promessas podem ser pensadas como retornos de chamada. o documentação jQuery explica com mais detalhes.

Aqui está um exemplo:

// dfd == adiado. var dfd = $ .Deferred (); function doThing () {$ .get ('some / slow / url', function () {dfd.resolve (); }); retornar dfd.promise (); } $ .when (doThing ()). then (function () {console.log ('YAY, está terminado'); });

Observe como a promessa é feita (dfd.promise ()) e é resolvido apenas quando a chamada AJAX é concluída. Você pode usar uma variável para rastrear várias chamadas AJAX e somente concluir outra tarefa quando todas as tarefas forem concluídas.

Dicas de desempenho

A chave para extrair o desempenho do seu navegador é limitar o acesso ao DOM. Muitas dessas dicas também podem ser aplicadas ao JS, e você pode criar um perfil do seu código para ver se ele é inaceitavelmente lento. Na era atual dos mecanismos JavaScript de alto desempenho, pequenos gargalos no código geralmente passam despercebidos. Apesar disso, ainda vale a pena tentar escrever o código de desempenho mais rápido possível.

Em vez de pesquisar no DOM para cada ação:

$ ('foo'). css ('cor de fundo', 'vermelho'); $ ('foo'). css ('cor', 'verde'); $ ('foo'). css ('largura', '100px');

Armazene o objeto em uma variável:

$ bar = $ ('foo'); $ bar.css ('cor de fundo', 'vermelho'); $ bar.css ('cor', 'verde'); $ bar.css ('largura', '100px');

Otimize seus loops. Dada uma baunilha para loop:

var cars = ['Mini', 'Ford', 'Jaguar']; para (int i = 0; i 

Embora não seja inerentemente ruim, esse loop pode ser feito mais rapidamente. Para cada iteração, o loop precisa calcular o valor da matriz de carros (cars.length). Se você armazenar isso em outra variável, poderá obter desempenho, especialmente se você estiver trabalhando com grandes conjuntos de dados:

for (int i = 0, j = cars.length; i 

Agora, o comprimento da matriz de carros é armazenado em j. Isso não precisa mais ser calculado em todas as iterações. Se você estiver usando cada(), você não precisa fazer isso, embora o JS vanilla adequadamente otimizado possa superar o jQuery. Onde o jQuery realmente brilha é através da velocidade de desenvolvimento e depuração. Se você não está trabalhando em big data, o jQuery geralmente é mais do que rápido.

Agora você deve saber o básico o suficiente para ser um ninja do jQuery!

Você usa jQuery regularmente? Você parou de usá-lo por algum motivo? Deixe-nos saber seus pensamentos nos comentários abaixo!