Did you find this useful?
Socialize it today.


Introduction to jQuery

Thursday, June 07, 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:


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


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, http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js or https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js


Basic Example

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


<!DOCTYPE html>
<html>
<head>

    <style type="text/css">
    div {
    padding:50px;
    background-color:#666666;
    color:#ffffff;
    text-align:center;
    }

    </style>

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

<body>
    <div>
        Click anywhere inside of this div element.
    </div>
</body>
</html>


Click anywhere inside of this div element.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

Pro jQuery Professional jQuery HTML CSS and JavaScript Editor