In the same way that developers can build and reuse their own JavaScript libraries,
third parties have created JavaScript libraries that can simply be
referenced and used in app development. Although there are many
third-party libraries available on the Internet, one library, jQuery,
is so popular that it has almost become synonymous with JavaScript
itself.
The reason for the popularity of jQuery is that it does two very
important things extremely well: it makes it easy to select elements
from the document object model (DOM) and then perform operations on the
selected elements. jQuery
is so important that Microsoft has baked it into the app project
template in Microsoft Visual Studio 2012. Therefore, SharePoint app
developers must understand how to use the jQuery library. The following
sections present a brief introduction to jQuery from the perspective of
a SharePoint app developer. Readers who want complete coverage of the
library should visit the jQuery website at www.jquery.com.
To include any JavaScript library in an app, it must be referenced
by using a script tag. The script tag refers to the location of the
library so that it can be downloaded. In the Visual Studio app project
template, the jQuery library is included as a file and referenced in
the Default.aspx page, as shown in the following code:
<script type="text/javascript" src="../Scripts/jquery-1.6.2.min.js"></script>
Along with directly hosting the jQuery library in your app, you can also choose to use a content delivery network (CDN).
A CDN hosts the jQuery library in the cloud so that it is always
available. Referencing a CDN can improve performance of public-facing
apps because the library is downloaded in parallel and cached. The same
version of the library can then be used across several different apps.
The following code shows how to reference the Microsoft CDN for jQuery:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.min.js" type="text/java
script">
</script>
Understanding the global function
The jQuery library is encapsulated in a single function named jQuery, which is known as the global function.
Using the global function, you can easily select elements from the DOM,
which is fundamental to any JavaScript solution. To select DOM
elements, the global function is invoked and selector syntax is passed.
The following code shows the traditional method of selecting elements
in JavaScript by using the getElementById method, contrasted with the jQuery approach:
var elem1 = document.getElementById("displayDiv");
var elem2 = jQuery("#displayDiv");
In the preceding code, the jQuery selector syntax uses the hash
sign to indicate that the selector corresponds to the ID of the desired
element. You can simplify this code even further because the jQuery
library uses the $ symbol as an alias for the global function.
Therefore, the following code is equivalent:
var elem1 = document.getElementById("displayDiv");
var elem2 = $("#displayDiv");
Understanding selector syntax
At first, it might seem that selecting DOM elements by using jQuery
is not that exciting. The power of jQuery, however, lies in the fact
that the selector syntax is identical to that used in cascading style sheets (CSS). This means that you can use a rich, familiar selector syntax to reference any part of the DOM, which becomes a powerful and efficient way to manipulate the DOM elements. Table 1 shows common selection operations and how to accomplish them in jQuery.
Table 1. jQuery selector syntax
|
Operation |
Example |
Description |
|
Select elements by type |
$("p") |
Selects all paragraph elements in the page |
|
Select elements by ID |
$("#container") |
Selects the element whose ID is “container” |
|
Select elements by class |
$(".emphasis") |
Selects all elements with a class attribute of “emphasis” |
|
Select elements by type and ID |
$("div#displayDiv") |
Selects the <div> element whose ID is “displayDiv” |
|
Select elements by ancestor and descendant |
$("div#displayDiv p") |
Select all paragraph elements within the <div> whose ID is
“displayDiv”, regardless of where they are inside the div element |
|
Select elements based on their parent |
$("div#displayDiv > p") |
Selects all paragraph elements that are children of the <div> whose ID is “displayDiv” |
|
Select the first child of a parent |
$("ul#displayList > li:first") |
Selects the first list item element in the unordered list whose ID is “displayList” |
|
Select the last child of a parent |
$("ul#displayList > li:last") |
Selects the last list item element in the unordered list whose ID is “displayList” |
|
Select elements by attribute |
$("input[name='firstName']") |
Selects the input element whose name attribute is “firstName” |
Once you understand the common selection operations, you
can move ahead to combine them to create more sophisticated selectors.
The jQuery library also supports a number of extensions that provide
yet more capabilities.
