Yesterday, I published a new JavaScript Library – JSL. It borrows many ideas from the famous jQuery library.

Download

• Packed Version – 13 KB
• Source – 38 KB

Features

The Standard Stuff…

• CSS DOM Selectors
• Ajax Functions
• Event Handling is abstracted
• Ability to change style of an element.
• Extendable by Plugins
• Supports all Modern Browsers
• And more…

And then some…

• Function Chainability
• Entire Library is 13 KB(un-gzipped)
• Special handlers for Arrays, Numbers
• Extra Plugins for Unit Testing and Debugging
• Functional Programming Encouraged (map, reduce, filter, etc functions in JSL.array)

Missing Features

XPath Selectors

Does anyone use XPath to select elements in JavaScript? I use CSS selectors for this all the time.

innerHTML Alternatives

I like innerHTML – so I did not include the functions to create DOM elements.

Animations/UI Elements

You will not see any animation functions in this library. Also, no Drag and Drop, sliders, JS dialog boxes and the like. Of course, I may write a plugin for these elements – but right now, they are not supported.

JavaScript Monkey-patching

I don’t do any Prototype style addition to JavaScript standard objects. I hate that – and so should you.

Functions in the global namespace

Everything that I do is under the JSL namespace – except for two shortcut functions – jslib() and $(). So my library adds only three global variables to the namespace – JSL, jslib, and $.

The Kitchen Sink

JSL is a small library – if you want a library with everything, opt for Dojo or YUI.

Some Sample Code

Using Event Handler…

JSL.dom("a").click(function(e) { // Adds a click event handler to all links
	alert(this.href); //Shows the link URL
	JSL.event(e).stop(); //And stops the event from propagating any further
});

The $() Function…

$("div.content p.intro a").setStyle({
	"text-decoration":"underline",
	"color":"red"
});

And everything you expect to work with document.getElementById() works with $() as well…

$("element-id").innerHTML = "Hello World";
$("element-id").getElementsByTagName("a"); // Returns all the anchors under that element.

See More Sample Code

JSL Links

• Documentation
• Demos of JSL in Action
• Support Forum
• Code Repository

License

BSD, as always.