<!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>