jquery a very brief introduction l.
Skip this Video
Loading SlideShow in 5 Seconds..
jQuery – A (Very) Brief Introduction PowerPoint Presentation
Download Presentation
jQuery – A (Very) Brief Introduction

Loading in 2 Seconds...

play fullscreen
1 / 11

jQuery – A (Very) Brief Introduction - PowerPoint PPT Presentation

  • Uploaded on

jQuery – A (Very) Brief Introduction . By Gary Payne, Small Steps Computing Ltd. jQuery In a Sentence. jQuery is… …a small extensible JavaScript library for cross-browser DOM programming. Powered by jQuery. Adding rounded corners to a SharePoint Menu....

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'jQuery – A (Very) Brief Introduction' - mitch

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
jquery a very brief introduction

jQuery – A (Very) Brief Introduction

By Gary Payne, Small Steps Computing Ltd

jquery in a sentence
jQuery In a Sentence

jQuery is…

…a small extensible JavaScript library

for cross-browser DOM programming

powered by jquery
Powered by jQuery

Addingroundedcornerstoa SharePoint Menu....

... using the jQuery.corner plug-in

jquery fundamentals
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



CSS 3.0 syntax plus some extras

Basic CSS Selector:

$("div.ms-quickLaunch h3.ms-standardheader")

jQuery positional selector:

$(“table.ms-topNavFlyOuts td:nth-child(2)")

jQuery custom selector:


wrapped set
Wrapped Set

A structure containing the selected DOM elements

Filter to add or remove further elements in the set

$(“#topbar>tr”).not(“:first, :last”).filter(“:odd”)

Iterate through the set, acting on each element

$(“h3:contains(‘Categories')“).find("select:first option").each( function() {

$(this).removeAttr("selected", "selected");


Chain commands to act upon the set



Retrieve or manipulate the contents of the wrapped set

Apply a CSS style

$(".ms-topnav tr:not(:first)").css("background-color”, “#ccc0c0")

Add a class – e.g. Alternate table rows

$(“.ms-globalTitleArea tr:odd").addClass(“rowalternate”)

Add HTML elements

$("h1.ms-sitetitle").append("<br/>at the hub");

Commands are overloaded – getters and setters

val() and text() retrieve and set contents

event handling
Event Handling

Handling and triggering events

Attach a handler

$(“.CategoryRemovalLink").click( function() {




Trigger a button click

$("tr>td>h3:contains('Related Categories')“).parent().find("button:last").click()

another example linked logo
Another Example – Linked Logo


Add a hyperlink to a logo that is embedded in a background image


Dynamically add a sized hyperlink tag floating over the selected area

var pageRoot = window.location.hostname.toLowerCase();

$("td.ms-globalTitleArea").prepend("<a href='http://" + pageRoot + "' style='position:absolute;top:67px;left:2px;'><span style='background-color:#transparent;height:90px;width:100px;cursor:pointer;'></span></a>");


Examples of extension libraries




The Official site – http://jquery.com

An Introduction to jQuery - Rick Strahl


Selectors Cheatsheet - http://refcardz.dzone.com/

Book – jQuery in Action, published by Manning

Now go $elect some elements to change!!