您的位置：首页 > Web前端 > JQuery

献给和我合作的过得前端童靴们：jquery源码分析--序2

2016-03-25 17:20 591 查看

jquery 源码分析

jquery 版本 1.12.2

浏览器： ie，谷歌，火狐, 360

编辑器：Notepad++

上篇说到jquery 加载的时候jquery把自己初始化成window的方法供全局调用。这一篇我们分析jquery这个方法究竟做了哪些事情？

该段代码就是定义jQuery的这个函数。里面只有一段代码：

return new jQuery.fn.init( selector, context )

这里有两个信息

1. jQuery.fn 是什么？

2. init是怎样创建jQuery对象的？

首先我们来看第一个问题： jQuery.fn 是什么？

我又精简了一下代码：

jQuery.fn = jQuery.prototype = {}

prototype是返回对象类型原型的引用，可以实现继承。那么jQuery.fn是可以称之为jQuery的父类或者原型对象。

父对象提供了以下方法：toArray，get，pushStack，each，map，slice，first，last，eq，end，push，sort，splice。大部分方法是不是很眼熟？在http://jquery.cuishifeng.cn/手册中大部分方法都能被找到。

注意下这个属性： “constructor： jQuery”。看到这里才知道原来之前所说的”jQuery”函数就是jQuery的构造函数呀！“$(‘a’)”其实就是调用jQuery的构造函数，创建jQuery对象！！！！(可以这么去理解，或者说作者希望去被这么理解，但实际上他用一个函数去包装了创建对象的创建。constructor并不具备构造函数的实际责任)

第二个问题 init是怎样创建jQuery对象的？

为了方便我又做了一下精简：

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

init就是jQuery.fn的一个方法。那么this就是 jQuery.fn的实例，然后jQuery.fn又是jQuery的父对象。所以这块就是返回了jQuery对象。

我们得到了jQuery对象的构造函数，当jQuery加载的时候有没有创建过jQuery对象呢？我们来实验一下：

html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-1.12.2.js" ></script>
</head>

<body>
<div class="search_main clearfix"></div>
</body>
</html>

jquery源码：

谷歌浏览器debug：

很惊奇的发现，在加载的过程中，创建了5个jquery对象。下一篇我们就来分析这5个jQuery对象。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航