juqery 学习之三 选择器 简单 内容

匹配找到的第一个元素

Matches the first selected element.

返回值

Element

示例

查找表格的第一行

HTML 代码:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:

$("tr:first")

结果:

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

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

:last

匹配找到的最后一个元素

Matches the last selected element.

返回值

Element

示例

查找表格的最后一行

HTML 代码:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:

$("tr:last")

结果:

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

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

:not(selector)

去除所有与给定选择器匹配的元素

Removes all elements matching the given selector.

返回值

Array<Element>

参数

selector (Selector) : 用于筛选的选择器

示例

查找所有未选中的 input 元素

HTML 代码:

<input />
<input checked="checked" />

jQuery 代码:

$("input:not(:checked)")

结果:

[ <input /> ]

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

:even

匹配所有索引值为偶数的元素,从 0 开始计数

Matches even elements, zero-indexed.

返回值

Array<Element>

示例

查找表格的1、3、5...行(即索引值0、2、4...)

HTML 代码:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:

$("tr:even")

结果:

[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]

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

:odd

匹配所有索引值为奇数的元素,从 0 开始计数

Matches odd elements, zero-indexed.

返回值

Array<Element>

示例

查找表格的2、4、6行(即索引值1、3、5...)

HTML 代码:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:

$("tr:odd")

结果:

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

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

:eq(index)

匹配一个给定索引值的元素

Matches a single element by its index.

返回值

Element

参数

index (Number) : 从 0 开始计数

示例

查找第二行

HTML 代码:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:

$("tr:eq(1)")

结果:

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

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

:gt(index)

匹配所有大于给定索引值的元素

Matches all elements with an index above the given one.

返回值

Array<Element>

参数

index (Number) : 从 0 开始计数

示例

查找第二第三行,即索引值是1和2,也就是比0大

HTML 代码:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:

$("tr:gt(0)")

结果:

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

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

:lt(index)

匹配所有小于给定索引值的元素

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdfpjy.html