Juqery learning of three selector child elements and form _jquery

: Nth-child (Index/even/odd/equation)

Matches the nth child or parity element under its parent element

': EQ (index) ' matches only one element, and this will match the child elements for each parent element. : Nth-child starting from 1, and: Eq () is from 0!

You can use:
Nth-child (even)
: Nth-child (Odd)
: Nth-child (3n)
: Nth-child (2)
: Nth-child (3n+1)
: Nth-child (3n+2)

Matches the nth-child of its parent.

While ': EQ (index) ' matches to a single element, this matches the then one:one for each parent. The specified index is one-indexed, in contrast To:eq () which starst at zero.

return value

Array<element>

Parameters

Index (number): to match the ordinal of an element, starting at 1

Example

Find 2nd Li in each UL

HTML Code:

<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>

JQuery Code:

$ ("UL Li:nth-child (2)")

Results:

[<li>karl</li> <li>Tane</li>]
--------------------------------------------------------------------------------

: First-child

Match first child element

': A ' matches only one element, and this selector matches one child element for each parent element

Matches the "the" the "the" of its parent.

While ': "Matches only" a single ", this matches the then one:one for each parent.

return value

Array<element>

Example

Find the first Li in each UL

HTML Code:

<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>

JQuery Code:

$ ("ul Li:first-child")

Results:

[<li>john</li> <li>Glen</li>]

--------------------------------------------------------------------------------

: Last-child

Match the Last child element

': Last ' matches only one element, and this selector matches one child element for each parent element

Matches the last child of its parent.

While ': "Last ' matches" a single element, this is matches more then one:one for each parent.

return value

Array<element>

Example

Find the last Li in each UL

HTML Code:

<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>

JQuery Code:

$ ("ul Li:last-child")

Results:

[<li>brandon</li> <li>Ralph</li>]

--------------------------------------------------------------------------------

: Only-child

If an element is the only child element in the parent element, it will be matched

If the parent element contains other elements, it will not be matched.

Matches the only child of its parent.

If the parent has other child elements, it is matched.

return value

Array<element>

Example

Find the only child element in the UL of Li

HTML Code:

<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>

JQuery Code:

$ ("ul Li:only-child")

Results:

[<li>Glen</li>]

--------------------------------------------------------------------------------

: input

Match all input, textarea, select, and button elements

Matches all input, textarea, select and button elements.

return value

Array<element>

Example

Find all input elements

HTML Code:

<form>
<input type= "Text"/>
<input type= "checkbox"/>
<input type= "Radio"/>
<input type= "image"/>
<input type= "File"/>
<input type= "Submit"/>
<input type= "Reset"/>
<input type= "Password"/>
<input type= "button"/>
<select><option/></select>
<textarea></textarea>
<button></button>
</form>

JQuery Code:

$ (": input")

Results:

[<input type= "text"/>, <input type= "checkbox"/> <input type= "Radio"/> <input type= "image"/> , <input type= "file"/>, <input type= "Submit"/>, <input type= "reset"/>, <input type= "password"/> ;, <input type= "button"/>]

--------------------------------------------------------------------------------

: Text

Match all single-line text boxes

Matches all input elements of type text.

return value

Array<element>

Example

Find all text boxes

HTML Code:

<form>
<input type= "Text"/>
<input type= "checkbox"/>
<input type= "Radio"/>
<input type= "image"/>
<input type= "File"/>
<input type= "Submit"/>
<input type= "Reset"/>
<input type= "Password"/>
<input type= "button"/>
<select><option/></select>
<textarea></textarea>
<button></button>
</form>

JQuery Code:

$ (": Text")

Results:

[<input type= "text"/>]

--------------------------------------------------------------------------------

:p Assword

Match all Password boxes

Matches all input elements of type password.

return value

Array<element>

Example

Find all Password boxes

HTML Code:

<form>
<input type= "Text"/>
<input type= "checkbox"/>
<input type= "Radio"/>
<input type= "image"/>
<input type= "File"/>
<input type= "Submit"/>
<input type= "Reset"/>
<input type= "Password"/>
<input type= "button"/>
<select><option/></select>
<textarea></textarea>
<button></button>
</form>

JQuery Code:

$ (":p Assword")

Results:

[<input type= "password"/>]

--------------------------------------------------------------------------------

: Radio

Match all radio buttons

Matches all input elements of type radio.

return value

Array<element>

Example

Find all radio buttons

HTML Code:

<form>
<input type= "Text"/>
<input type= "checkbox"/>
<input type= "Radio"/>
<input type= "image"/>
<input type= "File"/>
<input type= "Submit"/>
<input type= "Reset"/>
<input type= "Password"/>
<input type= "button"/>
<select><option/></select>
<textarea></textarea>
<button></button>
</form>

JQuery Code:

$ (": Radio")

Results:

[<input type= "Radio"/>]

--------------------------------------------------------------------------------

: Submit

Match all Submit buttons

Matches all input elements of type submit.

return value

Array<element>

Example

Find all Submit buttons

HTML Code:

<form>
<input type= "Text"/>
<input type= "checkbox"/>
<input type= "Radio"/>
<input type= "image"/>
<input type= "File"/>
<input type= "Submit"/>
<input type= "Reset"/>
<input type= "Password"/>
<input type= "button"/>
<select><option/></select>
<textarea></textarea>
<button></button>
</form>

JQuery Code:

$ (": Submit")

Results:

[<input type= "submit"/>]

Others are the same reason: image,: Reset,:button,:file,:hidden!@#@!%$%