jQuery Basics for ASP.NET Applications
The basics must start with the differentiation between a jQuery method and a function. A jQuery method processes a wrapped set of selected elements, and a function performs an operation on a wrapped set or an element on the HTML or ASPX page.
jQuery code starts with the jQuery factory function "jQuery" or the dollar sign symbol - jquery() or simply $(). The next part of a jQuery function is some type of selector to specify an element or a group of elements to be manipulated on some manner. The six main types of selectors are:
Tag - Tag selects all the html elements in a document that use the tag selector name. E.g., $('div') is a div element tag selector.
ID - The id selector manipulates the DOM HTML element by it's ID property. E.g., $('#txtname') selects the textbox with the "txtname" ID.
Class - The CSS class selector specifites the DOM elements that have a specific CSS class name. E.g., $('.dirty') selects the element or elements that have the '.dirty' CSS class designation.
Form Selectors - This selector utilizes the element type to manipulate DOM element. E.g., $(':input') specifies all the elements on an HTML or ASPX page that are input controls like textboxes, etc.
Attribute Selectors - These are a subset of CSS class selectors that allow the programmer to desinate elements by it's HTML property. E.g., $('img[alt]') selects an 'img' tag's 'alt' attribute for manipulation.
Custom Selectors - These selectors are specific to jQuery, and they allow a programmer to specify a certain element from a list of elements with similar selector designations. This is a very complicated section of the jQuery library, and this topic will be discussed in detail later.
jQuery uses the .filter(..) method to select and manipulate a wrapped set of elements by taking a function as its argument. For example, $('div').filter(function() selects the "div" elements on a document and applies the function following the filter. The filter could also apply a selector to further refine the specific wrapped set with $('div').filter('.brown') to select only those div's with the CSS class '.brown' designation.
Chaining is another feature of jQuery that allows the programmer to produce very compact code. For example, $('div').filter('.brown').addClass('.highlight') filters the "div" wrapped set of class "brown" and applies a CSS class "highlight" to them.
Often the programmer needs to refer to the object within a method that is being manipulated. jQuery uses "this" to refer to the object on which the currently executing method is processing. For example,
$("div_top").bind("mouseenter mouseleave",
function(e) {
$(this).toggleClass("hover");
}
);
The "this" in the above function within the method refers to the "div_top" selected for the operation.
The .NET programmer must have a good grasp on Cascading Style Sheets (CSS) for a thorough understanding of jQuery. The W3C Schools website offers excellent tutorials and references on CSS. An example of using a CSS class to change the appearance or manipulate DOM elements:
<style type="text/css"> input.dirty { background-color: #FFB6C1 ; color: #000000 ;}
</style>
The above CSS ".dirty" class would change the properties of an input selection to a pink background with a black font. In order to do this, jQuery code could look like:
$(document).ready(function(){ $(":input").change(function(){ $( this ).addClass( "dirty" ); });
});
When the contents of any of the ":input" elements (e.g., a textbox) on a form are changed, the "dirty" class is applied to the element, and the control changes it's appearance as specified by the CSS class.