<!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' data-href='tests/get.html'>
<h2>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>
</section>
</body>
<script type="text/javascript" src="js/tinyDOM.js"></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').on('click', function(){
var url = μ(this).data('href');
console.log(μ(this).data('href'));
μ.ajax({
url: url,
success: function(data){
console.log(data);
μ('#emptydiv').first().innerHTML = data;
}
});
});
</script>
</html>