Search Content

Articles Categories


Advertisements

Partners


Blog Tags

3d, accessibility, advertisement, ajax, animation, api, art, asp, attribute, browser, browsers, business, canvas, cms, conversions, creative, css, custom, design, dom, events, fade, firefox, font, food, form, fun, funny, gallery, game, graphic design, hack, handler, hosting considerations, html, image, info, interesting, introduction, issue, javascript, jquery, libraries, library, lightbox, logo, marketing, media, multimedia, navigations, nonscreen, object, overview, parody, photo, photos, php, pictures, pixar, pixels, position, posters, project management, projection, prototype, rotating, ruby, seo, simple, skyscraper, slogan, sport, ssi, support, system, tactics, tips, tootip, tree, tutorial, tutorials, usability, usablity, video, website, website design, website redesign,

Popular Articles

Futuristic Car Design Futuristic Car Design Jquery Mouse Events Jquery ajax utility function - $.ajax() Funny Signs Funny Signs Canvas API, 3D rendering with javascript Street Art Street Art Jquery Fade Animation - Fast Overview Jquery Filtering Methods Jquery DOM Manipulation Methods Post-Processing Form Data with onsubmit Website design - Asymmetrical Balance Javascript Canvas - Cool Libraries Creative Advertisements Creative Advertisements Funny Flash Game Funny Flash Game Javascript lightboxes

Custom jQuery selectors

Created at 2008-05-27 08:17:21 | 0  Comments ↓ |     Digg   Stumble It!    Del.icio.us   
Order Your Website Now

The CSS selectors give us a great deal of power and flexibility to match the desired DOM elements, but sometimes we’ll want to select elements based on a characteristic that the CSS specification did not anticipate.

For example, we might want to select all check boxes that have been checked by the user. Because trying to match by attribute will only check the initial state of the control as specified in the HTML markup, jQuery offers a custom selector, :checked, that filters the set of matched elements to those that are in checked state. For example, whereas the input selector selects all <input> elements, the input:checked narrows the search to only <input> elements that are checked.

The custom :checked selector works like a CSS attribute selector (such as [foo=bar]) in that both filter the matching set of elements by some criteria. Combining these custom selectors can be powerful; consider :radio:checked and :checkbox:checked.

As we discussed earlier, jQuery supports all of the CSS filter selectors and also a number of custom selectors defined by jQuery.


The jQuery custom filter selectors that give immense power to identify target elements

Selector Description
:animated Selects elements that are currently under animated control. Chapter 5 will cover animations and effects.
:button Selects any button (input[type=submit], input[type=reset], input[type=button], or button).
:checkbox Selects only check box elements (input[type=checkbox]).
:checked Selects only check boxes or radio buttons that are checked (supported by CSS).
:contains(foo) Selects only elements containing the text foo.
:disabled Selects only form elements that are disabled in the interface (supported by CSS).
:enabled Selects only form elements that are enabled in the interface (supported by CSS).
:file Selects all file elements (input[type=file]).
:header Selects only elements that are headers; for example:

through
elements.

:hidden Selects only elements that are hidden.
:image Selects form images (input[type=image]).
:input Selects only form elements (input, select, textarea, button).
:not(filter) Negates the specified filter.
:parent Selects only elements that have children (including text), but not empty elements.
:password Selects only password elements (input[type=password]).
:radio Selects only radio elements (input[type=radio]).
:reset Selects reset buttons (input[type=reset] or button[type=reset]).

The jQuery custom filter selectors that give immense power to identify target elements

Selector Description
:selected Selects option elements that are selected.
:submit Selects submit buttons (button[type=submit] or input[type=submit]).
:text Selects only text elements (input[type=text]).
:visible Selects only elements that are visible.

Many of the custom jQuery selectors are form-related, allowing us to specify, rather elegantly, a specific element type or state. We can combine selector filters too. For example, if we want to select only enabled and checked check boxes, we could use

:checkbox:checked:enabled

Try out as many of these filters as you like in the Selectors Lab until you feel that you have a good grasp of their operation.

These filters are an immensely useful addition to the set of selectors at our disposal, but what about the inverse of these filters?

Using the :not filter

If we want to negate a filter, let’s say to match any input element that’s not a check box, we use the :not filter, which is supported for CSS filters and works with custom jQuery selector filters too.

To select non-check box <input> elements, we use
input:not(:checkbox)

It’s important to recognize the distinction between filter selectors, which attenuate a matching set of elements by applying a further selection criteria to them (like the ones shown previously), and find selectors. Find selectors, such as the descendent selector (space character), the child selector (>), and the sibling selector (+), find other elements that bear some relationship to the ones already selected, rather than limiting the scope of the match with criteria applied to the matched elements.

We can apply the :not filter to filter selectors, but not to find selectors. The selector

div p:not(:hidden)
is a perfectly valid selector, but div :not(p:hidden) isn’t.


Order Your Website Now
Similar articles Tags
To be found, you need to say something Attribute selector issue fixed position for msie6 with no hacks
, , , ,



Add to Technorati Favorites Web Design Blogs - Blog Top Sites

0 Comments


No comments yet, be the first to comment!