Jquery testing

I dont know how fresh everyone is on jQuery css style element selectors so here is a quick overview on what you can do.
the jquery $() function is what you use to select elements on a page.

Try running this in firebug.

					$()[0].nodeName

The $() function with no selectors returns a jQuery object with index [0] pointing to the document element.
firebug should have printed "#document"

you may select by tag name, id, class, and attribute value

					//tag
					$("body")
					//id
					$("#element-id")
					//class
					$(".button")	
					//attribute
					$("a[title=happy]")

you may query items contained within a specific element/s

					$("#container a")
					//returns all "a" elements inside the element with the attribute id=container

All jquery setters and object getters return jQuery so you may set different values with one selector

					$("#box").addClass('big')
						.css({font-weight:'bold'})
						.click(function(){
							alert('chaining is cool');
						});

jQuery functions that are attribute getters do not return jQuery

					alert(typeof($("#box").html()));
					// "string"

with jQuery you can assign events to one or more elements at the same time via selectors.

					$("body a").click(function(){
						alert($(this).attr('href'));
					});

not only can you mass assign events but you can assign more functions attached to the same elements and events

					$("body a").click(function(){
						alert('lala');
					}).click(function(){
						alert('lolo');
					});

functions are executed in fifo order so any links on the page when clicked will generate alerts 'lala' then 'lolo'

When i see this i think wow great... i can add events but how can i manage the life cycle of my elemnts without being able to remove event handlers?.

					var function1 = function(){
						alert('function1');
					}

					$("#element").click(function1);
					$("#element").click(function(){
						alert('function2');
					});

					$("#element").click();
					//triggers function1 and function2 producing alerts "function1" then "function2"

					$("#element").unbind('click',function1);

					$("#element").click();
					//triggers function2 producing only alert "function2"

					$("#element").unbind('click')

					$("#element").click()
					//nothing happens

I am able to unbind a function tied to an event by passing the function to unbind
In order to clear all events i just pass the event name to unbind

With jQuery 1.3 they have added "live" event handling. below is an example of how to use it an it should be obvious why it is so cool =).

					var live = function(){
						alert($(this).html());
						return false;
					};
					var live2 = function(){
						alert('live2');
					};
	
					$("#spawn").click(function(){
						var prev = "";
						if($("#special-link").html().length > 0){
							prev = " | ";
						}
						$("#special-link").append(prev+""+$("#special-link a").length+"");
					});
					$("#die").click(function(){
						$("#special-link a").die();
					});
					$("#live").click(function(){
						$("#special-link a").live('click',live).live('click',live2);
					});
					$("#live1").click(function(){
						$("#special-link a").die('click',live);
					});
					$("#live2").click(function(){
						$("#special-link a").die('click',live2);
					});