<<Back to Article

Basic JQuery HTML

/skill level/
/viewed/
0 Times

This is a basic example of HTML and JavaScript functionality using JQuery. It was created for use in the introduction to JQuery tutorial. The tutorial uses this code example as stage one of three on the way to creating a FAQ template using the JQuery UI web framework.

This code is in a wiki. If you have any advances to make to the original tutorial and code, please feel free to contribute.

What it Looks Like

The Code

<html>
<head>
	<title>Testing JQuery</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
	<style>
		#container div, #container span
		{
			width: 150px;
			height: 150px;
			display: block;
			float: left;
			border: 1px solid black;
		}
		#container .highlight
		{
			border: 3px solid orange;
		}
		p
		{
			clear: left;
		}
		p input
		{
			display: block;
		}
	</style>
	<script>
	function test_byid()
	{
		$("#second").toggleClass("highlight");
	}
	function test_byclass()
	{
		$(".test").toggleClass("highlight");
	}
	function test_bytag()
	{
		$("span").toggleClass("highlight");
	}
	function test_byfirstfilter()
	{
		$("span:first").toggleClass("highlight");
	}
	function test_bynotfilter()
	{
		$("span:not(#second)").toggleClass("highlight");
	}
	</script>
</head>
<body>

<div id="container">

<span>SPAN<br />No id</br />No class</span>
<span class="test" id="second">SPAN<br />id="second"</br />class "test"</span>
<div class="test">DIV<br />No id</br />class "test"</div>


</div>


<p>
<strong>Toggles:</strong>
<input type="button" onClick="test_byid();" value="id='second'" />
<input type="button" onClick="test_byclass();" value="class='test'" />
<input type="button" onClick="test_bytag();" value="tag is 'span'" />
<input type="button" onClick="test_byfirstfilter();" value="the first object where tag is 'span'" />
<input type="button" onClick="test_bynotfilter();" value="tag is 'span', but id is not 'second'" />
</p>

</body>
</html>
Retrieved from "http://www.webmonkey.com/codelibrary/Basic_JQuery_HTML"
  • This page was last modified 20:43, 5 September 2008.
Edit this article
Reddit Digg