Everything I do with Jquery I can do with Javascript?

Asked

Viewed 139 times

8

I have a serious problem that is:

I’m learning jQuery before Javascript, and I think now I’m going to get hurt, put in my sites only use jQuery, and I’m realizing it’s bad practice. But returning the question: Everything I do with jQuery I can do with Javascript? Put I think I’ll convert all my scripts.

EDIT:

On my website I have the following code (more complete here on 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); 
    }); 
}

Wouldn’t it be in this case, the same "weight", the same amount of code as writing in Javascript? Because it’s the same thing? jQuery would only be "minifying" Javascript. Why would it be heavier?

javascript jquery

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 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.

2

Yes, I do. But you’ll get a few more work. jQuery saves you a lot of work, so it is very used. But you can do the things you want.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.