jquery 选择器选择table中的所有input 元素

嘿伙计，说到 jQuery，我已经使用它很多年了。
我记得有一次，我正在做一个项目，需要在 HTML 文件中创建一个表单，然后我想使用 jQuery 来控制该样式。
这很有趣。

此时，我打开了 jQuery 库，创建了一个新的 HTML 文件，然后在其中创建了一个表单。
我记得那个表格里有一些输入框。
我想通过jQuery选择它们，然后统一调整样式。

看，像这样，我已经选择了表单中的所有输入元素，但当时它们没有被选择，这非常令人沮丧。
然后我就想是jQuery版本的问题还是脚本加载顺序的问题。
后来仔细一看，发现表单下的元素结构有点复杂，漏掉了一个重要的div标签。

之后，我开始修补和研究 jQuery.js 库。
我发现我可以使用 JQuery 的文件选择器来选择“文件”类型的输入元素，然后设置背景颜色，这非常酷。
当时我就很兴奋，觉得这个功能非常实用。

最后，我成功地选择了该元素中的所有输入元素，并且样式进行了统一调整。
项目顺利完成，客户非常满意。
所以，如果你遇到问题，多努力，多思考，你总会找到解决办法。
顺便说一句，我还没有真正掌握一些高级的 jQuery 技能所以不敢乱说。
不过，如果你有兴趣的话，下次我可以和你详细聊聊。
哈哈。

jQuery-事件和选择器

说白了，jQuery选择器和事件处理其实很简单，但是如果用得好的话，可以省去很多麻烦。
我们先来说说最重要的事情。
选择器中的过滤器选择器非常实用。
比如我们去年做的项目中，我们使用：eq(2 )来查找列表中的第三项，它直接存储了密码。
还有一点就是属性选择器。
[attr='part'] 这包括的问题类型在去年调试表单时拯救了团队。
当时，数百个收件箱与特定关键字混合在一起，如果没有它，真的很难编写整齐的规则。
还有另一个重要的细节。
:checked 和 :selected 表单状态选择器应该用于特定控件。
不要执着于选择本身。
我去年就遇到过这个陷阱，说实话，这是一个陷阱。

一开始我以为.click()和.on('click')没有什么区别，但后来我意识到我错了。
.on() 支持事件冒泡和委托，特别适合动态内容。
例如，向ul中的li添加事件会自动触发，新添加的li也会自动触发。
很多人没有注意到这一点。
请记住，解析事件时最好编写特定类型，否则整个页面事件都会被解析。
去年，重建工作因此长期停滞。

建议尝试使用 :even 和 :odd 来处理数据碎片。
与 .each() 结合使用时非常有效，但不要在非常大的数据集上使用它，因为它会停止。

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

嘿，你在听这个吗？事实上，我在使用 jQuery 时遇到了一些陷阱，特别是 nth-of-type(n)。

我记得在2 02 3 年为上海一家购物中心做活动页面时遇到过类似的情况。
当时有要求为表格偶数行的TD添加浅灰色背景。
最初我直接使用 :nth-child(2 n) 来选择，但后来我意识到有些行没有被选择，即使它们显然是偶数行。
后来我意识到，因为表中的某些位置是空单元格或合并单元格，所以 :nth-child 是根据所有子元素计算的，这使事情变得混乱。

nth-of-type(n) 的核心是只检查相似的元素。
例如，选择 .table-item:nth-of-type(2 ) 会在 .table-item 等元素中搜索第二个元素，无论其前面是否有其他类型。
正如您所说，如果父元素下的子元素顺序为 p、span、p，则 :nth-of-type(2 ) 将匹配第二个 p，而不是第二个子元素 span。

我之前创建了一个轮播，它在轮播项目上使用了 nth-of-type（奇数）来为奇数编号的项目添加边框。
这个很清楚了，对比一下li和li的顺序就可以了。
但请注意，大量使用 2 n+1 和 n+3 等公式会减慢浏览器解析速度。
我有一位同事编写了一个复杂的公式来选择特定的列表项。
结果，页面上的列表被移动了，变成了PPT。
最后，他使用 :nth-child 并添加了一个类来做到这一点。

另一个陷阱是弄乱 :nth-child()。
你举的例子特别好。

P1

Span1

P2

, :nth-child(2 ) 根本不匹配 p。
因为第二个是跨度。
然而，:nth-of-type(2 ) 与 P2 完全匹配。
许多学生在第一次学习 CSS 选择器时对这种差异感到困惑。

你说的浏览器兼容性没有问题。
现代浏览器对此支持得很好。
这是一个动态元素。
例如，如果你使用 jQuery 的 .append() 添加一个新的 li，此时 :nth-of-type(n) 就不是一个选项，所以你必须等到 DOM 更新。
然后我切换到带有下标索引的 .eq() 或 .index() 。
效果是一样的，但是代码更直观。

无论如何，总结一下：如果您想在父级中选择特定序列号的相似元素，请使用 nth-of-type(n)。
:nth-child() 非常不同。
一种是检查类型，另一种是检查所有子元素。