Yes.
jQuery is built on top of Javascript and the idea is basically to save text when writing. jQuery and other libraries fix some different behaviors between browsers and simplify tasks that are complex or time-consuming to create with native Javascript, but that’s it.
Everything jQuery does is written/programmed with Javascript.
Regarding converting all your jQuery to native Javascript this might be a good idea since you will save bandwidth, speed up site loading and learn a lot!
Check out the jQuery you have and rethink which browsers you want to support. If they are only modern browsers, it may be even more appropriate to take jQuery.
Edit:
(here is a hint for your Edit in the native code question to replace jQuery)
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))
});
.title {
margin: 10px;
border-bottom: 1px solid black;
cursor: pointer;
}
.filters__name {
margin-left: 20px;
cursor: pointer;
}
.filters__filter ol > li,
.filters__filter ul > li {
height: 0;
opacity: 0;
transition: height 0.5s, opacity 0.2s;
}
.expand-filter ol > li,
.expand-filter ul > li {
height: 20px;
opacity: 1;
}
<aside class="col-left sidebar">
<div class="filters">
<div class="title title--sm"><span>Filtros</span></div>
<div class="filters__list" style="display: none;">
<div class="filters__filter categoria">
<div class="filters__name">Categoria</div>
<ol>
<li>
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia/calca-legging" title="Calça Legging" class="a-filter link">
<span class="label">Calça Legging</span>
<span class="count">(307)</span>
</a>
</li>
<li>
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia/top-fitness" title="Tops" class="a-filter link">
<span class="label">Tops</span>
<span class="count">(106)</span>
</a>
</li>
<li>
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia/blusas-de-academia" title="Blusas e Camisetas" class="a-filter link">
<span class="label">Blusas e Camisetas</span>
<span class="count">(55)</span>
</a>
</li>
<li>
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia/bermuda-para-academia" title="Bermudas" class="a-filter link">
<span class="label">Bermudas</span>
<span class="count">(13)</span>
</a>
</li>
<li>
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia/short-de-academia" title="Shorts" class="a-filter link">
<span class="label">Shorts</span>
<span class="count">(14)</span>
</a>
</li>
<li>
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia/combos-e-kits" title="Combos e Kits" class="a-filter link">
<span class="label">Combos e Kits</span>
<span class="count">(22)</span>
</a>
</li>
</ol>
</div>
<div class="filters__filter tamanho">
<div class="filters__name">Tamanho</div>
<div class="filters__swatches">
<ul class="ul--0">
<li class="li--0 pp">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tamanho=482" title="PP" class="a--0 ">
<span class="label">
<span class="swatch">PP</span>
</span>
</a>
</li>
<li class="li--0 p">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tamanho=476" title="P" class="a--0 ">
<span class="label">
<span class="swatch">P</span>
</span>
</a>
</li>
<li class="li--0 m">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tamanho=473" title="M" class="a--0 ">
<span class="label">
<span class="swatch">M</span>
</span>
</a>
</li>
<li class="li--0 g">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tamanho=474" title="G" class="a--0 ">
<span class="label">
<span class="swatch">G</span>
</span>
</a>
</li>
<li class="li--0 gg">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tamanho=475" title="GG" class="a--0 ">
<span class="label">
<span class="swatch">GG</span>
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="filters__filter tecido">
<div class="filters__name">Tecido</div>
<ul class="ul--0">
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tecidos=472" title="Poliamida" class="a--0">
<span class="label">Poliamida</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tecidos=471" title="Poliester" class="a--0">
<span class="label">Poliester</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tecidos=470" title="Viscose" class="a--0">
<span class="label">Viscose</span>
</a>
</li>
</ul>
</div>
<div class="filters__filter cor ">
<div class="filters__name">Cor </div>
<ul class="ul--0">
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=73" title="Amarelo" class="a--0">
<span class="label">Amarelo</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=74" title="Azul" class="a--0">
<span class="label">Azul</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=76" title="Branco" class="a--0">
<span class="label">Branco</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=77" title="Cinza" class="a--0">
<span class="label">Cinza</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=85" title="Estampado" class="a--0">
<span class="label">Estampado</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=78" title="Laranja" class="a--0">
<span class="label">Laranja</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=86" title="Multicolorido" class="a--0">
<span class="label">Multicolorido</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=80" title="Preto" class="a--0">
<span class="label">Preto</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=81" title="Rosa" class="a--0">
<span class="label">Rosa</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=82" title="Roxo" class="a--0">
<span class="label">Roxo</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=83" title="Verde" class="a--0">
<span class="label">Verde</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=84" title="Vermelho" class="a--0">
<span class="label">Vermelho</span>
</a>
</li>
</ul>
</div>
<div class="filters__filter beneficios">
<div class="filters__name">Benefícios</div>
<ul class="ul--0">
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=26" title="Anticelulite" class="a--0">
<span class="label">Anticelulite</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=28" title="Disfarça celulite" class="a--0">
<span class="label">Disfarça celulite</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=36" title="Dupla face" class="a--0">
<span class="label">Dupla face</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=27" title="Facilita a transpiração" class="a--0">
<span class="label">Facilita a transpiração</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=31" title="Melhora a circulação" class="a--0">
<span class="label">Melhora a circulação</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=24" title="Modela o corpo" class="a--0">
<span class="label">Modela o corpo</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=32" title="Possui Bolso" class="a--0">
<span class="label">Possui Bolso</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=29" title="Previne dores musculares" class="a--0">
<span class="label">Previne dores musculares</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=25" title="Proteção UV" class="a--0">
<span class="label">Proteção UV</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=30" title="Regula a temperatura do corpo" class="a--0">
<span class="label">Regula a temperatura do corpo</span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=33" title="Seca rapidamente" class="a--0">
<span class="label">Seca rapidamente</span>
</a>
</li>
</ul>
</div>
<div class="filters__filter preco">
<div class="filters__name">Preço</div>
<ul class="ul--0">
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?price=-20" title="R$0,00 - R$19,99" class="a--0">
<span class="label"><span class="price">R$0,00</span> - <span class="price">R$19,99</span></span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?price=20-40" title="R$20,00 - R$39,99" class="a--0">
<span class="label"><span class="price">R$20,00</span> - <span class="price">R$39,99</span></span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?price=40-60" title="R$40,00 - R$59,99" class="a--0">
<span class="label"><span class="price">R$40,00</span> - <span class="price">R$59,99</span></span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?price=60-80" title="R$60,00 - R$79,99" class="a--0">
<span class="label"><span class="price">R$60,00</span> - <span class="price">R$79,99</span></span>
</a>
</li>
<li class="li--0">
<a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?price=80-" title="acima de R$80,00 " class="a--0">
<span class="label">acima de <span class="price">R$80,00</span> </span>
</a>
</li>
</ul>
</div>
</div>
</div>
</aside>
To use jQuery you have to load the whole library. Take a look here: https://code.jquery.com/jquery-2.2.4.js That’s all you have to load to write jQuery code. My Javascript doesn’t need anything. That’s why it’s lighter than carrying jQuery.
You might be interested in reading: Difference between Jquery and Javascript
– Marconi
Thank you, Marconi, I will read yes!
– Lucas de Carvalho
YOU MIGHT NOT NEED JQUERY
– Randrade