DE EN

The JavaScript Framework Matrix

shall give you an overview of popular JavaScript frameworks and their functions. There are various examples for the frameworks and every snippet contains links to the official documentation. The choice of a framework depends on many factors and can't be made of this document only. The matrix shall solely demonstrate the different API styles and functionalities of the JavaScript libraries. In addition, there are many more interesting frameworks which are listed here.

Sorting:

General DOM Ready DOM Basics DOM Filtering DOM Manipulation Effects Transitions Events Custom Functions Ajax Classes

jQuery

1

Code Link 1 Source Documentation:


										$("#id")

											.click(function(){

												$(this).css({ background: "red" });

											})

											.mouseout(function(){

												$(this).css({ background: "blue" });

											});

MooTools

1

Code Link 1 Source Documentation:


										$("id").addEvents({

											"click": function(){

												this.setStyle("background", "red");

											},

											"mouseout": function(){

												this.setStyle("background", "blue");

											}

										});

The Dojo Toolkit

1

Code Link 1 Source Documentation:


										dojo.connect(dojo.byId("id"), "click", function(){

											dojo.style(this, "background", "red");

										});


										dojo.connect(dojo.byId("id"), "onmouseout", function(){

											dojo.style(this, "background", "blue");

										});

Prototype / Script.aculo.us

1

Code Link 1 Source Documentation:


										Event.observe("id", "click", function(){

											this.setStyle({ "background": "red" });

										});


										Event.observe("id", "mouseout", function(){

											this.setStyle({ "background": "blue" });

										});

Ext JS

1

Code Link 1 Source Documentation:


										Ext.get("id")

											.on("click", function(){

												this.setStyle("background", "red");

											})

											.on("mouseout", function(){

												this.setStyle("background", "blue");

											});

Adobe Spry

1

Code Link 1 Source Documentation:


										Spry.$$("#id")

											.addEventListener("click", function(){

												Spry.$$("#id").setStyle("background: red;");

											}, false)

											.addEventListener("mouseout", function(){

												Spry.$$("#id").setStyle("background: blue;");

											}, false);

BBC Glow

1

Code Link 1 Source Documentation:


										glow.events.addListener("#id", "click", function(){

											glow.dom.get(this).css("background", "red");

										});


										glow.events.addListener("#id", "mouseout", function(){

											glow.dom.get(this).css("background", "blue");

										});

Yahoo! UI Library

1

Code Link 1 Source Documentation:


										YAHOO.util.Event.addListener("id", "click", function(){

											YAHOO.util.Dom.setStyle(this, "background", "red");

										});


										YAHOO.util.Event.addListener("id", "mouseout", function(){

											YAHOO.util.Dom.setStyle(this, "background", "blue");

										});

Matthias Schütz - Media Designer / Web Designer / Graphic Designer / Photoshop