- Marc has over 30 years of experience in technology consulting and software development across a variety of industries. - He has received the Microsoft MVP award for SharePoint Server three times (2011-2013). - He maintains a popular blog and several open source projects related to SharePoint and jQuery.

2. • More than 30 years of experience in technology professional services and
software development. Over a wide-ranging career in consulting as well as line
manager positions, Marc has proven himself as a problem solver and leader who
can solve difficult technology problems for organizations across a wide variety of
industries and organization sizes.
• Three-time awardee of the Microsoft MVP award for SharePoint Server (2011,
2012, 2013).

3. is

5. Note the protocol-less references
Referencing jQuery, jQueryUI, and SPServices from CDNs – Revisited
http://sympmarc.com/2013/02/07/referencing-jquery-jqueryui-and-spservices-from-cdns-revisited/

6. Opening tag
Closing tag
Powered by <a href="http://office365.com">Office365</a>.
Attribute
Value
Element
Self-closing tag
<input id="my-cbox" class="foo bar" type="checkbox" checked />
Id
Class(es)
Attribute
Value
Property

8. The DOM is HTML…which is XML…which is data!

9. Select something
$(".article").hide();
Do something!
Remember this from CSS?

10. $(document).ready(function() {
// do something
});
$(function() {
// do something
});
jQuery(function($) {
// do something
});

12. collection

13. $("div[id$='QuickLaunchNavigationManager']
li:first span.menu-item-text")

14. $("td.ms-list-addnew a:eq(1)")

15. • .NET Applications like
SharePoint generate some
long and ugly markup and
IDs
id="ctl00$ctl41$g_26ee1140_76aa_4
ec0_88c4_11e7e96480f4$ctl00$ctl02
$ctl00$ctl01$ctl00$ContentTypeCho
ice"
• These selector tricks really
help
$("[id='foo']");
//
$("[id!='foo']");
//
$("[id^='foo']");
//
$("[id$='foo']");
//
$("[id*='foo']");
//
$("[id~='foo']");
//
$("[id|='foo']");
//
$("[id]");
//
$("[id][class][style]");
Equal to
Not equal to
Starts with
Ends with
Contains
Contains word
Contains prefix
Has attribute
// Has all

17. $("select[title='Region']").val();
$("select[title='Region'] option:selected").text();

18. $("select[title='Region']").val(5);
$("select[title='Region'] option:selected").text("boo");

20. $("div[id$='QuickLaunchNavigationManager'] li:first")
.parent().find("li:eq(3) li:first .menu-item-text");

21. SelectCandidate
SelectResult
<select
<select
var possibleValues = $("select[ID$='SelectCandidate'][Title^='" +
name="ctl00$m$g_e845e690_00da_428f_afbd_fbe80
name="ctl00$m$g_e845e690_00da_428f_afbd_fbe80478
4787763$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$c
7763$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$ctl00$c
opt.multiSelectColumn + " ']");
tl00$ctl00$SelectCandidate" title="City
tl00$SelectResult" title="City selected values"
possible values"
var selectedValues =
id="ctl00_m_g_e845e690_00da_428f_afbd_fbe8047877
id="ctl00_m_g_e845e690_00da_428f_afbd_fbe8047
63_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl
possibleValues.closest("span").find("select[ID$='SelectResult'][Title^='" +
87763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl
00_SelectResult" style="width: 162px;"
00_ctl00_SelectCandidate" style="width:
onkeydown="GipHandleHScroll(event)"
opt.multiSelectColumn + " ']");
162px;" onkeydown="GipHandleHScroll(event)"
ondblclick="GipAddSelectedItems(ctl00_m_g_e84
5e690_00da_428f_afbd_fbe804787763_ctl00_ctl04
_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLoo
kupPicker_m); return false"
onchange="GipSelectCandidateItems(ctl00_m_g_e
845e690_00da_428f_afbd_fbe804787763_ctl00_ctl
04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiL
ookupPicker_m);" size="350" multiple="">
ondblclick="GipRemoveSelectedItems(ctl00_m_g_e84
5e690_00da_428f_afbd_fbe804787763_ctl00_ctl04_ct
l07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPic
ker_m); return false"
onchange="GipSelectResultItems(ctl00_m_g_e845e69
0_00da_428f_afbd_fbe804787763_ctl00_ctl04_ctl07_
ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_
m);" size="20" multiple="">

24. $(".article").click(function(){
// do something
});
$(".article").mouseover(function(){
// do something
});

25. $("h2.ms-WPTitle").click(function() {
alert("Go directly to the list.");
});
$("h2.ms-WPTitle").hover(function() {
$(this).css("background-color", "fuchsia");
$(this).data("title", $(this).html());
$(this).html("Click to visit");
},function() {
$(this).css("background-color", "white");
$(this).html($(this).data("title"));
});

27. $(".article").hide();
$(".article").slideUp();
$(".article").fadeOut("slow");
$(".article").animate({
"font-size": "24px",
"background-color": "red"
}, 5000);

28. var wpTitles = $("h2.ms-WPTitle");
// Remove the links on the Web Part Titles
wpTitles.find("nobr").unwrap("<a></a>");
// Show the pointer on mouseover
wpTitles.css("cursor", "pointer");
// Add click behavior that toggles the visibility
wpTitles.click(function() {
$(this).closest("table").closest("tr").next().slideToggle();
});

29. // Collect all of the choices
$(thisFormField).find("tr").each(function() {
columnOptions.push($(this).html());
});
out = "<TR>";
// Add all of the options to the out string
for(i=0; i < columnOptions.length; i++) {
out += columnOptions[i];
// If we've already got perRow columnOptions in the row,
// close off the row
if((i+1) % opt.perRow === 0) {
out += "</TR><TR>";
}
}
out += "</TR>";
// Remove the existing rows...
$(thisFormField).find("tr").remove();
// ...and append the out string
$(thisFormField).find("table").append(out);

30. $(".article").tabs();
$("input").autocomplete();
$("#infoBox").dialog();
$("table.sortable").sortable();

32. http://jslint.com/
http://jshint.com/
http://compressorrater.thruhere.net/

34. http://www.flickr.com/photos/boliyou/2884130773/

36. eMail
Blog
SPServices
SPXSLT
Books
The Middle Tier Manifesto
marc.anderson@sympraxisconsulting.com
http://sympmarc.com
http://spservices.codeplex.com
http://spxslt.codeplex.com
http://sympmarc.com/books
http://bit.ly/middletier