A lightweight jQuery Alternative

Download Uncompressed Version 1.3 | Download Compressed Version 1.3 - 27kb

^

jQuick.fn(pluginName:String, callback:Function);

jQuick supports plugins just like jQuery does. Plugins are added a little differently though. Here's an example:

jQuick.fn('myPluginName', function() {

    return this.each(function() {
        
        // plugin stuff
        var $this = jQuick(this);
    
    });

});

jQuick(el).myPluginName();
^

jQuick.extend(obj1:Object, obj2:Object);

Merge obj2 into obj1.

var defaults = {autoplay: false, responsive: true, borderSize: 10};

jQuick.extend(defaults, {

    // overwrite autoplay and responsive defaults
    autoplay: true,
    responsive: false

});
^

jQuick.touchEnabled;

Provides if touch is supported, true/false

var hasTouch = jQuick.touchEnabled;
^

jQuick.transitions();

If CSS3 transitions are supported, will return the an Object containing the vendor-prefixed CSS transition name as well as the JS 'transitionEnd' Event name. Otherwise returns null.

// example output: {property: '-webkit-transition', end: 'webkitTransitionEnd'}
var transitions = jQuick.transitions();

// example output: '-webkit-transition'
var cssTransitionName = transitions.property;

// example output: 'webkitTransitionEnd'
var jsTransitionEndEventName = transitions.end;
^

jQuick.transforms();

If CSS3 transforms are supported, will return the vendor-prefixed CSS3 transform property. Otherwise returns null.

var hasTransforms = jQuick.transforms();
var transformProperty = jQuick.transforms();
^

jQuick.browser();

Returns one of the 5 major browsers.

var browser = jQuick.browser(); // chrome, safari, firefox, opera or msie or null
^

jQuick.version();

Returns the browser version.

var browserVersion = jQuick.version();
^

jQuick.ie8;

True if the browser is IE8, otherwise false;

var isIE8 = jQuick.ie8;
^

jQuick.mobile();

Returns 'ios', 'android' or null

var isMobile = jQuick.mobile();
var mobileOS = jQuick.mobile();
^

jQuick.trim(st:String);

Trim whitespace from the beginning and end of a String

jQuick.trim(' my string '); // returns 'my string'
^

jQuick.stopAll(completeAll:Boolean = false, triggerAllCallbacks:Boolean = false);

Stop all tweens currently running on the page.

jQuick.stopAll();
jQuick.stopAll(true, true); // arguments optioned
^

jQuick.setEase(easing:String);

The default easing used in jQuick is 'Quint.easeOut'. This method overrides the default. View all easing options

jQuick.setEase('Quad.easeOut');
^

jQuick.setDuration(num:Number)

The default animation duration in jQuick is 500. This method overrides the default.

jQuick.setDuration(750);
^

jQuick.defaultEase;

Usefull for jQuick plugins. Returns the default easing.

var defaultEasing = jQuick.defaultEase;
^

jQuick.defaultDuration;

Usefull for jQuick plugins. Returns the default duration.

var defaultDuration = jQuick.defaultDuration;
^

Instantiation

As you'll see in some of the examples here in the docs, all jQuick methods support chaining. And all the typical selectors you're used to using with jQuery can be used with jQuick. Here are some examples:

jQuick('div');
jQuick('#id');
jQuick('.class');
jQuick('#id .class');
jQuick('#id, .class');
jQuick('#id > .class');
jQuick('input:selected');

And new items are created similarly as well

jQuick('<div />');
jQuick('<div class='some_class'></div>');
jQuick('<div class='some_class'><p>Some Content</p></div>');
^

jQuick(document).ready(callback:Function);

Fires when the DOM is ready. This method can also preload Google Fonts.

jQuick(document).ready(function(event) {

	// 'this' is equivelent to jQuick(document)
	// event is the same as jQuery.originalEvent
    
});
^

jQuick(el).each(callback:Function, argument:*);

Cycle through all elements in a jQuick Object.

jQuick(el).each(function(i) {

    // when no argument is optioned, the iteration number gets passed
    jQuick(this).css('margin-left', i * 100);
        
});

jQuick(el).each(callback, argument);

function callback(argument) {
	
    // argument can be anything
    jQuick(this).css('margin-left', argument);
    
}
^

