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