1.测试页面;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手写jQuery框架</title>
<style type="text/css">
*{margin: 0px;padding: 0px;font-family: "微软雅黑";}
.box{width: 300px;height: 300px;border:1px solid #ddd;margin: 50px auto;padding: 20px;}
.header{height: 40px;}
.header span{display: block;width: 80px;height: 40px;text-align: center;line-height: 40px;color: #fff;background-color: blue;float: left;margin-left: 50px;font-size: 14px;cursor: pointer;}
.conter{height: 240px;background: #abcdef;margin-top: 20px;}
</style>
<script src="js/jquery-1.2.0.js"></script>
</head>
<body>
<div id="box" class="box">
<div class="header">
<span class="star">开启</span>
<span class="end">关闭</span>
</div>
<div class="conter"></div>
</div>
<script type="text/javascript">
// $(function() { // window.onload只能出现一次 $(function(){})可以出现多次
// alert(1);
// });
// $(function() { // window.onload只能出现一次 $(function(){})可以出现多次
// alert(2);
// })
// javascript 语言的设计原理
// console.log($("#box"));
// console.log($(".end"));
$(".star").click(function(){
alert(1);
}); // jquery对象 event属性 element对象
</script>
</body>
</html>
2.理论分析：
/**
* 忍者秘籍
* 函数 对象 面向对象 设计原理
* 简化DOM操作 ajax请求
* 从对象开始
* js 基于原型的面向对象语言
* 注：不存在独立的函数,所有的函数必须是某个对象的方法
* $('#box') jQuery对象
* $('#box').animate() //对象
*/
/*创建自运行函数(闭包) $*/
// 方法一：将自运行函数赋值给一个变量,通过运行自运行函数获取返回值
/*var jQuery = (function(){
return "$"; //
})(); // 调用 返回值
alert(jQuery); // 获取自运行函数的返回值*/
// 方法二：在自运行函数中再声明一个函数(构造函数)
/*(function(window){ // 参数 window
function jQuery(){ // 在jQuery()函数中封装document对象
//
}
function $(){
new jQuery(); // new一个jquery实例
}
window.jQuery = window.$ = $;// 将 $ 挂载在 window.$ 上
})(window); // 传参 window
$(); // 调用$()方法*/
/**
* 面向对象
* 封装 继承 多态
* 通过构造函数 定义 类
* 通过类 创建 实例对象
* 通过实例对象 调用 方法(方法不能独自调用,需要通过对象调用)
*/
function Person(){
// 如果将Person()作为普通函数看待,Person() 就是一个 function对象, 我们关注其返回值
// 如果将Person()作为构造函数看待,Person() 就是一个 类, 我们关注 通过new创建Person的实例对象
this.name = 'Tom'; // 在构造函数中,this指向实例对象
this.sun = function() {
// body...
}
}
var a = new Person(); // 创建实例对象
console.log(a.name);
// 所有的数据类型都是对象
// function Function 通过字面量的写法,创建function的实例对象
3.实现;
jQuery-1.1.0.js
/**
* 通过$进行驱动
* 通过类 封装属性和方法
* 对象与类之间就是一个继承的过程,实例对象会继承类封装的属性和方法
* 不是通过extend关键字而是通过prototype属性来继承(将属性和方法封装在原型对象中)
* 构造函数有一个prototype属性,该属性指向当前构造函数的prototype的原型对象
*/
// 注：原型对象继承 与 this关键字继承 之间的区别
function jQuery(arg){ // 构造函数 本质而言,jQuery是Function的实例对象,拥有prototype、agruments、this等属性
this.event = []; // this指向当前所创造的实例对象 对象上面来进行添加 复制(继承)
// 判断arg类型
switch(typeof arg){
case "function":
// window.onload = arg; // 绑定window.onload事件
myAddevent(window,"load",arg);
break;
case "string": // 3中结果 $(".box") $("#box") $("span")
// 判断字符串首字符
switch(arg.charAt(0)){ // 将arg作为对象
case "#":
// 注:将element对象转换为jquery对象
var obj = document.getElementById(arg.substring(1)); //#box 去掉# element对象
// 将element对象方法数组中,转换成jquery对象
this.event.push(obj);
break;
case ".":
// 适配的设计模式
this.event = getClass(document,arg.substring(1)); // 去除.
break;
default: // 其他情况
break;
}
break;
case "object":
break;
}
}
function $(arg){ // arg 代表任意的类型
return new jQuery(arg);
}
// 给函数绑定事件
function myAddevent(obj,sev,fn){ // 参数1：对象,参数2；绑定的事件,参数3：绑定的函数
// 低版本浏览器兼容处理
if(obj.addachEvent){ // 当前传入的obj支持addachEvent()方法
obj.addachEvent("on"+sev,fn); // 参数1：事件绑定的类型,参数2：要绑定的函数
}else{
obj.addEventListener(sev, fn, false); // 参数1：事件类型,参数2：回调函数,参数3：事件的捕获
}
}
// 查到当前文档指定的class名称的元素
function getClass(ohtml,oclass){// 参数1：所有的元素 参数2：指定的class
// 遍历所有的元素 查找指定的class
var myElement = ohtml.getElementsByTagName("*"); // 获得当前所有的元素
var result = []; // 定义结果数组
for(var i=0;i<myElement.length;i++){
if(myElement[i].className == oclass){ // 依次判断所选值 与 传值 是否相等
result.push(myElement[i]); // 放入结果数组
}
}
return result;
}
// css eq click
jQuery.prototype = {
// 在原型对象中写规则
click:function(fn){ // 传入function参数
for(var i=0;i<this.event.length;i++){
// 给所有的element对象绑定事件
myAddevent(this.event[i],"click",fn); // 调用事件绑定函数
}
}
};// 通过jQuery的prototype属性,指向原型对象
// Element.addEventListener(load, fn, false); // 参数1：事件类型,参数2：回调函数,参数3：事件的捕获
// console.log($().__proto__); // __proto__ 是每个对象都有的隐藏属性,它指向原型对象,指向它的构造函数(也就是它的类) 此处执行当前的jQuery
/**
* 1.$(".box") $("#box") $("span") 通过字符串查找
* 2.$(this) 通过关键字查找
* 3.$(function(){}) 传递函数
*/
$(function(){ // 相当于 window.onload
});// 页面加载完毕,回调的函数
// 类 进行封装
// prototype 进行继承
// var a = new jQuery();
// alert(a.event);.