Monday, July 12, 2010

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

No comments: