test.html

<!DOCTYPE html>
<html>
	<head>
		<title>tinyDOM test</title>
		<meta charset="utf-8">
	</head>

	<body>
		<h1> this is a title </h1>
		<div id="test">
			<p>
			These are <span class="important">words</span>! They are kind of important words too,
			so it would be <span class='important'>bad</span> if any of them dissapeared.
			</p>
			<p id='emptydiv'>

			</p>
		</div>

		<button id="btn-hide">HIDE THINGS</button>
		<button id="btn-show">SHOW THINGS</button>

		<section class='information'>
			<h2 data-href='tests/get.html'>About tinyDOM functions</h2>
			<p>
				tinyDOM operates on dom elements to make it a bit easier
				to select and manipulate them. It also provides some simple
				functions to do basic things like hide and show.
			</p>
			<p>
				There are two basic types of target for the built in functions:
				any number of elements<sup>[1]</sup> and one exactly one element<sup>[2]</sup>.
				An example of [1] would be hiding all elements with the class 'important' whereas
				an example of [2] would be getting the value of a given data attribute - it wouldn't
				make sense to perform the second on a group of elements.
			</p>
			<p>
				As such, where appopriate, tinyDOM will operate only on the first element if a group
				are matched by whatever selector is given. Such functions are as follows:
			</p>
			<ul>
				<li>.data(<em>attribute</em>)</li>
			</ul>

			<hr>

			<p>
				There are also functions that are invoked directly from the my object, and deal with
				things such as ajax requests and json utilities. A few examples of these are
			</p>
			<ul id='delTest'>
				<li class='clickme'>.merge(<em>obj1</em>, <em>obj2</em>)</li>
				<li class='noclick'>.exists(<em>obj</em>)</li>
				<li class='clickme'>.ajax(<em>params</em>)</li>
			</ul>
		</section>
	</body>

	<script type="text/javascript" src="js/tinyDOM.js"></script>
    <script>mu.ready(function(){console.log("DOM LOADED!");});</script>
	<script type="text/javascript" src="js/test.js"></script>
	<script type="text/javascript">
	μ('#btn-show').on('click', function(){
		μ('.important').show();
	});

	μ('#btn-hide').on('click', function(){
		μ('.important').hide();
	});

	μ('h1').on('click', function(){
		console.log(this);
	});

	μ('.information h2').on('click', function(){
		var url = μ(this).data('href');
		console.log(μ(this).data('href'));
		μ.ajax({
			url: url,
			callbacks: {
				load: function(data){
					console.log(data);
					μ('#emptydiv').first().innerHTML = data;
				}
			}
		});
	});
	</script>
</html>