1. 10
  1.  

  2. 7

    Using jQuery it becomes trivial to do stuff like visually hiding the second <h2> HTML element in an .html document. The jQuery code that would accomplish such a task would look like so:

    jQuery('h2:eq(1)').hide();
    

    Now contrast this to the native DOM code that would be required if one didn’t use jQuery.

    document.querySelectorAll('h2')[1].style.setProperty('display','none');
    

    Wait. What? You can use the nth-child selector. If you like it to look “pretty”, you can bind the document.querySelector function to a variable (it requires this to be set appropriately to work)

    var $ = document.querySelector.bind(document)
    
    $('h2:nth-child(2)').style.display = 'none'
    

    There’s no leaky abstractions here, the developer knows exactly what’s happening, and they didn’t have to make an extra request or pack their javascript with an extra large surface of code that doesn’t specifically solve any single problem. Isolate your concerns, load them as useful, modular, dependencies, and learn to see jQuery and dependency on it (developer and project wise) as a code smell, for a variety of reasons.

    If you want a DOM manipulation library, use Zepto; if you want polyfills, check for compatibility and then load them using Modernizr; AJAX is so simple to implement into abstraction that you can find implementations everywhere that are all less than 1kb. At the end of the day, you’ll most likely end up with much smaller bundles than the sizes that the author boasts

    jQuery 2.x minified is around 82kb. Gzipped it’s around 28k.

    jQuery 1.x minified is around 96kb. Gzipped it’s around 32k.

    I don’t think I’d enjoy waiting for that to load on 2G reception for any website.

    1. 5

      I don’t think I’d enjoy waiting for that to load on 2G reception for any website.

      How many plain-text websites use extensive javascript? If you have even one image on your page that’s going to swamp the 28k/32k of jQuery.

      1. 2

        How many wordpress websites block pageload with jQuery and many more plugins than you think they could possibly need? How many websites block pageload with jQuery total? I’ve seen more than I’d like to.

        And in low bandwidth areas (for example, outside of the US, or just on a cheap mobile carrier), disabling the loading of images rarely breaks websites but disabling javascript does just that on a very regular basis since “JQuery as a framework to do everything from css-things to user interfaces” is totally OK. A certain amount of this isn’t JQuery specific (although JQuery contributes directly in many ways), but it isn’t coincidence that these mistakes are commonly made on websites loading JQuery, and that those developers seldom grow past making these mistakes because frameworks like JQuery teach them to ignore the “details” behind their website

      2. 3

        You can use the nth-child selector

        To be fair, this isn’t exactly the same thing as the author illustrates. Your selector will match any h2 that is a second child of any element. The author’s selector will match the second h2 regardless of whether it is a second child. Example below:

        <body>
        <h2>First</h2>
        <div>
            <h2>Matched by author's selector</h2>
            <h2>Matched by your selector</h2>
        </div>
        </body>
        
        1. 1

          You’re right, the nth-of-type selector would be more appropriate here, but even then will it only match the second consecutive h2 within its own container, and not outside

      3. 0

        IMO the author missed why people stopped using jQuery. The collective community seems to have realized that ad-hoc DOM manipulation is impossible to maintain. The DOM is a giant, complex global variable and mutating it willy-nilly is a recipe for disaster. The only two use cases for jQ are DOM mutation and better event handling, and the browsers have the second covered.

        For my part, I don’t use jQuery because for web applications (which is most of what I’ve done the past couple years) it makes much more sense to use something like React to structure the UI as logical units to be composed than to use jQuery to try and modify it on the fly to get to where I want it. I don’t miss jQuery and don’t see myself using it again anytime soon.

        1. 5

          Keep in mind that frameworks such as Ember depend on jQuery as well. I don’t believe the author or jQuery folks put forward the notion that jQuery is the highest-level abstraction that should be used to develop web applications.