Moving Mario! – Code Academy and jQuery

After my experience with jQuery on Code Academy, I now have two points of coding comparison: HTML/CSS and jQuery. According to its website, jQuery is “a fast, small, and feature-rich JavaScript library” (jQuery, “What is jQuery?”). Furthermore, “it makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use application programming interface (API) that works across a multitude of browsers” (jQuery, “What is jQuery?”). In my experience with both HTML/CSS and jQuery, it is evident that jQuery makes HTML/CSS interactive in that it changes certain elements in response to user interaction. This is important because, according to Alex Holt of Smashing Magazine, “when used correctly, jQuery can help you make your website more interactive, interesting and exciting,” all of which are important aspects in the realm of the World Wide Web (Holt, 2008).

Although I have not yet worked with JavaScript, I have been told that it can become quite repetitive in terms of coding. jQuery is a JavaScript framework that makes coding easier for the programmer. For example, something that might require four lines of code in JavaScript can be accomplished with one line of code jQuery, like so:


$ (‘body’) .css (‘background’, ‘#ccc’);


Function changeBackground(color) { = color;


Onload=”changeBackground (‘red’);”

Nonetheless, “professional web developers spend a lot of time debating whether JavaScript or jQuery is appropriate in a given situation” (Wilde, 2013). According to Bryan Wilde of Udemy Blog, “there is no correct answer” (Wilde, 2013). However, as is evident in the aforementioned example, jQuery is useful for “large, complex web development” projects (Wilde, 2013). And yet, there are certain projects that require “the specific functions only available in traditional JavaScript” (Wilde, 2013). Alas, a conundrum.

In the professional world, jQuery is used in a variety of different ways. According to Holt, jQuery is used for unobtrusive document object models (DOMs) – “basically, the art of adding JavaScript (or jQuery) to your page in such a way that if there were NO JavaScript (or jQuery), the page would still work (or at least degrade gracefully)” (Holt, 2008). The first step to unobtrusive DOM scripting “is using selectors,” which can select an element out of the DOM tree so that it can be manipulated in some way (Holt, 2008). In addition, jQuery “provides us with a special utility on the document object, called ‘ready’, allowing us to execute code ONLY after the DOM has completely finished loading” (Holt, 2008). jQuery is also used “in a lot of places that can’t be identified through a web crawl… you’ll find jQuery anywhere web technologies are used, not just the public Internet,” including Google Chrome add-ons, Mozilla XUL apps and Firefox extensions, Firefox OS apps, Chrome OS apps, Windows 8 Store apps, BlackBerry 10 WebWorks apps, PhoneGap/Cordova apps, Node.js, and even the Sony PlayStation 4 (jQuery, “The State of jQuery 2014”).

Thus, jQuery’s use of “a convenient and browser-independent layer around the cumbersome DOM interfaces is one reason for its popularity” (jQuery, “The State of jQuery 2014”). As Simon St. Laurent put it, “’jQuery is how the web routes around broken API design’” (jQuery, “The State of jQuery 2014”). However, jQuery does not “want the DOM API repair business to be our full-time line of work… people should be continuing to use jQuery because it’s a powerful way to implement designs and provides a vibrant ecosystem of useful plugins, not because the native DOM APIs are broken, verbose, or inconsistent” (jQuery, “The State of jQuery 2014”).


Holt, A. (2008, September 16). jQuery and JavaScript Coding: Examples and Best Practices. Smashing Magazine. Retrieved from  practices/

jQuery. The State of jQuery 2014. Retrieved from

jQuery. What is jQuery? Retrieved from

Wilde, B. (2013, October 31). JQuery vs. JavaScript: What’s the Difference Anyway? Udemy Blog. Retrieved from

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s