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()

    1. $(document); - Activate jQuery for object
    2. $('#mydiv') - Element with ID "mydiv"
    3. $('p.first') - P tags with class first.
    4. $('p[title="Hello"]') - P tags with title "Hello"
    5. $('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");
    }

jQuery UI / Plug-ins

Widgits and Skinning capability

Links

© 2009 Jason Prothero, ProWorks Corporation
  • No more need for inline Javascript
    • BAD:
      <a onclick="doSomething()" href="#">Click!</a>
  • Initialize code in on load function and provide backup link
    • GOOD:
      <a id="doSomething" href="backuplink.html">Click!</a>
      $(function() {{
         $('a#doSomething').click(function(){
            // Do something here!
            alert('You did something, woo hoo!');
         });
      });