jQuery Selectors and Filters

Hi,

Welcome back.

In the last blog you saw the jQuery overview.
In this blog we will learn:

• Overview of Selectors and Filters
• Using basic jQuery selectors
• Using filters
• Using basic jQuery filters
• Attribute filters
• Content and Visibility filters
• Child filters
• Form selectors
• Traversing Document Information
• jQuery  statement chaining

Overview of Selectors and Filters:

• jQuery selectors and filters retrieve contents from the documents so it can be manipulated using other functions

-          jQuery selectors return an array of objects that match the selection criteria

-          jQuery filters operates on a selectors to further refine the results array that the selector returns

• This array is not a set of DOM elements
• It is a collection of jQuery objects that provide a large number of predefined functions for further operating on the objects

Using basic jQuery selectors

• CSS-style selectors and filters are based on familiar CSS syntax, and work pretty much the same way as CSS does
• The CSS selectors listed here correspond directly to their CSS counterpart s

Selectors	Purpose
tagname	Finds all elements that are named tagname
#identifier	Finds all elements with ID of identifier
.className	Finds all elements that have class attribute with the value of className
tag.className	Get elements of type tag that have a class attribute with the value of className
tag#id.className	Retrieves the tag element that has an ID of id and a class attribute with the value of className
*	Finds all of the elements on the page

• The hierarchy and combination selectors allow you to get a little more advanced in selecting page content
• You can select elements based on hierarchical relationships or on a series of comman criteria

Selector	Purpose
selector, selector	Finds all of the specified selectors
.class1.class2	Finds all elements with both .class1 and .class2 applied
Parent>child	Finds all child elements that are direct children of elements of type parent
Ancestor descendant	Finds all descendant elements that are contained within elements of type ancestor
Prev + next	Finds all next elements that are next to prev element
Prev ~ siblings	Finds all sibling elements that come after prev and match the siblings selector

Using filters

• Filters work with selectors to provide even more fine-grained control over how elements are selected in the document
• jQuery filters fall into six different categories

1. Basic: Provides basic filtering, like getting the first, last, and even- and odd-numbered items in a returned set
2. Content: Filters a set of elements based on the content, like whether an element contains a particular string
3. Visibility: Filters a set of elements using the visibility setting of each element as a test
4. Attribute: Examines a given attribute on an element to determine whether it should be filtered out
5. Child: Selects elements based upon their relationship with their parent element
6. Form: Provides specialized filters that operate on form elements

Using basic jQuery filters:

• You can refine a selector by including elements that match certain conditions, like position or index

Filter	Purpose
:first	Selects only the first instance of the selector’s returned set
:last	Selects only the last instance of the selector’s returned set
:even	Selects only even-numbered elements in the selector’s returned set
:odd	Selects only odd-numbered elements in the selector’s returned set
:eq(n)	Filters out elements that are not positioned at the given index
:gt(n)	Includes elements that are past the given index
:lt(n)	Includes elements that are before the given index
:header	Selects all header elements (H1, H2, H3, etc)
:animated	Selects all elements that are currently being animated in some way
:not(selector)	Includes elements that do not match the given selector

Attribute filters:

• You can filter the results of a selector statement based on attribute content

Filter	Purpose
[attribute]	Includes elements in the result set if they have the specified attribute
[attribute=value]	Includes elements in the result set if they have the specified attribute and it has the given value
[attribute!=value]	Includes elements in the result set only if they have the specified attribute and it doesn’t have the given value
[attribute^=value]	Includes elements that have the specified attribute and it starts with the specified value
[attribute$=value]	Includes elements that have the specified attribute and it ends with the specified value
[attribute*=value]	Includes elements that have the specified attribute and it contains the specified value
[attrFilter1][attrFilterN]	Includes elements that match all of the specified attribute filters

 Content and Visibility filters:

• You can examine the content of selected elements or their visibility property to determine whether they should be included or excluded from the final set

Content filter	Purpose
:contains(text)	Filters the selection to only include elements that contain the text string
:empty	Filters the selection to only include empty elements
:has(selector)	Matches elements that contain at least one element that has the specified selector
:parent	Matches all elements that are parents (i.e. they contain at least one other element, including text)

Visibility filter	Purpose
:visible	Filters the selection to only include visible elements
:hidden	Filters the selection to only include hidden elements

Child filters:

• You can refine a selector by examining the relationship each element has with its parent element

Filter	Purpose
:nth-child(index) :nth-child(even) :nth-child(odd) :nth-child(equation)	Matches elements at index, or even or odd increments, or who match an equation of the form Xn+M (e.g., 2n or 3n+1)
:first-child	Matches elements who are the first child of their parent
:last-child	Matches elements who are the last child of their parent
:only-child	Matches elements who are the only child of their parent

Form selectors:

• You can use form selectors to deal with form elements
• They work like other selectors but start with a colon (:) like a regular filter

Selector	Purpose
:input	Finds all input, select, textarea, and button elements
:text	Finds all text elements
:password	Finds all password elements
:radio	Finds all radio button elements
:checkbox	Finds all checkbox elements
:submit	Finds all submit elements
:reset	Finds all reset elements
:image	Finds all image elements
:button	Finds all button elements
:file	Finds all file upload elements

• You can perform additional filtering of form elements, such as whether items are checked, selected, or enabled

Selector	Purpose
:enabled	Matches all form elements that are enabled
:disabled	Matches all form elements that are disabled
:checked	Matches all form elements that are checked (radiobuttons and checkboxes)
:selected	Matches all form elements that are selected

Traversing Document Information:

• You can traverse the information returned from a document easily

Function / Property	Purpose
Size(), length	The number of elements in the jQuery result set
get()	Returns an array of all matched DOM elements. Useful if you need to operate on the DOM elements themselves instead of using built-in jQuery functions
get(index)	Access a single matched DOM element at a specified index in the matched set
find(expression)	Searched for descendent elements that match the specified expression
each(fn)	Execute a function within the context of every matched element

jQuery  statement chaining:

• One of jQuery’s most powerful features is its ability to chain multiple functions together to perform several operations in one line of code

$(selector).fn1().fn2().fn3();
                     statement chain

In the next blog we will learn how to manipulate the page contents using jQuery.