前言：
我们都知道jQuery，jQuery是一个快速的，简洁的javaScript库。它的出现让我们不用再在html里面插入一堆js来调用命令了，只需使用选择器查找即可。
这篇文章主要适合新手，尝试自己去封装jQuery，同时加深对jQuery的理解。
文章目录
- 首先我们新建一个html，里面引入真正的jQuery 3.6版本，打印一下它里面都有哪些内容。
真实的jQuery有以下的方法，打印的jQuery对象hs是一个列表，里面有h1,h2两个元素，以及长度。
hs.jquery有一个版本，来自于$.prototype.jquery,
一.那我们自己如何实现这个功能呢？
-
第一步 新建一个js文件，写一个匿名函数自执行，有的插件前面会给加个 ; 代表结束上一次
;(function() {})() -
第二步 定义一个jQuery的构造函数，以及它的显式原型
// jQ的构造函数
function jQuery(selector) {
// 返回new 一个初始化函数
return new jQuery.fn.init(selector);
}
// 定义JQuery构造函数的显示原型
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
jquery: "9.0.0",
length: 0,
get(index) {
return this[index];
},
-
第三步 全局的query与$都可以访问
window.$ = window.jQuery = jQuery; -
第四步 使用自己的jQuery 新建一个html文件 导入自己写的js
<script src="js/jquery-9.0.0.js"></script>
打印一下自己写的jQuery，发现也有了长度版本以及构造函数，只是没有人家的方法多，但大概已经呈现出来
二. selector选择器
我们自己目前构建的jQuery，hs上并没有jQuery方法，有constructor，但是constructor并不是指向jQuery
1. 如何让new init 产生对象拥有jQuery显式原型上的所有方法
关键点 jQuery.fn.init.prototype=jQuery.fn;
2. 挂载一个get方法，那么h1就可以打印出来
jQuery实现了无new化操作，返回一个new方法，并把init的prototype 原型指向jQuery
三. 实现点击切换，显示与隐藏
click(callback){
// 单击时候让this的每个元素执行callback回调函数
for(var i=0;i<this.length;i++){
this[i].addEventListener("click",callback);
}
// jq实现链式操作每个函数执行完毕都是返回this
return this;
},
toggle(){
// 遍历每个元素如果display不是none就隐藏，否则就显示
for(var i=0;i<this.length;i++){
if(this[i].style.display!="none"){
this[i].style.display="none"
}else{
this[i].style.display="block";
}
}
return this;
},
由于每个里面都有for循环，就比较麻烦，所以我们封装一个each方法，来实现显示与隐藏
each(callback) {
for (var i = 0; i < this.length; i++) {
callback(this[i])
}
return this;
},
click(callback) {
// item指向的被遍历的每个元素
this.each(function(item) {
// 让每个元素注册click事件 执行callback方法
// 也就是click 括号里面的回调函数
item.addEventListener("click", callback);
})
return this;
},
toggle() {
this.each(function(item) {
if (item.style.display != "none") {
item.style.display = "none"
} else {
item.style.display = "block";
}
})
}
}
四. ready方法
当 DOM（document object model 文档对象模型）加载完毕且页面完全加载（包括图像）时发生 ready 事件。
ready() 方法规定当 ready 事件发生时执行的代码。
var isReady = false;
var readyList = [];
document.addEventListener("DOMContentLoaded", function() {
isReady = true;
readyList.forEach(item => item());
readyList = [];
})
// jq初始化函数
jQuery.fn.init = function(selector) {
if (typeof selector === "function") {
if (!isReady) {
selector()
} else {
readyList.push(selector)
}
} else {
// 获取到选择列表
var list = document.querySelectorAll(selector);
// 当前对象的长度
this.length = list.length;
for (var i = 0; i < list.length; i++) {
//遍历类别对 this赋值
this[i] = list[i];
}
}
}
五. extend方法
jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。
jQuery.extend = jQuery.fn.extend = function() {
var options, name, src, copy, copyIsArray, clone,
target = arguments[ 0 ] || {
},
i = 1,
length = arguments.length,
deep = false;
// Handle a deep copy situation
if ( typeof target === "boolean" ) {
deep = target;
// Skip the boolean and the target
target = arguments[ i ] || {
};
i++;
}