Intro to jQuery


Add jQuery Library to Your Pages

Either download and host on own server or use the one hosted by Google / Microsoft.

Using Google's jQuery

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


Using Microsoft's jQuery

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


Download latest jQuery

Download production version from jQuery.com and host on your own webserver.
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

Basic jQuery Example


The following example demonstrates the jQuery hide() method, hiding all <p> elements in an HTML document.
<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>Click me</button>
</body>
</html>

Selectors

Element Selectors

$(this)only this object
$("p")all <p>
$(".foot")all class="foot"
$("#name")first element with id="name"
$("ul li:first")The first <li> element of the first <ul>
$("ul li:first-child")The first <li> element of every <ul>
$("div#intro .head")All elements with class="head" inside a <div> element with id="intro"

Attribute Selectors


jQuery uses XPath expressions to select elements with given attributes.
$("[href]")select all elements with an href attribute.
$("[href='#']")select all elements with an href value equal to "#".
$("[href!='#']")select all elements with an href attribute NOT equal to "#".
$("[href$='.jpg']")select all elements with an href attribute that ends with ".jpg".

CSS Selectors


jQuery CSS selectors can be used to change CSS properties for HTML elements.

The following example changes the background-color of all p elements to red:
$("p").css("background-color","#F00");


Valid XHTML :: Valid CSS: :: Powered by WikkaWiki