JQuery Very Brief Introduction by nikeborome

VIEWS: 17 PAGES: 11

									jQuery – A (Very) Brief Introduction
By Gary Payne, Small Steps Computing Ltd

Code Camp, Christchurch, NZ, 1st November 2008
Click to edit Master title style

  jQuery In a Sentence




         jQuery is…

                …a small extensible JavaScript library
                for cross-browser DOM programming




                                                         2
Click to edit Master title style

  Powered by jQuery

    Adding rounded corners to a SharePoint Menu....
               ... using the jQuery.corner plug-in




                                                      3
Click to edit Master title style

  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
         });




                                                                 4
Click to edit Master title style

  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‟)")




                                                        5
Click to edit Master title style

  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”)




                                                                                         6
Click to edit Master title style

  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



                                                                             7
Click to edit Master title style

  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()




                                                                                             8
Click to edit Master title style

  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>");




                                                                                      9
Click to edit Master title style

  Extensibility



                           Examples of extension libraries

                           jQuery.Round

                           jQuery.UI




                                                             10
Click to edit Master title style

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



                                                                      11

								
To top