Tuesday, October 26, 2010

JQuery

JQuery


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

$(document).ready(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']")
-----------------------------------



       //Get
            .val()
            .html()
            .text()

       //Set
            .val(1)
            .html(1)
            .text(1)

       //Get
            .attr("Class")
            .css("Height")

       //Set
            .attr("Class", "clsUserInfo")
            .css("Color", "#CCC")



------------------------------------

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);
}
-----------------------------------

No comments:

Post a Comment