introdução
HTML, CSS e JavaScript são as três línguas fundamentais da web. Nós estruturamos nossos sites com HTML, estilo-los com CSS, e adicionar funcionalidade interativa com JavaScript. Na verdade, a maioria das animações e qualquer ação que acontece como resultado de um usuário clicando, pairando ou rolando são construídos com JavaScript.
jQuery é a biblioteca JavaScript” escrever menos, fazer mais”. Não é uma linguagem de programação, mas sim uma ferramenta usada para tornar a escrita de Tarefas JavaScript mais concisas., a jQuery tem o benefício adicional de ser compatível com o cross-browser, o que significa que você pode ter certeza de que a saída do seu código irá renderizar como pretendido em qualquer navegador moderno.
comparando um simples ” Olá, Mundo!”programa em JavaScript e jQuery, podemos ver a diferença de como ambos são escritos.
document.getElementById("demo").innerHTML = "Hello, World!";$("#demo").html("Hello, World!");Este pequeno exemplo demonstra como o jQuery pode conseguir o mesmo resultado final JavaScript puro em um sucintos.,
metas
este guia assume nenhum conhecimento prévio de jQuery, e irá cobrir os seguintes tópicos:
- Como instalar jQuery em um projeto web.
- as definições de conceitos importantes de desenvolvimento web, tais como API, DOM e CDN.selectores, eventos e efeitos comuns de artigos de jQuery.exemplos para testar os conceitos aprendidos ao longo do artigo.
pré-requisitos
Antes de iniciar este guia você precisará do seguinte:
- um conhecimento básico de HTML e CSS., Você já deve saber como configurar um site simples, e ter uma compreensão dos seletores CSS como ids, classes e pseudo elementos.uma compreensão dos fundamentos da programação. Embora seja possível começar a escrever jQuery sem um conhecimento avançado de JavaScript, familiaridade com os conceitos de variáveis e datatypes, bem como matemática e lógica irá ajudar significativamente.
configurar o jQuery
o jQuery é um ficheiro JavaScript para o qual irá ligar no seu HTML. Existem duas maneiras de incluir jQuery em um projeto:
- baixar uma cópia local.,
- ligação a um ficheiro através da rede de distribuição de conteúdos (CDN).
nota: uma rede de distribuição de conteúdo (CDN) é um sistema de vários servidores que fornecem conteúdo web a um usuário com base na localização geográfica. Quando você se conecta a um arquivo jquery hospedado via CDN, ele potencialmente chegará mais rápido e mais eficientemente ao usuário do que se você hospedou no seu próprio servidor.
estaremos usando o CDN para referenciar jQuery em nossos exemplos. Você pode encontrar a última versão do jQuery nas bibliotecas hospedadas do Google., Se em vez disso você deseja baixá-lo, você pode obter uma cópia de jQuery a partir do site oficial.
iniciaremos este exercício criando um pequeno projecto web. Ele será composto de style.css css/ diretório scripts.js js/ diretório principal de index.html na raiz do projeto.
project/├── css/| └── style.css├── js/| └── scripts.js└── index.htmlTo begin, make an HTML skeleton and save it asindex.html.
<!doctype html><html lang="en"><head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"></head><body></body></html>Link para ajax CDN direito antes do fechamento </body> tag, seguido do seu próprio personalizado arquivo JavaScript scripts.js.
o seu ficheiro JavaScript (scripts.js) deve ser incluído abaixo da biblioteca jQuery no documento ou não irá funcionar.
nota: se transferiu uma cópia local de jQuery, guarde – a na sua js/ pasta e ligue-a Para js/jquery.min.js.,
neste ponto, a biblioteca jQuery está agora sendo carregada em seu site, e você tem acesso total à API jQuery.nota: uma Interface de programação de aplicações (API) é uma interface que permite que programas de software interajam entre si. Neste caso, a API da jQuery contém todas as informações e documentação necessárias para acessar a jQuery.
Using jQuery
At its core, jQuery is used to connect with HTML elements in the browser via the DOM.,
O Document Object Model (DOM) é o método pelo qual JavaScript (e jQuery) interagem com o HTML em um navegador. Para ver exactamente o que é o DOM, no seu navegador web, carregue com o botão direito na página web actual, seleccione inspeccionar. Isto irá abrir Ferramentas de desenvolvimento. O código HTML que você vê aqui é o DOM.
cada elemento HTML é considerado um nó no DOM – um objeto que JavaScript pode tocar. Estes objetos estão dispostos em uma estrutura de árvore, com <html> estando mais perto da raiz, e cada elemento aninhado sendo um ramo mais ao longo da árvore., JavaScript pode adicionar, remover e alterar qualquer um destes elementos.
Se carregar de novo com o botão direito no site e carregar no botão Ver fonte da página, irá ver a saída em HTML do site. É fácil, no início, confundir o DOM com a fonte HTML, mas eles são diferentes – a fonte de página é exatamente o que está escrito no arquivo HTML. Ele é estático e não vai mudar, e não será afetado pelo JavaScript. O DOM é dinâmico e pode mudar.
A camada mais externa do DOM, a camada que envolve todo o <html> node, é o objeto do documento., Para começar a manipular a página com jQuery, precisamos garantir que o documento está “pronto” primeiro.
Crie o ficheiro scripts.jsno seujs/ directório, e digite o seguinte código:
$(document).ready(function() { // all custom jQuery will go here});todo o código jQuery que escrever será embrulhado no código acima. jQuery irá detectar este estado de prontidão de modo que o código incluído dentro desta função só será executado uma vez que o DOM está pronto para o código JavaScript para executar., Mesmo que em alguns casos JavaScript não será carregado até que os elementos sejam renderizados, incluindo este bloco é considerado como a melhor prática.na introdução deste artigo, você viu um simples ” Olá, Mundo!” roteiro. Para iniciar este programa e imprimir o texto para o navegador com o jQuery, primeiro vamos criar um elemento de parágrafo vazio ao nível do bloco com o ID demo aplicado a ele.
...<body><p></p>...jQuery is called with and represented by the dollar sign ($)., Acessamos o DOM com jQuery usando principalmente sintaxe CSS, e aplicamos uma ação com um método. Um exemplo básico de jQuery segue Este formato.
$("selector").method();Desde que o ID é representado por um símbolo de hash (#) em CSS, iremos acessar o demo de IDENTIFICAÇÃO com o selector #demo. html() é um método que altera o HTML dentro de um elemento.agora vamos colocar o nosso costume “Olá, Mundo!”program inside the jQuery ready() wrapper., Adicione esta linha ao seu ficheiro scripts.js dentro da função existente:
$(document).ready(function() { $("#demo").html("Hello, World!");});Uma vez gravado o ficheiro, pode abrir o seu ficheiro index.html no seu navegador. Se tudo funcionou corretamente, você verá o resultado Hello, World!.
selectores
selectores são como dizemos à jQuery quais os elementos em que queremos trabalhar. A maioria dos selectores jQuery são os mesmos que você está familiarizado com EM CSS, com algumas adições específicas jQuery., Você pode ver a lista completa de seletores de jQuery em suas páginas de documentação oficial.
para aceder a um selector, use o símbolo jQuery $, seguido de parênteses ().
$("selector")cadeias de caracteres de dupla citação são preferidas pelo Guia de estilo jQuery, embora cadeias de caracteres de uma só citação são frequentemente usadas também.
abaixo está uma breve visão geral de alguns dos seletores mais comumente usados.,
geralmente, as classes e ids são o que irá encontrar na maioria das classes quando quiser seleccionar vários elementos e ids quando quiser seleccionar apenas um.
jQuery Events
In The “Hello, World!”exemplo, o código foi executado assim que a página foi carregada e o documento estava pronto, e, portanto, não exigiu nenhuma interação do Usuário. Neste caso, poderíamos ter escrito o texto diretamente no HTML sem nos preocuparmos com jQuery. No entanto, vamos precisar utilizar jQuery se quisermos fazer o texto aparecer na página com o clique de um botão.,
Return to your index.html file and add a<button> element. Vamos usar este botão para ouvir o nosso evento click.
...<body><button>Click me</button><p></p>usaremos o click() método para chamar uma função contendo o nosso “Hello, World!” codigo.
$(document).ready(function() { $("#trigger").click();});function() { $("#demo").html("Hello, World!");}Aqui está o código final.
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); });});Salvar scripts.js arquivo e atualizar index.html no navegador., Agora, quando você clicar no botão, o ” Olá, Mundo!”o texto aparecerá.
um evento é qualquer vez que o usuário interage com o navegador. Normalmente isto é feito com o mouse ou teclado. O exemplo que acabamos de criar usou um evento click. A partir da documentação oficial do jQuery, você pode ver uma lista completa dos métodos do evento jQuery. Abaixo está uma breve visão geral de alguns dos métodos de eventos mais comumente usados.
para fazer com que as imagens se animem ou se desvaneçam à medida que um utilizador se desloca pela tela, use o método scroll()., Para sair de um menu usando a chave ESC, use a chave keydown(). Para fazer um menu dropdown accordion, use o método click().
compreender eventos é essencial para criar conteúdo dinâmico do site com jQuery.
os efeitos de jQuery
os efeitos de jQuery funcionam lado a lado com os eventos, permitindo-lhe adicionar animações e manipular de outra forma os elementos na página.
faremos um exemplo onde abriremos e fecharemos uma sobreposição., Embora pudéssemos usar dois IDs-um para abrir a sobreposição e outro para fechá – la-usaremos uma classe para abrir e fechar a sobreposição com a mesma função.
Excluir o atual <button>e <p> tags de dentro do corpo de seu index.html arquivo e adicione o seguinte ao seu documento HTML:
...<body><button class="trigger">Open</button><section class="overlay"> <button class="trigger">Close</button></section>...nossa style.css arquivo, vamos usar uma quantidade mínima de CSS para ocultar o overlay com display: none e centro-lo na tela.,
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray;}Voltar scripts.js arquivo, vamos usar o toggle() método, o que irá mudar o CSS display propriedade entre none e block, ocultando e mostrando a sobreposição quando clicado.
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); });});Refresh index.html. Poderá agora activar ou desactivar a visibilidade do modal, Carregando nos botões., Você pode alterar toggle() fadeToggle() ou slideToggle() para ver alguns dos outros internos, jQuery.
abaixo está uma breve visão geral de alguns dos métodos de efeito mais comumente usados.
-
toggle()– Toggle: muda a visibilidade de um elemento ou elementos.show()ehide()são os efeitos unidirecionais relacionados. -
fadeToggle()– opção de desvanecimento: muda a visibilidade e anima a opacidade de um elemento ou elementos.,fadeIn()efadeOut()são os efeitos unidirecionais relacionados. -
slideToggle()– Slide comuta a visibilidade de um elemento ou elementos com um efeito deslizante. eslideUp()são os efeitos unidirecionais relacionados. -
animate()– Animate executa efeitos de animação personalizados na propriedade CSS de um elemento.,
usamos eventos de jQuery para ouvir uma interação do usuário, como o clique de um botão, e usamos efeitos de jQuery para manipular ainda mais OS Elementos uma vez que a ação ocorre.
conclusão
neste guia, aprendemos a seleccionar e manipular elementos com jQuery, e como os eventos e efeitos funcionam em conjunto para fazer uma experiência web interactiva para o utilizador.
a partir daqui, você deve ter uma compreensão mais profunda das capacidades da jQuery, e estar no seu caminho para escrever o seu próprio código.