Introduction to jQuery

Thursday, June 7, 2012

jQuery is a cross-browser JavaScript library with the ultimate goal of simplifying client-side scripting. jQuery is free, open source software. The jQuery library contains features that allow for HTML element selection and manipulation, HTML event functions, CSS manipulation, JavaScript animation, and more. Web developers are able to use jQuery in conjunction with server-side scripting languages such as JSP, ASP, ASP.NET, PHP and CGI.

Browser Requirements

The browser requirements for running jQuery are not very restricted. The following browser versions should be fully compatible with the latest versions of jQuery:

  • Firefox 2.0+
  • Internet Explorer 6+
  • Safari 3+
  • Opera 10.6+
  • Chrome 8+

Downloading jQuery

The best place to get the latest version of jQuery is from their site. Aside from downloading the latest version and storing it locally with your web files, you can also link to several content delivery networks (CDNs) such as Google, Microsoft, and the jQuery CDN that are referenced on the jQuery website. For example, if you download the latest copy, you can add it to your web page as shown in the following example:

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

Instead of downloading and hosting jQuery within your website, another approach is reference it from a CDN (Content Delivery Network). Both Microsoft and Google host different versions of jQuery. CDN's will ensure sure that once a user requests a file from it, the file is served from a server closest to the user. Simply change the src attribute and update it with the URL of the file. For example, or

Basic Example

The following example demonstrates the jQuery hide() method, hiding the div element in an HTML document.

<!DOCTYPE html>

    <style type="text/css">
    div {


    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("div").click(function () {

        Click anywhere inside of this div element.

Click anywhere inside of this div element.

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

JavaScript and jQuery: The Missing Manual HTML CSS and JavaScript Editor Pro jQuery