So you have been reading about jQuery and want to dive in and try some? I recently attended the MSDN Dev Conference in Detroit where jQuery integration and client-side programming were very hot topics. With Microsoft’s acceptance of the open source library, I figured I would give it a try. This is what I have learned so far. Before I can show you what you can do with jQuery, I think I should probably show you how to get a reference to jQuery into your code. In ASP.NET you can add your reference directly to your Script Manager
<asp:scriptmanager id="pageScriptManager" runat="server"> <scripts> <asp:scriptreference path="/client/jquery-1.3.1.min.js" /> </scripts> </asp:scriptmanager>
What does jQuery have to offer? First and foremost, jQuery has given me power over the Document Object Model (DOM)! jQuery Selectors are the greatest thing since sliced bread, no lie. Being able to EASILY find an object or group of objects in the DOM by ID, CSS Class, or by HTML Tag is something web developers have long needed. To select an object from the DOM by ID would look like this:
$('#ID_Goes_Here')
To select an object from the DOM by CSS Class would look like this:
$('.CSS_Class_Name_Goes_Here')
To select an object from the DOM by HTML Tag would look like this:
$('<tag_goes_here>')
With jQuery Selectors being so simple, it allows the developer to easily select an object or a group of objects. Now that we can select objects, what can we do with them? This is where the power of Selectors really builds into what else you can do. In a web application, round trips to the server to manage UI is wasteful. I avoid JavaScript like the plague because it’s a pain in the ass. jQuery makes client-side UI management feel like climbing the rope in gym class. For example, if I have a label that I want to be rendered but not visible I could create the label.
<asp:label id="Label4" runat="server" cssclass="myLabel" text="This is " />
And later on in jQuery I can hide it like this.
$('#Label4').css('display', 'none');
It’s nice to be able to easily select an object and modify it, but what if you have a whole group of items you want to modify? With jQuery, you can EASILY loop through a collection of objects. In this example I have a group of labels.
<asp:label id="Label1" runat="server" cssclass="myLabel" text="This is " /> <asp:label id="Label2" runat="server" cssclass="myLabel" text="This is " /> <asp:label id="Label3" runat="server" cssclass="myLabel" text="This is " /> <asp:label id="Label4" runat="server" cssclass="myLabel" text="This is " />
Now I want to update the text of each label to include its ID. I am going to loop through each object in the DOM with a CSS Class of .myLabel.
$('.myLabel').each(function() { $(this).append(this.id); });
What the jQuery code above does is execute a function that will append the object’s ID to its text value. Notice the Selector inside the function $(this). The syntax is used to find the loop’s current object in the DOM. I do a lot of web work where I create controls on the fly. For my last example, I just wanted to show a way to quickly insert some HTML into a container object. I will start with a Panel AKA a DIV.
<asp:panel id="Panel1" runat="server" />
Now I am going to use jQuery to select my DIV and add some HTML to it.
$("#Panel1").html("<ul><li>Item One</li><li>Item 2</li></ul>");
Now I have shown you some snippets here and there, let me show you what my page actually looks like.
<!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 runat="server">
<title>jQuery Examples</title>
<link href="/style/jQuery.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript"> function pageLoad() { $('.myLabel').each(function() { $(this).append(this.id); }); $('.myLabel').css('color', '#FFFFFF').css('font-size', '30px'); $('#Label4').css('display', 'none'); $("#Panel1").html("<ul><li>Item One</li><li>Item 2</li></ul>"); } </script>
</head>
<body>
<form id= <form id="pageForm" runat="server">
<asp:scriptmanager id="pageScriptManager" runat="server"> <scripts> <asp:scriptreference path="/client/jquery-1.3.1.min.js" /> </scripts> </asp:scriptmanager>
<asp:label id="Label1" runat="server" cssclass="myLabel" text="This is " />
<br />
<asp:label id="Label2" runat="server" cssclass="myLabel" text="This is " />
<br />
<asp:label id="Label3" runat="server" cssclass="myLabel" text="This is " />
<br />
<asp:label id="Label4" runat="server" cssclass="myLabel" text="This is " />
<br />
<asp:panel id="Panel1" runat="server" />
<br />
</form>
</body>
</html>
Links
jQuery: http://www.jQuery.com/
Object Model: http://en.wikipedhttp://en.wikipedia.org/wiki/Document_Object_Model