Wednesday, August 24, 2011

A jQuery Primer for SharePoint

What Can JQuery Can Do?

Find elements in the Document Object Model (DOM) and manipulate them. This manipulation might include changing values, attributes, or CSS styles.
Attach to and act on user-driven events.
Get data dynamically from other locations using Ajax for use in the page in the browser.

Referencing jQuery and Other Plug-ins

<script src="/jQuery%20Libraries/jquery-1.4.4.min.js" type="text/javascript"></script>

jQuery’s functionalities:-

Selectors:-

<div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled 1</title>

</head>

<body>

  <div id="helloDiv">

    Hello, world!

  </div>

</body>

</html></div>

Which means -->  $("#helloDiv")

<DIV class="ms-quicklaunchheader">

<A accessKey=3 id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAll

 href="/_layouts/viewlsts.aspx">

View All Site Content

</A>

</DIV>

Which Means --> $("div.ms-quicklaunchheader")

var thisNavLinkViewAll = $("#ctl00_PlaceHolderLeftNavBar_idNavLinkViewAll");

var thisNavLinkViewAll = $("a[id$='NavLinkViewAll']");

<div id="helloDiv" class="ms-bold" >

    Hello, world!

  </div>

font-weight: bold;

$("#helloDiv").attr("class");

$("#helloDiv").attr("class", "ms-hidden");

display: none;

<DIV class="ms-quicklaunchheader">

  <A accessKey=3 id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAll

 href="/_layouts/viewlsts.aspx">

    View All Site Content

  </A>

</DIV>

var thisAccessKey = $("a[id$='NavLinkViewAll']").attr("accessKey");

$("a[id$='NavLinkViewAll']").attr("accessKey", 5);

<DIV class="ms-quicklaunchheader">

  <A accessKey=3 id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAll

href="/_layouts/viewlsts.aspx">

    View All Site Content

  </A>

</DIV>

$("a[id$='NavLinkViewAll']").parent();

$("div.ms-quicklaunchheader").find("a")

var possibleValues = $("select[ID$='SelectCandidate'][Title^='" +

opt.multiSelectColumn + " ']");

var selectedValues = possibleValues.closest("span")

.find("select[ID$='SelectResult'][Title^='" + opt.multiSelectColumn + " ']");