Eu tenho um sério problema que é:
Estou aprendendo JQueryjQuery antes do JavaScript, e acho que agora vou me dar mal, pôs em meus sites só uso JQueryjQuery, e estou percebendo que é uma má prática. Mas voltando a pergunta: Tudo que faço com JQueryjQuery eu consigo fazer com JavaScript? Pôs acho que vou converter todos os meus scripts.
EDITADOEDIT:
No meu site tenho o seguinte código (mais completo aqui no jsFiddle):
if ($j(window).width() > 980) {
$j('.title.title--sm').click(function(){
$j('.filters__list').slideToggle(50);
$j('.filters__filtered').slideToggle(50);
$j('.filters .title').toggleClass('active');
});
$j('.filters__filter.tamanho').click(function(){
$j('.filters__filter.tamanho .ul--0'filters__filtered').slideToggle(15050);
$j('.filters__filter.tamanhofilters .filters__name'title').toggleClass('active');
});
$j('.filters__filter.cor').click(function(){
$j('.filters__filter.cor .ul--0').slideToggle(150});
$j('.filters__filter.cor .filters__name').toggleClass('active');
});
$j('.filters__filter.preco'tamanho').click(function(){
$j('.filters__filter.precotamanho .ul--0').slideToggle(150);
$j('.filters__filter.precotamanho .filters__name').toggleClass('active', 150);
});
}
Como eu passaria isso pra JavaScript? Não faço a menor ideia. (Acho que foi burrice da minha parte estudar JQuery primeiro).
EDITADA
Então, conforme a resposta do Sérgio, tem o seguinte código:
var filtros = [].slice.call(document.querySelectorAll('.filters__name'));
document.querySelector('.filters .title').addEventListener('click', function() {
var list = document.querySelector('.filters__list');
list.style.display = list.style.display == 'block' ? 'none' : 'block';
});
function toggleFilters(current) {
return function(e) {
if (filtros.indexOf(e.target) == -1) return;
filtros.forEach(function(el) {
var filter = el.parentElement;
if (el == current) filter.classList.toggle('expand-filter');
else filter.classList.remove('expand-filter');
});
}
}
filtros.forEach(function(el) {
el.addEventListener('click', toggleFilters(el))
});
Está "convertendo" meu código:
if ($j(window).width() > 980) {
$j('.titlefilters__filter.title--sm'cor').click(function(){
$j('.filters__list').slideToggle(50);
$j('.filters__filtered').slideToggle(50);
$j('.filters .title').toggleClass('active');
});
$j('.filters__filter.tamanho').click(function(){
$j('.filters__filter.tamanhocor .ul--0').slideToggle(150);
$j('.filters__filter.tamanhocor .filters__name').toggleClass('active');
});
$j('.filters__filter.cor').click(function(){
$j('.filters__filter.cor .ul--0').slideToggle(150});
$j('.filters__filter.cor .filters__name').toggleClass('active');
});
$j('.filters__filter.preco').click(function(){
$j('.filters__filter.preco .ul--0').slideToggle(150);
$j('.filters__filter.preco .filters__name').toggleClass('active', 150);
});
}
Não seria no caso, o mesmo "peso", a mesma quantidade, de código que escrevendo em JavaScript? Por ser a mesma coisa? O JQueryjQuery só estaria "minificando" o JavaScript. Por que ficaria mais pesado?