Imagine jQuery como um conjunto de funções JavaScript para facilitar o desenvolvimento web. Certamente você já precisou manipular algum elemento na página, seja um texto, uma div, um formulário, um botão e etc., e com JavaScript, principalmente para quem não tem tanta experiência, isso se torna um caos. É aí que entra o jQuery.
Veja um exemplo de como alterar o texto, a cor do texto e o fundo do elemento com JavaScript
var botao = document.getElementById("meuBotao");
botao.innerHTML = "Novo Texto";
botao.style.backgroundColor = "blue";
botao.style.color = "white";Agora utilizando jQuery:
$("#meuBotao").text("Novo Texto").css({"background-color": "blue", "color": "white"});
Veja como é simples, além de possibilitar que você faça tudo praticamente em uma única linha de código.
Aí você deve estar se perguntando, mas isso nem é tanta redução assim. Ok, então vamos fazer o mesmo agora com 3 elementos diferentes.
Com JavaScript:
var botao = document.getElementById("meu-botao");
botao.innerHTML = "Novo Texto";
botao.style.backgroundColor = "blue";
botao.style.color = "white";
var paragrafo = document.getElementById("meu-paragrafo");
paragrafo.innerHTML = "Novo Parágrafo";
paragrafo.style.backgroundColor = "green";
paragrafo.style.color = "white";
var cabecalho = document.getElementById("meu-cabecalho");
cabecalho.innerHTML = "Novo Título";
cabecalho.style.backgroundColor = "red";
cabecalho.style.color = "white";Agora com jQuery:
$("#meu-botao").text("Novo Texto").css({"background-color": "blue", "color": "white"});
$("#meu-paragrafo").text("Novo Parágrafo").css({"background-color": "green", "color": "white"});
$("#meu-cabecalho").text("Novo Título").css({"background-color": "red", "color": "white"});Veja como é simples. Você também pode aplicar em diversos elementos ao mesmo tempo apenas passando o ID ou o seletor do elemento, por exemplo:
$("#meu-botao, #meu-paragrafo, #meu-cabecalho, .minha-classe, [data-elemento], [name='email']").addClass('campo-invalido');São muitas possibilidades de manipular elementos com jQuery. Se você tem dificuldades com JavaScript, recomendo você ir treinando com jQuery, afinal, jQuery é totalmente compatível com JavaScript justamente por ser o próprio JavaScript, então você pode começar a misturar ambos até começar a entender melhor o funcionamento, facilitando assim seu aprendizado.
Conclusão:
Aqui no site eu utilizo bastante jQuery. Como preciso manipular muitos elementos, fazer isso utilizando JavaScript puro demoraria muuuuuito tempo para fazer tudo. Já com jQuery, com um código bem organizado, eu consigo reaproveitar bastante coisa e ser bem produtivo.
Quando eu comecei a aprender e desenvolver eu tinha muita dificuldade em manipular os elementos da página com JavaScript, não entendia como alguém poderia aprender tanto código apenas para manipular uma única coisa na página, isso sem dúvidas me atrapalhou bastante no início. Aí conheci o jQuery, fiquei surpreso com a facilidade para manipular os elementos e como tudo parecia tão simples.
Hoje posso dizer que aprendi JavaScript por causa do jQuery. Começar com jQuery (se fizer sentido no seu projeto), é uma dica que dou a você que quer aprender e está com dificuldades em decorar os códigos em JavaScript.