stuquery.js (kB) stuquery.min.js (kB)

stuQueryv

I often use jQuery but it was becoming too big for most of my use cases. I only needed a few basic features. So I've gone back to basics and made my own small library. The aim was to make the usage be as similar to jQuery as possible so that I can switch back-and-forth if I need to. To avoid conflicts, rather than $ I've used S. There are some unit tests to check it works correctly across browsers. There is an experimental package builder to remove parts you don't need. There is also a plugin:

• stuQuery barchart
• stuQuery hex map

Basic example

S(document).ready(function(){
	// Things that happen once the document is loaded

});

Selectors

Selection is pretty simplistic. Selection doesn't work on compound selectors e.g. ul#menu won't work but ul and #menu will work individually.

S('.cssClass');   // Get all elements with the class cssClass
S('#menu');       // Get the element with the ID 'menu'
S('li');          // Get all the list items
S('#menu li');    // Get all the list items in the element with the ID 'menu'
S('li').parent(); // Get the parent DOM element
S('li').children('span'); // Get a child span element
S('li').find('span'); // Get a descendent span element

DOM manipulation

// Return the HTML of the selected DOM element
S('#menu').html();

// Replace content of DOM element(s)
S('#menu').html('HTML');

// Append provided content to DOM element
S('#menu').append('HTML');

// Return the value(s) of the attribute
S('img').attr('alt');

// Set the value(s) of the attribute
S('img').attr('alt','Alt');

// Get a property of the attribute
S('img').prop('alt');

// Add the CSS class 'cls'
S('div').addClass('cls');

// Remove the CSS class 'cls'
S('div').removeClass('cls');

// Toggle the CSS class 'cls'
S('div').toggleClass('cls');

// Return true if the DOM element has the class 'cls'
S('div').hasClass('cls');

// Set the CSS properties
S('div').css({'font-size':'0.8em'});

// Removes selected item(s)
S('div').remove();

File loading

function success(data,a){
	S('#output').append('<p>Success for <em>'+a.url+'<\/em><\/p>');
	S('#output').append("<textarea>"+data+"<\/textarea>");
}
function error(e,a){
	S('#output').append('<p>Failed to load '+a.url+'<\/p>');
}
S().ajax("file.txt",{'complete': success, 'error': error });	// This file exists
S().ajax("nofile.txt",{'complete': success, 'error': error });	// This file doesn't exist