Juqery learning of three selectors simple content _jquery

: A

Matches the first element found

Matches the selected element.

return value

Element

Example

Find the first row of a table

HTML Code:

<table>
<tr><td>header 1</td></tr>
<tr><td>value 1</td></tr>
<tr><td>value 2</td></tr>
</table>

JQuery Code:

$ ("Tr:first")

Results:

[<tr><td>header 1</td></tr>]

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

: Last

Match the last element found

Matches the last selected element.

return value

Element

Example

Find the last row in a table

HTML Code:

<table>
<tr><td>header 1</td></tr>
<tr><td>value 1</td></tr>
<tr><td>value 2</td></tr>
</table>

JQuery Code:

$ ("Tr:last")

Results:

[<tr><td>value 2</td></tr>]

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

: Not (selector)

Removes all elements that match a given selector

Removes all elements matching the given selector.

return value

Array<element>

Parameters

selector (Selector): Selectors for filtering

Example

Find all input elements that are not selected

HTML Code:

<input name= "Apple"/>
<input name= "Flower" checked= "checked"/>

JQuery Code:

$ ("Input:not (: Checked)")

Results:

[<input name= "Apple"/>]

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

: Even

Matches all elements with an even number of index values, counting starting from 0

Matches even elements, zero-indexed.

return value

Array<element>

Example

Find table 1, 3, 5 ... rows (that is, index values 0, 2, 4 ...)

HTML Code:

<table>
<tr><td>header 1</td></tr>
<tr><td>value 1</td></tr>
<tr><td>value 2</td></tr>
</table>

JQuery Code:

$ ("Tr:even")

Results:

[<tr><td>header 1</td></tr>, <tr><td>value 2</td></tr>]

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

: Odd

Matches all elements with an odd index value starting at 0 counting

Matches odd elements, zero-indexed.

return value

Array<element>

Example

Look for 2, 4, 6 rows in the table (that is, index values 1, 3, 5 ...)

HTML Code:

<table>
<tr><td>header 1</td></tr>
<tr><td>value 1</td></tr>
<tr><td>value 2</td></tr>
</table>

JQuery Code:

$ ("tr:odd")

Results:

[<tr><td>value 1</td></tr>]

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

: EQ (Index)

An element that matches a given index value

Matches a single element by its index.

return value

Element

Parameters

Index (number): Counting starting from 0

Example

Find second row

HTML Code:

<table>
<tr><td>header 1</td></tr>
<tr><td>value 1</td></tr>
<tr><td>value 2</td></tr>
</table>

JQuery Code:

$ ("Tr:eq (1)")

Results:

[<tr><td>value 1</td></tr>]

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

: GT (Index)

Matches all elements that are greater than the given index value

Matches all elements with a index above the given one.

return value

Array<element>

Parameters

Index (number): Counting starting from 0

Example

Find the second third row, where the index value is 1 and 2, which is greater than 0

HTML Code:

<table>
<tr><td>header 1</td></tr>
<tr><td>value 1</td></tr>
<tr><td>value 2</td></tr>
</table>

JQuery Code:

$ ("tr:gt (0)")

Results:

[<tr><td>value 1</td></tr>, <tr><td>value 2</td></tr>]

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

: LT (Index)

Matches all elements that are less than the given index value

Matches all elements with a index below the given one.

return value

Array<element>

Parameters

Index (number): Counting starting from 0

Example

Find the first second row, where the index value is 0 and 1, which is smaller than 2

HTML Code:

<table>
<tr><td>header 1</td></tr>
<tr><td>value 1</td></tr>
<tr><td>value 2</td></tr>
</table>

JQuery Code:

$ ("Tr:lt (2)")

Results:

[<tr><td>header 1</td></tr>, <tr><td>value 1</td></tr>]

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

: Header

Match heading elements such as H1, H2, H3, etc.

Matches all elements The are headers, like H1, H2, H3, and.

return value

Array<element>

Example

Add background color to all headings in the page

HTML Code:

<p>contents 1</p>
<p>contents 2</p>

JQuery Code:

$ (": Header"). CSS ("Background", "#EEE");

Results:

[

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

: Animated

Matches all elements that are not in the animation effect

Matches all elements that are currently being animated.

return value

Array<element>

Example

Only perform an animated effect on an element that is not performing an animation

HTML Code:

<button id= "Run" >Run</button><div></div>

JQuery Code:

$ ("#run"). Click (function () {
$ ("Div:not (: Animated)"). Animate ({left: "+20"}, 1000);
});

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

: Contains (text)

Matches the element that contains the given text

Matches elements which contain the given text.

return value

Array<element>

Parameters

text (string): a string to find

Example

Find all DIV elements that contain "John"

HTML Code:

<div>john resig</div>
<div>george martin</div>
<div>malcom John sinclair</div>
<div>j. Ohn

JQuery Code:

$ ("Div:contains (' John ')")

Results:

[<div>john resig</div>, <div>malcom John sinclair</div>]

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

: Empty

Matches all empty elements that do not contain child elements or text

Matches all elements that are empty and be it elements or text.

return value

Array<element>

Example

Find all empty elements that do not contain child elements or text

HTML Code:

<table>
<tr><td>value 1</td><td></td></tr>
<tr><td>value 2</td><td></td></tr>
</table>

JQuery Code:

$ ("Td:empty")

Results:

[<td></td> <td></td>]

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

: Has (selector)

Matches elements that contain the matching elements of the selector

Matches elements which contain at least one element that matches the specified.

return value

Array<element>

Parameters

selector (Selector): a selector for filtering

Example

Add a text class to all DIV elements that contain p elements

HTML Code:

<div><p>Hello</p></div>
<div>hello again!</div>

JQuery Code:

$ ("Div:has (P)"). AddClass ("test");

Results:

[<div class= "test" ><p>Hello</p></div>]

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

:p arent

Matches elements that contain child elements or text

Matches all elements this are parents-they have child elements, including text.

return value

Array<element>

Example

Find all TD elements that contain child elements or text

HTML Code:

<table>
<tr><td>value 1</td><td></td></tr>
<tr><td>value 2</td><td></td></tr>
</table>

JQuery Code:

$ ("td:parent")

Results:

[<td>value 1</td>, <td>value 1</td>]