JQuery, oque é, manipulando DOM.
Oque Vamos Estudar?
Oque é JQuery.
-
Introdução À Sintaxe.
-
Manipulando DOM.
-
Eventos.
-
OQue É JQuery?
-
JQuery é uma biblioteca javascript que facilita a manipulção web, mas como assim?
Então são implementações em js de código aberto que garante agilidade e facilidade/praticidade, para manipular eventos na web por exemplo. jquery mede cerca de 30kb, além de ser uma biblioteca moderna e estensível , exemplos: nivos slider, jBox, Cropper e versões mais antigas do bootstrap
neste artigo vamos abordar apenas JQuery. Então sem mais demora, vamos lá. -
Introdução À Sintaxe:
no jQuery utilizamos o $('...') como seletor de elementos.
em js puro.document.getElementById('#id')
// ou
document.getElementsByClassName('classe') // querySelectorAll() para selecionar multiplos elementos e retornar NodeListem jQuery é apenas:
$('#id')
// ou
$('.class') // aqui já seleciona todos os elementos existentes com a classe e retorna um objeto JQuery
-
então você me pergunta, então porque usar jquery?
e eu respondo: é uma biblioteca moderna para js é mais compativel que getElementsByClassName, e mais prático que document.getElementById,
no primeiro caso precisamos selecionar e manipular manualmente, no segundo caso podemos usar métodos como forEach, addClass, css etc. Mas vamos combinar
em JQuey é bem mais fácil.
continuando com mais exemplos:
caso seja de sua vontade operações em lote.
$('.card').addClass('col-12') // muito usado em caso de bootstrap responsivo.
-
Manipulando o DOM:
seleção e filtragem de elementos:
$('.classe') //seleção
$('.classe .classe2') //multipla seleção
$('.classe:first') // filtro
$('.classe').eq(0) // por indice
$('.classe').find('p') // busca dentro do elemento
agora algumas funções que não alteram o dom:
$('.classe').find('p') // busca interna exemplo: quero selecionar todos os p dentro de classe.
$('.classe').filter('p') // dos elementos que já tenho quero so estes: p.
$('.classe').not('p') // selecione todos menos p.
$('.classe').eq(-1) // por indice no caso o último.
$('.classe').first() // sempre a primeira classe.
$('.classe').last() // sempre a ultima classe.
-
codigo para manipulação de estrututa do DOM:
$('ul').append('< li>Novo< /li>'); // adiciona um item
$('.item').prepend('< span>*< /span>'); // adiciona um primeiro filho do elemento
$('.item').remove(); //remeve o elemento do DOM
$('.item').clone(); // copia dentro do jquery como objeto
manipulação de classes:
$('.item').addClass('ativo'); // adiciona uma classe
$('.item').removeClass('ativo'); //remove uma classe
$('.item').toggleClass('ativo'); // 'troca' classes. Ou seja se tiver .ativo troca por .desligado .
$('.item').hasClass('ativo'); // condificonal para se tiver classes, retorna booleano.
-
Eventos:
$('.btn').on('click', fn); // 'escuta' todos os clicks dos botões
$('.btn').off('click'); // deixa de 'escutar' todos os clicks dos botões
$('.btn').trigger('click'); // simula clicks de botões
-
animações relevantes/ Extensões:
animações:
jquery já possui animações já pre definidas usando .hide(), .show(), .fadeOut(), .slideUp(), .slideDown(), ou customizadas com .animate().
exemplo com animate:
$("#btnAnimate").click(function(){ // <- corpo da função com 'ouvindo' o botão
$("#box").animate({ // <- declaração da animação pelo id
left: '250px',
opacity: 0.5,
height: '150px' <- animação em si até esta linha.
}, 1000); // <- duranção da animação em ms
});
exemplo com .hide() e .show():
var dropdown = $("#dropdown");
i'f($('#btn-hamburguer').hasClass('ativo')){
dropdown.show()
}else{
dropdown.hide()
}' -
com .toggle():
var dropdown = $("#dropdown"); dropdown.toggle($('#btn-hamburguer').hasClass('ativo'));