jQuery Introduction

The jQuery library can be added to a webpage with a simple line of code.

jQuery library - Features

jQuery is a JavaScript function library.

The jQuery library includes the following features:

  • HTML element selection
  • HTML element operations
  • CSS operations
  • HTML event functions
  • JavaScript effects and animations
  • HTML DOM traversal and modification
  • AJAX
  • Utilities

Add the jQuery library to your page

The jQuery library is located in a JavaScript file that contains all the jQuery functions.

jQuery can be added to a webpage using the following markup:

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

Please note that the <script> tag should be located in the <head> section of the page.

Basic jQuery example

The following example demonstrates the jQuery hide() function, which hides all <p> elements in the HTML document.

Example

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>

Try it yourself

Download jQuery

There are two versions of jQuery available for download: one is minified, and the other is uncompressed (for debugging or reading).

Both versions are available from jQuery.com Download.

Library alternatives

Google and Microsoft both have good support for jQuery.

If you do not want to store the jQuery library on your computer, you can load the CDN jQuery core files from Google or Microsoft.

Using Google's CDN

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

Using Microsoft's CDN

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>