Basic Filter Selector
Select the first element (: primary)
Select the first DIV element.
$ (' #btn1 '). Click (function () {
$ (' Div:first '). CSS ("Background", "#bfa");
})
Select the last element (: final)
Select the last div element.
$ (' #btn2 '). Click (function () {
$ (' div:last '). CSS ("Background", "#bfa");
})
removes all elements that match a given selector (: not (selector))
Select all DIV elements that are not of one class.
$ (' #btn3 '). Click (function () {
$ (' Div:not (. one) '). CSS ("Background", "#bfa");
})
Select all elements with an even number index starting at 0 (: even)
Select a DIV element with an even number of index values.
$ (' #btn4 '). Click (function () {
$ (' Div:even '). CSS ("Background", "#bfa");
})
Select Index is an odd number of all elements, index starting from 0 (: Odd)
Select the div element with an odd index value.
$ (' #btn5 '). Click (function () {
$ (' div:odd '). CSS ("Background", "#bfa");
})
Select an element with an index equal to the specified index starting at 0 (: eq (index))
Select an element with an index equal to 3
$ (' #btn6 '). Click (function () {
$ (' Div:eq (3) '). CSS ("Background", "#bfa");
})
Select an element with an index greater than the specified index starting at 0 (: GT (index))
Select an element with an index greater than 3
$ (' #btn7 '). Click (function () {
$ (' div:gt (3) '). CSS ("Background", "#bfa");
})
Select an element with an index less than the specified index starting at 0 (: LT (index))
Select the element with index less than 3
$ (' #btn8 '). Click (function () {
$ (' Div:lt (3) '). CSS ("Background", "#bfa");
})
Select Title Element (: header)
Select all the heading elements. such as H1, H2, H3, etc.
.. $ (' #btn9 '). Click (function () {
$ (': Header '). CSS ("Background", "#bfa");
})
selects all elements of the currently executing animation (: animated)
Selects all the elements that are currently performing the animation.
$ (' #btn10 '). Click (function () {
$ (': Animated '). CSS ("Background", "#bfa");
});
Select all the elements that currently get focus (: Focus)
Selects all the elements that are currently getting focus.
$ (' #btn11 '). Click (function () {
$ (': Focus '). CSS ("Background", "#bfa");
});
Content Filter Selector
Select the element that contains the specified text (: Contains (text))
Select the div element that contains the text "Di".
$ (' #btn1 '). Click (function () {
$ (' Div:contains (DI) '). CSS ("Background", "#bbffaa");
})
Select an empty element that does not contain child elements or text (: empty)
Select a div empty element that does not contain child elements (or text elements).
$ (' #btn2 '). Click (function () {
$ (' Div:empty '). CSS ("Background", "#bbffaa");
})
Select the element that contains the selector match element (: has (selector))
Select the div element that contains the class mini element.
$ (' #btn3 '). Click (function () {
$ ("Div:has ('. Mini ')"). CSS ("Background", "#bbffaa");
})
Select an empty element that contains child elements or text (:p arent)
Select the div element that contains the child element (or text element).
$ (' #btn4 '). Click (function () {
$ (' div:parent '). CSS ("Background", "#bbffaa");
})
Visibility Filters
Select elements that are not visible (: Hidden)
Selects all elements that are not visible. including <input type= "hidden"/>.
$ (' #btn_hidden '). Click (function () {
$ (' Div:hidden '). Show (+). CSS ("Background", "#bbffaa");
})
Select the visible element (: visible)
Selects all the visible elements.
$ (' #btn_visible '). Click (function () {
$ (' div:visible '). CSS ("Background", "#FF6500");
})
Property Filter
Select the element that owns this property ([attribute])
Select the div element that contains the title of the attribute.
$ (' #btn1 '). Click (function () {
$ (' div[title] '). CSS ("Background", "#bbffaa");
})
Select an element with a value of property ([Attribute=value])
Select the div element with the property title value equal to test.
$ (' #btn2 '). Click (function () {
$ (' div[title=test] '). CSS ("Background", "#bbffaa");
})
Select an element with an attribute value that is not equal to value ([Attribute!=value])
Select the div element where the property title value is not equal to test.
$ (' #btn3 '). Click (function () {
$ (' div[title!=test] '). CSS ("Background", "#bbffaa");
})
Select an element with the value of the property starting with value ([Attribute^=value])
Select the div element that attributes the title value to start with TE.
$ (' #btn4 '). Click (function () {
$ (' div[title^=te] '). CSS ("Background", "#bbffaa");
})
Select an element that ends with value ([Attribute$=value])
Select the div element that attributes the title value to end with EST.
$ (' #btn5 '). Click (function () {
$ ("div[title$=est]"). CSS ("Background", "#bbffaa");
})
Select an element with value ([Attribute*=value])
Select the attribute title value that contains the div element for es.
$ (' #btn6 '). Click (function () {
$ ("div[title*=es]"). CSS ("Background", "#bbffaa");
})
Select an element with an attribute value equal to value or prefixed with value (that is, "value-xxx") ([Attribute|=value])
Select the attribute title equals en or is prefixed with en (the string followed by a hyphen '-') of the element
$ (' #btn3 '). Click (function () {
$ (' div[title|= "en"] '). CSS (" Background "," #bbffaa ");
})
Select a space-delimited value for the attribute value that contains the element of the given value ([Attribute~=value])
Select attribute title The element that contains the character UK in a space-delimited value.
$ (' #btn4 '). Click (function () {
$ (' div[title~= "UK"] '). CSS ("Background", "#bbffaa");
})
Combined Property selector ([Attribute1][attribute2] ... [Attributen])
Combining the property selector, first select the div element with the attribute ID, and then in the result select the element with the title value containing es.
$ (' #btn7 '). Click (function () {
$ ("div[id][title*=es]"). CSS ("Background", "#bbffaa");
})
child element Filter Selector
Select the first child element under each parent element to return a collection element
Select the first child element under each parent element
$ (' #btn2 '). Click (function () {
$ (' Div.one:first-child '). CSS ("Background", "#bbffaa");
})
Select the last child element under each parent element to return the collection element
Select the last child element under each parent element
$ (' #btn3 '). Click (function () {
$ (' Div.one:last-child '). CSS ("Background", "#bbffaa");
})
Select the unique child element under each parent element to return the collection element
If there is only one child element under the parent element, select the child element
$ (' #btn4 '). Click (function () {
$ (' Div.one:only-child '). CSS ("Background", "# Bbffaa ");
})
Select the index child element or the odd and even element under each parent element, index from 1
Select the 2nd child element under each parent element
$ (' #btn1 '). Click (function () {
$ (' Div.one:nth-child (2) '). CSS ("Background", "#bbffaa") ;
})