You are here

Introduction to jQuery and Usage Examples

JQuery is a small but incredibly versatile JavaScript library widely used in Web development to manipulate, animate, traverse, and handle events for HTML documents. Not only does jQuery extend and simplify the core functionality of JavaScript itself, but it also makes it possible to write single lines of code where alone JavaScript would require many lines. Need to change the DOM? Not a problem. Have to add or change the CSS for a specific page element? Easy peasy. Make an AJAX call or add an animation effect? No sweat! With minimal help you too can hold the power of jQuery in the palm of your hands -- or in this case, the tips of your fingers!


  1. Reference a hosted or local version of the jQuery library in the head section of your HTML page. This MUST be above any jQuery script in the page. 

One of the benefits of referencing an externally hosted version of jQuery instead of downloading and hosting it yourself is that it will likely be cached in viewers' browsers already, which will speed up your page load time.

HTML

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
  1. Create a new JavaScript document (.js extension) and add a reference to it in your HTML page BELOW the jQuery library reference.

HTML

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="myscript.js"></script>
</head>
  1. Open the new JavaScript document; this is where we will put your jQuery scripts. First, we'll add a script to change the content of one of the elements on your HTML page.

jQuery

jQuery(document).ready(function($) {
	$("p.example").html("Example replacement text");
});

HTML

<p class="example">Original text</p>

In the above jQuery example, the document ready function code tells the page to run the enclosed script as soon as the DOM is ready, p.example tells the script to select all p elements on the page with the class example, and html() replaces the existing content of all the selected elements with Example replacement text.

You can select elements by element type (such as p or div), by class, by id, or any mix of the three. You can also reference nested elements. For example, #main div#header p.item selects all paragraph elements with the item class within a div with the header id that is itself within an element with the id main.

If you'd prefer the script to run on an event, such as a button click, use the following script instead, coupled with the following HTML code. Modify the class selectors in the jQuery script as necessary to match your element classes.

jQuery

jQuery(document).ready(function($) {
	$("button.mybutton").click(function() {
		$("p.example").html("Example replacement text");
	});
});

HTML

<button class="mybutton">Button</button>
<p class="example">Original text</p>

Don't want to completely replace an element's content? Use append() in the same manner as html() to add content after the element's original content, or use prepend() to add it before. Also noteworthy is that the content you add/replace can be text, html, php, or even another script! There are many more options available too, such as element cloning, unwrapping container elements, and adding css styles and classes. See the official jQuery API Documentation to see all your options!

I'll be adding more content to this article very soon, so please check back soon for more examples!