04 introducing jquery
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

04 introducing jquery

on

  • 595 views

 

Statistics

Views

Total Views
595
Views on SlideShare
595
Embed Views
0

Actions

Likes
0
Downloads
18
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

04 introducing jquery Presentation Transcript

  • 1. INTRODUCING JQUERYWRITE LESS. DO MORE
  • 2. jQuery is a JavaScriptlibrary
  • 3. Why jQuery?•  Free and open source•  Makes JavaScript sooo much easier•  Everybody is doing it•  Lots of plug-ins•  Small file size
  • 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. 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. 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. 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. jQuery is incredibly flexible in selectingelements $(selector)!
  • 9. Basic selectors are the simplest types•  ID var theElement = $(#Id);!•  Element type var allDivs = $(div);! var allListElements = $(li);!•  Class var allOfThem = $(.className);!
  • 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. 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. Filters allow even finer-grained control•  :even and :odd•  :first and :last•  :hidden and :visible•  :not()•  :has()•  :contains()
  • 13. jQuery allows a fluentinterface$(#popup)! .width(300)! .height(300)! .text(Hi)! .fadeIn(1000);!
  • 14. Lets learn tochange pagesThe rest of thechapter showsformulas for howto change pages.
  • 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. 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. 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. /*!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. 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. 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. each(function(){}); allows us to run codeon each matched member in the set$(a[href^="http://"]).each(function() {//do something});!
  • 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. 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