jquery Selector Basics

Transferred from: http://www.cnblogs.com/zwl12549/archive/2008/08/09/1264163.html

Query this set of selectors is relatively handsome, borrowed XPath2.0 and css1-3 syntax, and compatible with a number of browsers, so that the original very complex DOM, suddenly become simple, the hands of the latest version is 1.2.2b, all the examples below, but also according to this version provides examples.

To test the HTML code:

<div id= "Father" >
<div id= "First" >i am first</div>
<div id= "Second" class= "Red" >i am second</div>
<div id= "Third" style= "Display:none" >i am third</div>
</div>
<p class= "Red" >i am forth</p>

Basis:

#id: Gets the object based on the object's ID property.

Alert ($ (' #first '). html ());
Show I am first

element: Matches all objects of an HTML tag

Alert ($ (' div '). length);
Showing 4

. Class: Gets an object based on the class property of the object

Alert ($ ('. Red '). length);
Showing 2

*: Get all the objects

Alert ($ (' * '). length);
Displays the objects in the HTML and, but different browsers, the results will vary

Selector1, Selector2, Selectorn: Gets the collection of multiple selectors, not the duplicates.

Alert ($ ('. Red, #second, P '). length);
Showing 4

Hierarchy selector:

ancestor descendant: This selector is a space, indicating that all objects of the first selector are found first, and then all objects that conform to the second selector are found in his descendant nodes.

Alert ($ (' #father. Red '). html ());
Show I am second

Parent >Child: This selector is the greater-than sign, which means that all objects of the first selector are found first, and then all objects that conform to the second selector are found in his child node (not the grandchild node).

Alert ($ (' #father >. Red '). html ());
Show I am second

prev + next: This selector is the plus sign, which means that all objects of the first selector are found first, and then the object that matches the second selector is followed by the next node at his sibling.

Alert ($ (' #father +. Red '). html ());
Show I am forth

prev ~ siblings: This selector is the ~ sign, which indicates that all objects of the first selector are found first, and then the object that matches the second selector in all nodes after the same sibling.

Alert ($ (' #first ~ #third '). html ());
Show I am third

Base filter:

:First: Matches a single object in multiple objects
:Last: Matches the final object in multiple objects

Alert ($ ('. Red:first '). html ());
Show I am second
Alert ($ (' div:last '). html ());
Show I am third

: Not (selector): Match removes items from the selection after not

Alert ($ ('. Red:not (#second) '). html ());
Show I am forth

: Even: matches the first even number of all objects
: Odd: Matches the first odd number of all objects

Alert ($ (' Div:even '). length);
Showing 2
Alert ($ (' div:odd '). length);
Showing 2

: eq (index): matches a single element of a table

Alert ($ (' Div:eq (2) '). html ());
Show I am second

: GT (Index): Matches all elements that are larger than a certain mark
: LT (index): Matches all elements that are less than a certain mark

Alert ($ (' div:gt (1) '). length);
Showing 2
Alert ($ (' Div:lt (2) '). length);
Showing 2

: Header: Matches all header elements, such as H1,h2,h3,h4,h5,h6

Alert ($ (': Header '). length);
Showing 1

: Animated: matches all animated elements

function Animateit ()
{
$ ("#second"). Slidetoggle ("Slow", Animateit);
}
Animateit ();
Alert ($ (': Animated '). html ());
Show I am second

Text Filter Characters:

: Contains (text): Matches the object that owns the text element internally, including indirectly useful cases

Alert ($ (' Div:contains (' first ') '). length);
Showing 2

: Empty: Matches all objects that have no child elements

Alert ($ (': Header:empty '). length);
Showing 1

: Has (selector): Matches all objects that contain at least one child selector

Alert ($ (' Div:has (' #third ') '). attr (' id '));
Show father

:p arent: Matches all the parent objects that contain objects that contain only text

Alert ($ (' div:parent '). length);
Showing 4

Visibility Filter:

: Hidden: Matches all hidden objects, or the hidden type in input
:Visible: Matches all visible objects

Alert ($ (' Div:hidden '). length);
Showing 1
Alert ($ (' div:visible '). length);
Showing 3

Property Filter:

[attribute]: Matches all objects that have a property
[Attribute=value]: Matches an object that owns a property and value
[Attribute!=value]: Matches an object that owns a property and is not a value
[Attribute^=value]: Matches an object that has a property and begins with a value
[Attribute$=value]: Matches an object that has a property and ends with a value
[Attribute*=value]: Matches an object that owns a property and contains a value

Alert ($ (' div[class] '). html ());
Show I am second
Alert ($ (' div[class=red] '). html ());
Show I am second
Alert ($ (' div[id!=father] '). length);
Showing 3
Alert ($ (' div[id^=f] '). length);
Showing 2
Alert ($ (' div[id$=d] '). length);
Showing 2
Alert ($ (' div[id*=ir] '). length);
Showing 2

[Selector1][selector2][selectorn]: Matches objects that match multiple property selectors at once

Alert ($ (' div[id=second][class^=r] '). length);
Show I am second

Sub-filter characters:

: Nth-child (index/even/odd/equation): Matches an object in a sub-element of a subscript/even/odd/equation: eq (index) can only match the child element characteristics of a single object, This method can match the common characteristics of a child element of multiple objects

Alert ($ (' #father div:nth-child (1) '). html ());
Show I am first
Alert ($ (' #father div:nth-child (even) '). length);
Showing 1
Alert ($ (' #father div:nth-child (Odd) '). length);
Showing 2
Alert ($ (' #father div:nth-child (3n) '). length);
Show 1, in fact, is every 3 a match

: First-child: Match first child element
: Last-child: Match Last child element
These two matching characters can also match all child elements of multiple parent objects

Alert ($ (' #father div:first-child '). html ());
Show I am first
Alert ($ (' #father div:last-child '). html ());
Show I am third

: Only-child: If a parent element has only one child element, it matches the child element

Alert ($ (' div:only-child '). length);
Showing 0

jquery Selector Basics