jQuery

Updated: 10/11/2017 by Computer Hope

jQuery logoIn JavaScript jQuery is a JavaScript script package meant to make common and repetitive tasks in JavaScript with HTML short and understandable code. The first stable release of jQuery was released by John Resig on January 26, 2006 with several additional releases since then.

To use jQuery you can download and place the single jQuery file locally on a personal server or use a public CDN from companies such as Google or Microsoft. To load jQuery place the below script line in your HTML code, similar to the example below, which is loading jQuery from a Google CDN. Using a public CDN has the speed advantage of loading the file and since many pages use a public CDN the visitor may already have a cached version of the script.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Once the JavaScript has been loaded, using the $ function, similar to the example below.

<script type="text/javascript">
function toggleDiv(divId) {
$("#"+divId).toggle(800);
}
</script>

In the above example, the JavaScript is loading the toggle jQuery function to show and hide the below Div. The 800 in the toggle gives an animation to the Div as it is hidden or shown.

<p>
<a href="javascript:toggleDiv('myContent');" style="background-color: #ccc; padding: 5px 10px;">Toggle Button</a>
</p>
<div id="myContent" style="background-color: #F0F0F0; padding: 5px 10px;">This example text is to help demonstrate jQuery. Pressing the Toggle Button shows and hides this text.</div>

Finally, the above HTML code will create a Toggle Button and the div that will hide and show depending on the state of the toggle.

Live example

Toggle Button

This example text is to help demonstrate jQuery. Pressing the Toggle Button shows and hides this text.

Related pages

AJAX, JavaScript, Web design terms