Juqery Learning 3 Selector Simple Content_jquery

:first

匹配找到的第一个元素

---

Matches the first selected element.

返回值

Element

示例

查找表格的第一行

HTML 代码:

 
 
 

Header 1

Value 1

Value 2

jQuery 代码:

$("tr:first")

结果:

[ Header 1 ]

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

:last

匹配找到的最后一个元素

---

Matches the last selected element.

返回值

Element

示例

查找表格的最后一行

HTML 代码:

 
 
 

Header 1

Value 1

Value 2

jQuery 代码:

$("tr:last")

结果:

[ Value 2 ]

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

:not(selector)

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

---

Removes all elements matching the given selector.

返回值

Array

参数

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

示例

查找所有未选中的 input 元素

HTML 代码:

jQuery 代码:

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

结果:

[  ]

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

:even

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

---

Matches even elements, zero-indexed.

返回值

Array

示例

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

HTML 代码:

 
 
 

Header 1

Value 1

Value 2

jQuery 代码:

$("tr:even")

结果:

[ Header 1, Value 2 ]

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

:odd

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

---

Matches odd elements, zero-indexed.

返回值

Array

示例

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

HTML 代码:

 
 
 

Header 1

Value 1

Value 2

jQuery 代码:

$("tr:odd")

结果:

[ Value 1 ]

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

:eq(index)

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

---

Matches a single element by its index.

返回值

Element

参数

index (Number) : 从 0 开始计数

示例

查找第二行

HTML 代码:

 
 
 

Header 1

Value 1

Value 2

jQuery 代码:

$("tr:eq(1)")

结果:

[ Value 1 ]

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

:gt(index)

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

---

Matches all elements with an index above the given one.

返回值

Array

参数

index (Number) : 从 0 开始计数

示例

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

HTML 代码:

 
 
 

Header 1

Value 1

Value 2

jQuery 代码:

$("tr:gt(0)")

结果:

[ Value 1, Value 2 ]

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

:lt(index)

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

---

Matches all elements with an index below the given one.

返回值

Array

参数

index (Number) : 从 0 开始计数

示例

查找第一第二行，即索引值是0和1，也就是比2小

HTML 代码:

 
 
 

Header 1

Value 1

Value 2

jQuery 代码:

$("tr:lt(2)")

结果:

[ Header 1, Value 1 ]

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

:header

匹配如 h1, h2, h3之类的标题元素

---

Matches all elements that are headers, like h1, h2, h3 and so on.

返回值

Array

示例

给页面内所有标题加上背景色

HTML 代码:

Header 1

Contents 1

Header 2

Contents 2

jQuery 代码:

$(":header").css("background", "#EEE");

结果:

[

Header 1

,

Header 2

]
---------------------------------------------------------------------------------------

:animated

匹配所有没有在执行动画效果中的元素

---

Matches all elements that are currently being animated.

返回值

Array

示例

只有对不在执行动画效果的元素执行一个动画特效

HTML 代码:

Run

jQuery 代码:

$("#run").click(function(){
  $("div:not(:animated)").animate({ left: "+20" }, 1000);
});

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

:contains(text)

匹配包含给定文本的元素

---

Matches elements which contain the given text.

返回值

Array

参数

text (String) : 一个用以查找的字符串

示例

查找所有包含 "John" 的 div 元素

HTML 代码:

John Resig

George Martin

Malcom John Sinclair

J. Ohn

jQuery 代码:

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

结果:

[

John Resig

,

Malcom John Sinclair

]

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

:empty

匹配所有不包含子元素或者文本的空元素

---

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

返回值

Array

示例

查找所有不包含子元素或者文本的空元素

HTML 代码:

 
 

Value 1
Value 2

jQuery 代码:

$("td:empty")

结果:

[ , ]

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

:has(selector)

匹配含有选择器所匹配的元素的元素

---

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

返回值

Array

参数

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

示例

给所有包含 p 元素的 div 元素添加一个 text 类

HTML 代码:

Hello

Hello again!

jQuery 代码:

$("div:has(p)").addClass("test");

结果:

[

Hello

]

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

:parent

匹配含有子元素或者文本的元素

---

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

Return value

Array

Example

Find all td elements that contain child elements or text

HTML code:

Value 1
Value 2

jQuery code:

$("td:parent")

Result:

[ Value 1, Value 1 ]

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn