当前位置: 澳门新濠3559 > 服务器运维 > 正文

first匹配找到的第一个元素,而这个将为每一个父

时间:2019-12-26 07:51来源:服务器运维
:nth-child(index/even/odd/equation)匹配其父元素下的第N个子或奇偶元素':eq'只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的! 一个例子: :first匹

:nth-child(index/even/odd/equation)匹配其父元素下的第N个子或奇偶元素':eq' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!

一个例子:

:first匹配找到的第一个元素

可以使用:nth-child:nth-child:nth-child

  • John
  • Karl
  • Brandon


Matches the first selected element.返回值

Matches the nth-child of its parent.While ':eq' matches only a single element, this matches more then one: One for each parent. The specified index is one-indexed, in contrast to:eq() which starst at zero.返回值

  • Glen
  • Tane
  • Ralph

Element

Array

first表示第一个;first-child表示第一个

示例

参数

$ 返回john所在的li。 查找所有ul下第一个li元素

查找表格的第一行

index : 要匹配元素的序号,从1开始

$ 返回 john glen。 查找每个ul下第一个元素是li元素dom元素。

HTML 代码:

示例

扩展用法:$表示body下的第一个孩子元素; $表示body下的每一个是第一个孩子元素的元素

Header 1
Value 1
Value 2

在每个 ul 查找第 2 个li

另外,css选择器从右往左,如果是这样;

jQuery 代码:

HTML 代码:

  • John
  • Karl
  • Brandon

$

  • John
  • Karl
  • Brandon

结果:

  • Glen
  • Tane
  • Ralph

[

  • Glen
  • Tane
  • Ralph

那么$ 只返回John. 查找每个的第一个孩子元素,如果是li元素则匹配,否则不匹配.

Header 1

jQuery 代码:

$匹配第一个li元素 $匹配第一个li元素,它是某个元素的第一个孩子元素

]

$

澳门新濠3559,以上这篇浅谈jquery选择器 :first与:first-child的区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。


结果:

:last匹配找到的最后一个元素

[


Karl

Matches the last selected element.返回值

,

Element

Tane

示例

]--------------------------------------------------------------------------------:first-child匹配第一个子元素':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素

查找表格的最后一行


HTML 代码:

Matches the first child of its parent.While ':first' matches only a single element, this matches more then one: One for each parent.返回值

Header 1
Value 1
Value 2

Array

jQuery 代码:

示例

$

在每个 ul 中查找第一个 li

结果:

HTML 代码:

[

  • John
  • Karl
  • Brandon

Value 2

]

  • Glen
  • Tane
  • Ralph

jQuery 代码:

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

$


结果:

Removes all elements matching the given selector.返回值

[

Array

John

参数

,

selector : 用于筛选的选择器

Glen

示例

] --------------------------------------------------------------------------------:last-child匹配最后一个子元素':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素

查找所有未选中的 input 元素


HTML 代码:

Matches the last child of its parent.While ':last' matches only a single element, this matches more then one: One for each parent.返回值

jQuery 代码:

Array

$")

示例

结果:

在每个 ul 中查找最后一个 li

[ ]

HTML 代码:


  • John
  • Karl
  • Brandon

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


  • Glen
  • Tane
  • Ralph

Matches even elements, zero-indexed.返回值

jQuery 代码:

Array

$

示例

结果:

查找表格的1、3、5...行

[

HTML 代码:

Brandon

Header 1
Value 1
Value 2

,

jQuery 代码:

Ralph

$

] --------------------------------------------------------------------------------:only-child如果某个元素是父元素中唯一的子元素,那将会被匹配如果父元素中含有其他元素,那将不会被匹配。

结果:


[

Matches the only child of its parent.If the parent has other child elements, nothing is matched.返回值

Header 1

Array

,

示例

Value 2

在 ul 中查找是唯一子元素的 li

]

HTML 代码:


  • John
  • Karl
  • Brandon

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


  • Glen
  • Glen

Matches odd elements, zero-indexed.返回值

Array

示例

查找表格的2、4、6行

HTML 代码:

Header 1
Value 1
Value 2

jQuery 代码:

$

结果:

[

Value 1

]


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


Matches a single element by its index.返回值

Element

参数

index : 从 0 开始计数

示例

查找第二行

HTML 代码:

Header 1
Value 1
Value 2

jQuery 代码:

$

结果:

[

Value 1

]


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


Matches all elements with an index above the given one.返回值

Array

参数

index : 从 0 开始计数

示例

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

HTML 代码:

Header 1
Value 1
Value 2

jQuery 代码:

$

结果:

[

Value 1

,

Value 2

]


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


Matches all elements with an index below the given one.返回值

Array

参数

index : 从 0 开始计数

示例

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

HTML 代码:

Header 1
Value 1
Value 2

jQuery 代码:

$

结果:

[

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

Header 2

jQuery 代码:

$.css;

结果:

[

Header 1

,

Header 2

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


Matches all elements that are currently being animated.返回值

Array

示例

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

HTML 代码:

Run

jQuery 代码:

$.click{ $.animate({ left: "+20" }, 1000);}); ---------------------------------------------------------------------------------------:contains匹配包含给定文本的元素


Matches elements which contain the given text.返回值

Array

参数

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

示例

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

HTML 代码:

John Resig

George Martin

Malcom John Sinclair

J. Ohn

jQuery 代码:

$")

结果:

[

John Resig

,

Malcom John Sinclair

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


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

Array

示例

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

HTML 代码:

Value 1
Value 2

jQuery 代码:

$

结果:

[

,

] ---------------------------------------------------------------------------------------:has匹配含有选择器所匹配的元素的元素


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

Array

参数

selector : 一个用于筛选的选择器

示例

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

HTML 代码:

Hello again!

jQuery 代码:

$.addClass;

结果:

[

] ---------------------------------------------------------------------------------------:parent匹配含有子元素或者文本的元素


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

Array

示例

查找所有含有子元素或者文本的 td 元素

HTML 代码:

Value 1
Value 2

jQuery 代码:

$

结果:

[

Value 1

,

Value 1

]

编辑:服务器运维 本文来源:first匹配找到的第一个元素,而这个将为每一个父

关键词: