Advanced jQuery

Edwin Martin

Fronteers side-session, Kings of Code, June 29th 2009

Fronteers: vakvereniging voor front-end developers

Phases of a JavaScript developer

Why do I need a library?
Starts writing functions for common, tedious tasks.
Handfull of functions becomes a library of functions.
Discovers that another library does the same, but better on all fronts.

Why a JavaScript library?

Masks browser incompatibilities
Prevents memory leaks
Optimised for speed and size
Maintained by specialists

Which library?

Functionality (widgets? framework?)
Speed
Size (bytes)
Documentation
Community
Extensible
Use of globals
License (Open Source)

Most popular

Core libraries

jQuery
Prototype
Mootools

RIA frameworks

ExtJS
YUI
Dojo
qooxdoo
jQuery UI

What does jQuery offer?

Selectors
Traversing
Manipulation
Events
Effects
Ajax
Tools

Very quick introduction to jQuery

html

<p>Time is <span class='date'></span></p>

css

.highlight {
	font-weight: bold;
	color: orange;
}

javascript

$(function() {
	$('p span.date').addClass('highlight')
		.html(new Date().toLocaleTimeString());
});

Time is

.end()

html


<div id="larch"></div>

javascript


$(function() {
	$('#larch')
		.append('<h3>The Larch</h3>')
		.find('h3')
			.css('color', 'blue')
			.end()
		.append('<p>How to Recognise Different Types of Trees From Quite a Long Way Away.</p>')
		.find('p')
			.css('color', 'green');
});

Plugins

javascript


jQuery.fn.pluginName = function() {
	return this.each(function() {
		// Do something with $(this)
	}
};

javascript


$('p').pluginName();

Plugin example

html


<ul id="larch-trees">
	<li>Himalayan Larch</li>
	<li>Japanese Larch</li>
	<li>Yunnan Larch</li>
</ul>

css


#larch-trees li {
	width: 170px;
	background-color: pink;
	padding: 3px;
	list-style-type: none;
	margin-bottom: 2px;
}

javascript


jQuery.fn.animatedSelector = function() {
	return this.each(function() {
		$(this).toggle(
			function() {
				$(this).animate({width: 250}, 'fast');
			},
			function() {
				$(this).animate({width: 170}, 'fast');
			}
		);
	});
}

javascript


$(function() {
	$('#larch-trees li').animatedSelector();
})

Himalayan Larch
Japanese Larch
Yunnan Larch

Aptana code assist

Add your own filter

Miscelaneous (CSS3) pseudo-selectors: :first, :last, :not(selector), :even, :odd, :eq(index)...

javascript

$(function() {
	$.expr[':'].findStar = function(elem) {
		return $(elem).html().indexOf('(*)') != -1;
	};
});

javascript


$('#larix tr:findStar td').addClass('highlight')

Larix decidua	European Larch	(*)
Larix griffithii	Himalayan Larch
Larix himalaica	Langtang Larch
Larix kaempferi	Japanese Larch	(*)
Larix laricina	Tamarack Larch
Larix mastersiana	Masters' Larch
Larix potaninii	Chinese Larch
Larix principis-rupprechtii	Prince Rupprecht's Larch	(*)
Larix speciosa	Yunnan Larch

Species marked with an asterisk (*) are Northern Eurasian, short-bracted

Live events

Not live:

javascript


$(function() {
	$('#live1 li').bind('click', function() {
		$(this).text(parseInt($(this).text())+1);
	});
	$('#more1').click(function() {
		$('#live').append('<li>1</li>');
	});
});

1

Live events (live)

Live:

javascript


$(function() {
	$('#live2 li').live('click', function() {
		$(this).text($(this).text()*1+1);
	});
	$('#more2').click(function() {
		$('#live2').append('<li>1</li>');
	});
});

1

Easing

animate( params, [duration], [easing], [callback] )

c*t/d+b
c*((t=t/d-1)*t*t + 1) + b
-c * Math.cos(t/d * (Math.PI/2)) + c + b
c * Math.sqrt(1 - (t=t/d-1)*t) + b
c*(t/=d)*t*t*t*t + b
c*t/d*((Math.cos(t/d * (Math.PI/2))+1))*1.1-0.1+b

javascript

jQuery.easing.myEasingFunction = function (x, t, b, c, d) {
    return 
};

$('#block').animate( {width: 500}, 'slow', 'myEasingFunction' )

Predefined functions in jQuery UI's effects.core.js.

XML-parser

javascript


var title = $('rss channel title', xmlDocument).text();

Feed fetcher-parser-renderer jQuery-plugin

javascript


$(function() {
	$('#feed').renderFeed('feed.xml');
});
jQuery.fn.renderFeed = function(location) {
	return this.each(function() {
		var el = $(this);
		$.get(location, function(xml) {
			var ul = $('<ul>');
			$('rss channel item', xml).each(function() {
				var a = $('<a>')
					.attr('href', $('link', this).text())
					.text($('title', this).text());
				ul.append($('<li>').append(a));
			});
			el.append(ul);
		});
	});
};

jQuery UI

Few widgets
Not really a framework
No Graceful Degradation
CSS-framework
ThemeRoller

jQuery UI widgets

jQuery UI demos

ThemeRoller demo (online)

Planning (online)

Animated addClass

html


<ul id="larch-trees2">
	<li>Himalayan Larch</li>
	<li>Japanese Larch</li>
	<li>Yunnan Larch</li>
</ul>

css


#larch-trees2 li {
	width: 170px;
	background-color: pink;
	padding: 3px;
	list-style-type: none;
	margin-bottom: 2px;
}
#larch-trees2 li.selected {
	width: 250px;
	background-color: red;
}

javascript


jQuery.fn.animatedSelector2 = function() {
	return this.each(function() {
		$(this).toggle(
			function() {
				$(this).addClass('selected', 'fast');
			},
			function() {
				$(this).removeClass('selected', 'fast');
			}
		);
	});
}

javascript


$(function() {
	$('#larch-trees2 li').animatedSelector2();
})

Himalayan Larch
Japanese Larch
Yunnan Larch

Best practices

Don't mix html and JavaScript.
Make functions plugins.
Don's use .css(), but add/removeClass.

Questions?

http://jquery.com/

Edwin Martin <edwin@bitstorm.org>