jQuery

Sou do tempo em que tínhamos que programar JavaScript na unha. Na época, chamávamos programação CORE esse tipo de programação. Com o tempo foram aparecendo o que o pessoal conhece com framework.

Vamos entender o porquê do uso de frameworks ter crescido e ganhado tantos adeptos nos últimos anos de desenvolvimento web.

Quando queremos criar sites responsivos, de fácil manutenção, entre outras funcionalidades, é muito difícil e trabalhoso de se fazer manualmente e é aí que entram os frameworks, facilitando o trabalho do desenvolvedor.
E é exatamente por isso que os desenvolvedores web gostaram tanto de utilizar frameworks.

jQuery é um excelente framework pois ele é rápido e leve, podendo ser criadas animações, manipulações de eventos, entre outras. O Ajax também é uma API muito fácil de usar e que é compatível com a grande parte dos navegadores. Sem dúvidas o jQuery definitivamente mudou o jeito de desenvolver na internet e mudou para melhor.
Muito utilizado por grandes empresas e projetos como Wordpress, Wikipédia, etc. Em resumo, objetivo do jQuery é tornar mais fácil o uso do JavaScript.

Resumo:

• jQuery é uma biblioteca JavaScript.
• jQuery simplifica muito a programação JavaScript.
• jQuery é fácil de aprender

O que você deve saber antes de estudar jQuery:

• HTML
• CSS
• JavaScript

jQuery também simplifica um monte de coisas complicadas de JavaScript, como chamadas Ajax e manipulação DOM.

A biblioteca jQuery contém os seguintes recursos:

• HTML / manipulação DOM
• manipulação de CSS
• métodos de eventos HTML
• Efeitos e animações
• AJAX
• Utilities

Adicionando jQuery às suas páginas Web

Existem duas maneiras de começar a  usar jQuery em uma página HTML. Você pode:

• Baixar a biblioteca jQuery de jQuery.com
• Incluir jQuery de uma CDN, como o Google

Ambas as versões podem ser baixados do jQuery.com.

Para chamar a biblioteca jQuery devemos referenciar a biblioteca através da tag script


       


Com jQuery você seleciona elementos HTML e executa "ações" sobre eles.

Sintaxe

sintaxe básica é: $(selector).ação()

Um sinal $ para definir um acesso  jQuery.
Um (selector) para "consultar (ou encontrar)" elementos HTML
Uma ação jQuery () a ser executada com o elemento (s)

Exemplos:

$(This).hide() - esconde o elemento atual.

$("P").hide()  - Oculta todas elementos do tipo Parágrafo.

$(".Test").hide - Esconde todos os elementos com a class = "test".

$ ("# Test").hide()- Esconde o elemento com id = "test".

jQuery usa a sintaxe CSS para selecionar elementos.

Você deve ter notado que todos os métodos jQuery em nossos exemplos, estão dentro de um evento do seletor Document:

$(Document).ready(function(){
   // métodos jQuery aqui ...
});

Isso é para evitar que qualquer código jQuery ocorra antes que o carregamento do documento seja concluído.

É uma boa prática que esperar que o documento seja totalmente carregado e pronto antes de trabalhar com ele.

Aqui estão alguns exemplos de ações que podem falhar se os métodos são executados antes que o documento está totalmente carregado:

• Tentar esconder um elemento que ainda não foi criado
• Tentar obter o tamanho de uma imagem que ainda não está carregado

seletores

• seletores de consulta são uma das partes mais importantes da biblioteca jQuery.
• seletores permitem selecionar e manipular elemento (s) HTML.
• seletores são usados ​​para "encontrar" (ou selecionar) elementos HTML com base em seu nome, id, classes, tipos, atributos, valores de atributos e muito mais. 
• baseado nos seletores CSS existentes, e, além disso, tem algumas seletores personalizados.

Todos os seletores em jQuery começam com o sinal de dólar e parênteses: $ ().

O seletor de elemento jQuery seleciona elementos com base no nome do elemento.

Você pode selecionar todos os elementos em uma página como esta:

$("P")

Exemplo:









If you click on me, I will disappear.
Click me away!
Click me too!




Quando um usuário clica em um botão, todos os elementos do tipo "P" ficarão ocultos.
Outros seletores ver http://www.w3schools.com/jquery/trysel.asp

Eventos

Todas as ações do visitante realizadas em uma página web que pode ser capturada pelo Browser são chamados de eventos.

Um evento representa o exato momento em que algo acontece.

Exemplos:

• movendo a seta do mouse sobre um elemento
• selecionando um botão de rádio
• clicar em um elemento

O termo "disparado" é usado frequentemente com eventos. Exemplo: "O evento keypress é disparado, no momento em que você pressionar uma tecla".


No exemplo acima temos dois eventos o ready e click.

Sintaxe jQuery para métodos de evento

Em jQuery, a maioria dos eventos DOM tem um método jQuery equivalente.

Para atribuir um evento de clique a todos os parágrafos de uma página, você pode fazer o seguinte:

$("p").click();

Abaixo uma série de eventos jQuery:

Mais sobre jQuery http://www.w3schools.com/jquery/