O que é jQuery? e como usar o jQuery?


Neste tutorial será apresentado o que é jQuery? e como usar o jQuery?

Primeiro será realizado a explicação o que é o jQuery?

Em seguida como usar o Framework jQuery, será apresentado como inserir o jQuery baixando o Framework, também como usar o jQuery da CDN.

 

 

Download do código fonte desenvolvido na aula: DOWNLOAD

O jQuery é um Framework do JavaScript, um Framework é constituído de métodos prontos e compilados em um arquivo só, desenvolvido para facilita a programação.

O jQuery foi criado sob a ideia de “Write less, do more” (Escreva menos, faça mais) e é exatamente por causa disso que ele é tão surpreendente.

Quando você aprender como usar jQuery, você será capaz de executar todas os tipos de ações com facilidade.

Com jQuery é possível fazer diversos efeitos com poucas linhas e, que custariam dezenas de linhas em JavaScript puro.


Alguns recursos oferecidos pelo jQuery:

- Seleção e manipulação de elementos HTML

- Manipulação de CSS

- Efeitos e animações

- Navegação pelo DOM

- Ajax

- Eventos


O Jquery destina-se a adicionar interatividade e dinamismo às páginas web, proporcionando ao desenvolvedor funcionalidades necessárias à criação de scripts que visem a incrementar, de forma progressiva e não obstrutiva, a usabilidade, a acessibilidade e o design, enriquecendo  a experiência do usuário.

Como uso?

Necessário incluir a biblioteca jQuery. Podendo baixar, ou usar de uma CDN.

<script src="jquery.min.js"></script>

Para utilizar o jQuery necessário o $ (cifrão) como atalho. Por isso pode misturar sem problemas JavaScript nativo com jQuery. 

$() é utilizado em todas as funções que devem ser referenciadas ao jQuery;

A base do jQuery são os Seletores, um seletor define em que parte do html ou tag vamos executar o nosso código jQuery, os selectores do jQuery são idênticos ao do CSS, exemplo, temos uma div com a seguinte estrutura, a principio podemos selecionar esta div de duas formas no jQuery:


Assim $("div") ou $("#divTeste")


document -> Expressão que determina o documento html atual;

ready -> Associa-se a leitura do documento enquanto está sendo carregado;

function{} -> dentro das chaves {}, colocar os comandos javascript ou jQuery que serão responsáveis pelo efeito citado no exemplo acima;

click() -> Evento javascript que é executado quando clicar-se no elemento que possui o id “clicar” ;

alert() -> Evento responsável de mostrar na tela do navegador a mensagem “Seja bem vindo”.


A sintaxe básica:

$('seletorHTML').acao();

Chegamos ao final de mais um tutorial, aguardo no próximo tutorial.