O JQuery pode ser colocado no head do site, em tags script, através do link do site ou baixado o arquivo JS para um diretório do site (nesse caso é preferível deixar o nome do arquivo para jquery).
Abra uma segunda tag script separada no head, abaixo da tag e coloque esse código, que é o bloco de código JQuery:
$(document).ready(function() {
});
Toda instrução usada em JQuery será colocada dentro disso, veja um exemplo abaixo:
$(document).ready(function() {
alert("Bem-Vindo ao JQuery");
});
Também podemos fazer assim:
$(window).on("load", function() {
alert("Todos os Elementos foram Carregados!");
});
A diferença entre os dois métodos é que o com o (document).ready() ele executa primeiro, e o (window).on() só executa após todos os elemntos da página forem carregados (imagens, vídeos, etc.).
Para vermos a diferença dos dois métodos, coloque uma imagem ou GIF grande no HTML do site e coloque os dois métodos juntos.
PS: O (document).ready() também pode ser simplificado assim:
$(function() {
alert("Bem-Vindo ao JQuery");
});
Só lembrando que sempre que tivermos uma função no JQuery, a palavra function e os parênteses e chaves são necessários.
Crie alguns elementos no body do site, com um título h1, e três links com a (pode ser link nulo com # para testes). O primento não terá nada, segundo link terá a class link2, e o terceiro terá a id link3.
Para selecionar uma tag ou classe, você faz assim:
$(document).ready(function() {
$("h1").css("color", "#f66");
});
Isso pegará todos os dons dos elementos passados (no caso acima, h1) e passando pra ele todas as funções nativas do JQuery, que podem ser aplicadas nessa tag, esse método de colocar o elemento nos parênteses se chama encapsulamento.
Nesse caso do último código acima, ele mudará a cor através do CSS.
Outro método que podemos usar é o hide, que oculta o elemento, dessa forma:
$(document).ready(function() {
$("h1").css("color", "#f66");
$("h1").hide();
});
E dessa forma, usando o delay (com parâmetros passados em milissegundos) e o fadeIn (que define a velocidade do elemento aparecer), podemos criar um efeito que o texto aparece depois de um tempo:
$(document).ready(function() {
$("h1").css("color", "#f66");
$("h1").hide();
$("h1").delay(1000);
$("h1").fadeIn("slow");
});
PS: Além de parâmetros como o slow, o fadeIn também aceita valores inteiros, em milissegundos.
E também podemos mudar o texto com o text:
$(document).ready(function() {
$("h1").css("color", "#f66");
$("h1").hide();
$("h1").delay(1000);
$("h1").fadeIn("slow");
$("h1").text("Curso JQuery");
});
Podemos colocar tudo numa só linha, com um só elemento, nesse caso usamos o ponto e o elemento apenas uma vez:
$(document).ready(function() {
$("h1").css("color", "#f66").hide().delay(1000).fadeIn("slow").text("Curso JQuery");
});
Ou quebrando em blocos também:
$(document).ready(function() {
$("h1")
.css("color", "#f66")
.hide()
.delay(1000)
.fadeIn("slow")
.text("Curso JQuery");
});
Para colocar uma função ou evento dentro do encadeiamento do JQuery, colocamos dentro de um parâmetro de algum método dele (no exemplo, será o click) a função desejada, dessa forma:
$(document).ready(function() {
$("h1").click(function() {
$("body").css("background", "#C30");
});
});
Nesse caso acima, ao clicar no h1, ele vai mudar o background do site (dentro do body).
Podemos ter mais de uma função, da mesma forma:
$(document).ready(function() {
$("h1").click(function() {
$("body").css("background", "#C30");
$("h1").css("color", "#fff");
});
});
Para atacar todas as tags de link criadas, fazemos assim:
$(document).ready(function() {
$("a").css("color", "red");
});
Se quisermos colocar mais de uma instrução CSS dentro do método, usamos chaves e os métodos como um CSS normal, com os elementos entre aspas, assim:
$(document).ready(function() {
$("a").css({color: "red", display: "block"});
});
Para trabalharmos com class e id, fazemos o mesmo, passando as classes com um ponto antes e a id com a hashtag antes, e pra selecionar todos os elementos usamos o asterisco, igual se faz em CSS assim:
$(document).ready(function() {
$(".link2").css("color", "green");
$("#link3").css("color", "blue");
$("*").css("margin", "0");
});
PS: Para selecionar mais de um elemento de uma vez, colocamos ele num método só, separados por vírgulas, assim:
$(document).ready(function() {
$("h1, h2").css("border-bottom", "3px solid blue");
});
PS: Ao usar palavras compostas como border-bottom e background-color, coloque entre aspas.
No body do site, coloque uma tag div com a class div1, e dentro dela coloque textos com h2, com p (dentro dela um span) e outro span, mas fora do p e dentro da div. Fora da div, coloque outro h2, e três p (sendo que apenas o primeiro terá a class p1.
Abra um bloco JQuery no Head, e coloque esse código
$(document).ready(function() {
$("h2").css("margin", "0");
$("p").css({margin: "0", color: "blue"});
});
Vamos colocar mais elementos, assim:
$(document).ready(function() {
$("h2").css("margin", "0");
$("p").css({margin: "0", color: "blue"});
$(".div1").css({"margin-bottom": "20px", background: "#ccc"});
});
Para selecionar apenas as tags filhas da div, fazemos de forma parecida com a CSS, dessa forma:
$(document).ready(function() {
$(".div1 span").hide().delay(1000).fadeIn(1000).css({color: "green", "font-size": "15px"});
});
O mesmo vale para outro elementos:
$(document).ready(function() {
$(".div1 h2").hide().css({"font-size": "50px", color: "red"}).fadeIn(800);
});
Para selecionar apenas um elemento que é filho direto de uma classe (e não os outros), faça assim:
$(document).ready(function() {
$(".div1 > span").css({color: "red", "font-style": "italic"});
});
Da forma acima, o span que tiver dentro de outras tags, mesmo da div, não são afetadas, só as filhas diretas que são.
Para selecionar a classe e o próximo elemento dela (especificado por nós), use o mais, dessa forma:
$(document).ready(function() {
$(".p1 + p").css({"font-size": "25px", color: "white"});
});
E para atacar todos os elementos após dela, de forma parecida com anterior, use o til:
$(document).ready(function() {
$(".p1 ~ p").css({"font-size": "25px", color: "white"});
});