04 introducing jquery


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

04 introducing jquery

  2. 2. jQuery is a JavaScriptlibrary
  3. 3. Why jQuery?•  Free and open source•  Makes JavaScript sooo much easier•  Everybody is doing it•  Lots of plug-ins•  Small file size
  4. 4. You can get jQuery in two ways1.  CDN – Content distribution network <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> Advantages: Less space on your site (minor) May take advantage of caching (major) Google/M$ use router tricks to serve from local servers (major)2.  Download and save <script src="scripts/jquery-1.8.3.js"></script> Advantages: Google/M$/jQuery.com may be down (yeah, right.) Can run your site offline, like at a kiosk or tradeshow
  5. 5. You add jQuery to a page with just a fewlines of code<script type=text/javascript>!$(document).ready(function() {! // initializations! // wiring-up of clicks and other events!});!// all other jQuery coding!</script>!
  6. 6. Dynamically modifyinga web page takes justtwo steps1.  Select the element(s)2.  Do something with them •  Change a property •  Change the content •  Remove the element •  Get information from the element •  Any combination of the above
  7. 7. The DOM is a tree of elements •  So how do you select one or more elements? window •  Native JavaScript provides •  getElementById(id); document •  getElementsByTagName(tag); div div div •  Rigid •  Underpowered form article link •  Tough to code image link input linktextarea p linkimage
  8. 8. jQuery is incredibly flexible in selectingelements $(selector)!
  9. 9. Basic selectors are the simplest types•  ID var theElement = $(#Id);!•  Element type var allDivs = $(div);! var allListElements = $(li);!•  Class var allOfThem = $(.className);!
  10. 10. Advanced selectors give you a morecontrol•  Descendent •  Points to: Tag somewhere inside another tag •  Example: $(#navBar a) // All links under the navBar•  Child •  Points to: Tag directly beneath another tag •  Example: $(#navBar > a) // All links directly within navBar•  Adjacent sibling •  Points to: Tag directly adjacent to another tag •  Example: $(#navBar + a) // The link right next to another
  11. 11. Attribute selectors•  Put the attribute in square brackets after the selector•  Targets: elements based on the existence or value of an attribute.•  Examples:$(img[alt]) //images with the alt attribute set!$(input[type="checkbox"]) //checkboxes in the form!$(a[href^="http://"]) //all external links!$(img[src$=".png"]) //all png images!$(a[href*="google.com"]) //all links to Google!
  12. 12. Filters allow even finer-grained control•  :even and :odd•  :first and :last•  :hidden and :visible•  :not()•  :has()•  :contains()
  13. 13. jQuery allows a fluentinterface$(#popup)! .width(300)! .height(300)! .text(Hi)! .fadeIn(1000);!
  14. 14. Lets learn tochange pagesThe rest of thechapter showsformulas for howto change pages.
  15. 15. html() and text() allow us to read and addcontent to a page//To read the html!var x = $(selector).html();!//To change the html!$(selector).html(newHtml);!//To read the inner text!var x = $(selector).text();!//To change the inner text!$(selector).text(newText);!!
  16. 16. append() and prepend(), before() andafter() allow adding content//To add as the last child of an element!$(selector).append(newHtml);!//To add as the first child of an element!$(selector).prepend(newHtml);!//To add just after an element!$(selector).after(newHtml);!//To change immediately before an element!$(selector).before(newHtml);!!
  17. 17. Replacing and removing selections//Take it out of the DOM!$(selector).remove();!//Replace it !$(selector).replaceWith(newContent);!//Create an exact copy of an element!var x = $(selector).clone();!x.insertAfter(selector);!
  18. 18. /*!Note: The classes must pre-exist. Does notdestroy other classes. Merely adds thisclass.!*/!//Add a class!$(selector).addClass(className);!//Remove a class!$(selector).removeClass(className);!//Add if it isnt there. Remove if it is.!$(selector).toggleClass(className);!!Setting and reading classes
  19. 19. Setting and reading CSS properties// To read a css property!var x = $(selector).css(property);!// To set a css property!$(selector).css(property,value);!// To set multiple css properties!$(selector).css(! {! property1:value2,! property2:value2! }!);!
  20. 20. Reading and setting HTML attributes•  Reading an attributevar x = $(selector).attr(attributeName);!•  Setting an attribute$(selector).attr(attributeName,value);!•  Removing an attribute$(selector).removeAttr(attributeName);!
  21. 21. each(function(){}); allows us to run codeon each matched member in the set$(a[href^="http://"]).each(function() {//do something});!
  22. 22. this and $(this) this $(this)A JavaScript built-in A jQuery thingWill point to the entire Will point to eachwrapped set thing in the wrapped setCan be accessed any Can only be accessedtime via jQuery
  23. 23. Conclusion•  jQuery is a library that helps you to write JavaScript much faster and effectively•  You copy it and link to your copy or just link to the CDN•  With jQuery you can alter just about anything on a page using selectors, which are very flexible•  We saw how to do several things: •  Replacing text and html •  Apply and remove CSS classes •  Adding and removing HTML attributes