JQuery

Ready
-----------------------------------
$(document).read(function(){
    alert('hi');
})

$(document).read(FormSetting)
Function FormSetting()
{
    alert('hi');
}
-----------------------------------

Selection Criteria
-----------------------------------
=> ID
   $("#txtUserName")

=> Control
   $("input")
   $("div")

=> Inner Control
   $("div div input")

=> Class
   $(".button")

=> Selection on standard attributes
   $("input[type='button']") 

=> Selection on custome attributes
   <input type="text" IsGridText="True" />
   $("input[IsGridText ='True']")
-----------------------------------

Functions
-----------------------------------
=> VAL()
   Var strUserName = $("#txtUserName).val();
   $("#txtUserName).val("jsd24");

=> HTML()
   Var strInnerHtml = $("#divUserInfo).html();
   $("#divUserInfo).html("<a href='#'     OnClick='Alert(1)'>Click Me</a>");

=> Attr ( attribute)
   var IsGridText = $("#txtUserName").attr("IsGridText");
   $("#txtUserName").attr("IsGridText", "False");
   $("#txtUserName").attr({IsGridText:'True', IsSelected:'True'});

=> Css (style sheet)
   var color = $("#txtUserName").css("color");
   $("#txtUserName").css("color", "red");
   $("#txtUserName").css({'width': '100px', 'height':'25px'});
 
=> Each
   $("input").each(function() { $(this).val("jd"); })

=> addClass()
   $("input[type='button']").addClass("button");

=> removeClass()
   $("input[type='button']").removeClass("button");

=> haseClass()
   $("#txtUserName").haseClass("UserName");
   $("#txtUserName").haseClass("EmailID");

=> toggleClass()
   $("#divUserInfo").toggleClass("Content");

=> height()
   $("#divUserInfo").height();

=> innerHeight()
   $("#divUserInfo").innerHeight();

=> outerHeight()
   $("#divUserInfo").outerHeight();

=> width()
   $("#divUserInfo").width();

=> innerWidth ()
   $("#divUserInfo").innerWidth ();

=> outerWidth ()
   $("#divUserInfo").outerWidth ();

=> fadeIn()
   $("#divUserInfo").fadeIn();

=> fadeOut()
   $("#divUserInfo").fadeOut ();

=> hide()
   $("#divUserInfo").hide();

=> show()
   $("#divUserInfo").show();

=> appendTo    
$("Hello").appendTo("#divUserInfo");

=> clone
$("#divUserInfo").clone().appendTo("#divUserInfo1");

=> not
$("#ddlProductList option").not("[value*='Computer']").clone().appendTo("#ddlFilterList");
-----------------------------------

Multiple Action in single line
-----------------------------------
$("#txtUserName").val("JSD24").css("color", "green").attr("IsSelected", "true")
-----------------------------------

Events
-----------------------------------
=> change()
   $("#txtUserName").change(function(){});
   
=> click()
   $("a").click(function(){});

=> dblclick()
   $("a").dblclick(function(){});

=> focus()
   $("#txtUserName").focus();

=> focusIn()
   $("#txtUserName").focusIn(function());

=> focusOut()
   $("#txtUserName").focusOut(function());

=> hover()
   $("#txtUserName").hover(function());

=> keydown()
   $("#txtUserName").keydown(function());

=> keyup()
   $("#txtUserName").keyup(function());

=> keypress ()
   $("#txtUserName").keypress(function());

=> mousedown()
   $("#txtUserName").mousedown(function());

=> mouseup()
   $("#txtUserName").mouseup(function());

=> mousemove()
   $("#txtUserName").mousemove(function());
-----------------------------------

AJAX / JSON
-----------------------------------
$.ajax({
        url : "test.html",
        type:"GET" ,         //Post
        data : { id : "2", pid : "1" },
        context: document.body,
        datatype : "html"        //JSON, XML
        success : handleResponse,
        error : handleError
});

Function handleResponse(data)
{
    alert(data);
}

Function handleError(msg)
{
    alert(msg);
}
-----------------------------------

Using Enum in Javascript

<script type="text/javascript" language="javascript">
    var enumTabInfo = { 
                        BasicInformation: 1, 
                        SkillDetail: 2, 
                        EducationDetail: 3, 
                        ProjectDetail: 4, 
                        CompanyDetail: 5 
                      }
    
    $(document).ready(function(){ 
        $("div.UserTab").Hide();
        
        var intTabNo = Number($("#<%= hdnCurrentTab.ClientID %>").val());

        switch (intTabNo) {
            case enumPageStep.BasicInformation:
                $("#divBasicInformation").show();
                break;

            case enumPageStep.SkillDetail:
                $("#divSkillDetail").show();
                break;

            case enumPageStep.EducationDetail:
                $("#divEducationDetail").show();
                break;

            case enumPageStep.ProjectDetail:
                $("#divProjectDetail").show();
                break;

            case enumPageStep.CompanyDetail:
                $("#divCompanyDetail").show();
                break;
        }
    });
</script>

JSON Calling from MVC Page

HTML:

<%= Html.DropDownList("", new SelectList(ViewData["States"] as IEnumerable, "Id", "Name", Model))%>
<%= Html.DropDownList("", new SelectList(ViewData["Cities"] as IEnumerable, "Id", "Name", Model))%>

Javascript:

<script type="text/javascript" language="javascript">
  $(document).ready(function() {
      $("select[id='StateId']").change(function() {
          $.ajax({
              type: "POST",
              url: "/Supplier/StateCityInfo/",
              data: { StateId: $(this).val() },
              dataType: "json",
              error: function(xhr, status, error) {
                  // you may need to handle me if the json is invalid
                  // this is the ajax object
                  alert(status);
              },
              success: function(data) {
                  $("#CityId").empty();
                  $.each(data, function(key, City) {
                      $("#CityId").append($("<option></option>").val(City.Id).html(City.Name));
                  });
              }
          });
      })
  })
</script>

Supplier Controller:

public class SupplierController : Controller
{
  [AcceptVerbs("POST")]
  public ActionResult StateCityInfo(int StateId)
  {
      return Json(this.AllCity(StateId));
  }
}

JSON Calling from ASP.Net

HTML:

<body>
    <form id="form1" runat="server">
    No Of Doors :
    <input id="txtNoOfDoor" type="text" /><br />
    <input type="button" id="Button1" value="Get All Cars" />
    <input type="button" id="Button2" value="Get Car By No Of Door" />
    <div id="output">
    </div>
    </form>
</body>

Javascript:

<script type="text/javascript" language="javascript">
        $(function() {
            $('#Button1').click(getCars);
            $('#Button2').click(getCarsByDoors);
        });

        function getCars() {
            $.ajax({
                type: "POST",
                url: "CarService.asmx/GetAllCars",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(response) {
                    var cars = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
                    $('#output').empty();
                    for (var i = 0; i < cars.length; i++) {
                        $('#output').append('<p><strong>' + cars[i].Make + ' ' +
                                cars[i].Model + '</strong><br /> Year: ' +
                                cars[i].Year + '<br />Doors: ' +
                                cars[i].Doors + '<br />Colour: ' +
                                cars[i].Colour + '<br />Price: £' +
                                cars[i].Price + '</p>');
                    }
                },

                failure: function(msg) {

                    $('#output').text(msg);

                }
            });
        }

        function getCarsByDoors() {
            var data = '{doors: ' + $('#txtNoOfDoor').val() + ', Name : "Jayesh" }';
            $.ajax({
                type: "POST",
                url: "CarService.asmx/GetCarsByDoors",
                data: data,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(response) {
                    var cars = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
                    $('#output').empty();
                    for (var i = 0; i < cars.length; i++) {
                        $('#output').append('<p><strong>' + cars[i].Make + ' ' +
                                cars[i].Model + '</strong><br /> Year: ' +
                                cars[i].Year + '<br />Doors: ' +
                                cars[i].Doors + '<br />Colour: ' +
                                cars[i].Colour + '<br />Price: £' +
                                cars[i].Price + '</p>');
                    }
                },

                failure: function(msg) {

                    $('#output').text(msg);

                }
            });
        }

</script>

CarService.asmx:

/// <summary>
/// Summary description for CarService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
// [System.Web.Script.Services.ScriptService]
[ScriptService]
public class CarService : System.Web.Services.WebService
{
    List<Car> objCarList = new List<Car>{
                                    new Car{Make="Audi",Model="A4",Year=1995,Doors=5,Colour="Red",Price=2995f},
                                    new Car{Make="Ford",Model="Focus",Year=2002,Doors=5,Colour="Black",Price=3250f},
                                    new Car{Make="BMW",Model="5 Series",Year=2006,Doors=4,Colour="Grey",Price=24950f},
                                    new Car{Make="Renault",Model="Laguna",Year=2000,Doors=5,Colour="Red",Price=3995f},
                                    new Car{Make="Toyota",Model="Previa",Year=1998,Doors=5,Colour="Green",Price=2695f},
                                    new Car{Make="Mini",Model="Cooper",Year=2005,Doors=2,Colour="Grey",Price=9850f},
                                    new Car{Make="Mazda",Model="MX 5",Year=2003,Doors=2,Colour="Silver",Price=6995f},
                                    new Car{Make="Ford",Model="Fiesta",Year=2004,Doors=3,Colour="Red",Price=3759f},
                                    new Car{Make="Honda",Model="Accord",Year=1997,Doors=4,Colour="Silver",Price=1995f}
                                };

    [WebMethod]
    public List<Car> GetAllCars()
    {
        return objCarList;
    }

    [WebMethod]
    public List<Car> GetCarsByDoors(int doors, string Name)
    {
        var query = from c in objCarList
                    where c.Doors == doors
                    select c;

        return query.ToList();
    }

    [WebMethod]
    public string GetAllCarsInString()
    {
        JavaScriptSerializer objJS = new JavaScriptSerializer();
        return objJS.Serialize(objCarList);
    }
}

Car Class:

public class Car
{
    public string Make { get; set; }
    public string Model { get; set; }
    public int Year { get; set; }
    public int Doors { get; set; }
    public string Colour { get; set; }
    public float Price { get; set; }
}