By Matt Mewton, Front-End Developer
I recently faced a conundrum while working on an RSR project. Do I use a jQuery element or a Document Object Model element? After much debate, I found that using the DOM was much simpler and more efficient. My problem was I needed a way to get all the elements of a class, find the ID of each of those elements and iterate through them accordingly to perform an action.
If I were using jQuery, I might try and do something like “$(‘body’).find(‘.foo’).” This line of code produces a jQuery element, but that’s not really what I need. Once an element has been cast as a jQuery element, it loses access to some DOM properties and methods. That means I may need to write extra methods and functions, via jQuery, to get around the fact that we no longer have access to a basic DOM element. This has the potential to make our code more bloated and, in some cases, harder to read and maintain.
Although one of jQuery’s benefits is cross-browser standardization, it doesn’t have an answer for everything. Suppose I want to disable a form button. “$(‘button’).attr(‘disabled, ‘disabled’)” doesn’t work in all browsers; but “document.
As recently as two or three years ago, a lot of interactive web animation was done through various jQuery commands. Methods such as “slideDown,” “animate,” and others became ubiquitous, and for a while this was one of the primary uses of the jQuery library. Now, the language of CSS has evolved to allow more flexibility when creating these types of animations, and most modern browsers have begun to incorporate these new CSS3 properties. There is now less of a reason to need to use jQuery to animate a menu up and down, for example, when the same can be accomplished in a CSS file. As CSS3 transitions are already extremely popular, I suspect it won’t be too long until the vast majority of front-end developers will rely exclusively on CSS3 instead of jQuery for simple animations and effects.