What is jQuery, and why should I use it
Quite many .NET developers avoid using client side scripting and often use post backs to do simple updates that could just as well be done on the client. Using a post back where client scripting would have worked just as well is a real bad thing. It makes the web app experience much slower for the end user since the post back needs to send data to the server, it also bogs down the server with unnecessary requests.
Historically javascript has been quite painful to use due to browser differences that forced us developers to use ugly browser sniffing and create duplicate code targeting different vendors.
But things are different today!
jQuery is a small javascript library that makes creating cross browser javascript a breeze. It is an open source frame work that due to it’s simpleness and extensibility has drawn a great following.
Maybe you’re thinking now: “This sounds great, but my project manager would never allow me to use some open source library in my project…” But here’s the thing, Microsoft are officially supporting jQuery and will actually ship it with ASP.NET 4.0!
So convincing your project manager that it’s risk free to include it in your project shouldn’t be too hard. Just look at the ASP.NET demos from PDC ‘08, all of them used jQuery some way or another.
Starting out with jQuery
So now you should go to www.jquery.com and download it. Get the minimized version for production, create a web application in Visual Studio and save the .js file in the web application directory.
We’ll start out with a really simple example, showing and hiding a div.
sample1.htm
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml" >
3: <head>
4: <title>jQuery samples 1</title>
5: <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
6: <style type="text/css">
7: .hiddenStuff
8: {
9: display: none; border: solid 2px #303030; background-color: #ebebeb; padding: 0.5em; width: 200px;
10: }
11: </style>
12: </head>
13: <body>
14: <a href="javascript: showIt();">Show it!</a>
15: <a href="javascript: hideIt();">Hide it!</a>
16: <a href="javascript: toggleIt();">Toggle it!</a>
17: <div class="hiddenStuff" style="display: none;">
18: This content is hidden!
19: </div>
20: <script type="text/javascript">
21: function showIt() {
22: $(".hiddenStuff").show("slow");
23: }
24: function hideIt() {
25: $(".hiddenStuff").hide("slow");
26: }
27: function toggleIt() {
28: $(".hiddenStuff").slideToggle("slow");
29: }
30: </script>
31: </body>
32: </html>
This really simple example contains 3 links that shows, hides or toggles the visibility of the div.
If you take a look at the javascript functions you see how we use jQuery, with $().
If you take a look at the string inside of the parenthesis and the look at the class attribute of the div, you might recognize the string as css selector. This is actually how you make jQuery fetch DOM elements.
Here are some examples how to select DOM elements.
$(“.className”) – selects all DOM elements with the specified css class
$(“#elementId”) – selects the DOM element with that id
$(“tagName”) – selects all DOM elements with that tag
$(“#elementId .className”) – selects all DOM elements with the css class that are descendants of the element with the id
Then you also have a myriad of ways to filter the results to get exactly the elements you want to work with.
When you selector find several elements, the statements you run on the jQuery object will run on all the DOM elements found. You can try and add some more divs with the same class “hiddenStuff” to the sample page. You’ll find that when you click the links all of them will be shown/hidden.
Updating an element
To change the text of an element you use the method text(newText). To retrieve the text contents of an element you use the method with no parameter, text().
sample2.htm
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3: <html xmlns="http://www.w3.org/1999/xhtml" >
4: <head>
5: <title>jQuery samples 2</title>
6: <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
7: </head>
8: <body>
9: <a href="javascript: updateIt();">Click me!</a>
10: <span id="update">Waiting for click...</span>
11: <script type="text/javascript">
12: function updateIt() {
13: $("#update").text("The link was clicked! " + new Date().toTimeString());
14: }
15: </script>
16: </body>
17: </html>
Chaning operations
Another great feature that makes jQuery code really small and also (most of the time) easier to read is that is allows chaining of function calls.
Every jQuery method returns a jQuery object. This makes it possible to call another jQuery method on the return value, this is what we call chaining the function calls.
So if we, in the previous sample for instance, would also like to change the appearance of the element when we changed the text would could write:
1: $("#update")
2: .text("The link was clicked! " + new Date().toTimeString())
3: .css("background-color", "yellow")
4: .css("color", "blue");
What this does is really easy to see, it changes the background and foreground color as well as changing the text.
Styling alternate table rows
This is a great example of the power of jQuery.
Often when you have created a table with say a repeater you want to have a different background color of every other row. So naturally you use the AlternateItemTemplate and set a different css class on the tr tag. But then you have to duplicate all the markup in the ItemTemplate, which is not a great thing since now you have to make sure that you update both templates for every change you make.
jQuery makes alternate table styling extremely easy by using the power of selectors.
sample3.htm
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml" >
3: <head>
4: <title>jQuery samples 3</title>
5: <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
6: </head>
7: <body>
8: <table>
9: <tr><td>the</td><td>brown</td></tr>
10: <tr><td>brown</td><td>fox</td></tr>
11: <tr><td>jumped</td><td>over</td></tr>
12: <tr><td>the</td><td>fence</td></tr>
13: </table>
14: <script type="text/javascript">
15: $("tr:odd td").css("background-color", "#ebebeb");
16: </script>
17: </body>
18: </html>
As you can see we only need one line of code to style the table
$("tr:odd td").css("background-color", "#ebebeb");
The :odd that comes after the tr selector is a filter. It selects every other element that was found. We then select every td element that was found in every matched row and we change the background color. Nice!
I hope that this has made you interested in jQuery. I can recommend that you go to http://docs.jquery.com for more samples and information about the other methods in jQuery.
Next time I’ll show some examples on how to do event handling in jQuery. Event handling has really been a pain before, but jQuery makes it extremely easy and very powerful.
jQuery samples - part 1.zip (19,42 kb)