jQuery: The “Write Less, Do More” JavaScript Library

Image for jQuery: The “Write Less, Do More” JavaScript Library

jQuery is a fast, small, and feature-rich JavaScript object library that marked a significant breakthrough for front-end web development, the programming that goes into building everything a user sees and interacts with on a website. A universally used technology on the client-side, JavaScript (JS) has spawned a number of frameworks and libraries, but jQuery was the first to address the language’s browser compatibility.

On its own, JavaScript tended to act a little differently in each browser, requiring developers to write browser-specific code. jQuery is able to ensure that JS runs exactly the same in every browser, without needing browser-specific code. It’s also designed to make it easier to use JavaScript on your website, streamlining complex JavaScript code into concise, reusable bundles that allow you to “write less, do more.”

Join Upwork

A Quick Look at jQuery

jQuery is an object library that gives JavaScript streamlined functionality. Compatibility is jQuery’s advantage; it allows JavaScript to look the same in nearly every browser without additional lines of code.

Other benefits:

  • Great for building user interfaces, web applications, and mobile sites
  • Handles front-end requests and DOM manipulation (the mode via which JavaScript interacts with HTML), which make sites respond to user interaction
  • 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 */
$(document).ready(function() {
  $("div").click(function() {
     alert("I’m using jQuery!");
  });
});

// in your HTML file

<html>

  <head>
     <title>My jQuery Powered Website</title>
     <script type = "text/javascript"
        src ="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script&gt

     <script type = "text/javascript" src = "/jquery/custom.js"></script>
  </head>

  <body>

     <div id = "mydiv">
        Click me to see jQuery in action.
     </div>
  </body>

</html>

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?

  • Simplification. Even very common JavaScript tasks require many lines of code. jQuery simplifies this code into a package—a “method”—that can then be called into action with a quick line of code. It does the same for more complicated tasks like AJAX. AJAX can be tricky to code, and browsers have different syntax for it (which means extra steps in coding). In jQuery, AJAX code can be written in a single line—making it faster to write and compatible across the board.
  • Easy to learn and install. Most front-end developers know or can easily pick up jQuery, making programming JavaScript on your site that much more streamlined. For any developer who knows HTML5, CSS, and JavaScript, jQuery is a very quick study. Also, it’s easy to install on your site: The entire jQuery library can be downloaded as one JavaScript file, easily referenced in a site’s HTML with a <script> tag as demonstrated in our earlier example above.

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.

Browse freelance jQuery and jQuery Mobile developers on Upwork.  

Post a job on Upwork. It's free!
Carey Wodehouse

by - Freelance Content Marketer and Writer

Carey Wodehouse is a freelance content marketer and writer based in Richmond, VA who’s worked for clients ranging from online retailers and global market research… more