jQuick(el).on(st:String, callback:Function);

Use this method to add event listeners. Supports namespacing as well as mousenter and mouseleave. This method does not automatically attach event listeners to newly created DOM elements.

jQuick(el).on('click', function(event) {

    // 'this' is equivelent to jQuick(this);
    // event is equivelent to jQuery's event.originalEvent
    
});

The 'on' method supports namespacing

jQuick(el).on('click.mynamespace', function() {});

Unlike jQuery, events with the same callback function are never triggered twice.

// myFunction only gets triggered once
jQuick(el).on('click', myFunction).on('click', myFunction);

But if the callback functions are different, both will get triggered

// both functionOne and functionTwo will get called
jQuick(el).on('click', functionOne).on('click', functionTwo);

Add the same callback function to multiple events.

jQuick(el).on('mouseover mouseout', function() {});
^

jQuick(el).off(st:String = null);

Use this method to remove event listeners.

// remove all event listeners
jQuick(el).off();

// remove all 'click' events
jQuick(el).off('click');

// remove all 'click' events in the 'myNamespace' namespace
jQuick(el).off('click.myNamespace');

// only remove the 'click' event that calls 'myFunction'
jQuick(el).off('click', myFunction);

// remove two or more events at the same time
jQuick(el).off('mouseover mouseout');

^

jQuick.one(st:String, callback:Function);

This method works the same way jQuick.on() does. The only difference is that as soon as the event fires, the event listener gets removed immediately.

^

jQuick(el).trigger(st:String);

Manually trigger events.

// trigger the 'click' event
jQuick(el).trigger('click');

// trigger all events in a given namespace
jQuick(el).trigger('.namespace');

// trigger only the 'click' event in a given namespace
jQuick(el).trigger('click.namespace');

// trigger multiple events
jQuick(el).trigger('mouseover mouseout');
^

jQuick(el).hasEventListener(st:String);

Check if an element has an event listener. The event listener has to have been added through jQuick, i.e. any event listeners added natively to an HTMLElement will not show up in this test. Returns true/false.

var hasEventListener = jQuick(el).hasEventListener('click');

// only check if the event exists within a specific namespace
var hasEventListener = jQuick(el).hasEventListener('click.namespace');
^

jQuick(el).domElement();

Returns the native HTMLElement attached to the jQuick Object. If the jQuick Object is a list of items, will return the 0 index. See notes for more information.

// equivelent to jQuery(el)[0]
var htmlElement = jQuick(el).domElement();

// returns the first item in the '.largeList'
var htmlElement = jQuick('.largeList').domElement();
^

jQuick(el).eq(index:Number);

If the jQuick Object contains a list of elements, this method allows you to fetch an item in the jQuick Object at a specified index. The returned item will be a jQuick Object so chaining is supported.

var itm = jQuick('.largeList').eq(1);

// making use of the call with chaining
jQuick('.largeList').eq(1).css('margin-left', 10);

^

jQuick(el).toArray();

Converts a single jQuick Object containing multiple elements into an Array of jQuick Objects.

var ar = jQuick('.largeList').toArray();

for(var i = 0; i < ar.length; i++) {
    
    // ar[i] is already a jQuick Object
    ar[i].css('margin-top', i * 10);

}
^

jQuick(el).children(el:String = null);

Select an element's direct descendants. All calls return a jQuick Object.

// select all children 
jQuick(el).children();

// select only 'p' elements
jQuick(el).children('p');

// select all children with the class 'items'
jQuick(el).children('.items');

// select all radio input direct descendants
jQuick(el).children('input[type=radio]');
^

jQuick(el).getChildAt(index:Number);

Select a child at a given index. Returns a jQuick Object.

// change the margin of the second child
jQuick(el).getChildAt(1).css('margin-top', 10);

// grab the second child's native HTMLElement
var htmlElement = jQuick(el).getChildAt(1).domElement();
^

jQuick(el).parent();

Grab element's immediate parent. Returns a jQuick Object.

jQuick(el).parent().css('margin-top', 10);
^

jQuick(el).parents();

Grab all parents of an element. Returns a jQuick Object.

var parents = jQuick(el).parents();
^

jQuick(el).closest(st:String);

Find the closest parent based on a selector. Returns a jQuick Object.

