An Introduction to Jquery

1,053 views

Published on

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.

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,053
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

An Introduction to Jquery

  1. 1. WQ r ?
  2. 2. J v Srvar divs = document.getElementByTagName(div);for (i = 0; i < divs.length; i++) { divs[i].style.display = ‘none’;} Q r$(div).hide();
  3. 3. I’ fb w !24 KB i m ag e . jp g42 KB 1.6 MB
  4. 4. 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
  5. 5. 5000 x 011 Around 50% of 09.2 the top 10,000 websites useTop 10k Sites using jQuery jQuery. http://blog.builtwith.com/2011/10/31/jquery-version-and-usage-report/
  6. 6. W I v r Q r ?
  7. 7. I Q r<script src="jquery.min.js"></script> OR<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
  8. 8. “ Iw w .
  9. 9. H w ww ?
  10. 10. $("div")$(".className")$("#id")$("input[type=date]")$("body > nav:last-of-typeul:not(:has(.product))")
  11. 11. 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))
  12. 12. W ww w v ?
  13. 13. $( v). (); 1. find 2. do
  14. 14. // 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));});
  15. 15. 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()
  16. 16. 1 ,// returns html content$(div).html();// sets html content$(div).html(<i>whassup</i>);
  17. 17. 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);
  18. 18. H w I r ?
  19. 19. “ M Q r r r b . “ ” r Q r r.
  20. 20. $(div) .addClass(product) .fadeOut() .css(margin, 0); end of the line
  21. 21. $(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/
  22. 22. H w Ir HTML ?
  23. 23. Cr E// html as a string$("#element").before( <a class="bla" href="bla" onclick="bla;">bla</a>);
  24. 24. H w I ff?
  25. 25. $(h1).slideDown();$(h2).slideDown(fast);$(h3).fadeOut(2000);$(h4).fadeOut(2000).slideDown();
  26. 26. W$(this).fadeOut(1000, function(){ console.log($(this).text() + has faded! ); $(this).remove();});
  27. 27. M r w$("#block").animate( { width: "+=60px", opacity: 0.4, fontSize: "3em", borderWidth: "10px" }, 1500);
  28. 28. H w Ir v ?
  29. 29. $(a:first).click(function(event) { $(this).css({color: orange}); event.preventDefault();});$(a:first).click();
  30. 30. w w.$(function() { console.log(DOM Tree loaded.);});
  31. 31. H w ffi AJAX?
  32. 32. “AsynchronousJavaScriptand XML”Daten vom Server holenohne die Seite neu zu laden.
  33. 33. J v Sr AJAXvar request = new XMLHttpRequest();request.open(GET, http://www.mozilla.org/, false);request.send(null);if (request.status == 200) { console.log(request.responseText);}[...]
  34. 34. AJAX w Q r$(#intro).load(/some/file.html);
  35. 35. $.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! ); }});
  36. 36. XML JSON
  37. 37. XML JSON XML
  38. 38. XML JSON JSON
  39. 39. R b r: r’f r vr !
  40. 40. This is a tooltip.“ q f r Q r fr w r .
  41. 41. 1.<script src="qtip-2.0.0.min.js"></script>2.<a href=# title="bieber rocks">..</a>$(a[title]).qtip();
  42. 42. Wr r wjQuery.fn.hideLinks = function() { this.find(a[href]).hide(); return this;}$(p).hideLinks();
  43. 43. U L http://jquery.com/ http://docs.jquery.com/ http://docs.jquery.com/Tutorials http://plugins.jquery.com/ http://jqueryui.com/
  44. 44. 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/

×