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{ 300px;height: 300px;border:1px solid #ddd;margin: 50px auto;padding: 20px;} .header{height: 40px;} .header span{display: block; 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);
.