A Large Collection of Useful jQuery Utils

2012-03-25 JavaScript jQuery

jQuery is a fantastic library but it needs to stay lean and small by providing only the most commonly need features. However there are many other little utilities that I have used frequently enough and found myself always rewriting them, so I started collecting them into a little library. Many of these are just little shortcuts to code I find myself constantly typing out, but don't think of it as a whole library you need to load into your code. Just take the pieces you need and leave the pieces you don't need.

Note that I have wrapped many of these functions into jQuery although that is not required and other than the $.postJSON and $.stop() methods these functions can be used in any JavaScript library or just standalone all together.


Not sure why jQuery hasn't tossed this little shortcut in since they already have the $.getJSON method. They do have a $.post method that is pretty much the same minus having to specify the dataType, but I find this is a nice little shortcut I frequently use.

    {val1: "Cheetos", val2: "Nachos"},
    function(response){ //on success do something }


This is another little shortcut to prevent event propagation. It accepts options for preventDefault and stopPropgation.

$.stop(event, preventDefault, stopPropagation);

    $.stop(e, true, true);    


I haven't used this often, but it's great to have handy, randomly shuffle an array.

$.shuffleArray([1,2,3,4,5,6,7]); //potential output: [1,3,5,7,2,4,6]


This is just a shorthand function to reload the page rather than using "window.location.reload(true)"



This parses the URI component of a URL and lets you access it by it's index starting from 1.

$.uri(1); //will output this
$.uri(3); //will output rocks


I have probably rewritten this little method about 100 times, it's a simple little split string one liner that you never think to wrap in a function for reuse. Note that it also handles hash tags.


$.URLParams(); // {param: 'fantastic', test: 'awesome'}
$.URLParams('test'); // awesome


This is similar to the URLParams function except it returns the hash in a URL if any.


$.URLHash(); // websanova


This is a nice little conversion function to have handy, it accepts a HEX or RGB string value and converts it. Invalid values are returned false.

$.hexToRGB("#FF3388"); // rgb(255,51,136)
$.hexToRGB("#F38");    // rgb(255,51,136)
$.hexToRGB("#ZZ3388"); // false
$.hexToRGB("F38A");    // false

$.hexToRGB("rgb(22,67,234)"); // #1643EA
$.hexToRGB("rgb(22,67,274)"); // false
$.hexToRGB("rgb(22,67)");     // false


This little function base64 encodes a string, note that it requires the string to be in utf8 format so you will need the utf8encode function as well.

$.base64Encode("encode this string"); // ZW5jb2RlIHRoaXMgc3RyaW5n


This decodes a base64 encoded string. Note that it also applies the utf8 decoding that was applied during the base64 encode.

$.base64Decode("ZW5jb2RlIHRoaXMgc3RyaW5n"); // encode this string


UTF8 encode a string, this is primarily used with the base64Encode function from above.

$.utf8Encode("utf8 encode this");


Decodes a UTF8 encoded string.

$.utf8Decode("utf8 encode this");


This is a great little function that can be a life saver. I use this a lot to remove all classes starting with a particular string.

<div class="test testing leavemealone hellotest Tester"></div>

$("#container").removeClassRegEx(/test/i);  //class="leavemealone"
$("#container").removeClassRegEx(/test/);   //class="leavemealone Tester"
$("#container").removeClassRegEx(/^test/i); //class="leavemealone hellotest"
$("#container").removeClassRegEx(/test$/);  //class="testing leavemealone Tester"


Similar to the removeClassRegEx this checks to see if any class matches the regular expression.

<div class="test testing leavemealone hellotest Tester"></div>

$("#container").removeClassRegEx(/test/i);    // true
$("#container").removeClassRegEx(/test/);     // true
$("#container").removeClassRegEx(/^test/i);   // true
$("#container").removeClassRegEx(/test$/);    // true
$("#container").removeClassRegEx(/^testy$/);  // false


This is very useful to have for any input fields particularly a textarea which does not have a "maxlength" attribute. It also allows you to specify a target that will display the characters left.

$("input").maxChars(50, $("#maxChars_counter"));


Yes this is just a JavaScript extension, but very useful to get the length of your objects. Although in most cases you will have the length property set, but for objects you will not.

{cow: "moo", duck: "quack"}.sizeof(); // 2


This is another JavaScript extension but great to have around, a simple capitalize extension to the String object.

"test".capitalize(); // Test


Another JavaScript extension, I found myself doing this so often when I returned CSS attributes in jQuery needing them as an integer that I wrote this little shorthand function to quickly convert them for me. Note that this returns an integer number value.

"210px".pxToInt(); //210
$("container").css('height').pxToInt(); // 400

Related Posts