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.
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:
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
To wrap the group of links nested inside any <p> element, one can use the following:
If you’d want to hide all <div> elements that possess the class notLongForThisWorld. The JQuery statement is as follows:
If you want to add a new class, removed, to each of the elements in addition to hiding them, the syntax would be:
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
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);
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.
That wraps up my Blog for this week!