jQuery presentatie

Edwin Martin

maart 2009

John Resig

Waarom een JavaScript bibliotheek?

Schermt browserverschillen af
Voorkomt geheugenlekken
Geoptimaliseerd
Goed onderhouden door specialisten

Welke bibliotheek?

Functionaliteit
Snelheid
Omvang (bytes)
Documentatie
Community
Gebruik van globals
Licentie (Open Source)

Wat biedt jQuery?

Selectors
Traversing: DOM doorlopen
Manipulation: DOM veranderen
Events
Effecten
Ajax
Tools

Voor UI-widgets is er jQuery UI.

Grafiekje

Eenvoudig voorbeeld

javascript


	$('#summary').slideToggle();

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Eerste deel CSS-selector, daarna de bewerkingen die daarop uitgevoerd moeten worden.

Voorbeeld CSS-selector

html


<div id="bomen">
	<p class="nieuw">Bomen</p>
	<ol>
		<li><p>Berk</p></li>
		<li><p class="nieuw">Beuk</p></li>
		<li><p class="nieuw">Eik</p></li>
	</ol>
</div>

javascript


	$('#bomen ol li p.nieuw').css('color', 'orange');

Bomen

Berk
Beuk
Eik

Voorbeeld chaining

html


	<div id="fun">jQuery <span>is heel erg leuk</span></div>

css


	#fun span {
		display: none;
	}
	.opvallen {
		font-weight: bold;
		color: purple;
	}

javascript


	$('#fun').find('span').addClass('opvallen').fadeIn('slow');

jQuery is heel erg leuk

onDomReady

html


	<div id="date"></div>

javascript


	$(document).ready( function() {
		$('#date').html(new Date().toLocaleTimeString());
	});

javascript


	$( function() {
		$('#date').html(new Date().toLocaleTimeString());
	});

.end()

html


<div id="beuk"></div>

javascript


$('#beuk')
	.append('<h3>De beuk</h3>')
	.find('h3')
		.css('color', 'blue')
		.end()
	.append('<p>De beuk (Fagus sylvatica) is een plant uit de napjesdragersfamilie.</p>')
	.find('p')
		.css('color', 'green');

Events

html


<div id="hoog"></div>

css


#hoog {
	width: 400px;
	height: 200px;
	background-color: orange;
}

#hoog div {
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: red;
}

javascript


	$(function() {
		$('#hoog').click(function(evt) {
			var div = $('<div>').css({
				left: evt.pageX,
				top: evt.pageY
			});
			$(this).append(div);
		});
	});

Plugins

javascript


jQuery.fn.pluginNaam = function() {
	return this.each(function() {
		// Doe iets met $(this)
	}
}

javascript


$('p').pluginNaam();

Plugin voorbeeld

html


<ul id="naaldbomen">
	<li>Ceder</li>
	<li>Larix</li>
	<li>Spar</li>
</ul>

css


#naaldbomen li {
	width: 100px;
	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: 130});
			},
			function() {
				$(this).animate({width: 100});
			}
		);
	});
}

javascript


$(function() {
	$('#naaldbomen li').animatedSelector();
})

Ceder
Larix
Spar

Aptana code assist

Filters

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

css


#eik td.highlight {
	color: white;
	background-color: #999;
}

javascript


$('#eik tr:even td').addClass('highlight');

Amerikaanse witte eik	Quercus alba
Amerikaanse eik	Quercus rubra
Californische struikeik	Quercus berberidifolia
Donzige eik	Quercus pubescens
Hulsteik	Quercus coccifera
Japanse eik	Quercus aliena
Gezaagdbladige eik	Quercus acutissima
Gouden eik	Quercus alnifolia
Kurkeik	Quercus suber

Eigen filters

javascript


	$.expr[':'].everyFive = function(elem) {
		var index = $(elem).parent().children().index(elem);
		return index % 5 == 0;
	};

javascript


$('#eik2 tr:everyFive td').addClass('highlight')

Amerikaanse witte eik	Quercus alba
Amerikaanse eik	Quercus rubra
Californische struikeik	Quercus berberidifolia
Donzige eik	Quercus pubescens
Hulsteik	Quercus coccifera
Japanse eik	Quercus aliena
Gezaagdbladige eik	Quercus acutissima
Gouden eik	Quercus alnifolia
Kurkeik	Quercus suber

Live events

Niet live:

javascript


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

1

Live events (live)

Wel live:

javascript


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

1

Vragen

http://jquery.com/

Edwin Martin <edwin@bitstorm.org>