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:-
- jQuery Core
- Selectors
- Attributes
- Traversing
- Manipulation
- CSS
- Events
- Effects
- Ajax
- Utilities
- jQuery UI
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']");
Attributes
<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);
Traversing
<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 + " ']");
No comments:
Post a Comment