an introduction to jquery
DESCRIPTION
An introduction to jQuery. How to access elements, what you can then do with them, how to create elements, a bit of AJAX and some JSON. Given as a lecture in the fh ooe in Hagenberg, Austria in December 2011.TRANSCRIPT
![Page 1: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/1.jpg)
![Page 2: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/2.jpg)
Why should you use jQuery?
![Page 3: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/3.jpg)
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();
![Page 4: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/4.jpg)
I’* +,% *!-( ,f b!+-w#-%.!
42 KB
image.jpg
24 KB
1.6 MB
![Page 5: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/5.jpg)
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
![Page 6: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/6.jpg)
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
![Page 7: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/7.jpg)
What do I have to do to start using jQuery?
![Page 8: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/8.jpg)
I+"/'-( &Q'(r)<script src="jquery.min.js"></script>
OR
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
![Page 9: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/9.jpg)
“I w!"# #$ 0(/("% !" %&%'%"# #(%" -, )$'%#(*"+ w*#( *#.
![Page 10: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/10.jpg)
How can we select the element we need?
![Page 11: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/11.jpg)
$("div")
$(".className")
$("#id")
$("input[type=date]")
$("body > nav:last-of-type ul:not(:has(.product))")
![Page 12: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/12.jpg)
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)')
![Page 13: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/13.jpg)
What can we do with the element once we have it?
![Page 14: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/14.jpg)
1. find
$(',*v').(*,%();2. do
![Page 15: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/15.jpg)
// 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));});
![Page 16: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/16.jpg)
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()
![Page 17: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/17.jpg)
// returns html content$('div').html();
// sets html content$('div').html('<i>whassup</i>');
1 '%#($,, " -)%)
![Page 18: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/18.jpg)
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);
![Page 19: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/19.jpg)
How can I do more than one thing at once?
![Page 20: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/20.jpg)
“M.# /Q-%r0 '%#($,) r(%'r+ !+,%.(r &Q'(r) ,b&("%. 1*) '%!") 0$- 2!" “2(!*"” '%#($,) #$+%#(%r.
![Page 21: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/21.jpg)
$('div') .addClass('product') .fadeOut() .css('margin', 0);
end of the line
![Page 22: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/22.jpg)
$('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/
![Page 23: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/23.jpg)
How can I create HTML elements?
![Page 24: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/24.jpg)
// html as a string$("#element").before( '<a class="bla" href="bla" onclick="bla;">bla</a>');
Cr%!#*"+ E&%'%"#)
![Page 25: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/25.jpg)
How can I animate stuff?
![Page 26: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/26.jpg)
$('h1').slideDown();
$('h2').slideDown('fast');
$('h3').fadeOut(2000);
$('h4').fadeOut(2000).slideDown();
![Page 27: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/27.jpg)
W.(+ -,+($(this).fadeOut(1000, function(){ console.log($(this).text() + ' has faded! '); $(this).remove();});
![Page 28: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/28.jpg)
M!1( ),'r ,w+$("#block").animate( { width: "+=60px", opacity: 0.4, fontSize: "3em", borderWidth: "10px" }, 1500);
![Page 29: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/29.jpg)
How can I react to events?
![Page 30: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/30.jpg)
$('a:first').click(function(event) { $(this).css({color: 'orange'}); event.preventDefault();});
$('a:first').click();
![Page 31: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/31.jpg)
w#+-,w.,+/,!-$(function() { console.log('DOM Tree loaded.');});
![Page 32: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/32.jpg)
How difficult is AJAX?
![Page 33: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/33.jpg)
“Asynchronous JavaScriptand XML”
Daten vom Server holen ohne die Seite neu zu laden.
![Page 34: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/34.jpg)
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);}
[...]
![Page 35: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/35.jpg)
AJAX w#%. &Q'(r)$('#intro').load('/some/file.html');
![Page 36: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/36.jpg)
$.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!' ); }});
![Page 37: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/37.jpg)
XML JSON
![Page 38: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/38.jpg)
XML JSON
XML
![Page 39: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/39.jpg)
XML JSON
JSON
![Page 40: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/40.jpg)
Remember: there’s plugins for everything!
![Page 41: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/41.jpg)
“q34 *) ! %,,/%#$ $/'2#+ f$r #(%/Q-%r0 fr!'%w$r5.
This is a tooltip.
![Page 42: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/42.jpg)
1. #+"/'-( #%<script src="qtip-2.0.0.min.js"></script>
2. '0( #%<a href=# title="bieber rocks">..</a>$('a[title]').qtip();
![Page 43: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/43.jpg)
Wr#%( ),'r ,w+jQuery.fn.hideLinks = function() { this.find('a[href]').hide(); return this;}
$('p').hideLinks();
![Page 44: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/44.jpg)
U)%6& L*"5)http://jquery.com/
http://docs.jquery.com/http://docs.jquery.com/Tutorials
http://plugins.jquery.com/http://jqueryui.com/
![Page 45: An Introduction to Jquery](https://reader030.vdocuments.site/reader030/viewer/2022020306/555821b4d8b42a5e468b5023/html5/thumbnails/45.jpg)
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/