js系列三十一：jQuery封装详解

同名公众号 - 人生代码

于 2019-04-07 20:15:07 发布

阅读量679

点赞数

分类专栏： js系列三十一：jQuery封装详解大厂面试题：每天带你一道大厂面试题文章标签： js系列三十一：jQuery封装详解

本文链接：https://blog.youkuaiyun.com/qq_36772866/article/details/89037095

版权

144 篇文章 ¥79.90 ¥99.00

订阅专栏

1 篇文章

订阅专栏

本文探讨了jQuery库的封装细节，解释了为何在使用时可以省略new关键字并直接使用$。通过分析源码，揭示了jQuery如何将构造函数和$符号关联，以及在构造过程中init方法的作用。此外，还介绍了jQuery的两种扩展方法，为读者展示了自定义jQuery插件的基本方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用jQuery时，我们通常会这样写：

// 声明一个jQuery实例
$('.target')

// 获取元素的css属性
$('.target').css('width')
//获取元素的微信信息
$('.target').offset();

是不是与普通函数的对象实例不太一样，new关键字去哪里了，$符号又是什么？带着这些疑问，一起来实现一个简化版的jQuery库吧。
一个库就是一个单独的模块，因此应该使用自执行函数的方式模拟一个模块。

(function(){

})();

既然能够在全局直接调用jQuery，则说明jQuery被挂载在了全局对象上面，因此当我们在模块中对外提供接口时，可以采取window.jQuery的方式。

var jQuery = {};
// ..
window.jQuery = jQuery;

我们在使用过程中，并没有使用jQuery，而是使用了$,其实只是多加了一个赋值的操作。

window.$ = window.jQuery = jQuery;

在使用过程中直接使用$,其实相当于直接调用构造函数jQuery创建了一个实例，而没有使用new。但是

了解本专栏