jQuery源码分析之init的详细介绍

下面我将为你详细讲解“jQuery源码分析之init的详细介绍”的完整攻略。

前言

在开始介绍init之前，我们先来了解一下jQuery的工具函数——$。在jQuery中，$是用来操作DOM元素的工具函数，实际上$只是jQuery对象的一个别名。$(selector)执行的是一个工厂函数，该函数返回一个jQuery对象，也就是说，我们通过$(selector)获取的实际上是jQuery的一个实例对象，而不是普通的DOM对象。

jQuery的init方法

我们可以通过上述方式获取到一个jQuery实例对象，但是其实际上是调用了jQuery的一个init方法来实现的。init方法是jQuery中最复杂的方法之一，因为它必须考虑各种情况下的参数类型和参数组合。下面来看一下init的源码实现：

init = jQuery.fn.init = function( selector, context, root ) {
    // ...
};

在源码中，把init方法赋值给了jQuery的原型，也就是说，init是一个jQuery实例对象的共有方法。init本质上是在DOM元素的基础上进行的封装，不同的参数类型和组合根据具体的情况会产生不同的效果。

下面我们来分别介绍三个参数selector、context、root:

selector

selector是选择器，它可以是CSS选择器，也可以是HTML标签字符串，还可以是一个DOM元素或者DOM元素数组，当然它也可以是一个jQuery实例对象。selector作为第一个参数，最重要的作用就是帮助我们选中特定的DOM元素。

示例1：

// 通过css选择器获取dom元素
$('div')

// 通过id选择器获取dom元素
$('#myDiv')

// 通过 class 选择器获取 dom 元素
$('.myClass')

示例2：

// 通过html标签字符串创建dom元素
$('<div class="myClass"></div>')

context

context是一个DOM元素或者document对象，它用来限定选择器的作用范围。当我们不指定context时，$会默认选中整个文档中匹配选择器的元素。我们也可以在指定的context中查找匹配的元素。

示例：

// 在#myDiv的子元素中查找类名为myClass的元素
$('.myClass', $('#myDiv'))

root

root参数主要用于内部使用，它代表着待处理的DOM元素树的根元素，它通常用在jQuery整体DOM操作的上下文中，比如$.ajax()方法中的context参数。

示例：

$.ajax({
    url: 'http://example.com/api',
    context: document.body
});

总结

通过上面的介绍，我们可以看出，init之所以如此复杂，是因为jQuery想尽可能地满足开发者的需求，因此init在支持CSS选择器的基础上，还支持html标签、DOM元素、DOM元素数组、jQuery对象等等多种参数类型和组合，以及context和root两个参数，最终可以灵活地选择DOM元素。