jquery有几种选择器

那天我在一家咖啡馆，点了一杯拿铁，坐在一位看起来非常专业的程序员旁边，他正在敲代码。
我无意中在他的屏幕上看到了一些代码，发现他正在使用 jQuery 来处理页面元素。
他使用 ID 选择器来选择特定元素，然后使用类选择器来选择具有特定类的所有元素。
我好奇地问他：“这些选择器中你最喜欢哪一个？” 他微微一笑，指着屏幕上的代码说道：“我更喜欢分层选择器，因为它可以轻松选择嵌套在某个元素内部的元素。
” 我点点头，心想，这确实很方便。
等等，我还记得之前看到过一个例子，使用联合选择器来选择具有不同标签和类的多个元素。
代码看起来相当复杂。
我突然想到，这些选择器用得好，可以大大提高页面的交互性。
不过，使用的时候也应该注意性能问题吧？

jQuery :nth-of-type(n)选择器的用法详解

说实话，jQuery:nth-of-type(n) 的东西……很有趣。
它专门标识父元素中相同类型的第九个子元素。
比如
中有p、span、p，如果使用:p:nth-of-type(2 )，只会找到第二个p，与子元素的整体顺序无关。

只有几个句子结构： “p:nth-of-type(3 )”直接是第三部分 'li:nth-of-type(2 n)' 指定偶数 li 'li:nth-of-type(odd)' 或 'li:nth-of-type(even)'，这两个也可以
要记住的要点：只看相同类型元素的顺序。
例如父元素中的顺序是p、span、p，那么:nth-of-type(2 )匹配第二个p，与span无关。

看这个例子：

第 1 段

跨度1

第 2 段

第 3 段

<脚本> $('p:nth-of-type(2 )').css('颜色', '红色'); [xss_clean]
结果，只有“第2 段”变成红色，因为它在父元素中的p型元素中排名第二。

另一个例子是：
Div1
跨度1

第 1 段

Div2
<脚本> $('.c:nth-of-type(2 )').css('字体大小', '2 0px'); [xss_clean]
结果是“Div2 ”字体变大，因为它在父元素中的div类型元素中排第二位，p和c不算在内。

它与 :nth-child() 不同，后者搜索所有子元素的顺序，无论其类型如何。
nth-of-type() 确定类型并且仅查看相同类型元素的顺序。

例如：

P。
1

跨度1

P。
2

<脚本> $('p:nth-child(2 )').css('颜色', '蓝色'); //不匹配，第二个子元素是扩展名 $('p:nth-of-type(2 )').css('颜色', '红色'); // 匹配P2 [xss_clean]
如您所见，nth-child(2 ) 不匹配，因为第二个子级是扩展名。
nth-of-type(2 ) 与 P2 匹配，因为它是 p 型元素中的第二个。

注意性能。
当 DOM 结构非常大时，不要使用复杂的公式，例如 3 n+1 ，因为它们可能会卡住。
最好先使用类别选择器或 ID 选择器来缩小范围。

兼容性好，支持现代浏览器，包括IE9 及以上版本。
如果仍需要支持较旧的IE，建议使用原生JS方法或jQuery的.eq()方法。

动态添加元素？可以使用，但是添加元素后必须重新执行选择逻辑，比如由事件触发。

您想匹配同类型的倒数第九件吗？只需使用 :nth-last-of-type(n) 即可。
例如，$('p:nth-last-of-type(1 )') 匹配最后一个 p。

就是这样，突出显示表格行并突出显示列表项的样式在这种情况下很有用。
标签： jQuery选择器 :nth-of-type(n)