Notes on jQuery
JavaScript Strengths
standard language running in all modern browsers
interacts with web page's DOM
rich event model
JavaScript Weaknesses
learning curve
differing DOM implementations
Basics
Open Source JavaScript library
included with VS 2010
to use reference files in scripts folder or hosted by a content delivery network
typically two versions of each file
[filename].js has high readability and contains comments
[filename].min.js contains no comments or unnecessary white space, variable and function names are shortened
include script with 
    <script src="[full script path]" type="text/javascript" ><\script >
include in master pge by providing absolute path from Url.Content method 
    <script [email protected]("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript" ><\script >
common pattern for jQuery syntax 
    $(Selector).Event(Action);
where
$ - represents jQuery object
Selector - jQuery selector function
Event - event fired by selected objects
Action - the code to run when the event is fired
selector always returns a collection of elements that match selection criteria
syntax similar to CSS selector
syntax can take several forms
enclosing tagname in quotation marks selects all elements of the given tag, ("div") selects all div elements
preceding string with # selects an element by its ID, ("#custIdLabel") selects all elements with the ID "custIdLabel"
preceding string with . selects all elements to which a given class has been applied, (".bodyText") selects all elements with the bodyText class
can select elements with elements by separating selectors with a space, ("headerDiv a") selects anchor tags with an element named headerDiv
Manipulating DOM Elements with jQuery
example 
    <script type="text/javascript" language="javascript" >
            $(document).ready(function(){
                $("#Img1").click(function(){
                    var newHeight = $(this).height() + 20;
                    $(this).height(newHeight);
                });
            });
    </script >
    ...
    <img id="Img1" height="50" src="..." alt="Click to grow" />
when the document's ready method is called an anonymous function binds Img1's onclick event to another anonymous function
the onclick anonymous function increase the size of the image by 20 pixels each time the image is clicked
Calling Server Code with jQuery
ASP.NET MVC provides simple way to expose RESTful services that can be called using jQuery
each Controller Action method returns an ActionResult, JsonResult is a subclass of ActionResult 
    public JsonResult GetAllDepartments()
    {
        var departmentBusiness = new DepartmentBusiness();
        List<DepartmentDTO> departments = departmentBusiness.GetAllDepartments();
        return Json(departments, JsonRequestBehavior.AllowGet);
    }
Json method is helper
second argument allows client to use HTTP GET, by default only HTTP POST is enabled
method can be called directly from a client-side jQuery script 
    <script type="text/javascript" language="javascript" >
            $(function(){
                var url = "/Employee/GetAllDepartments";
                $.getJSON(
                    url,
                    null,
                    function (data)
                    {
                        var options = "";
                        for (var i = 0; i < data.length; i++)
                        {
                            options += "<option value=" + data[i].DepartmentId + ">" + data[i].DepartmentName + "</option>";
                        }
                        $("#DepartmentSelect").append(options);
                    }); 
            });
    </script >
loads dropdown list control named DepartmentSelect when the page has loaded
more info at docs.jquery.com
n4jvp.com