jQuick(el).closest('div');
jQuick(el).closest('.class');
^

jQuick(el).find(st:String);

Deep search all descendants. Supports an optional selector. Returns a jQuick Object

jQuick(el).find('div');
jQuick(el).find('.class');
jQuick(el).find('input[type=radio]'); // all radio inputs
jQuick(el).find('div, p'); // only div and p, exclude all other tags
^

jQuick(el).append(el:jQuick);

Append an element to the current element. Element inserted as the last child.

var elementToAppend = $('<div />');

jQuick(el).append(elementToAppend);
^

jQuick(el).appendTo(el:jQuick);

Append the current element to another. Current element gets inserted as the last child.

var otherElement = jQuick('<div />');

jQuick(el).appendTo(otherElement);
^

jQuick(el).prepend(el:jQuick);

Prepend the current element to another. Element inserted as the first child.

var elementToPrepend = $('<div />');

jQuick(el).prepend(elementToPrepend);
^

jQuick(el).prependTo(el:jQuick);

Prepend the current element to another. Current element gets inserted as the first child.

var otherElement = jQuick('<div />');

jQuick(el).prependTo(otherElement);
^

jQuick(el).insertBefore(el:jQuick);

Insert an element directly before another.

var otherElement = jQuick('<div />');

jQuick(el).insertBefore(otherElement);
^

jQuick(el).insertAfter(el:jQuick);

Insert an element directly after another.

var otherElement = jQuick('<div />');

jQuick(el).insertAfter(otherElement);
^

jQuick(el).wrap(el:jQuick);

Wrap current element inside new element. New element gets inserted at the same index as the current element.

var newElement = $('<div />');

jQuick(el).wrap(newElement);
^

jQuick(el).remove();

Remove an element from the DOM and removes all events and data from the element and its children.

jQuick(el).remove();
^

jQuick(el).empty();

Removes all childNodes from an element and sets the element's innerHTML to an empty String. All events and data are deleted from the removed childNodes.

jQuick(el).empty();
^

jQuick(el).clone();

Creates a copy of the current element. Copies all attributes, innerHTML, data and events. The innerHTML copied will not carry over any events or data, so be sure to add them afterward if needed.

var clone = jQuick(el).clone();
^

jQuick(el).text(st:String = null);

Read or write raw text from/to an element. HTML tags will gets stripped out of the String.

//read
var elementText = jQuick(el).text();

// write
jQuick(el).text('some text');
^

jQuick(el).html(st:String = null);

Read or write html from/to an element.

//read
var elementHtml = jQuick(el).html();

// write
jQuick(el).html('<div><p></p></div>');
^

jQuick(el).width(num:Number = null);

Get or set an element's width. When retrieving an element's width, the returned number will not include padding, border or margins.

// get
var wid = jQuick(el).width();

// set
jQuick(el).width(100);    
^

jQuick(el).height(num:Number = null);

Get or set an element's height. When retrieving an element's height, the returned number will not include padding, border or margins.

// get
var high = jQuick(el).height();

// set
jQuick(el).height(100);    
^

jQuick(el).outerWidth(includeMargins:Boolean = false);

Retrieve an element's width inlcuding padding and borders with the option to include margins.

var outerWidth = jQuick(el).outerWidth(); 
var outerWidth = jQuick(el).outerWidth(true); // include margins 
^

jQuick(el).outerHeight(includeMargins:Boolean = false);

Retrieve an element's height inlcuding padding and borders with the option to include margins.

var outerHeight = jQuick(el).outerHeight(); 
var outerHeight = jQuick(el).outerHeight(true); // include margins 
^

jQuick(window).scrollTop(num:Number = null);

Get or set an element's scrollTop position.

// get
var scrollTop = jQuick(window).scrollTop();

// set
jQuick(window).scrollTop(100);  
^

jQuick(el).css();

Get or set an element's css.

// set a style
jQuick(el).css('margin-top', 10); 

// retrieve a style's value
var marginTop = parseInt(jQuick(el).css('margin-top'), 10);  

// set multiple styles by passing in an Object
jQuick(el).css({marginTop: 10, marginLeft: 10});  
^

jQuick(el).addClass(st:String);

Add a CSS class to an element

