Making The Web Interactive: An Introduction To jQuery

James Bruce 10-02-2013

jquery reviewjQuery is a client-side scripting library that nearly every modern website uses – it makes websites interactive. It’s not the only Javascript library, but it is the most developed, most supported, and most widely used. It’s one of the building blocks of any modern website. But what exactly is jQuery, what makes it so popular, and why should you care about it if you’re starting out as a web developer?


What Is jQuery?

jQuery is an extension of Javascript, a library of Javascript functions and utilities that add visual flair, and make advanced features simple to implement in just a few lines of code. It is supported across browsers, and open source. Plus you can also extend jQuery functionality with easy to use plugins.

jquery review

jQuery is built on top of Javascript, but it adds methods and functionality not found in pure Javascript. It was created in order to simplify Javascript usage and remove the hassles concerned with different Javascript implementation in different browsers. With jQuery you can just write once, and jQuery will interpret your code correctly for any browser.

The main function of jQuery is for DOM manipulation (DOM is the Document Object Model), and it means the underlying structure of any webpage you visit. Every single thing you see on the page – and many you don’t see – are represented in the DOM.

jQuery is not the only Javascript library out there, but it is the most popular – about 55% of the top 10,000 websites use it. Prototype, MooTools and Scriptaculous are popular alternatives, but not nearly as well supported.


Client Side vs Server Side

Most webpages are generated on the server side – MakeUseOf uses PHP and MySQL (in the form of WordPress) to fetch the article data from a database and then apply a template to that data. The resulting page is sent to your browser, interpreted, and displayed to you. Clicking on a link makes another request to the database, and yet another page is generated. But what if you want to create some kind of interactivity on the page? A form that checks what the user types (like Twitter, which counts how many letters you have left), a button which brings up a dialog box, or perhaps you want to load some more data without reloading the entire page?

This is where client-side scripting comes into play. That’s where the client – your browser – does the heavy lifting. Most websites, this one included, use a little of both.

how to use jquery

Why Use jQuery?

Visual Flair

jQuery let’s you change parts of the webpage in response to user actions. As a quick example, click this link – every link on the page will change to red. Useless? Perhaps, but you get the point. Image slideshows are a common use of jQuery. Balancing pointless visual effects and genuinely useful additions to the user experience is part of the skill in being a web developer.


Here’s a quick list of some really awesome effects you can achieve.

how to use jquery

Easy Events

Nearly all software works on an event model – click on something, and a click event is triggered. Drag your finger across a tablet, and a drag event is triggered. Applications “listen” for these events and do something – jQuery lets you do this in a browser.

Perform AJAX Simply

Asynchronous Javascript And XML is a way of communicating to a remote server without having to load another page. A good example of this is the Facebook status stream. Try to scroll through all your updates until you get to the bottom. You can’t. As soon as you get to the end, jQuery detects you’re close, and sends an AJAX request for more statuses to display.


It then injects them into the current page, without you realizing. You get an infinite stream of updates, but they’re not all loaded at the start.

Advanced User Interfaces

Along with the jQuery UI core plugin, you can build complete web applications using standard form components; progress bars, sliders, buttons, tabs, drag and drop – it’s all there. A simple theming system lets you customize the look and feel, or you can use one of the defaults.

jquery review

Should I Care?

If you have any interest at all in developing websites Which Programming Language to Learn - Web Programming Today we're going to take a look at the various web programming languages that power the Internet. This is the fourth part in a beginners programming series. In part 1, we learnt the basic of... Read More , then yes – jQuery is a thing you definitely need to learn. If you’ve ever asked yourself “How can I make X do Y when the user does Z?”, then you’re going to love jQuery. Adding it to your site is as simple as adding a link to it in the header; or telling WordPress to load it.


Would you like to learn jQuery? Let us know in the comments and I’ll see what I can do.

Image Credits: Dynamic Rotating Billboard Created Using jQuery,, Chart Made With jQuery

Related topics: JavaScript, Programming, Web Development.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Hisham Sliman
    March 15, 2013 at 1:27 am


  2. Ronald
    March 8, 2013 at 6:30 pm

    I'm looking forward to downloading some of your high tech material, Thank

  3. Angeline Factor
    February 13, 2013 at 6:03 am

    wow, I wanna get into jQuery! but I guess I need to focus first on basic javascript before this...

    • James Bruce
      February 13, 2013 at 8:29 am

      Not really; jQuery is really easy to learn without Javascript - I still can't understand a lot of pure Javascript. The basic of JS can be picked up as when needed, but easy to get started without it. that's the beauty of jQuery!

  4. Rigoberto Garcia
    February 12, 2013 at 4:28 pm

    Great article James, thanks...

  5. Nevzat Akkaya
    February 12, 2013 at 7:43 am

    JQuery's own documentation is also a great resource. Thanks for a little programming love, MUO :)

  6. Keith Swartz
    February 12, 2013 at 6:23 am

    I loved the article! Very well researched, constructed & written in an understandable way. Thank you James Bruce & keep him straight Justin!

  7. Tom Bogan
    February 12, 2013 at 5:45 am

    Would love to learn jQuery. Sounds very interesting.

  8. Jai
    February 11, 2013 at 8:01 pm

    Yes. Waiting for a detailed lession on jquery

  9. isaacson
    February 11, 2013 at 4:48 pm

    great article. More jquery pls!

  10. Robert
    February 11, 2013 at 2:50 pm

    I have found using Jquery to be relatively easy to learn. They've good documentation on the web site. there is also the and
    If you are developing a business web-site, it is definitely something you need in your tool box.
    Another good source of web training that I have used over the years is:
    They have a short course on JQuery to give you some of the basics.

  11. Francisco de Gusmão
    February 11, 2013 at 2:36 pm

    I've used it on a work, it provides great features! It's easy to work with, I recommend to everyone!

  12. Bassey
    February 11, 2013 at 12:32 pm

    I'd certainly enjoy a piece on learning JQuery.

  13. Scott Macmillan
    February 11, 2013 at 12:09 pm

    I hadn't realized the importance of iQuery.Thank you for the informative article.

  14. salim benhouhou
    February 10, 2013 at 9:35 pm

    check out Jeffery Way's course " 30 Days to Learn jQuery " it's great and it's free at :

  15. Alex Downs
    February 10, 2013 at 7:59 pm

    I had no idea that jQuery was so fundementaly essential for the web designing process and would love to learn how to utilize it. Personally, I like the idea of MakeUseOf highlighting more programming tutorialsinstead of just recommending various sites to learn.

  16. Martin
    February 10, 2013 at 7:33 pm

    I would certainly love to learn jQuery. Up until now it's seemed something too difficult, but you make it sound so easy I'd be really keen to learn it. I make websites but only using basic knowledge. I think this would be a very nice 'next-step' to increase my web development abilities. Thanks for the offer, I look forward to what you can do for me/us.