Log in to like this post! What is jQuery? Brent Schooley / Thursday, March 28, 2013 “What is jQuery?” may seem at first to be a somewhat silly question (and I refuse to call anything a stupid question) given how widespread its usage is in today’s web and mobile world. However, there are many software developers who have never used it. Whether these developers are primarily desktop or native mobile developers or simply backend developers, this question may become a relevant question for each of them to ask at some point in their careers. So, if you already know what jQuery is and what it is used for, this post was not written for you. This post is for the other developers who, like I did not that long ago, want to know what exactly this jQuery thing is all about. Definition To start our quest towards knowing what jQuery is and why we should care, let’s take a look at jQuery.com: “jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.” That’s the “straight from the horse’s mouth” definition of what the project is and aims to accomplish. There are several components to this definition and I want to address each one individually. Lightweight jQuery is small. For all that it accomplishes, it is really small. It’s only 32kB when minified and gzipped. This means it’s a really quick download on machines the first time it is encountered. When using a CDN, your site’s users may not even need to download that small file! HTML Document Traversal and Manipulation jQuery makes it really easy to find elements within the Document Object Model (DOM) of your webpage. Using CSS3-compatible selectors and some convenient functions on the jQuery object, it is possible to find and manipulate objects with ease. For instance, to find the paragraph on the page with id ‘placeholder’ you would use the following jQuery code:$('#placeholder') To replace the HTML code for this placeholder element, use the .html() function:$('#placeholder').html('New value!') See the following for more details: DOM traversal and DOM manipulation Event Handling Most modern web sites demand some form of user interaction. When a user interacts with elements on the site, events are fired that can be handled using jQuery code. Here are some common DOM events that can be handled: Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload Almost all of these events have corresponding jQuery functions that are available on any jQuery object. For instance, to perform some action when our #placeholder element is clicked, you would use the following jQuery code:$('#placeholder').click(function() { // put code to perform on click here... }); See the following for more details: Events Animation jQuery makes animating elements on your website easy. There are many built-in effects that handle common animations like show(), hide(), fadeIn(), fadeOut(), etc. To hide our #placeholder element we could use the following code: $('#placeholder').hide() If we wanted to control the speed with which the element hides we can pass in a string-valued argument of either ‘slow’, ‘medium’, or ‘fast’ like this:$('#placeholder').hide('slow') If you want precise control over how long the effect takes to complete, you can pass in a duration in milliseconds like this:$('#placeholder').hide(1000) To run some code after an animation completes you can pass in a callback like this:$('#placeholder').fadeIn(500, function () { // callback code goes here... }); See the following for more details: Effects Cross-browser Support One of the major goals of jQuery is to allow developers to not have to worry about the differences between the various web browsers. It seems like every browser has their own unique way of dealing with the DOM whether it’s events, animations, or simple traversal. jQuery removes the need to worry about this. For a list of supported browsers, check out the browser support page on jQuery.com. Extensibility jQuery was designed to be extensible. There are a ton of plugins for jQuery. Summary If you are building websites, web applications or hybrid mobile applications today you should probably learn jQuery. In fact, it’s probably a good thing to learn even if you’re not! For a really great way to get started with jQuery, check out http://try.jquery.com. In my opinion, this is one of the best ways to get started with jQuery. Once you have gotten up to speed with jQuery you will definitely want to check out Ignite UI. Contact If you have any questions or comments, please comment below or find me on Twitter @brentschooley. You can also email me at bschooley@infragistics.com.