jQuick(el).addClass('someClass');
jQuick(el).addClass('classOne classTwo');
^

jQuick(el).removeClass(st:String);

Remove a CSS class from an element

jQuick(el).removeClass('someClass');
jQuick(el).removeClass('classOne classTwo');
^

jQuick(el).hasClass(st:String);

Check to see if an element has a specific class, returns true/false

var hasClass = jQuick(el).hasClass('someClass');
^

jQuick(el).innerCSS(st:String);

Set or retrieve a style element's CSS. Only applicable to style elements.

// read
var styles = jQuick('#my_stylesheet').innerCSS();

// write
jQuick(‘<style type=“text/css” />‘).innerCSS(

	'.somestyle {display: block}'
    
).appendTo(jQuick('head'));
^

jQuick(el).show();

Set an element's display to either what it was previously or to the element's default display.

jQuick('div').show(); // sets display property to 'block';
jQuick('span').show(); // sets display property to 'inline-block';

var el = jQuick('<span />').css('display', 'block').hide();
el.show(); // display property will return to its previous state of 'block'
^

jQuick(el).hide();

Set an element's display property to 'none'.

jQuick(el).hide();
^

jQuick(el).data();

Read or write data to an element.

// returns any data previously written to an element in Object form
var data = jQuick(el).data();
var someData = data.someData;

// write a single piece of data, someValue can be anything
jQuick(el).data('someData', someValue);

// write data in the form of an Object
jQuick(el).data({propOne: valueOne, propTwo: valueTwo});
^

jQuick(el).removeData(st:String = null);

Remove data from an element.

// remove all data
jQuick(el).removeData();

// remove only the data named 'someData' 
jQuick.removeData('someData');
^

jQuick(el).offset();

Retrieve the genuine x and y position of an element.

var offset = jQuick(el).offset();
var left = offset.left;
var top = offset.top;
^

jQuick(el).attr();

Get or set an element's attribute.

// set an attribute
jQuick(el).attr('data-spacing', 10); 

// retrieve an attribute's value
var spacing = jQuick(el).attr('data-spacing');  

// set multiple attributes by passing in an Object
jQuick(el).attr({'data-spacing': 10, width: 100});  
^

jQuick(el).removeAttr(st:String);

Remove an attribute from an element

jQuick(el).removeAttr('data-spacing');
^

jQuick(el).val(value:* = null)

Get or set the value of a form element. Only works for text fields.

// get
var value = jQuick(el).val();

// set
jQuick(el).val(someValue);
^

jQuick(el).is(st:String)

Check if an element is of a certain type, returns true/false

var isImage = jQuick(el).is('img');
^

jQuick(el).animate(css:Object, settings:Object = null);

Animate an element. The animate method runs on an RAF engine by default. When RAF is not supported it will fall back to a simple Timer.

// minimal call
jQuick(el).animate({marginTop: 100});

// all available options shown with their defaults below
jQuick(el).animate({marginTop: 100, marginLeft: 100}, {
    
    duration: 500,         // Number/Milliseconds
    ease: 'Quint.easeOut', // String
    delay: 0,              // Number/Milliseconds
    onComplete: null,      // Function
    onCompleteParams: null // Wildcard (can be anything)

});

All easing options can be seen here.

With jQuick.tick(), anything can be animated, but the jQuick.animate() method itself can not animate the following:

^

jQuick(el).tick(settings:Object);

Simulates a tween that allows us to animate something that the animation engine doesn't support by default -- like the CSS 'clip' property -- with the callback function firing every step of the tween.

jQuick('#someElement').tick({
    
    // optional
    duration: 750,
    ease: 'Quad.easeOut',
    onCompleteParams: wildcard, // can be anything
	
    // required
    onUpdate: myTickFunction
	
});

function myTickFunction(now:Number, onCompleteParams:*) {
	
    // 'now' will be a number between 0-1
    // here we'll animate the CSS clip of a 200x200 element
    // this = $(this) in jQuery
    this.css('clip', 'rect(0px, ' + (200 * now) + 'px, ' + 200 + 'px, 0px)');
    
    // onCompleteParams will only get passed when the animation has finished
    if(now === 1) {
    	// tween is finished, onCompleteParams, if any, are now available
    }

}
^

