I’m just doing this for learning purposes, It has what I would consider the essential functions - Selectors, Events, DOM, Ajax and Animation.
Honourable mentions to jQuery, prototype.js, Animator.js, Sitepoint’s Core.js, Sizzle.js
$
* addEvent
* removeEvent
* preventDefault
* stopPropagation
* ajax
NodeList:
* observe
* addClass
* hasClass
* removeClass
* computedStyle
* load
* animate
* saveAnimation
* toggleAnimation
What do you think?
Anything you would do differently?
I’m loving Anmiator.js - you can animate towards class names or a css ruleset.
Usage:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mQuery</title>
<script type="text/javascript" src="mQuery.js"></script>
<script type="text/javascript">
// onload
$(function() {
$('#dom-link').observe('click', function(event) {
$('p').down('span').addClass('red').up('p').addClass('blue');
$('h1')[0].innerHTML += ' has a computed fontSize of ' + $('h1').computedStyle('fontSize');
$.preventDefault(event);
});
$('#ajax-link').observe('click', function(event) {
$('#ajax-content').load('ajax.html');
$.preventDefault(event);
});
$('#box2').saveAnimation('afterAnimate', {
duration:1000,
transition:'bouncy'
});
$('#animate-link').observe('click', function(event) {
$('#box2').toggleAnimation();
$('#box').animate('height:200px');
$.preventDefault(event);
});
});
</script>
<style type="text/css">
#box, #box2 {
border:1px solid black;
padding:5px;
text-align:center;
vertical-align:middle;
}
.beforeAnimate {
width: 10em;
background-color: rgb(256, 256, 256);
font-style: normal;
}
.afterAnimate {
width: 40em;
background-color: #F39;
font-style: italic;
}
.red {
font-style: italic;
color: red;
}
.blue {
border: 1px solid blue;
padding: 5px 10px;
}
</style>
</head>
<body>
<h1>mQuery</h1>
<h2>Selectors, Events, DOM, Ajax and Animation</h2>
<p><strong>The Minimalist Javascript <span>Library</span></strong></p>
<hr />
<p><a href="#" id="dom-link">Do DOM magic</a></p>
<p><a href="#" id="linky"><span>linky</span> <span>linky</span></a></p>
<p><span><span><b><i id="child">up to parent</i></b></span></span></p>
<p><a href="ajax.html" id="ajax-link">Fetch!</a></p>
<div id="ajax-content"></div>
<p><a href="#" id="animate-link">Animate!</a>
<div id="box" class="beforeAnimate">Some content</div>
<div id="box2" class="beforeAnimate">Some content</div>
<hr />
<h2>$</h2>
<ul>
<li>addEvent</li>
<li>removeEvent</li>
<li>preventDefault</li>
<li>stopPropagation</li>
<li>ajax</li>
</ul>
<h2>NodeList:</h2>
<ul>
<li>observe</li>
<li>addClass</li>
<li>hasClass</li>
<li>removeClass</li>
<li>computedStyle</li>
<li>load</li>
<li>animate</li>
<li>saveAnimation</li>
<li>toggleAnimation</li>
</ul>
</body>
</html>
Thanks JimmyP for getting me started.