Na semana passada, eu falei sobre quão importante é jQuery

para qualquer desenvolvedor web moderna e por isso que é incrível. Esta semana, eu acho que é hora chegamos nossas mãos sujas com algum código e aprendeu a realmente fazer uso de jQuery em nossos projetos.Fazendo A Web Interativo: Uma introdução ao jQueryFazendo A Web Interativo: Uma introdução ao jQueryjQuery é uma biblioteca de scripting do lado do cliente que quase todos os website moderna usa - faz websites interativos. Não é a única biblioteca javascript, mas é a mais desenvolvida, mais apoiado, e mais amplamente utilizado ....consulte Mais informação

Eu vou dizer isso agora - você não precisa de aprender o javascript para usar jQuery. É provavelmente melhor se você pensar em jQuery como uma evolução do javascript - uma melhor maneira de fazê-lo - do que simplesmente uma biblioteca que adiciona funcionalidade. Qualquer javascript você precisa será pego no caminho. Assume-se, porém, que como um desenvolvedor web que você tem um bom conhecimento de HTML e CSS(E aqui está fora guia xHTML livre útil se não!).

Document Object Model

jQuery é tudo sobre transversal e manipulação do DOM - a Document Object MOdel. O DOM é uma representação de árvore hierárquica da página, construída pelos navegadores depois de ler em todo o código HTML. Em jQuery, vamos usar a terminologia como parente, crianças, e irmãos muitas vezes, então você deve ter uma idéia do que isso significa em relação ao DOM.

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

irmão.

Introdução: Adicionando jQuery

A última versão do jQuery é de cerca de 91KB quando comprimido, por isso acrescenta aproximadamente o mesmo peso da página como uma fotografia pequena ou imagem. A maneira mais fácil de incluir jQuery em seu projeto é para colar uma referência para a versão mais recente hospedado em sua seção de cabeçalho do site:

lt;roteiro src="http://code.jquery.com/jquery-latest.min.js"gt;roteirogt;

Note no entanto que se você estiver executando WordPress, isso pode causar problemas porque já tem a sua própria cópia da biblioteca jQuery. Plugins podem solicitar que esta ser carregado, e WordPress irá inteligentemente única carregar jQuery uma vez, independentemente de quantas plugins pediram para ele.

Se você adicionar a seguinte linha ao seu functions.php arquivo de tema, você vai adicionar um outro pedido para ser incluído. WordPress, então, saber para sempre carregá-lo se o seu tema é ativo.

wp_enqueue_script("jquery")-

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

$.ajax

ou

$("#cabeçalho")

No entanto, quando jQuery é carregado através WordPress, tudo é feito usando a variável jQuery em vez de $, assim, por exemplo:

Video: Curso de JQuery (Universidade XTI)

jQuery("#cabeçalho")

Embora este não é um grande problema ao escrever o seu próprio código, isso não significa que o corte e colar trechos de jQuery que você encontrar na web terá de ser traduzido para usar jQuery em vez de $ - Isso é tudo.

Uma maneira de contornar isso é para embrulhar $ estilo de código que você encontrar assim:

(função($) {// $ colar código aqui})(jQuery)-

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

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

lt;script type="text / javascript"gt;// jQuery código códigos aquilt;/roteirogt;

$ ( ‘seletor‘).método() -

É isso, no título lá em cima. Essa é a estrutura básica de um único pedaço de código jQuery para manipular o DOM. Fácil, não é?

o seletor diz jQuery para encontrar as coisas que correspondem a esta regra, e é o mesmo que seletores CSS (e depois um pouco mais em cima). Então, assim como em CSS você estilizar todos os laços com

uma { }

O mesmo seria feito em jQuery como

Video: Curso jQuery aula 06 - Seletores de Ordem

$(`uma`)

Isso pode ser feito por quaisquer elementos HTML - div, h1, Span - o que quer. Você também pode usar classes CSS e IDs para ser mais específico.

Por exemplo, para encontrar todos os vínculos com a classe “findme”, você usaria:

$(`A.findme`)

Você não precisa especificar o tipo de elemento de cada vez - mas se você fizer isso, ele simplesmente faz a regra mais específica. Você poderia ter apenas disse

$(`.me encontre`)

que combinar tudo com a classe me encontre, se é ou não era uma opção.

Para usar um elemento ID nomeado, use o # assinar em seu lugar. A principal diferença aqui é que um selector de ID só vai selecionar um objeto, enquanto um seletor de classe podem encontrar mais de um.

$(`#alguma coisa`)

Basicamente, se você pode fazer em CSS, em seguida, jQuery irá fazê-lo também. Na verdade, você pode também alguns bastante complexos seletores de estilo CSS3 pseudo como: primeira

$(`Body p: first`)

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

$(`Um [href * ="fazer uso de"]`)

Não é legal? Bem, eu acho que é.

O seu próximo porto de escala deve ser a documentação da API do jQuery para seletores. É uma enorme lista de todos os diferentes tipos de seletores disponíveis para uso, e ninguém esperaria que você aprender todos eles.

Video: Curso Jquery - Por onde começar- Veja a Instalação

A próxima parte da equação é método - o que fazer com essas coisas uma vez que você encontrou todos eles - mas vamos deixar isso para a próxima lição. Se você quiser começar com experimentar vários seletores agora, porém, eu sugiro que você ficar com o seguinte método css. Isso leva dois parâmetros - a CSS nome da propriedade, e uma nova valor para atribuir a essa propriedade. Assim, para dar todos os links uma cor de fundo vermelho, você faria:

$(`uma`).css(`cor de fundo`,`vermelho`)-

Simples o suficiente! Enquanto isso não pode ser de qualquer uso prático, ele vai deixar você ver facilmente todos os elementos localizados usando os seletores. Agora vá adiante e selecione - o DOM espera por você.

Espero que este tutorial tem sido útil para você- Eu tentei torná-lo tão simples quanto fácil de entender quanto possível. Sinta-se livre para fazer qualquer pergunta que você tem ou deixar feedback, mas esteja ciente de que eu sou certamente nenhum ninja jQuery elite.