jQuick(el).fadeIn(settings:Object = null)

Fade an element in. Changes display from 'none' to whatever the element previous was set at or its default, hanges visibility to 'visible', and then finally, animates opacity to 1.

// minimal call
jQuick(el).fadeIn();

// optional settings shown with their defaults
jQuick(el).fadeIn({

    duration: 500,         // Number/Milliseconds
    ease: 'Quint.easeOut', // String
    delay: 0,              // Number/Milliseconds
    onComplete: null,      // Function
    onCompleteParams: null // Wildcard (can be anything)

});
^

jQuick(el).fadeOut(settings:Object = null)

Fade an element out. Animates opacity to 0 and then changes the display property to 'none' when the animation is complete.

// minimal call
jQuick(el).fadeOut();

// optional settings shown with their defaults
jQuick(el).fadeOut({

    duration: 500,         // Number/Milliseconds
    ease: 'Quint.easeOut', // String
    delay: 0,              // Number/Milliseconds
    onComplete: null,      // Function
    onCompleteParams: null // Wildcard (can be anything)

});
^

jQuick(el).is(st:String)

Check if an element is of a certain type, returns true/false

var isImage = jQuick(el).is('img');
^

jQuick(el).stop(completeAnimation:Boolean = false, triggerCallback:Boolean = false);

Stop an animation from running with the option to complete the animation immediately and trigger its callback if one exists.

// stop the animation
jQuick(el).stop();

// stop the animation and immediately apply the animation's CSS settings
jQuick(el).animate({marginTop: 10}).stop(true);

