The jQuery selector (a)

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

1,#ID according to the given ID matching an element.

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
$("#myDiv");

2,Element according to the given element name matches all elements

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
$("div");

3,The given.Class matching elements.

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
$(".myClass");

4,*All the elements that match

<div>DIV</div>
<span>SPAN</span>
<p>P</p> 
$("*")

5,selector1,selector2,SelectorN will each selector matches to the element after the merger with the return.

HTML code:

<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>

JQuery code:

$("div,span,p.myClass")

Result:

[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

6,Ancestor descendant matching descendant element in all of the ancestor element given by

HTML code:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

JQuery code:

$("form input")

Result:

[ <input name="name" />, <input name="newsletter" /> ]
7,parent > Child matching all child elements in the parent element

HTML code:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

JQuery code:

$("form > input")

Result:

[ <input name="name" /> ]

8,Prev + next match all immediately after the next prev element after

HTML code:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

JQuery code:

$("label + input")

Result:

[ <input name="name" />, <input name="newsletter" /> ]
9,prev ~ Siblings matches all siblings elements prev elements after

HTML code:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

JQuery code:

$("form ~ input")

Result:

[ <input name="none" /> ]
:First gets the first element$('li:first');
:last()Gets the last element$('li:last')
:not(selector)Remove all matches the given selector elements$("input:not(:checked)")
:Even matching all the index value is even elements, from the beginning of 0 count$("tr:even")
:Odd matching all the index value is an odd number of elements, from the beginning of 0 count
:eq(index)Matching a given index value elements
:gt(index)Match all greater than the given index value elements
:lt(index)Match all less than the given index value elements
:Header matching such as H1, H2, H3 caption element such as
:Animated matching all executing animation elements
:Focus matches the current focus elements. 
:contains(text)Matching contains the given text elements
:Empty match all does not contain element or text empty element
:has(selector)Matching with selector matching elements.
:Parent matching with sub elements or text elements
:Hidden matches any invisible elements, or type to the elements of the hidden
 
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Adam at November 18, 2013 - 10:22 AM