jQuery vs vanilla JavaScript – Beau teaches JavaScript



When should you use jQuery instead of vanilla JavaScript? Is jQuery still relevant? What is jQuery good for? Find out in this video!


Video based on this article by Ollie Williams: https://css-tricks.com/now-ever-might-not-need-jquery/

The only polyfill you’ll ever need: https://polyfill.io

🐦 Beau Carnes on Twitter: https://twitter.com/carnesbeau

⭐JavaScript Tutorials Playlists⭐
▶jQuery Playlist: https://www.youtube.com/playlist?list=PLWKjhJtqVAbkyK9woUZUtunToLtNGoQHB

▶JavaScript Basics: https://www.youtube.com/playlist?list=PLWKjhJtqVAbk2qRZtWSzCIN38JC_NdhW5


Learn to code for free and get a developer job: https://www.freecodecamp.com

Read hundreds of articles on technology: https://medium.freecodecamp.com

And subscribe for new programming videos every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

This Post Has 20 Comments

  1. Liberation

    so finally what's bad about using JQuery? it's clear that JS is almost as good as JQuery, but what are the exact reason why should i use the less convenient way?

  2. KL

    Vanilla JS is the truth

  3. Tarek Faham

    There are a lot of other jquery methods you didn't mention which is much harder to implement in plan js. For example, find and close, do they exist in plain js?

  4. NM AA

    For me vanilla js much better for readibility.

  5. Andy MacLeod

    I wrote a hundred lines of jQuery yesterday (including comments), then decided to use vanilla js instead. It took me 170 lines to write the same functionality. (NB: My vanilla js was slightly more efficient code because it was the second time I wrote the same app, so I had refactored some stuff). So I'd estimate the jQuery probably had about half the lines of code overall. The main reason why the jQuery was slightly leaner (in terms of lines of code) was because of the ability to chain statements together, rather than reselecting elements.

    I think jQuery has a slight advantage in terms of readability… but it's not a big deal.

    In my case, jQuery is probably still the best option, because I'm likely going to want to use jQuery UI as the app develops. Otherwise I'd have to rewrite some of the same functionality jQuery UI provides.

    As with everything, I guess it all depends on what you need to do. If all you are doing is basic web enhancement stuff, vanilla js is perfectly fine. But the more you go beyond that, the more you appreciate out of the box solutions…

    I think it's great though that js is evolving into a leaner and more powerful scripting language. And when you combine it with CSS3, you've really got a lot more power and flexibility than we had previously.

  6. Busherino LoL

    Isn't it common do use a $ sign infront of vannilla queryselector variables aswell ?

  7. David K

    var gdI = document.getElementById.bind(document);
    var an_el = gdl('an_id');

  8. iMakeOnionsCry

    I learn bootstrap and jquery in college, but i don't like both of them. Vanilla ftw!

  9. i am doing this usually

    function $(selector) {
    let elems = document.querySelectorAll(selector);
    return elems.length > 1 ? Array.from(elems) : elems[0];
    }

    let elem = $('.someClass');

  10. Tiago Gomes

    So cool the pollyfil tip. So cool, so cool! I didn´t know about that really will make me more happy code js on future projects! I am a fan of vanilla js!

  11. Jason Welsh

    When you say to place that polyfill script tag at the top of your website, where exactly do you mean? In the head of the document? Does it matter what comes before or after it?

  12. Jason Welsh

    I have a problem with the requestAnimationFrame() thing. I have an element with a class of '.other-div' and I set the original state to the same state as you did in the CSs (opacity and display and gave it a transition property). I have a button on the button and I am trying to make the element fade in using this method and it is not working. Can anyone help please?
    const output = document.querySelector('.output');
    const otherDiv = document.querySelector('.other-div');
    const btn = document.querySelector('#button');

    btn.onclick = () => {
    otherDiv.style.display = 'block';
    requestAnimationFrame = ( () => otherDiv.style.opacity = 1);
    };

    Or here is the pen so far: https://codepen.io/Balmora/pen/XaNroE

  13. Ws Webus

    What about siblings and slideToggle? Is there alternatives in vanilla js?

  14. Sergi

    Should "var" still be used? That's something that I still wonder myself. I mean in production.

Leave a Reply