September, 2010
jQuery, ASP.NET, and Interoperability
"Microsoft's announcement that it will contribute to the development of the jQuery JavaScript library and enhance interoperability between jQuery and ASP.NET caught a lot of developers and project managers off-guard, causing them to play catch-up in regards to what jQuery is and how it can play an important role in enterprise projects." From the web site: "jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development..."
"The idea behind jQuery is to simplify the task of getting a selected subset of DOM elements to work with. In other words, the jQuery library is mostly intended to run queries over the page DOM and execute operations over returned items. But the query engine behind the library goes far beyond the simple search capabilities of, say, document.getElementById (and related functions) that you find natively in the DOM.
The query capabilities of jQuery use the powerful CSS syntax which gives you a surprising level of expressivity. For example, you can select all elements that share a given CSS class, have a given combination of attribute values, appear in a fixed relative position in the DOM tree, and are in particular relationship with other elements. More importantly, you can add filter conditions and chain all queries together to be applied sequentially...
Nearly any jQuery script is characterized by one or more calls to the '$' function -- an alias for the root jQuery function. Any line of jQuery code is essentially a query with some optional action applied to the results. When you specify a query, you call the root function and pass it a selector plus an optional context. The selector indicates the query expression; the context indicates the portion of the DOM where to run the query. If no context is specified, the jQuery function looks for DOM elements within the entire page DOM. The jQuery root object performs some work on the provided arguments, runs the query, and then returns a new jQuery object that contains the results..."
http://www.drdobbs.com/windows/227300228
See also the jQuery web site: http://jquery.com/
jQuery
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.jQuery statement
jQuery commands begin with a call to the jQuery function, or its alias.
| Selector | action | parameters |
| jQuery('p') | .css | ('color', 'blue'); |
| $('p') | .css | ('color', 'blue'); |
Testing that the page is ready
$(document).ready(function() {
// do something
});
Selecting page elements
$('p') // all paragraph elements
$('div') // all div elements
$('h1') // all h1 elements
jQuery borrows the conventions from CSS for referring to id and class names.
$('#celebs') // target the element with the id "celebs"
$('.data') // target elements in the CSS class ".data"
$('table.data') // target the TABLE elements with the CSS class ".data"
Filtering page elements
$('#celebs tbody tr:even') // include just the even numbered rows of a table
$('#celebs tbody tr:odd') // include just the odd numbered rows of a table
$('#celebs tbody tr:first') // include just the first row of a table
$('#celebs tbody tr:last') // include just the last row of a table
Setting CSS properties
$('#celebs tbody tr:even').css('background-color', 'green');
// background color of even numbered rows is green
$('#celebs tbody tr:odd').css({
'background-color', 'green',
'color' , 'black',
'font-size' , 'large',
});
// several CSS settings for odd numbered rows
Event handlers
This example captures the click() function of the element with the id "myButton" and fires the function "mySpecialFunction()".
$('#myButton').click(function() {
$(this).mySpecialFunction();
});
Adding HTML elements
$('<p>This is a new paragraph</p>').insertAfter('#Banner');
// Create and inserts a paragraph after the id "Banner" element
// .insertBefore('#Banner') would insert the paragraph before the "Banner" element