jQuery源码解读：选择器与入口函数解析

本文主要探讨了jQuery库中的选择器机制，包括基本选择器、层次选择器、过滤选择器以及表单选择器等，并通过代码示例解析了它们的工作原理。 在jQuery库中，选择器是核心功能之一，用于在DOM树中定位并操作指定的元素。jQuery对象的构造函数`jQuery`接收一个选择器和上下文参数，通过`jQuery.fn.init`初始化方法创建一个新的jQuery对象实例。`jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype`这一设计使得`new jQuery()`和`jQuery()`都可以返回一个jQuery对象，确保了方法的链式调用。 **基本选择器**： - `$("#myElement")`：通过ID选择元素，ID在文档中必须是唯一的，因此返回的结果通常是一个元素。 - `$("div")`：通过标签名选择元素，返回所有匹配标签的元素数组。 - `$(".myClass")`：通过CSS类选择元素，返回所有具有该类的元素。 - `*$("*")`：选择所有元素，提供灵活的联合选择能力，如`$("#myElement,div,.myclass")`。 **层次选择器**： - `$("form input")`：在指定的父元素（本例为form）内选择特定的子元素（input）。 - `$("#main > *")`：选择id为'main'的元素的所有直接子元素。 - `$("label + input")`：选择紧跟在label元素后面的input元素。 - `$("#prev ~ div")`：同胞选择器，选取id为'prev'元素的所有同级div元素。 **过滤选择器**： - `$("tr:first")`：选取所有tr元素中的第一个。 - `$("tr:last")`：选取所有tr元素中的最后一个。 - `$("tr:even")`：选取所有tr元素的偶数索引项（从0开始）。 - `$("tr:odd")`：选取所有tr元素的奇数索引项。 - `$("td:eq(2)")`：选取所有td元素中索引为2的元素。 - `$("td:gt(4)")`：选取所有td元素中索引大于4的元素。 - `$("td:lt(4)")`：选取所有td元素中索引小于4的元素。 **内容过滤选择器**： - `$("div:contains('John')")`：选取包含特定文本（如'John'）的所有div元素。 - `$("td:empty")`：选取所有没有内容（包括文本节点）的td元素。 - `$("div:has(p)")`：选取包含p元素的所有div元素。 - `$("div:hidden")`：选取所有隐藏的div元素。 - `$("div:visible")`：选取所有可见的div元素。 **属性过滤选择器**： - `$("div[id]")`：选取所有具有id属性的div元素。 - `$("input[name='n...']")`：选取所有name属性等于'n...'的input元素。 除了这些，jQuery还支持更多的选择器，如`:not()`, `:header`, `:animated`等，以及自定义选择器，为开发者提供了强大的DOM操作能力。通过理解这些选择器，开发者可以更高效地定位和操作网页中的元素，实现丰富的交互效果和动态更新。