A Quick Look at jQuery
- Great for building user interfaces, web applications, and mobile sites
- Has an easy-to-use API that makes things like animation, event handling, and AJAX requests much simpler
- Accessible and easy to use, making it possible for anyone from an engineer to a non-coding designer to manipulate a site
Google and Microsoft both host jQuery as CDNs (content delivery networks), an alternative to downloading and installing jQuery, and, as jQuery is likely already cached on most computers from other sites, this leads to faster load times.
How does jQuery work?
Like most front-end technology, jQuery’s responses are event-based. Any time a user clicks, submits, scrolls, loads, or performs any other interaction, it fires an “event,” and jQuery selectors locate, select, and then manipulate an HTML element, using CSS syntax. For example, if a mouse click should change the color of an object on a screen, jQuery is processing that request, then changing the color of that object in the HTML.
jQuery-powered sites include: Google, Microsoft, IBM, and Netflix.
How do I use jQuery?
Calling a jQuery library function is easy, simply reference the CDN link between the
<script> tags or install it locally in your app. Then register a ready event for the document for the function you wish to call as we did in the code block below:
// in your custom.js file
/* Filename: custom.js */
alert("I’m using jQuery!");
// in your HTML file
<title>My jQuery Powered Website</title>
<div id = "mydiv">
Click me to see jQuery in action.
Note that using the
$(document).ready clause before your function in the
custom.js file referenced above ensures that it will load as soon as the DOM is loaded.
Why should I use jQuery on my site’s front end?
Note: The product version of jQuery is compressed and ideal if your site is already live; the development version is not compressed and is preferred for testing and development stages.