1 / 11

jQuery – A (Very) Brief Introduction

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....

mitch
Download Presentation

jQuery – A (Very) Brief Introduction

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 – 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 Addingroundedcornerstoa 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 td:nth-child(2)") jQuery custom selector: $(“div:contains(‘sharepoint’)")

  6. 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 $(“#topbar>tr>td[id*=Cat]”).width(30).css(“color”,”#ab0000”)

  7. Commands 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

  8. Event Handling Handling and triggering events Attach a handler $(“.CategoryRemovalLink").click( function() { DeleteFromLocalCache($(this).next().text()); $(this).parent().remove(); }); Trigger a button click $("tr>td>h3:contains('Related Categories')“).parent().find("button:last").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.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>");

  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/default.aspx Selectors Cheatsheet - http://refcardz.dzone.com/ Book – jQuery in Action, published by Manning Now go $elect some elements to change!!

More Related