Everything I do with JQuery I can do with JavaScript?

8

I have a serious problem that is:

I'm learning jQuery before JavaScript, and I think now I'm going to get it wrong, put my sites on jQuery only, and I'm realizing it's a bad practice. But returning the question: Everything I do with jQuery I can do with JavaScript? I think I'm going to convert all my scripts.

EDIT:

On my site I have the following code ( more complete here in 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').slideToggle(150);
        $j('.filters__filter.tamanho .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); 
    }); 
}

Would not it be in the case, the same "weight", the same amount, of code as typing in JavaScript? Because it's the same thing? JQuery would only be "minifying" JavaScript. Why would it get heavier?

    
asked by anonymous 05.06.2017 / 13:32

2 answers

9

Yes.

jQuery is built on top of JavaScript and the idea is basically to save text when writing. JQuery and other libraries correct some different behaviors between browsers and simplify tasks that are complex or time-consuming to create with native JavaScript, but that's all.

Everything jQuery does is written / programmed with JavaScript.

As for converting all your jQuery into native JavaScript this might be a good idea since you'll save bandwidth, speed up website loading, and learn a lot!

Take a look at the jQuery you have and rethink which browsers you want to support. If it's just modern browsers, it might even be best to take jQuery out.

Edit:

(here is a suggestion 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: link is all you have to upload so you can write jQuery code. My JavaScript does not require anything. That's why it's lighter than loading jQuery.

    
05.06.2017 / 13:33
2

Yes, I think. But you will get a few more work. JQuery saves you a lot of work, so it's a lot of use. But you can do the things you want.

    
05.06.2017 / 13:34