1 / 22

JQuery

JQuery. Mobile Development Series, part 2. Overview. Who, What , When, Where & Why?. An open source JavaScript library that simplifies the interaction between HTML and JavaScript. Created by John Resig in 2005, released in January of 2006.

rae-mccarty
Download Presentation

JQuery

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JQuery Mobile Development Series, part 2

  2. Overview Who, What , When, Where & Why?

  3. An open source JavaScript library that simplifies the interaction between HTML and JavaScript. • Created by John Resig in 2005, released in January of 2006. • Built in an attempt to simplify the existing DOM APIs and abstract away cross-browser issues. Who, What, When?

  4. IE 6+ • Firefox 2+ • Safari 3+ • Chrome • Opera 9+ Where

  5. Uses CSS to layer functionality. • Easy to separate behavior. • Quick, terse, syntax. Why?

  6. How to Use it Find Stuff. Do Stuff.

  7. $("div").addClass("special"); • Find some elements. • Do something with them Focus

  8. $("div").addClass("special"); • $ is the jQuery Object (also named jQuery) • "div" finds some elements using CSS selectors • $("div") returns a jQuery set (containing 0 to many objects – divs in this case). • addClass(...) modifies all the divs Simple Syntax

  9. $(document).ready(function(){ // Your jQuery code goes in here});$(document).ready(function(){ // Your jQuery code goes in here}); • In order to traverse and manipulate the page we must wait until it's ready to be used. • jQuery has a ready event that fires the instant the DOM is ready to be worked with. • Stick all your jQuery code in a ready block, load it unobtrusively. Getting Ready

  10. HTML Element Selectors

  11. HTML Element Selectors

  12. ID Selectors

  13. CSS Selectors

  14. Just to name a few: • .parent() • .next() • .prev() • .children() • .siblings() http://api.jquery.com/category/traversing/ Traversal

  15. You can have multiple actions against a single set of elements. • Every jQuery method returns the jQuery set, for further actions (unless a value is returned). $("div").hide(); $("div").hide().css("color","blue");$("div").hide().css("color","blue").remove(); Chaining

  16. .submit • .click • .hover • .scroll • .select http://api.jquery.com/category/events/ Events

  17. .animate • .hide • .show • .slideToggle http://api.jquery.com/category/effects/ Effects

  18. $('#b').load('article.html #target'); AJAX & XML

  19. $.getJSON("file.js", function( obj ) { for ( varpropinobj ) { $("ul").append( "<li>" + prop + ": " + obj[prop] + "</li>");     } });$.getJSON("file.js", function( obj ) { for ( varpropinobj ) { $("ul").append( "<li>" + prop + ": " + obj[prop] + "</li>");     } }); AJAX & JSON

  20. <script src='http://code.jquery.com/jquery.js'></script> • jQuery, Google, and Microsoft all host jQuery on their CDNs. • Automatically minified, gzipped, and geopositioned for performance. • Specify version to maintain deprecated functions CDN

  21. Documentation & APIhttp://jquery.com/http://api.jquery.com/ • Optimization Tricks &Tipshttp://24ways.org/2011/your-jquery-now-with-less-suck/ • Online Toolshttp://jsbin.com/welcome/1/edithttp://codepen.io/http://jsfiddle.net/ErrRq/ References/More Info

  22. Upcoming Sessions 2/27 – JSON 3/6 – JQuery Mobile https://www.facebook.com/ACEITSIG http://collaborate.extension.org/wiki/ACE_Information_Technology_SIG * *recordings posted { Sarah Johnstonsjohnston@agcenter.lsu.edu

More Related