Introdução ao jQuery (parte 2): métodos e funções

Isso é parte de uma introdução inicial para a série de programação da web jQuery. Parte 1 cobriu os fundamentos do jQuery de como incluí-lo em seu projeto e seletores.

Isso é parte de uma introdução inicial para a série de programação da web jQuery.  Parte 1 cobriu os fundamentos do jQuery de como incluí-lo em seu projeto e seletores.
Propaganda

introdução ao jquery Isso é parte de uma introdução inicial para a série de programação da web jQuery. Parte 1 cobriu os fundamentos do jQuery Tutorial jQuery - Introdução: Fundamentos e Seletores Tutorial jQuery - Introdução: Fundamentos e Seletores Na semana passada, falei sobre o quão importante o 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 ... Leia Mais sobre como incluí-lo em seu projeto e seletores. Na parte 2, continuaremos com o uso básico à medida que observamos alguns métodos que você pode executar nesses elementos DOM e mais alguns fundamentos de linguagem.

$ (seletor) .method ();

Se você se lembra da lição 1, esta é a estrutura básica de uma manipulação DOM no jQuery. A manipulação de DOM não é a única coisa que você pode fazer com o jQuery, é claro, mas é o lugar mais fácil de começar e o mais comum, e é por isso que escolhemos.

Para recapitular rapidamente, a parte do seletor dessa instrução permite usar nomes de elementos, classes ou IDs semelhantes a CSS para localizar partes do DOM. Por exemplo, para pegar todos com o nome de classe de .hidden, usaríamos :

$('div.hidden') 

A segunda parte desta equação é o método a ser executado nesses DIVs, uma vez que os encontramos (se eles existirem, ou eles podem ser apenas um item de “correspondência”). Lembre-se, o jQuery retornará apenas um elemento para seleções de ID, já que os IDs devem se referir a itens exclusivos. Se você vai ter mais de uma coisa, ela deve ser definida como uma classe em CSS.

Em métodos então; o que você pode fazer com os elementos do DOM?

Primeiramente, apresentei o método .css da última vez para que você possa usá-lo para testes. O formato é simples:

 .css('property', 'value'); 

Qualquer coisa definível por CSS pode, portanto, ser ajustada por jQuery - cores, transparência, localização, tamanho - para citar apenas alguns. A mudança é imediata.

Se você preferir animar as alterações do CSS, tenho ótimas notícias para você; Existe também um método chamado .animate () . É um pouco mais complexo:

 .animate({'property':'value'}, speed); 

Como um exemplo:

 .animate({'opacity':'0.25', 'height':'100px'}, 'fast'); 

Neste ponto, você pode estar se perguntando para que servem as chaves; Eles são chamados de "literal de objeto" e normalmente são usados ​​para criar uma lista de pares de propriedade: valor, como se fosse uma matriz indexada se você estiver vindo de outros idiomas. Você vai usá-los muito em jQuery, então eu vou dizer isso de novo - se acostumar a verificar corretamente para colchetes fechados e chaves!

Confira esta página para muitos exemplos de trabalho do método animado.

Além de manipular as propriedades CSS de algo, você pode ajustar o conteúdo dele com o . Os métodos text (), .html () e .val () também (val é para o conteúdo dos elementos de formulário) . Esses métodos atuam como set e ters; Se você não especificar um valor, eles receberão o valor atual. Se você especificar um valor, eles substituirão o valor atual.

Aqui estão alguns exemplos rápidos:

Obtenha o valor atual do campo de nome no formulário de comentários e atribua-o a uma variável comment_name :

 var commenter_name = $(#comment-form #name).val(); 

Defina o valor de para o valor obtido de commenter_name :

 $('span.name').text(commenter_name); 

Em seguida, temos uma vasta seleção de métodos para clonar, mover, inserir ou excluir partes do DOM. Sua imaginação é o limite, realmente.

Digamos que você queira inserir dinamicamente um bloco de imagem de publicidade a cada três parágrafos na coluna de conteúdo, mas você está fazendo isso em JavaScript para que o carregamento inicial da página possa ser mantido limpo. Soa bem complexo, certo? Dificilmente ...

 $('div#content p:nth-child(3n)').after('  '); 

Quebrando isso, pedimos à jQuery para:

  1. Encontre o div com um ID de "conteúdo"
  2. Encontre os p's contidos dentro daquele div
  3. Filtrar para cada terceiro p usando o pseudo seletor nth-child (mais sobre isso aqui)
  4. Inserir um img arbitrário após cada elemento correspondente

Eu não posso listar todos os métodos aqui e você não quer ler isso. O ponto é que há um método para fazer praticamente tudo o que você pode pensar quando se trata de manipulação, então verifique a API para uma que você pode usar.

introdução ao jquery

Além disso, tenha em mente que pode haver mais de uma maneira de fazer alguma coisa. Se, por exemplo, você não puder refinar o objeto correto para insertAfter (), talvez pense em encontrar o próximo filho inativo e usar insertBefore () .

Método de Encadeamento

Por último, hoje, vamos falar rapidamente sobre o encadeamento de métodos, basicamente porque é incrível. Primeiro, vamos considerar as seguintes linhas de código:

 $('nav#menu').fadeIn('fast'); $('nav#menu').addClass('beingShown'); $('nav#menu').css('margin-right', '10px'); 

Isso parece razoável o suficiente, certo? Mas você pode fazer o mesmo em apenas uma linha:

 $('nav#menu').fadeIn('fast').addClass('beingShown').css('margin-right', '10px'); 

Isso faz exatamente a mesma coisa e é chamado de encadeamento de métodos . Como quase todos os métodos do jQuery retornam um objeto jQuery, cada um pode alimentar o próximo. Isso significa menos código - o que é sempre uma coisa boa - mas na verdade também é mais rápido.

Por quê? Bem, toda vez que você invoca o comando e seletor básico do jQuery $, você está pedindo para procurar na árvore DOM procurando por um elemento correspondente. Quando você encadeia métodos, você também não precisa se referir ao DOM, porque ele sabe onde eles estão agora e pode executar o método instantaneamente.

É por hoje, e acho que provavelmente cobrimos bastante. Agora você deve estar armado com a capacidade de executar algumas manipulações de DOM bastante pesadas, então vá em frente, encadeie seus métodos juntos e faça uma bagunça real na página. Por enquanto, você vai querer colocar seus scripts no rodapé para dar o restante do tempo da página para carregar. Na próxima semana, abordaremos a questão de fazer o jQuery fazer coisas apenas quando tudo tiver sido carregado corretamente com eventos e o curioso caso de funções anônimas.

Se você acabou de se deparar com este post, você provavelmente é um desenvolvedor web de algum tipo e pode querer verificar todos os nossos artigos WordPress e blogs, ou até mesmo a nossa melhor página Plugins WordPress.

In this article