前言： 我们都知道jQuery，jQuery是一个快速的，简洁的javaScript库。它的出现让我们不用再在html里面插入一堆js来调用命令了，只需使用选择器查找即可。 这篇文章主要适合新手，尝试自己去封装jQuery，同时加深对jQuery的理解。
文章目录
一.那我们自己如何实现这个功能呢？二. selector选择器1. 如何让new init 产生对象拥有jQuery显式原型上的所有方法2. 挂载一个get方法，那么h1就可以打印出来
三. 实现点击切换，显示与隐藏四. ready方法五. extend方法
首先我们新建一个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
打印一下自己写的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[i].addEventListener("click",callback); } // jq实现链式操作每个函数执行完毕都是返回this return this; }, toggle(){ // 遍历每个元素如果display不是none就隐藏，否则就显示 for(var i=0;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++; }