JQuery: custom selectors

Besides supporting the CSS selectors (some of which we’ve already met here, and here), JQuery supports some custom filters:

• :button – returns any buttons present on a page (this means getting <input type=”button”>, <input type=”submit”> and <button> elements defined on the current context);
• :checkbox: selects checkbox elements;
• :file – returns all <input type=”file”> elements;
• :header: returns all header (hX) defined on the page;
• :hidden: returns all hidden fields;
• :image: returns all <input type=”image”> elements;
• :input: gets all input elements (notice that we’re not only speaking of <input> elements here; textareas and select items are also included in  the set wrapped by the JQuery object);
• :password: gets all  <input type=”password”> elements;
• :radio: gets all radio button <input type=”button”>) elements;
• :reset: returns all reset buttons defined on the page (<input type=”reset”> or <button type=”reset”> elements);
• :submit: returns all <input type=”submit”> elements;

As you can see, many of these selectors are form related (in fact, many of them are present on the docs under the forms selector title). If we join these with the next filters, we can get really cool results (as we’ll see in the examples we’ll be looking after the next list):

• :enabled – returns form elements that are enabled;
• :disabled – returns form elements that are disabled;
• :checked – returns checkboxes or radio buttons that are checked;
• :contains(text) – return elements that contains the specified text;
• :not(filter) – denies the passed in filter;
• :selected – returns the selected options of the dropdowns defined on the page.

These cool selectors and filters lets us manipulate form data in an easy way. Since we can combine the previous items with the other selectors we’ve met before, we have good support for some advanced scenarios. Let’s build a really simple form (notice that it doesn’t have any of the traditional labels) that will use to show how to apply the previous selectors and filters:

<form>
  <input type="text" id="name" name="name" />
  <br />
  <select>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <br />
  <input type="radio" value="1" name="opt" />
  <input type="radio" value="2" name="opt" />
  <br />
  <input type="checkbox" value="1" />
  <input type="checkbox" value="2" />
  <input type="button" id="bt" value="click me" />
</form>

Here are some examples:

• the expression $(“:input”) returns all input elements of the pervious forms. Notice that the select element is also included in the wrapped collection;
• if you’re only interested in the text input element, then you can simply use the expression $(“:text”);
• getting all the checkboxes can be accomplished through the expression $(“:checkbox”). The same happens with radio buttons, which can be recovered through the expression $(“:radio”). Notice that each of the previous expressions wrap all the elements of that type that have been defined on the current context (typically, this means the current HTML document);
• the selected checkboxes are easily recovered through the expression $(“:checkbox:checked”). Notice that you can use the same approach for getting the selected radio buttons (ex.: $(“:radio:checked”));
• You can also get the selected options through the expression $(“:selected”). Notice that this expression returns options, not select elements (keep this in mind if you try to combine these with other elements);
• You can also combine the previous approaches and filter them so that they’re only applied to enabled elements. For instance, the expression $(“:checkbox:enabled”) will only wrap the checkbox items that are enabled.

The :not filter is so interesting that I’ve opted for giving it more attention. This filter can be used for negating an existing filter. For instance, say that we want to get all non text inputs in our page. How can we do that? The expression $(“input:not(:text)”) does that for us. Notice that in this example I’m using the input selector (instead of the :input filter I’ve been using in the previous examples of this post), limiting the returned elements to HTML input elements.

The :not filter can only be applied to filter selectors. This means that you cannot apply them to some of the selectors we’ve met. For instance, you can’t write this expression $(“div :not(input:radio)”) because input is not a filter selector. Filter selectors match a set of elements by applying further restrictions to the existing set (other selectors – ex.: find selectors, which include the space selector, etc -  return other elements which are related with the current set. Ex.: the selector “div p” returns paragraphs contained inside divs. Notice that it’s not filtering the initial collection of divs! It’s simple returning a collection of ps that somehow are related with the initial div collection).

And I guess that’s all for this post. Keep tuned for more on JQuery.