More info and samples on: www.devarchweb.net
How to include jQuery in page// include locally
<script src="scripts/jquery.min.js"></script>
// refer to Microsoft CDN
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
More info and samples on: www.devarchweb.net
What is $ $ is alias for jQuery()More info and samples on: www.devarchweb.net
Run code after page gets loaded Document ready function gets called when browser completes loading the page into DOM.<script>
// jQuery(document).ready( function() { // old syntax (without alias)
// $(document).ready( function() { // old syntax
$(function() {
// do something
});
</script>
More info and samples on: www.devarchweb.net
What are different ways to call jQuery$("table tr:odd").css("color", "blue"); // selector
$(this).css("color", "blue"); // DOM element
$("<a src="mypage.html>link</a>").appendto("body); // HTML string
$(function() // callback
{
// do something here
}
);
More info and samples on: www.devarchweb.net
How to access and modify DOM elements and attributes An html element marked with id tag<div id="myId">Some text</div>
$("#myId").text("my text");
$("#myId").append("my text");
$("#myId").html("my text"); // inner html
$("#myId").val("my text"); // e.g. selected value from a list - always string
$("#myId").attr("alt", "banner");
$("#myId").removeAttr("alt");
More info and samples on: www.devarchweb.net
Change style attributes, detect, add, and remove class.css("color", "blue")
.hasClass("myClassName")
.addClass("myClassName yourClassName")
.toggleClass("newClassName") // replace class
.removeClass("myClassName")
More info and samples on: www.devarchweb.net
Elements geometry: Set window width and elements position relative to the document and parent$(window).width();
$("#myid").position().left; // relative to document
$("#myid").offset().left; // relative to parent
More info and samples on: www.devarchweb.net
Add, update, remove elements. Insert item to dropdown$("#myid").insertAfter("<br/>"); // after() works the same
$("#myid").replaceWith(" an html text ");
$("#myid").remove(); // removes itself
$("#myDropDown").append("row 1")
More info and samples on: www.devarchweb.net
Setting visibility of elements$("#myId").show();
$("#myId").hide();
$("#myId").attr("disabled", true);
More info and samples on: www.devarchweb.net
Select elements that use .myclass style CSS selectors can be passed to jQuery() function$(" .myclass") // all elements that are assigned to .myclass - be aware of space before .
More info and samples on: www.devarchweb.net
Example of chaining Using chaining speeds up execution.$(table tr:odd).css("color", "blue").height(20);
More info and samples on: www.devarchweb.net
For each$("table tr").each(
function(index, value)
{
$(this).css(...)
}
);
More info and samples on: www.devarchweb.net
Register event handler (for a button)$(document).ready( function() {
$("#button").click( function() {
// do something when user clicks the button
});
});
More info and samples on: www.devarchweb.net
Attach (meta) data to element$("#myid").data("key", "value");
var $("#myid").data("key");
More info and samples on: www.devarchweb.net
How to use is()if $("#myCheckBox").is(":checked") {... }
More info and samples on: www.devarchweb.net
Avoiding $ conflicts If another JavaScript library uses $ as alias, you have 2 to option to still use jQueryjQuery.noConflict(); // disassociate jQuery alias $.
jQuery().each(....) // use jQuery() then
jQuery( function($)
{
// you can use $ here as
}
);
More info and samples on: www.devarchweb.net
Parsing XML jQuery.comvar xmlText = "<people><person><firstName>John</firstName></person></people>";
var xmlDoc = $.parseXML( xmlText );
var $xml = $( xmlDoc );
var $firstName = $xml.find( "firstName" );
$( "#label" ).append( $firstName.text() );
More info and samples on: www.devarchweb.net
Write code that will slide and fade elements$("#laleb1").slideUp().slideDown();
$("#label2").fadeOut().fadeIn();
More info and samples on: www.devarchweb.net
Load script dynamically$.getScript("mycode.js"); // load code when it is needed
More info and samples on: www.devarchweb.net
AJAX call .ajax() is generic function that can be used to make htpp call (both get and post).$.ajax({
url: "http://localhost/asp.asp",
context: document.body
}).done( function(data, status) {
$("#lblAjax").append("Data: " + data + " Status: " + status);
});
More info and samples on: www.devarchweb.net
GET with AJAX get() Executes http GET call$.get(
"http://localhost/asp.asp",
function(data, status){ $("#lblGet").append("Data: " + data + " Status: " + status); }
);
More info and samples on: www.devarchweb.net
GET JSON with AJAX getJSON() returns JavaScript objects that may represent business data$.getJSON("http://localhost/personData.html",
function(data){ // data is JavaScript object
alert(data.msg);
}
);
More info and samples on: www.devarchweb.net
Update element with AJAX load() allows to make a GET AJAX call and assign either TEXT or HTML to a DOM element$("#lblLoad").load("http://localhost/asp.asp");
More info and samples on: www.devarchweb.net
Post data with AJAX post() allows to post data to the web server$.post(
"http://localhost/asp_post.asp",
{ id:"1", name:"John" },
function(data, status){ $("#lblPost").append("Data: " + data + " Status: " + status); }
);
More info and samples on: www.devarchweb.net
Apply datatable to static table in html<script src="scripts/jquery-1.6.2.min.js"></script>
<script src="scripts/jquery.dataTables.js"></script>
<script>
$(document).ready(function(){
$('#people').dataTable();
});
</script>
</head>
<body>
<table id="people">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>IT</td>
</tr>
...
</tbody>
</table>
More info and samples on: www.devarchweb.net
Create datatable dynamically<script src="scripts/jquery-1.6.2.min.js"></script>
<script src="scripts/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
/* content of http://localhost/peopleJSON.txt
{
"aaData": [
[ "1-", "John", "IT" ],
[ "2", "Paul", "FI" ],
[ "3", "<a href='george.txt'>George</a>", "IT" ]
],
"aoColumns": [
{ "sTitle": "ID-" },
{ "sTitle": "Name" },
{ "sTitle": "Department" }
]
}
*/
$.get(
"http://localhost/peopleJSON.txt",
function (data, status) {
$("#output").text(data);
$('#people').dataTable( JSON.parse(data) );
}
);
} );
</script>
...
<table id="people"></table>
More info and samples on: www.devarchweb.net
jQuery.dataTabl with row selection$(document).ready(function() {
$('#people').dataTable();
// $("#people tbody tr").click( function( e ) { ! does NOT work with dynamically created rows
$("#people").on( 'click', 'tr', function( e ) {
if (this.firstChild.nodeName != 'TH') {
if ( $(this).hasClass('row_selected') ) {
$(this).removeClass('row_selected'); // unselect
}
else {
$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
// get selected cell text
var td = this.children[1];
alert(td.innerText + " has been selected");
}
}
});
} );
More info and samples on: www.devarchweb.net
Reload jQuery.dataTable data $('#tableDiv').empty();
$('#tableDiv').append("<table id=\"myDataTable\"></table>");
More info and samples on: www.devarchweb.net
Create Kendo datePicker<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.web.min.js"></script>
<input id="datepicker" onchange="alert(this.value)" />
$(function() {
$("#datepicker").kendoDatePicker();
});
More info and samples on: www.devarchweb.net
Create Kendo Grid with static data that is sortable and pageable<table id="grid">
<thead>
<tr>
<th data-field="firstName">First Name</th>
<th data-field="lastName">Last Name</th>
<th data-field="department">Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>First</td>
<td>IT</td>
</tr>
</tbody>
</table>
$("#grid").kendoGrid({
groupable: true,
scrollable: true,
sortable: true,
pageable: true,
selectable: "row"
});
More info and samples on: www.devarchweb.net
Create Kendo Grid with dynamic data<div id="grid"></div>
var columns =[
{ field: "firstName" },
{ field: "lastName" },
{ field: "department" }
];
var people =
[
{ firstName: "John", lastName: "First", department: "IT" },
{ firstName: "Paul", lastName: "Second", department: "Finance" },
];
$("#grid").kendoGrid({
columns: columns,
dataSource: people
});
More info and samples on: www.devarchweb.net
Handle selected row in Grid enable selection $("#grid").kendoGrid({
selectable: true
});
function buttonOnClick()
{
var grid = $("#grid").data("kendoGrid");
var selectedItem = grid.dataItem(grid.select());
if (selectedItem != null)
alert(selectedItem.firstName);
else
alert("No row has been selected")
}