• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
An Introduction to Jquery

An Introduction to Jquery



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

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.



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds


Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    An Introduction to Jquery An Introduction to Jquery Presentation Transcript

    • WQ r ?
    • J v Srvar divs = document.getElementByTagName(div);for (i = 0; i < divs.length; i++) { divs[i].style.display = ‘none’;} Q r$(div).hide();
    • 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=all&sort=0
    • 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/
    • W I v r Q r ?
    • I Q r<script src="jquery.min.js"></script> OR<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
    • “ 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 r$(li:hidden, a:visible)$(div:has(p), h2:contains(hello))
    • 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).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()
    • 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() ........... .text(text text bla);.css(margin) .... .css(margin, 0);.width() .......... .width(100);
    • 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 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/
    • 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: "10px" }, 1500);
    • 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);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
    • 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/Tutorials http://plugins.jquery.com/ http://jqueryui.com/
    • 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/