手写jquery9.0.0版本
;(function(){
function jQuery(selector){
return new jQuery.fn.init(selector)
}
jQuery.fn=jQuery.prototype = {
construtor:jQuery,
jquery:"9.0.0",
length:0,
get(index){
return this[index]
},
click(callback){
for(var i =0;i<this.length;i++){
this[i].addEventListener("click",callback)
}
},
toggle(){
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"
}
}
}
}
var isReady =false;
var readyList =[];
document.addEventListener("DOMContententLoaded",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[i] = list[i];
}
}
}
})()
让new init 产生对象拥有jquery的显示原型的方法
jQuery.fn.init.prototype= jQuery.fn
//全局对JQuery与$可以访问
window.$ = window.jQuery = jQuery
jquery方法的调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/JQ/jquery-9.0.0.js"></script>
<script>
$(function(){
alert("jq已经加载完毕")
})
$(function(){
alert("jq已经加载完毕2")
})
</script>
</head>
<body>
<h1>jquery还是大哥吗?</h1>
<p>是的</p>
<h1>市场占用96.8</h1>
<script>
$("button").click(function(){
$("h1").toggle().click(function(){
alert(this.innerText)
})
})
$(function(){
alert("jq已经加载完毕3")
})
</script>
</body>
</html>
jQuery 的 API 手册中,extend 方法挂载在 jQuery 和 jQuery.fn 两个不同的对象上,但在 jQuery 内部代码实现的是相同的,只是功能各不相同。
官方解释:
-
jQuery.extend:Merge the contents of two or more objects together into the first object.(把两个或者多个对象合并到第一个对象当中)
-
jQuery.fn.extend:Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把对象挂载到 jQuery 的 prototype 上以扩展一个新的 jQuery 实例方法 。)
-
实例
-
function getOpt(target, obj1, obj2, obj3){ $.extend(target, obj1, obj2, obj3); return target; } var _default = { name : 'wenzi', age : '25', sex : 'male' } var obj1 = { name : 'obj1' } var obj2 = { name : 'obj2', age : '36' } var obj3 = { age : '67', sex : {'error':'sorry, I dont\'t kown'} } getOpt(_default, obj1, obj2, obj3); // {name: "obj2", age: "67", sex: {error: "sorry, I dont't kown"}}
概括:对于原生的jquery封装,新手很难理解,特别是没有系统的学习jquery,有点js在显示原型上创建方法并使用的意思