WebElf.ca: Setting Up JQuery and Basic DOM Manipulation

Setting Up JQuery and Basic DOM Manipulation

^{Page last updated on 2011 / 25 / 07}

Installation of JQuery is quite simple really, or easy to assume that it is when you've been developing sites for a while...

Include the following within the <head> section of your HTML:

The above snippet is the full basic framework of JQuery, all styling and plugins require their separate files for added functionality. Because this script is referencing a file on Google's server, there's a fair chance that the user (including you) already have this file cached on the client-side, meaning that minimal bandwidth is used. This is the advantage of having a CDN (Content Delivery Network) style of JQuery.

Consider the following example. I have provided the HTML and a working example below it. This will show you some basic DOM manipulation, courtesy of JQuery.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
 
function change_color() {
randomhexcode = Math.round(0xffffff * Math.random()).toString(16);
$('#testid').css('background-color','#' + randomhexcode);
}
 
function class_contents() {
alert($('.testclass').html());
}
 
function id_contents() {
alert($('#testid').html());
}
 
function id_contents() {
alert($('#testid').html());
}
 
function random_from_list() {
randomnum = Math.floor(Math.random()*($('ul > li').length+1)); // Pick a random number between 0 and the # of <li> tags on the page
alert('#'+randomnum+' of '+$('ul > li').length+' <li> tags says "' +$('ul > li:eq('+(randomnum-1)+')').html()+ '"');
}
 
$(document).ready(function() 
{
$("a").css('cursor','pointer');
$("a").attr('href','#');
});
 
</script>
</head>
<body>
 
<div id="testid" class="testclass">This is my text</div>
<ul>
	<li>This</li>
	<li>is</li>
	<li>an</li>
	<li>unordered</li>
	<li>list</li>
</ul>
 
<a onclick="class_contents()">Show Contents By Class</a> : 
<a onclick="id_contents()">Show Contents By ID</a> : 
<a onclick="change_color()">Change Color</a> : 
<a onclick="random_from_list()">List</a>
 
</body>
</html>

The above code is wrapped inside a basic unstyled HTML template, copy/paste the code and save it to see it working locally. I've also included it below.
Line 3: References the JQuery javascript file hosted on Google
Line 4-34: Javascript, more on this shortly
Line 38: A <DIV> tag referenced by the id "testid" and the class "testclass"
Lines 39-45: An unordered HTML list
Lines 47-50: 4 Clickable links designed to show some JQuery examples when clicked, namely
Show Contents By Class: Shows the inner HTML of any element with a particular class name. Note that more than element can use the same class name.
Show Contents By ID: Show the inner HTML of any element referenced by a particular ID
Change Color: Generates a random colour and alters the CSS->Style->background-color attribute for an element, in this case the element with the ID #testid
List: Selects all <li> elements, picks a random one and returns the inner HTML from it.

Working Example

This is my text

This
is
an
unordered
list

Show Contents By Class : Show Contents By ID : Change Color : List

WebElf.ca

JQuery

Setting Up JQuery and Basic DOM Manipulation

Working Example

Previous ArticleAn Introduction to JQuery: The Monolithic JS Library

Previous Article
An Introduction to JQuery: The Monolithic JS Library