Pra começar com o Jquery, primeiramente devemos entender o que é, ou o que significa este termo.

Jquery – J de Javascript / query – termo em inglês que significa consulta. Ou seja, uma “consulta em javascript”. Falando mais tecnicamente, Jquery é uma biblioteca javascript com uma coleção de funções e métodos que ajudam na programação javascript, utilizando uma função que busca facilmente elementos HTML através do DOM, por isso o termo “consulta” no nome. Buscando estes elementos no DOM, você pode facilmente trocar atributos destes elementos, esconde-los,  mostrá-los, adicionar eventos, pegar o texto destes elementos, ou alterar valor de inputs de formulário por exemplo. Com tudo isso e muito mais, você já consegue perceber como esta biblioteca pode ser poderosa na programação de um website.

Mas muita gente confunde o Jquery, como se fosse uma linguagem diferente, o que na verdade é um equívoco, já que o Jquery é “puro” javascript. Tudo que é feito “com Jquery” pode ser feito “sem Jquery”. Mas é obvio que utilizar a biblioteca já pronta facilita muito a vida do programador/desenvolvedor. Este é um dos intuitos da programação, principalmente das linguagens orientadas a objetos (Javascript não é orientado a objetos, mas pode ter um comportamento similar, que abordarei em outro tópico), que é o aproveitamento de código, para não precisar reinventar a roda em todo projeto. O Jquery facilita muito este conceito na programação javascript, oferecendo muitas ferramentas para tornar o HTML estático, em uma coisa mais dinâmica e animada, além de belos efeitos visuais conseguidos através da combinação entre Jquery e CSS.

Um exemplo bem simples é este:

Com javascript puro:

document.getElementById('id').innerHTML = "Outra coisa";

Com Jquery:

$('#id').html("Outra coisa");

Com este simples exemplo, ja é possível ver também como o Jquery nos faz escrever menos código para fazer a mesma coisa. Exatamente por isso o lema do Jquery é exatamente: “Write less, do more”, que traduzindo ao pé da letra significa “Escreva menos, Faça mais”.

A função de consulta do Jquery trata-se de um “atalho” ao objeto Jquery $, seguido pelos parâmetros em String passados ao objeto Jquery, para que ele busque esse elemento no DOM. Veja alguns Exemplos:

/*
* # (jogo da velha) indica ao Jquery procurar o elemento por id
* . (ponto) diz ao Jquery para procurar elementos por classe
*/
// função hide esconde o elemento adicionando style="display:none" a tag
$('#id_a_ser_buscado').hide();
// função show mostra o elemento adicionando style="display:block" a tag
$('.classe_a_ser_buscada').show();
/*
* sem ponto ou jogo da velha, o Jquery busca pelo nome da tag
* isto adiciona a classe "meu_span" a todas
* tags spans da página
*/
$('span').addClass('meu_span')
// hierarquia: toda tag a dentro de tags p terão cor vermelha
$('p a').css('color', 'red');
// hierarquia: toda tag a dentro de tags com a classe "classe"
// terão cor vermelha
$('.classe a').css('color', 'red');
//Apenas tags a dentro de tags p com a classe "classe"
//terão cor amarela
$('p.classe a').css('color', 'yellow');
// todo input do tipo texto terá background azul
$('input[type="text"]').css('background', 'blue');
/*
* tambem podemos utilizar if nas condições
* a função css do Jquery com apenas um parâmetro retorna o valor
* css da propriedade buscada.
* Vamos fazer uma verificação, se o parágrafo tiver 18px de altura
* vamos mudar para 30px
*/
if($('p').css('height') == '18px')
	$('p').css('height', '30px');

Existem também varios tipos de seletores em jquery que adicionados aos elementos da busca facilitam muito essa busca, mas esse é um assunto para outro post, ja que também é um assunto extenso.
Buscando um elemento no DOM você pode criar inúmeros efeitos, como sliders, animações, troca de estilos(css), efeitos de hover, ajax, etc; utilizando as funções que o Jquery dispõe. Além disso você pode criar um plugin, que pode ser de valia a muitos usuários e a você mesmo, ja que você pode reutilizar o mesmo código em diversos sites. Além disso, você pode utilizar plugins ja prontos que irão facilitar sua vida como desenvolvedor em muito aspectos. Mas não se limite apenas a pegar plugins prontos, procure entender como eles funcionam, procure criar os seus, mesmo que simples a princípio. Só assim você irá se familiarizar bem com Jquery e tirar o máximo de proveito do mesmo.
Em alguns casos, outras bibliotecas javascript utilizam o mesmo sinal (‘$’), e isso pode causar conflito. Para resolver este problema caso isso aconteça com você, você pode chamar sem o atalho ‘$': jQuery() ou a função noConflict do proprio Jquery que pode ser visualizada por este link: função noConflict.
Para ver todas as funções disponíveis no Jquery, basta visitar a documentação oficial: Documentação do Jquery

Para não se alongar mais, termino este post aqui, mas postarei muitos outros conteúdos sobre Juery e programação WEB em geral.
Espero que vocês tenham gostado e até a próxima.

Este conteúdo foi útil para você? Então ajude este blog a continuar no ar com novos conteúdos!
Basta clicar em algum anúncio da header ou sidebar e aguardar pelo menos 10 segundos