Learn jQuery-3 : Filters

Posted: December 14, 2010 in jQuery

This lesson will cover what filters are and what they do. For all users who read this well after this lesson was published, head over to http://api.jquery.com to view a full list of all filters that I may not mention in this lesson because this lesson was published when jQuery was at version 1.4.

1. Filter
Filters are nearly the same as selectors. But one big difference between them is that selectors come from CSS and filters are custommed made by the jQuery creators. Some filters however do the same as some selectors. Filters are just are sometimes easier to use. For more advanced Javascript developers, if you want to use all the selectors and filters that jQuery offers but don’t want to use the jQuery library try add Sizzle to your website. More information on Sizzle can be found at http://sizzlejs.com/.

Another good thing to know is that filters are more targeted for html forms (<form>). As you will see later on, these filters will probably be usually used when processing html forms.

:animated = This will selects all elements that are currently being animated. Animation (.animate()) will be covered in another lesson

:button = This will select all the buttons. This includes the element <button> but also <input type=”submit” />, <input type=”reset” /> and <input type=”button” />

:checkbox =  This will select checkboxes. <input type=”checkbox” />

:checked = This will select checkboxes and radio buttons that are checked

:contain(‘developphp’) = This selects elements containing the text developphp

:disabled = This selects all elements that are disabled. A disabled element is an element that contains the attribute disabled. For example <input type=”submit” disabled=”disabled” />

:enabled = Selects all elements that are enabled

:file = This will select all <input type=”file” />

:header = This will select all header tags. Example of header tags are <h1>, <h2>, <h3>

:hidden = Select all elements that are hidden. This will select elements that were hidden by jQuery (.hide()) or by CSS (display: none)

:image = This selects all <input type=”image” />. When would you use <input type=”image” />? You often see this with custom search bars where you click on a magnifying glass to search

:not(filter) = This will select all elements that don’t have a certain filter. So if an image is hidden and we wanted to select it we could write


:parent = Selects all elements that don’t have any children. For more information about children and parent go to the selectors lesson

:password = Selects all <input type=”password” />

:radio = Selects all radio buttons. <input type=”radio” />

:reset = Selects all reset buttons. <input type=”reset” />

:selected = Selects options that are currently selected. Options are options in a dropdown

:submit = Selects <input type=”submit” />

:text = This will select all <input type=”text” /> elements

:visible = :visble will select all visible elements

With these filter you are of course allowed to use chaining. Chaining is putting multiple commands behind each other. Lets looks at two example:

$(“#content:parent:visible”) = This will select all elements with an id of content that do not have any children and are currently visible

$(“form:not(:has(:text))”) =  This select all form elements that don’t (:not) contain (:has) a text field (:text)

Now some of these filters do the same as some selectors. Here is one example where you can choose which one you want to use

I want to select all input elements that have an attribute of type set to text
$(“input[type=text]”) = Using a selector
$(“:text”) = User a filter

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s