Introdução ao jQuery (Parte 2): Métodos e Funções

Propaganda

Isso faz parte de uma introdução contínua para iniciantes à série de programação da web jQuery. A Parte 1 abordou os conceitos básicos do 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 de como incluí-lo em seu projeto e seletores. Na parte 2, continuaremos com o uso básico, conforme analisamos alguns métodos que você pode executar nesses elementos DOM e mais alguns fundamentos de linguagem.

$(seletor).método();

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

Para recapitular rapidamente, o seletor parte desta declaração permite que você use nomes, classes ou IDs de elementos semelhantes a CSS para localizar partes do DOM. Por exemplo, para pegar todos os com um nome de classe de

.escondido, usaríamos:

$ ('div.hidden')

A segunda parte desta equação é a método para executar essas DIVs depois de encontrá-las (se elas existirem; ou eles podem ser apenas um item "correspondente"). Lembre-se de que o jQuery retornará apenas um elemento para as seleções de ID, pois os IDs devem se referir a itens exclusivos. Se você tiver 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?

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

.css ('propriedade', 'valor');

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

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

.animate ({'propriedade': 'valor'}, velocidade);

Como um exemplo:

.animate ({'opacidade': '0,25', 'altura': '100px'}, 'rápido');

Nesse ponto, você deve estar se perguntando para que servem os aparelhos; eles são chamados de "literal de objeto" e geralmente são usados ​​para criar uma lista de valor da propriedade pares, como uma espécie de matriz indexada se você vem de outros idiomas. Você os usará muito no jQuery, por isso vou repetir isso - acostume-se a verificar adequadamente se há colchetes e chaves!

Verificação de saída 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 .métodos text (), .html () e .val () também (val é para o conteúdo dos elementos do formulário). Esses métodos agem como conjuntopontos e obterníveis; 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ário e atribua-o a uma variável comment_name:

var commenter_name = $ (# formulário de comentário # nome) .val ();

Defina o valor de para o valor obtido commenter_name:

$ ('span.name'). texto (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ágrafo na coluna de conteúdo, mas você está fazendo isso em Javascript para que o carregamento inicial da página possa ser mantido limpo. Parece bastante complexo, certo? Dificilmente ...

$('div # contentp: enésimo filho (3n)').depois de('');

Por fim, pedimos ao jQuery para:

1. Encontre a div com um ID de "conteúdo"
2. Encontre os p contidos nessa div
3. Filtrar a cada 3º p usando o pseudo-seletor enésimo filho (mais sobre isso aqui)
4. Inserir um img arbitrário após cada elemento correspondente

Não posso listar todos os métodos aqui e você não gostaria de ler isso. A questão é que existe um método para fazer praticamente tudo o que você pode pensar quando se trata de manipulação, então verifique a API para um que você pode usar.

Além disso, lembre-se de que pode haver mais de uma maneira de fazer algo. Se, por exemplo, você não pode restringir o objeto correto para insertAfter (), talvez pense em encontrar o Próximo criança para baixo e usando insertBefore () em vez de.

Encadeamento de método

Por fim, 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 ('rápido'); $ ('nav # menu'). addClass ('beingShown'); $ ('nav # menu'). css ('margin-right', '10px');

Isso parece bastante razoável, 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 encadeamento de método. Como quase todos os métodos jQuery retornam eles mesmos 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 corre mais rápido.

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

É isso por hoje, e acho que provavelmente cobrimos bastante. Agora você deve estar armado com a capacidade de executar algumas manipulações DOM bastante pesadas, então tente, junte seus métodos e faça uma verdadeira bagunça na página. Por enquanto, você deseja colocar seus scripts no rodapé para permitir que o restante da página seja carregado. Na próxima semana, abordaremos a questão de fazer o jQuery fazer as coisas somente quando tudo estiver carregado corretamente com os eventos e o curioso caso de funções anônimas.

Se você acabou de se deparar com esta postagem, provavelmente é um desenvolvedor web de algum tipo e pode conferir todas as nossas WordPress e blogs artigos, ou mesmo nossos Melhores plugins WordPress Os melhores plugins WordPress consulte Mais informação página.