XUI

x$(window);                         // The Window
x$(element);                        // An Existing Element  
x$('ul#globalnav li a.selected');   // A CSS3 Selector
x$(['li','div#foo']);               // An Array of Selectors
x$('li','.selected','#some_id');    // A comma list of CSS3 Selectors

<ul>
  <li class="foo">one</li>
  <li>two</li>
  <li class="foo baz">three</li>
  <li>four</li>
  <li>five</li>
</ul>

x = x$("ul li").not('.foo'); // returns two, four, and five
x = x$("ul li").has('.foo'); // returns one and three

x$("ul li").inner('Hello World');  // replaces all items with Hello World
x$("p").outer('<b>Hello</b>'); // replaces p with b

<ul>
  <li>one</li>
  <li>two</li>
</ul>

x$("ul").top('zero');
x$("ul").bottom('<li>Three</li>');

<ul>
  <li>zero</li>
  <li>one</li>
  <li>two</li>
  <li>three</li>  
</ul>

<ul>
  <li>one</li>
  <li>two</li>
</ul>

x$("ul").before('<h1>My List</h1>');
x$("ul").after('<p>Thanks</p>');

<h1>My List</h1>
<ul>
  <li>one</li>
  <li>two</li> 
</ul>
<p>Thanks</p>

<ul>
  <li id="one">one</li>
  <li>two</li>
</ul>

x$("#one").remove();

<ul>
  <li>two</li> 
</ul>

<p style="padding-left:20px;">Testing getStyle</p>

x$("p").getStyle('padding-left');  // returns 20px

x$("p").addClass('selected');

x$("p").removeClass('selected');

x$("p").css({'color':'red','height':'100px'});

x$("#tweets").xhr('_tweets.html');

var doThis = function() {
  console.log(this.responseText);
}

x$(window).xhr('test.html', {callback: doThis });

var doThis = function() {
  console.log(this.responseText);
}

x$(window).xhr('http://myserver.com/post.php', {
    method:'post', 
    data:'comment=win&id=12', 
    callback: doThis 
    });

{'username':'silentrob','age':'29'}

x$(window).xhrjson( 'json.txt', {
  map:{'username':'#name', 'age':'#age'}
});

<span id="name">silentrob</span>
<span id="age">29</span>

  x$('button').on( 'click', function(e){ alert('hey that tickles!') });

  x$('button').click(function(e){ alert('hey that tickles!') });

* click
* load
* touchstart
* touchmove
* touchend
* touchcancel
* gesturestart
* gesturechange
* gestureend
* orientationchange

x$('#fx').tween({
	background:'red',
	duration:1.5
});

x$('#fx').tween({
	by:[100,100], // X,Y
	duration:1.5
});