admin管理员组文章数量:1634367
前言:
我们都知道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
<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++;
}
本文标签: jquery
版权声明:本文标题:手写jquery(自己封装) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729187116a1189142.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论