Prototype And JQuery
Prototype and JQuery allow for selection of HTML elements using CSS selector rules. For generic CSS selectors, you need to use the $$() method in Prototype, while JQuery uses the $() method for all selection. In general, CSS selectors give you the power to select almost anything in an HTML document.
Introduction to CSS Selectors
As I said, CSS selectors give you the ability to select almost anything in an HTML document. These ideas come from the CSS specification, and apply to your stylesheets as well. However, you typically do not have very complicated expressions in a stylesheet. However, you could create some fairly complex expressions when looking at your HTML. DZone has a refcard for JQuery selectors that has a nice overview of this as well.
The simplest selection is using the id or class of an element. For an id, you prepend a “#” to the id text in order to select the element. Remember that an HTML id is supposed to be unique in the document. For a CSS class, you prepend a “.” to the class name. For CSS classes you can typically get a list or array of HTML elements. You must review the documentation for the library that you are currently using. Some libraries always return an array, others may return an array or an element if there is only one.
Just like CSS, you can combine the selectors with HTML elements. If you want all of the divs in a document for a class, say “sidebarWidget”, you create the following expression:
You can also chain these expressions together. If you wanted to collect all of the links in these sidebar widgets that have a class of “external”, you would use:
If you work with a lot of HTML forms, you can also take advantage of the selectors. You will see this often if you work with form fields and AJAX-based data transfer. Most of the time, you may be able to use whatever shortcut method your library contains to get the values of input fields. Sometimes, you need a little more control. Often this happens with radio buttons. So, this example looks for a radio button that is named “elementType” and is checked, using the Prototype $$ method:
This is a lot different than the other examples. First, there is the use of the pseudo-class :checked. This can be used like other CSS pseudo-classes, like :hover, :active, etc. The other pieces are attribute selectors, i.e. [type=”radio”] returns input elements of type radio. Obviously, the other attribute selector filters this list further by selecting elements with a name of “elementType”. The array reference is needed because the Prototype $$ method always returns an array.
As you can see, the spacing used in these expressions is very important. When you have a space like the previous examples, you are chaining selector expressions together, or providing a selection context. When there is no spacing, you are creating one big selector.
Admittedly, this is not a thorough introduction, but if you look at your library documentation, the DZone documentation or any CSS tutorial, you will find examples of almost any CSS selector you can think of. You can also start small with a simple selector and slowly add more rules to create something more complex.