jQuery foundamentals

Selector

Selector in jQuery works very much the same as that of CSS in regards of what you should type to select an element. In CSS, if a p a means selecting the element(s) under the

element. In jQuery, issuing the statement

$("p a")

has the same effect as that of CSS.

The syntax $( ) is an alias for the jQuery( ) function and acts to make a function call to jQuery core that will return a special JavaScript object containing an array of DOM elements, in the order in which they are defined within the document, that match the selector. $( ) comes with a huge set of methods that can be applied on the selected elements.

This kind of construct is called a wrapper because it wraps a set of elements and provides further functions. In jQuery, a wrapper is referred as jQuery wrapper or a wrapped set, and the methods associated with the wrapper function are called the wrapper methods.

There are some characteristics of jQuery wrappers:

• Most wrapper methods return the same set of elements that they have operated on for further operations. E.g. $("div.dummy").hide(); returns all found
  elements classed “dummy” for further manipulation after jQuery has hide(); them.
• The fact that a wrapper method normally returns the same set of elements for further operations means that a jQuery user can append methods endlessly to the same jQuery wrapper (i.e. a $("div.something")) to apply endless operations. This kind of function call is dubbed a jQuery chain. E.g. $("div.dummy").hide().addClass("removed");
• Although referenced as $("div.dummy"), a jQuery wrapper is still essentially a JavaScript object (a highly sophisticated one) and therefore can be treated as an array when necessary. E.g. the followings have the same effect:
  $("#someElement").html("Text here");
$("#someElement")[0].innerHTML = "Text here";

Advertisement