jQuery presentatie

jQuery. Write less, do more

Edwin Martin

maart 2009

John Resig

Foto van John Resig

Waarom een JavaScript bibliotheek?

Welke bibliotheek?

Wat biedt jQuery?

Voor UI-widgets is er jQuery UI.

Grafiekje

Staafgrafiek

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

  1. Berk

  2. Beuk

  3. 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(); })

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 eikQuercus alba
Amerikaanse eikQuercus rubra
Californische struikeikQuercus berberidifolia
Donzige eikQuercus pubescens
HulsteikQuercus coccifera
Japanse eikQuercus aliena
Gezaagdbladige eikQuercus acutissima
Gouden eikQuercus alnifolia
KurkeikQuercus 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 eikQuercus alba
Amerikaanse eikQuercus rubra
Californische struikeikQuercus berberidifolia
Donzige eikQuercus pubescens
HulsteikQuercus coccifera
Japanse eikQuercus aliena
Gezaagdbladige eikQuercus acutissima
Gouden eikQuercus alnifolia
KurkeikQuercus 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>'); }); });

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>'); }); });

Vragen

http://jquery.com/

Edwin Martin <edwin@bitstorm.org>