WebMonkey Beta 2.0: The Web Developer's Resource

Help|
Rss feeds
- Rss feeds
- Subscribe to:
- Tutorials
- Reference
- Code library
- All articles
- Monkey Bites Blog

Member Sign In

Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.

It's fast and free.

Join Now

Webmonkey is a property of Wired Digital.

processing...

Join Webmonkey

E-mail address:

Username:

Password:

Confirm password:

Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.

Yes No

Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.

Yes No

I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.

Join Now

Webmonkey is a property of Wired Digital.

processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

Webmonkey is a property of Wired Digital.

processing...

Welcome to Webmonkey

A private profile page has been created for you.

As a member of Webmonkey, you can now:

edit articles
add to the code library
design and write a tutorial
comment on any Webmonkey article

Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.

If you cannot find it in your in-box, please check your bulk or junk folders.

Webmonkey is a property of Wired Digital.

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"