0
WQ r ?
J v Srvar divs = document.getElementByTagName(div);for (i = 0; i < divs.length; i++) {	 divs[i].style.display = ‘none’;} Q...
I’                          fb   w   !24 KB        i m ag e           . jp g42 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=al...
5000 x                                                011                                                                 ...
W    I   v       r    Q r ?
I                     Q r<script src="jquery.min.js"></script> 	               OR<script src="http://ajax.googleapis.com/a...
“   Iw         w   .
H w   ww     ?
$("div")$(".className")$("#id")$("input[type=date]")$("body > nav:last-of-typeul:not(:has(.product))")
CSS3                              r$(li + li, section:nth-of-type(3n-1))$(img[href*=ad]) Q r                              ...
W       ww    w   v   ?
$( v).            ();  1. find   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)...
Attributes - css(), attr(), html(), val(), addClass()Traversing - find(), is(), prevAll(), next(), hasClass()Events - bind...
1                  ,// returns html content$(div).html();// sets html content$(div).html(<i>whassup</i>);
G                  S.attr(src) ......	.attr(src, image.jpg);.html() ...........	.html(<h1>hi</h1>);.text() ...........	.te...
H w   I  r          ?
“   M Q r    r r     b .      “     ”              r Q r         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 passwo...
H w   Ir   HTML      ?
Cr                  E// html as a string$("#element").before(   <a class="bla" href="bla"    onclick="bla;">bla</a>);
H w   I      ff?
$(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                  r w$("#block").animate( {    width: "+=60px",    opacity: 0.4,    fontSize: "3em",    borderWidth: "10p...
H w       Ir         v       ?
$(a:first).click(function(event) {  $(this).css({color: orange});  event.preventDefault();});$(a:first).click();
w          w.$(function() {  console.log(DOM Tree loaded.);});
H w ffi   AJAX?
“AsynchronousJavaScriptand XML”Daten vom Server holenohne die Seite neu zu laden.
J v Sr                             AJAXvar request = new XMLHttpRequest();request.open(GET, http://www.mozilla.org/, false...
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 ) {  ...
XML   JSON
XML     JSON      XML
XML     JSON      JSON
R     b r:   r’f r vr      !
This is a              tooltip.“   q        f r    Q r fr    w r .
1.<script src="qtip-2.0.0.min.js"></script>2.<a href=# title="bieber rocks">..</a>$(a[title]).qtip();
Wr                    r wjQuery.fn.hideLinks = function() {    this.find(a[href]).hide();    return this;}$(p).hideLinks();
U                       L            http://jquery.com/         http://docs.jquery.com/    http://docs.jquery.com/Tutorial...
L                                                 I     “Can you read this, Luke Skywalker?“ http://www.flickr.com/photos/...
An Introduction to Jquery
Upcoming SlideShare
Loading in...5
×

An Introduction to Jquery

857

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
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
857
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×