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.

2. W
Q r ?

3. J v Sr
var divs = document.getElementByTagName('div');
for (i = 0; i < divs.length; i++) {
divs[i].style.display = ‘none’;
}
Q r
$('div').hide();

4. I’
fb w !
24 KB
i m ag e
. jp g
42 KB
1.6 MB

5. 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

6. 5000 x
011
Around 50% of
09.2
the top 10,000
websites use
Top 10k Sites using jQuery
jQuery.
http://blog.builtwith.com/2011/10/31/jquery-version-and-usage-report/

7. W I v
r
Q r ?

8. I Q r
<script src="jquery.min.js"></script>
OR
<script src="http://ajax.googleapis.com/
ajax/libs/jquery/1/jquery.min.js">

9. “ Iw
w .

10. H w w
w ?

11. $("div")
$(".className")
$("#id")
$("input[type=date]")
$("body > nav:last-of-type
ul:not(:has(.product))")

12. CSS3 r
$('li + li, section:nth-of-type(3n-1)')
$('img[href*=ad]')
Q r r
$('li:hidden, a:visible')
$('div:has(p), h2:contains(hello)')

13. W w
w
w v ?

14. $(' v'). ();
1. find 2. do

15. // 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));
});

16. 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()

17. 1 ,
// returns html content
$('div').html();
// sets html content
$('div').html('<i>whassup</i>');

18. 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);

19. H w I
r
?

20. “ M Q r
r r
b .
“ ”
r Q r
r.

21. $('div')
.addClass('product')
.fadeOut()
.css('margin', 0);
end of
the line

22. $('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/

23. H w I
r HTML
?

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

25. H w I
ff?

26. $('h1').slideDown();
$('h2').slideDown('fast');
$('h3').fadeOut(2000);
$('h4').fadeOut(2000).slideDown();

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

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

29. H w I
r v ?

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

31. w w.
$(function() {
console.log('DOM Tree loaded.');
});

32. H w ffi
AJAX?

33. “Asynchronous
JavaScript
and XML”
Daten vom Server holen
ohne die Seite neu zu laden.

34. J v Sr AJAX
var request = new XMLHttpRequest();
request.open('GET', 'http://www.mozilla.org/', false);
request.send(null);
if (request.status == 200) {
console.log(request.responseText);
}
[...]

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

36. $.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!' );
}
});

37. XML JSON

38. XML JSON
XML

39. XML JSON
JSON

40. R b r:
r’
f r vr !

41. This is a
tooltip.
“ q
f r
Q r fr w r .

42. 1.
<script src="qtip-2.0.0.min.js"></script>
2.
<a href=# title="bieber rocks">..</a>
$('a[title]').qtip();

43. Wr r w
jQuery.fn.hideLinks = function() {
this.find('a[href]').hide();
return this;
}
$('p').hideLinks();

44. U L
http://jquery.com/
http://docs.jquery.com/
http://docs.jquery.com/Tutorials
http://plugins.jquery.com/
http://jqueryui.com/

45. L 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/