Introduction:
JQuery focuses on retrieving elements from HTML pages and performing operations upon them. Very similarly to CSS, the power of selectors that describe groups of elements by their type, attributes or placement within a document, JQuery is able to use this knowledge and degree of power to vastly simplify Javascript.JQuery places a high priority on ensuring code works consistently across all major browsers. JQuery has a simple but powerful built-in method for extending its functionality via plugins.
JQuery Wrapper:
When CSS was introduced to web technologies to separate design from content, a way was needed to refer to groups of page elements from external style sheets. The method developed was through selectors, which concisely represent elements based upon their type attributes or position within an HTML document.
With XML, the use of XPath enables one to select elements within an XML document. CSS selectors represent an equally powerful concept, but is tuned for use with HTML pages, and a bit more concise, for example:
p a
Refers to the group of all links (<a> elements) that are nested inside a <p> element. JQuery makes use of the same selectors. To collect a group of elements, pass in the selector to the JQuery function using simple syntax
$(selector)
Or
JQuery(selector)
To wrap the group of links nested inside any <p> element, one can use the following:
$(“p a”)
The $() function an alias for JQuery() function returns a special JavaScript object containing an array of DOM elements, in the order in which they’re defined within a document, that match the selector. This object poses a large number of useful predefined methods that can act on the collected group of elements. This is in programming parlance, known as a wrapper because it wraps the collected elements with extended functionality.
If you’d want to hide all <div> elements that possess the class notLongForThisWorld. The JQuery statement is as follows:
$(“div.notLongForthisWorld”).hide();
If you want to add a new class, removed, to each of the elements in addition to hiding them, the syntax would be:
$(“div.notLongForThisWorld”).hide().addClass(“removed”);
The JQuery chains can continue indefinitely. As things get progressively more complicated, making use of JQuery’s chainability will continue to reduce the lines of code necessary to produce the results needed. JQuery also supports more advanced selectors – defined as part of the CSS specification – and even some custom selectors. Somes examples include:
$(“p:even”) – Selects all even <p> elements.
$(“tr:nth-child(1)”) – Selects the first row of each table.
$(“body > div”) – Selects direct <div> children of <body>.
$(“a[href$= ‘pdf’]”) – Selects links to PDF files.
$(“body > div:has(a)”) – Selects direct <div> children of <body> containing links
Utility Functions:
Even though wrapping elements to be operated upon is one of the most frequent uses of JQuery’s $() function, it’s not the only duty which it’s assigned. One of the additional duties is to serve as the namespace prefix for a handful of general-purpose utility functions. For example:
var trimmed = $.trimmed(someString);
It’s important to remember that $ is an identifier like any other in Javascript. Writing a call to the same function using the JQuery identifier, rather than the $ alias, may look a little less odd:
var trimmed = JQuery.trim(someString);
Here it is clear that the trim() function is merely namespaced by JQuery or its $ alias.
Even though these elements are called utility functions in JQuery, it’s clear that they’re actually methods of the $() function.
http://jquery.com
That wraps up my Blog for this week!
Great post Donovan! Good introduction to jQuery.
ReplyDelete