Introduction to jquery Selector

Jquery's selector is incredibly powerful. Here is a simple summary of common element search methods.

$ ("A B") searches for all subnodes under Element A, including non-direct subnodes.
$ ("A> B") Find the direct subnode under Element
$ ("A + B") searches for the sibling nodes behind Element A, including non-direct subnodes.
$ ("~ B ") Find the sibling nodes behind Element A, excluding non-direct subnodes.

1. $ ("a B") searches for all subnodes under Element A, including non-direct subnodes.

Example: Find all input elements in the form

HtmlCode:

<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"/>]

2. $ ("A> B") Find the direct subnode under Element
Example: match all the child input elements in the form.

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"/>]

3. $ ("A + B") searches for the sibling nodes behind Element A, including non-direct subnodes.
Example: match all input elements following the label

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"/>]

4. $ ("~ B ") Find the sibling nodes behind Element A, excluding non-direct subnodes.
Example: Find all input elements of the same generation as the form

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"/>]