Why should you use jQuery?

J!v!S"r#$%var divs = document.getElementByTagName('div');for (i = 0; i < divs.length; i++) { divs[i].style.display = ‘none’;}

&Q'(r)$('div').hide();

I’* +,% *!-( ,f b!+-w#-%.!

42 KB

image.jpg

24 KB

1.6 MB

http://www.google.com/trends?q=jquery%2C+mootools%2C+dojo+javascript%2C+prototype+javascript%2C+yui&ctab=0&geo=all&date=all&sort=0

http://blog.builtwith.com/2011/10/31/jquery-version-and-usage-report/

Around 50% of the top 10,000 websites use jQuery.

5000

09.2011

Top 10k Sites using jQuery

x

What do I have to do to start using jQuery?

I+"/'-( &Q'(r)<script src="jquery.min.js"></script>

OR

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">

“I w!"# #$ 0(/("% !" %&%'%"# #(%" -, )$'%#(*"+ w*#( *#.

How can we select the element we need?

$("div")

$(".className")

$("#id")

$("input[type=date]")

$("body > nav:last-of-type ul:not(:has(.product))")

CSS3 0(/("%,r0$('li + li, section:nth-of-type(3n-1)')$('img[href*=ad]')

&Q'(r) 0(/("%,r0$('li:hidden, a:visible')$('div:has(p), h2:contains(hello)')

What can we do with the element once we have it?

1. find

$(',*v').(*,%();2. do

// we can call methods on it$('ul li').hide();

// we can treat it like an array$('ul li')[0]

// we can iterate over it..$('ul li').each(function(i, x) { console.log($(this));});

Attributes - css(), attr(), html(), val(), addClass()

Traversing - find(), is(), prevAll(), next(), hasClass()

Events - bind(), trigger(), unbind(), live(), click()

Effects - show(), fadeOut(), toggle(), animate()

Moving Elements - append(), appendTo(), before()

Ajax - get(), getJSON(), post(), ajax(), load()

// returns html content$('div').html();

// sets html content$('div').html('<i>whassup</i>');

1 '%#($,, " -)%)

G(% S(%.attr('src') .......attr('src', 'image.jpg');

.html() ............html('<h1>hi</h1>');

.text() ............text('text text bla');

.css('margin') .....css('margin', '0');

.width() ...........width(100);

How can I do more than one thing at once?

“M.# /Q-%r0 '%#($,) r(%'r+ !+,%.(r &Q'(r) ,b&("%. 1*) '%!") 0$- 2!" “2(!*"” '%#($,) #$+%#(%r.

$('div') .addClass('product') .fadeOut() .css('margin', 0);

end of the line

$('form#login')

// hide all the labels.optional .find('label.optional').hide().end()

// add a red border to any password .find('input:password') .css('border', '1px solid red').end()

// add a submit handler to the form .submit(function(){ return confirm('Are you sure?'); });

http://simonwillison.net/2007/Aug/15/jquery/

How can I create HTML elements?

// html as a string$("#element").before( '<a class="bla" href="bla" onclick="bla;">bla</a>');

Cr%!#*"+ E&%'%"#)

How can I animate stuff?

$('h1').slideDown();

$('h2').slideDown('fast');

$('h3').fadeOut(2000);

$('h4').fadeOut(2000).slideDown();

W.(+ -,+($(this).fadeOut(1000, function(){ console.log($(this).text() + ' has faded! '); $(this).remove();});

M!1( ),'r ,w+$("#block").animate( { width: "+=60px", opacity: 0.4, fontSize: "3em", borderWidth: "10px" }, 1500);

How can I react to events?

$('a:first').click(function(event) { $(this).css({color: 'orange'}); event.preventDefault();});

$('a:first').click();

w#+-,w.,+/,!-$(function() { console.log('DOM Tree loaded.');});

How difficult is AJAX?

“Asynchronous JavaScriptand XML”

Daten vom Server holen ohne die Seite neu zu laden.

J!v!S"r#$% AJAXvar request = new XMLHttpRequest();request.open('GET', 'http://www.mozilla.org/', false); request.send(null);

if (request.status == 200) { console.log(request.responseText);}

[...]

AJAX w#%. &Q'(r)$('#intro').load('/some/file.html');

$.ajax({ type: 'POST', url: 'http://as.d/f.html', data: 'name=John&drinks=3', cache: false, beforeSend: function( xhr ) { xhr.overrideMimeType( 'text/plain; charset=x-user-defined' ); }, success: function( data ) { console.log( 'w00t!' ); }});

XML JSON

XML JSON

XML

XML JSON

JSON

Remember: there’s plugins for everything!

“q34 *) ! %,,/%#$ $/'2#+ f$r #(%/Q-%r0 fr!'%w$r5.

This is a tooltip.

1. #+"/'-( #%<script src="qtip-2.0.0.min.js"></script>

2. '0( #%<a href=# title="bieber rocks">..</a>$('a[title]').qtip();

Wr#%( ),'r ,w+jQuery.fn.hideLinks = function() { this.find('a[href]').hide(); return this;}

$('p').hideLinks();

U)%6& L*"5)http://jquery.com/

http://docs.jquery.com/http://docs.jquery.com/Tutorials

http://plugins.jquery.com/http://jqueryui.com/

L*"5) #$ I'!+%)“Can you read this, Luke Skywalker?“ http://www.flickr.com/photos/49462908@N00/4109940538/

“Few people knew that Fett auditioned for a role in Raiders of the Lost Ark (Explore)” http://www.flickr.com/photos/27271711@N04/3005974444/

“Pink Storm Cloud” http://www.flickr.com/photos/83346641@N00/3526917649/“Lost” http://www.flickr.com/photos/st3f4n/4392451969/

“Clone Terror with Jelly Beans” http://www.flickr.com/photos/kalexanderson/5461205156/“Toy Torture” http://www.flickr.com/photos/st3f4n/4222365229/

“Hard To Tap Dance With Diving Flippers” http://www.flickr.com/photos/47287396@N05/5351991389/“Baby care lesson by Darth Vader” http://www.flickr.com/photos/49462908@N00/4370515705/

“Introducing the Imperial team for the Winter Olympics” http://www.flickr.com/photos/49462908@N00/4352088960/

“Everyone’s nightmare” http://www.flickr.com/photos/49462908@N00/4340808219/“It’s Fun To Stay At The...” http://www.flickr.com/photos/83346641@N00/3578775702/

“Stay active” http://www.flickr.com/photos/99472898@N00/4435490471/