All posts tagged jQuery

  • A Helpful Guide to Moving Away From jQuery (Via the Lonely Coder)

    Recently, I wrote a post about how jQuery’s prevalence on the web was causing web developers to learn less JavaScript and more jQuery due to how it conceals many of the more complicated inner workings of JavaScript in wrapper methods like bind and ready.

    Michael Enger over at The Lonely Coder seems to agree with me and he put together a really cool guide on how to replace some of the more common jQuery methods with their native JavaScript counterparts. In addition to going over how to replace ready and how to do event delegation, he does an excellent job of covering CSS selectors. From the guide:

    One of the greatest benefits of jQuery is to be able to drill down into the DOM by using CSS-style selector strings to specify which element you’re looking for. Something as complicated as “#app ul .title a:hover > span.left” can be used to choose one specific element, or a set of elements that are situated in various places around the document. Unfortunately there isn’t a direct replacement in native JavaScript, but a combination of getElementById, getElementsByTagName and getElementsByClassName, as well as iterating through the results, can be used to select the element(s) you need and not being able to rely on CSS pseudo-classes or some of the more esoteric selectors may result in structuring the HTML in a less convoluted way, avoiding unnecessary strain on the browser who has to deal with all your crazy shenanigans.

    // Get the data-foo attribute of all links inside a .button list
    var buttons = document.getElementsByClassName('buttons'),
        foo = '';
    for (var i = 0; i < buttons.length; i++) {
        var links = buttons[i].getElementsByTagName('a');
        for (var j = 0; j < links.length; j++) {
            var link = links[j];
            foo += link.attributes['data-foo'];
        }
    }
    

    Edit: My good friend Torjus Bjåen made me aware of the querySelectorAll function, which provides the same CSS-style selector capabilities that jQuery does, albeit without some of the more “magical” selectors. It works like you’d expect and can be used to easily fetch elements that may be spread about the DOM.

    var links = document.querySelectorAll('.buttons a.special');
    for (var i = 0; i < links.length; i++) {
        links[i].style.backgroundColor = '#f09';
    }
    

    I highly suggest you check out his guide, it’s an excellent starting place for those looking to move away from jQuery and to a more native approach.

  • How to “Detect” If Your CDN is Down And Load a Script Locally As Backup

    I’m sure this has been around for a while now, but I just stumbled upon it and found it interesting:

    ...
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
    ...
    

    Basically, this does a check to see if jQuery has loaded properly from the CDN and, if it hasn’t, it tries to load it locally.

  • Are We Becoming jQuery Developers Instead Of JavaScript Developers?

    Recently, a fellow web developer asked me an interesting question: how strong are your JavaScript skills without frameworks like jQuery, YUI, etc.? While I am fairly confident in my JavaScript skills as a whole, it did make me step back and think: because of it’s prevalence, am I becoming less of a JavaScript developer and more of a jQuery developer? Are jQuery’s abstractions causing us (as developers) to forget how to work some of the more low-level areas of the language? For example, to stop even propagation in jQuery, you only need to do something like this:

    Read more

  • CSS Transitions Cause jQuery FadeIn() to Not Work

    While working on a small side project, I discovered an interesting quirk related to jQuery’s fadeIn method: If the element you’re trying to fade in has it’s transition property set (it doesn’t matter what vendor prefix you use), the element will just appear without fading in. Here’s a quick example:

    Read more

  • How to Load Mustache.js Templates From an External File with jQuery

    Recently, I’ve been hearing a lot about all the different JavaScript templating libraries out there. Well, I decided to sit down with with Mustache.js and tinker around with it. One of the first stumbling blocks I ran into was figuring out how to load a template that’s stored in an external file. After doing some digging into a bunch of different blog posts online, I’ve figured out that it boils down to just a couple of basic steps:

    Read more