jquery Filter Selector detailed

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") ;
      })