• Thursday , 17 January 2019

jQuery vs vanilla JavaScript – Beau teaches JavaScript

Code Canyon

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

Original source

3d Ocean

Related Posts


  1. Arcane Lore
    September 13, 2018 at 09:24

    What percentage Javascript cover Jquery in?

  2. Michal Maciej Dzienis
    September 13, 2018 at 09:24

    Yes, but when you prepend (for example, it applies to more JS selectors) you still have to define the 'otherElem' with document.querySelector, which is longer than jQuery. So every time you try to prepend or append you might end up with greater amount of code using vanilla JS, just because of selectors.

    Doesn't matter for small apps, but if you have a big site, and thousands of the variable selectors they it's more optimal to use jquery, from code volume perspective, no? In this case at least, unless vanilla JS has jQuery beat in some other aspects.

    P.S.: So basically JavaScript chose to assimilate jQuery into itself? Based on that video I assume more and more functions will become standardized into the vanilla JS.

    P.P.S.: Great video! Thanks 🙂

  3. iMakeOnionsCry
    September 13, 2018 at 09:24

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

  4. Bagas Wahyu Hidayah
    September 13, 2018 at 09:24

    i am doing this usually

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

    let elem = $('.someClass');

  5. Chris Blackwell
    September 13, 2018 at 09:24

    Jquery is ugly. Who starts a command with wierd special characters. Thank you.

  6. Rulo Kobashikawa
    September 13, 2018 at 09:24

    Thank you. Personally, I like jquery chained way to express a solution

  7. Tiago Gomes
    September 13, 2018 at 09:24

    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!

  8. Jason Welsh
    September 13, 2018 at 09:24

    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?

  9. Jason Welsh
    September 13, 2018 at 09:24

    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

  10. Dániel Szalók
    September 13, 2018 at 09:24

    I still like jQuery after the video 🙂

  11. Ws Webus
    September 13, 2018 at 09:24

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

  12. Sergi
    September 13, 2018 at 09:24

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

  13. Evrim
    September 13, 2018 at 09:24

    youre a legend

  14. Wira Andhika
    September 13, 2018 at 09:24

    love it! very clear explanation, please do more vanilla javascript videos

  15. trapped cat
    September 13, 2018 at 09:24

    I like doing this:
    const doc = document, get = "querySelector";


Leave A Comment

You must be logged in to post a comment.