jQuery A Very Brief Introduction

1
jQuery A (Very) Brief Introduction

• By Gary Payne, Small Steps Computing Ltd

2
jQuery In a Sentence

• jQuery is
• a small extensible JavaScript library
• for cross-browser DOM programming

3
Powered by jQuery
Adding rounded corners to a SharePoint
Menu.... ... using the jQuery.corner plug-in
4
jQuery Fundamentals

• The jQuery Object alias
• Waiting for the DOM to initialize in a page
• (document).ready( function()
• //Do some stuff to the DOM elements on this
  page
• )

5
Selectors

• CSS 3.0 syntax plus some extras
• Basic CSS Selector
• ("div.ms-quickLaunch h3.ms-standardheader")
• jQuery positional selector
• (table.ms-topNavFlyOuts tdnth-child(2)")
• jQuery custom selector
• (divcontains(sharepoint)")

6
Wrapped Set

• A structure containing the selected DOM
  elements
• Filter to add or remove further elements in the
  set
• (topbargttr).not(first, last).filter(odd
  )
• Iterate through the set, acting on each element
• (h3contains(Categories')).find("selectfirst
  option").each( function()
• (this).removeAttr("selected", "selected")
• )
• Chain commands to act upon the set
• (topbargttrgttdidCat).width(30).css(color
  ,ab0000)

7
Commands

• Retrieve or manipulate the contents of the
  wrapped set
• Apply a CSS style
• (".ms-topnav trnot(first)").css("background-co
  lor, ccc0c0")
• Add a class e.g. Alternate table rows
• (.ms-globalTitleArea trodd").addClass(rowalte
  rnate)
• Add HTML elements
• ("h1.ms-sitetitle").append("ltbr/gtat the hub")
• Commands are overloaded getters and setters
• val() and text() retrieve and set contents

8
Event Handling

• Handling and triggering events
• Attach a handler
• (.CategoryRemovalLink").click( function()
• DeleteFromLocalCache((this).next().text(
  ))
• (this).parent().remove()
• )
• Trigger a button click
• ("trgttdgth3contains('Related Categories')).pare
  nt().find("buttonlast").click()

9
Another Example Linked Logo

• Aim
• Add a hyperlink to a logo that is embedded in a
  background image
• Solution
• Dynamically add a sized hyperlink tag floating
  over the selected area
• var pageRoot window.location.hostname.toLow
  erCase()
• ("td.ms-globalTitleArea").prepend("lta
  href'http//" pageRoot "'
  style'positionabsolutetop67pxleft2px'gtltspan
  style'background-colortransparentheight90px
  width100pxcursorpointer'gtlt/spangtlt/agt")

10
Extensibility

• Examples of extension libraries
• jQuery.Round
• jQuery.UI

11
Resources

• The Official site http//jquery.com
• An Introduction to jQuery - Rick Strahl
• http//www.west-wind.com/presentations/jQuery/def
  ault.aspx
• Selectors Cheatsheet - http//refcardz.dzone.com/
  
• Book jQuery in Action, published by Manning
• Now go elect some elements to change!!