Na semana passada, falei sobre como o jQuery é importante para qualquer desenvolvedor da Web moderno e por que ele é incrível. Esta semana, acho que é hora de sujarmos as mãos com algum código e aprender como realmente usar jQuery em nossos projetos.

Vou dizer isso agora - você não precisa aprender Javascript para usar jQuery. Provavelmente é melhor se você pensar em jQuery como uma evolução do Javascript - uma maneira melhor de fazer isso - do que simplesmente uma biblioteca que adiciona funcionalidade. Qualquer Javascript de que você precisa será obtido no caminho. No entanto, presume-se que, como desenvolvedor da Web, você tenha um bom conhecimento de HTML e CSS (e aqui está nosso guia gratuito de xHTML, caso não tenha!).

---

---

Modelo de Objeto de Documento

jQuery tem tudo a ver com travessia e manipulação de JULGAMENTO - a D ocumento OU bject M odel. O DOM é uma representação hierárquica da árvore da página, construída pelos navegadores após a leitura de todo o código HTML. Em jQuery, usaremos terminologia como pai , crianças , e irmãos com bastante frequência, então você deve ter uma ideia do que isso significa em relação ao DOM.

Este diagrama simples dew3schoolsexplica os conceitos muito bem. Você deve ser capaz de ver que o pai do elemento é, enquanto o elemento tem um imediato

irmão.

Primeiros passos: Adicionando jQuery

A versão mais recente do jQuery tem cerca de 91 KB quando compactada, portanto, adiciona aproximadamente o mesmo peso de página que uma pequena fotografia ou captura de tela. A maneira mais fácil de incluir jQuery em seu projeto é colar uma referência à versão hospedada mais recente na seção de cabeçalho do seu site:

Observe, entretanto, que se você estiver executando o Wordpress, isso pode causar problemas porque ele já tem sua própria cópia da biblioteca jQuery. Os plug-ins podem solicitar que isso seja carregado, e o Wordpress carregará o jQuery de maneira inteligente apenas uma vez, independentemente de quantos plug-ins o tenham solicitado.

Se você adicionar a seguinte linha ao seu functions.php arquivo de tema, você adicionará outra solicitação para que ele seja incluído. O Wordpress saberá sempre carregá-lo se o seu tema estiver ativo.

---

---

como posso ver mensagens deletadas no facebook

wp_enqueue_script('jquery');

A segunda coisa a ter em mente é que quando o jQuery é adicionado usando o método padrão, ele será carregado como $ . Qualquer coisa que você fizer com jQuery será precedida por este $, como:

$.ajax

ou

---

---

$('#header')

No entanto, quando o jQuery é carregado por meio do Wordpress, tudo é feito usando a variável jQuery em vez de $, então, por exemplo:

jQuery('#header')

Embora este não seja um grande problema ao escrever seu próprio código, significa que recortar e colar trechos de jQuery que você encontra na web precisarão ser traduzidos para usar jQuery em vez de $ - Isso é tudo.

Uma maneira de contornar isso é envolver o código $ -style que você encontrar assim:

(function($) {
// paste $ code in here
})(jQuery);

Isso leva o jQuery variável e passa para uma função anônima como $ . Explicarei as funções anônimas da próxima vez - por enquanto, vamos aprender a estrutura básica de um pouco do código jQuery.

Para adicionar seu código a uma página HTML ou PHP, coloque tudo dentro de tags, assim:


// jQuery code codes here


$ ('seletor')método();

É isso aí, no título lá em cima. Essa é a estrutura básica de uma única parte do código jQuery para manipular o DOM. Fácil, certo?

oseletordiz ao jQuery para encontrar coisas que correspondam a esta regra, e é o mesmo que seletores CSS (e mais alguns na parte superior). Então, assim como no CSS, você estilizaria todos os links com

a { }

O mesmo seria feito em jQuery como

$('a')

Isso pode ser feito para qualquer elemento HTML - div, h1, span - qualquer que seja. Você também pode usar classes CSS e IDs para ser mais específico.

Por exemplo, para encontrar todos os links com a classe 'findme', você usaria:

$('a.findme')

Você não precisa especificar o tipo de elemento a cada vez - mas, se o fizer, simplesmente tornará a regra mais específica. Você poderia apenas ter dito

$('.findme')

que combinaria tudo com a classe me encontre , seja ou não um link.

Para usar um elemento de ID nomeado, use o # assine em vez disso. A principal diferença aqui é que um seletor de ID selecionará apenas um objeto, enquanto um seletor de classe pode encontrar mais de um.

aplicativo que permite que você use wi-fi escolar

$('#something')

Basicamente, se você pode fazer em CSS, o jQuery também o fará. Na verdade, você também pode usar alguns pseudo seletores de estilo CSS3 bastante complexos, como: primeiro

$('body p:first')

O que agarraria o parágrafo da página. Você também encontra elementos com certos atributos. Considere este exemplo; queremos encontrar todos os links da página que apontam internamente para fazer uso de e destacá-los de alguma forma. Veja como podemos encontrá-los:

$('a[href*='makeuseof']')

Isso não é legal? Bem, eu acho que é.

Seu próximo porto de escala deve ser o Documentação da API jQuery para seletores . É uma lista enorme de todos os diferentes tipos de seletores disponíveis para uso, e ninguém espera que você os aprenda todos.

A próxima parte da equação émétodo- o que fazer com essas coisas depois de encontrá-las todas - mas deixaremos isso para a próxima lição. Se você quiser começar a experimentar vários seletores agora, sugiro que se atenha ao seguinte método css. Isso leva dois parâmetros - um CSS nome da propriedade , e um novo valor para atribuir a essa propriedade. Portanto, para dar a todos os links uma cor de fundo vermelha, você faria:

$('a').css('background-color','red');

Simples o suficiente! Embora isso possa não ter nenhum uso prático, ele permitirá que você veja facilmente quaisquer elementos localizados usando seus seletores. Agora vá em frente e selecione - o DOM espera por você.

Espero que este tutorial tenha sido útil para você; Tentei torná-lo o mais simples e fácil de entender possível. Sinta-se à vontade para fazer qualquer pergunta ou deixar comentários, mas esteja ciente de que certamente não sou um ninja de elite da jQuery.

Compartilhado Compartilhado Tweet O email 5 dicas para turbinar suas máquinas Linux VirtualBox

Cansado do fraco desempenho oferecido pelas máquinas virtuais? Aqui está o que você deve fazer para aumentar o desempenho do VirtualBox.

Leia a seguir Tópicos relacionados

• Cultura da Web
• Desenvolvimento web
• JavaScript
• Programação
• jQuery

Sobre o autor James Bruce(707 artigos publicados)

James é bacharel em Inteligência Artificial e certificado pela CompTIA A + e Network +. Quando não está ocupado como Editor de Avaliações de Hardware, ele gosta de LEGO, VR e jogos de tabuleiro. Antes de ingressar na MakeUseOf, ele foi técnico de iluminação, professor de inglês e engenheiro de data center.

Mais de James Bruce

Assine a nossa newsletter

Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!

Clique aqui para se inscrever