<<Back to Article

Advanced JQuery HTML

/skill level/
/viewed/
0 Times

This is the advanced version of the Basic JQuery HTML code example. This was created for use in the introduction to JQuery tutorial. The tutorial uses this code example as stage two of three on the way to learning how to use 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_changeclass()
	{
		$("#second").toggleClass("highlight");
	}
	function test_changetext()
	{
		$(".test").text("over-riding text for these boxes");
	}
	function test_hiding()
	{
		$("#second").hide();
	}
	function test_hidetoggling()
	{
		$("#second").toggle();
	}
	function test_byfirstfilter()
	{
		$("span:first").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>Manipulations:</strong>
<input type="button" onClick="test_changeclass();" value="Change CSS where id='second'" />
<input type="button" onClick="test_changetext();" value="Change text where class='test'" />
<input type="button" onClick="test_hiding();" value="Hide where id='second'" />
<input type="button" onClick="test_hidetoggling();" value="Toggle show/hide where id='second'" />
</p>

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