Eugene Area .NET Users Group - jQuery With ASP.NET Presentation

jQuery: What is it?

What is jQuery

Lightweight JavaScript library
Fast (http://cli.gs/urQzG7)
Cross-browser
Cross-platform
Enables separation of behavior markup
Easy AJAX
Animation and interation API (events/DOM manipulation)
UI/plugin framework
Fun!

jQuery and ASP.NET

Microsoft is Supporting jQuery

From Scott Guthrie's Blog (jQuery and Microsoft):
"I'm excited today to announce that Microsoft will be shipping jQuery with Visual Studio going forward. We will distribute the jQuery JavaScript library as-is, and will not be forking or changing the source from the main jQuery branch. The files will continue to use and ship under the existing jQuery MIT license.
We will also distribute intellisense-annotated versions that provide great Visual Studio intellisense and help-integration at design-time."

>> Get jQuery Intellisense for Visual Studio: jQuery Intellisense in VS 2008

Note: on external .js files you need to add this at the top:

/// <reference path="jquery-1.3.2.js" />

Selectors

The $() Function and Selectors

jQuery has way more options than getElementById()

$(document); - Activate jQuery for object
$('#mydiv') - Element with ID "mydiv"
$('p.first') - P tags with class first.
$('p[title="Hello"]') - P tags with title "Hello"
$('div[id$="Panel"]') - Div ids ending with "Panel" - See example below

and much more!
jQuery Selectors Test

My Panel - Hover Here!

$('div[id$="Panel"]').hover(function() { ... });

On Load Event

On load - Separate behavior and markup

$(function() {});

Fires after the page is finished loading.
The place to put your initialization code.

Events/Manipulation

Handling Events and Changing Properties

jQuery keeps event handling simple

$("p#test").click(function () {

   $(this).addClass("red");

});

$("p#test").hover(function () {

   $(this).css("fontWeight", "bold");

}, function () {

   $(this).css("fontWeight", "normal");

});

Simple paragraph with id test

Chaining

Chaining allows for advanced manipulation

Filtering

$("ul#sample li").css("color", "blue")

.filter(".optional")

.css("fontWeight", "bold");

First
Second
Third - class optional
Fourth - class optional

AJAX

AJAX is easy with jQuery

get()

$("#runAJAX").click(function(){

   $.get("ajaxTest.html", function(data){

      $("#ajaxDestination").append(data);

   });

});

ASP.NET AJAX and jQuery

jQuery plays nice with ASP.NET AJAX

Sys.WebForms.PageRequestManager add_endRequest()

function EndAspNetAjaxChangeRequestHandler(sender, args) {

   var cache = $(".aspNetAjaxLabel2");

   var oldColor = cache.css("color");

   cache.css("color", "red");

   cache.css("padding-left", "15px");

   cache.animate({ color: oldColor, paddingLeft: "1px" }, 1500, "swing");

}