Extending jQuery

There are many ways to extend jQuery, one of the most used are jQuery plugins.

When someone create a plugin for jQuery, what he actually does is he extends jQuery that is initialised on web page. Plugin can have more or less functionality, it all depends of its author. Most people think that extending jQuery must be all about plugins, but that is not true, you should extend your jQuery with simple functions in your daily use just to group more operation that are continuously repeated.

For example, if you have a scope operations that you are continuously using, it is logical that you will create a function instead of writing that same scope of operations all over again.

	$('.element')
		.css({
			'color': '#6699ff',
			'position': 'absolute',
			'left': 0,
			'top': 0
		})
		.animate({
			'top': '50px',
			'left': '50px'
		},700);
	
	$('.element1')
		.css({
			'color': '#ccff66',
			'position': 'absolute',
			'left': '30px',
			'top': '20px'
		}).animate({
			'top': '90px',
			'left': '90px'
		}, 300);
		
	$('.element2')
		.css({
			'color': '#ccff66',
			'position': 'absolute',
			'left': '30px',
			'top': '20px'
		}).animate({
			'top': '90px',
			'left': '90px'
		}, 300);

..imagine that you have 10 elements that needs same operation to be executed with different parameters. The logical choice would be to create a function to do that for you.

	function cssAnimate(element, values) {
		$(element)
			.css(values.css)
			.animate(values.animate, values.duration);
	}
	
	cssAnimate($('.element'), {
		'css': {
			'color': '#6699ff',
			'position': 'absolute',
			'left': 0,
			'top': 0
		},
		'animate': {
			'top': '50px',
			'left': '50px'
		},
		'duration': 700
	});
	
	cssAnimate($('.element1'), {
		'css': {
			'color': 'ccff66',
			'position': 'absolute',
			'left': '30px',
			'top': '20px'
		},
		'animate': {
			'top': '90px',
			'left': '90px'
		},
		'duration': 300
	});
	
	cssAnimate($('.element2'), {
		'css': {
			'color': 'ccff66',
			'position': 'absolute',
			'left': '30px',
			'top': '20px'
		},
		'animate': {
			'top': '90px',
			'left': '90px'
		},
		'duration': 300
	});

and this would solve the problem, but what if you need to perform more operations on some of the elements? You would have to select that element again or keep it somewhere in your variable.

	var el = $('.element');
	cssAnimate(el, {
		'css': {
			'color': '#6699ff',
			'position': 'absolute',
			'left': 0,
			'top': 0
		},
		'animate': {
			'top': '50px',
			'left': '50px'
		},
		'duration': 700
	});
	el.text('i did it!');

This is where you can see the true power of extending jQuery, so instead of creating classic function to do scope of operations, you can extend jQuery like this:

	jQuery.fn.cssAnimate = function(values) {
		this.each(function() {
			$(this)
				.css(values.css)
				.animate(values.animate, values.duration);
		});
		return this;
	}
	
	$('.element')
		.cssAnimate({
			'css': {
				'color': '#6699ff',
				'position': 'absolute',
				'left': 0,
				'top': 0
			},
			'animate': {
				'top': '50px',
				'left': '50px'
			},
			'duration': 700
		})
		.text('i did it!');
		
	$('.element1, .element2')
		.cssAnimate({
			'css': {
				'color': 'ccff66',
				'position': 'absolute',
				'left': '30px',
				'top': '20px'
			},
			'animate': {
				'top': '90px',
				'left': '90px'
			},
			'duration': 300
		});

and you may see, the chaining is working, and you may select more than one element to perform operation on it.