// stop the animation, immediately apply the 
// animation's CSS settings, and trigger the callback
jQuick(el).animate({marginTop: 10}, {callback: function() {
    
    // console.log('callback triggered');
    
}).stop(true, true);
^

jQuick(el).stopAll(completeAll:Boolean = false, triggerAllCallbacks:Boolean = false);

Stops the animation on the target as well as all of the target's decendents.

var el = $('#element');
var child = el.find('p');

el.fadeIn();
child.fadeIn({callback: function(){}});

// both animations above will immediately stop
el.stopAll();

// both animations above will stop, their opacity will immediately be set to 1,
// and the callback for the 'child' variable above will get triggered 
el.stopAll(true, true);
^

jQuick(el).swipe(callback:Function)

Add a 'left/right' swipe event to an element. If swipe events aren't supported, the event just won't get added. The callback passes either 'left' or 'right'

jQuick(el).swipe(function(direction) {

    if(direction === 'left') {
        
        // like all jQuick events, 'this' = original jQuick Object
        this.css('left', 360);
    
    }
    else if(direction === 'right') {
    
        this.css('left', -360);
    
    }

});
^

jQuick(el).removeSwipe();

Remove a previously added 'swipe' event.

jQuick(el).removeSwipe();
^

jQuick(el).animate({marginTop: 10}, {easing: 'Quad.easeOut'});

All Easing Options. The default easing for jQuick is 'Quint.easeOut'.

^

jQuick(el).transform('animate', css:Object, settings:Object = null);

jQuick(el).transform('stop', triggerCallback:Boolean = false);

A jQuick plugin that allows for CSS3 Transform animations.

Download Uncompressed Version | Download Compressed Version (3.62kb)

<script type='text/javascript' src='js/jquick.js'></script>
<script type='text/javascript' src='js/jquick.transform.js'></script>

<script type='text/javascript'>

	jQuick(document).ready(function() {
		
		var div = jQuick('#some_div');
        
		// animate
		div.transform('animate', {
			
			// transform setting
			transform: 'rotateX(180deg)',
			
			// additional CSS to animate
			marginTop: 100
			
		}, {
			
			// available optional settings
			delay: 100,
			duration: 750,
			ease: 'Quad.easeOut',
			onComplete: myCallbackFunction,
			onCompleteParams: 'some param'
			
		});
		
		// stop method.  When called animation will always complete
		div.transform('stop');
		
		// stop and trigger callback
		div.transform('stop', true);
		
	});

</script>
^

jQuick(document).ready(callback:Function, googleFonts:Array = null);

Preload Google Fonts so proper font sizes can be read immediately.

<script type='text/javascript' src='js/jquick.js'></script>

<!-- 
	This method WILL NOT work unless Google's default WebLoader script exists.
	We don't load the script asynchronously because the whole point of
	using this method is to have the font size information ready ASAP.
-->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/webfont/1.0.31/webfont.js'></script>

<script type="text/javascript">
	
    	// Google fonts passed as second param as an Array.
	jQuick(document).ready(function() {
	
		// This function won't fire until both the DOM is ready AND 
		// the Google Fonts have loaded.
	
	}, ['Droid+Sans']);
				
</script>
^

A lot like jQuery, with some key differences

All the jQuick methods you see here in the docs are similar to their jQuery equivelents. But there's a fundamental difference between jQuick and jQuery: The jQuick Object is not an Array by default.

As a result, a jQuick Object can often represent a live NodeList. This allows jQuick to touch the DOM a lot less than jQuery leading to substancial performance gains. And it also means you don't have to worry as much about manually caching the jQuick Object. In fact, in some cases, caching the Object can have a negative effect. Consider the following example:

var list = jQuick('.some_class');
var newItem = jQuick('<div class="some_class" />').appendTo(jQuick('body'));

// the 'list' above will now contain the 'newItem'
// and applying CSS to the 'list' variable above will apply CSS to 
// both the original list AND the 'newItem' that was added afterward
list.css('margin-top', 10);

The above will apply to all browsers except IE8. So what's the cross-browser solution? Simple: Don't use a cached var!

var list = jQuick('.some_class');
var newItem = jQuick('<div class="some_class" />').appendTo(jQuick('body'));

// The jQuick Object is already cached and so calling the '.some_class'
// a second time is only a performance hit for IE8
jQuick('.some_class').css('margin-top', 10);

// or, apply the CSS and re-cache the var if you want
list = jQuick(el).css('margin-top', 10);

Even though the jQuick Object isn't an Array, you can still iterate over it using the .each() method just like jQuery, but accessing the items within the Object is handled differently. Here are some examples:

jQuery(el)[0];
jQuick(el).domElement();

jQuery(jQuery(el)[1]);
jQuick(el).getChildAt(1);

You might be wondering, can I use the $ sign with jQuick? And won't that create conflicts? The answer is: Yes you can use it, and No, it won't create conflicts... if used correctly. With jQuery, the $ sign is assigned to the jQuery Object by default, and the only way to unassign it is to use jQuery.noConflict(). But jQuick does not assign the $ symbol to the jQuick Object. But so how can you use the $ sign you might ask? By wrapping it in a closure! Here's an example:

(function($) {

    // we now have a local copy of the $ sign,
    // and can use it without worrying about jQuery conflicts

})(jQuick);

So what's the difference? The answer is, without wrapping jQuick in a closure like the example above, any jQuick code that isn't wrapped in a closure will need to use the 'jQuick' keyword instead of the $ sign. For example:

<script type='text/javascript'>

	$(document).ready(function() {}); // bad
	jQuick(document).ready(function() {}); // good

</script>

jQuick events are also different:

jQuick(el).on('click', function(event) { 

    // 'this' is equivelent to jQuery(this)
    // 'event' is equivelent to jQuery's event.originalEvent 
    
};

Unlike jQuery, adding the same event with the same callback function does not trigger the callback twice. This allows you the peace of mind of adding event listeners without having to worry about removing any previous ones.

// someFunction gets called twice
jQuery(el).on('click', someFunction).on('click', someFunction);

// someFunction only gets called once
jQuick(el).on('click', someFunction).on('click', someFunction);

But if the callback functions are different, they'll both get called as expected

// both functionOne and functionTwo get called
jQuick(el).on('click', functionOne).on('click', functionTwo);

Some methods are recursive, some aren't.

// 'css' and and 'on' are recursive and get applied to all divs on the page
jQuick('div').css('margin-top', 10).on('click', function() {});

// 'children' is not recursive, and the 'children' method will
// only return the decendents of the first div found on the page
var children = jQuick('div').children();

jQuick's animation engine doesn't have a 'queue' and there's also never a need to call .stop() before running a tween on the same element -- because any running tweens on the same element are automatically overriden when a new tween is assigned to the same element.

var el = jQuick('#element').fadeIn();

// the first animation call above will immediately get
// cancelled once a new animation is called
el.fadeIn();