1.平时jquery调用页:
index.html :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="js/jquery.min.js"></script> <script> var obj = {name:"Tom"}; var obj1 = {age:30,height:175,weight:68}; console.log(obj); $.extend(obj,obj1); console.log(obj); // extend 给对象扩展属性 参数2以上 // extend 给jquery对象扩展属性方法(静态) 参数1 // extend 给jquery实例对象(公共 原型)扩展属性方法 参数1 $.extend({ getName:function(){ alert("Tom is Tom"); } }) $.fn.extend({ // 在原型上 getName:function(){ alert("Tom is Tom"); } }); console.log($.getName()); console.log($().getName()); </script> </body> </html>
2.测试页
test.html :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery源码</title> </head> <body> <script src="js/jquery.1.1.0.js"></script> <script> // 将jquery作为对象对待 // jQuery.fn // 指向jquery原型 // jQuery.extend // 给对象扩展属性 // jQuery.extend({ // }); // jQuery.fn.extend({ // }); var obj = {name:"tom"}; var obj1 = {age:30,height:175,weight:68}; $.extend(obj,obj1) $.extend({ getName:function(){ // } }); var result = $.extend({},obj,obj1); console.log(result); </script> </body> </html>
3.自己封装的jquery代码
jquery-1.1.0.js :
/** * 创建自运行函数 * 私有的命名空间 * 局部作用域 */ (function(window){ // 局部作用域 // 2.创建jquery的构造函数 var jQuery = function(selector){ //jQuery 类 return new jQuery.prototype.init(selector); // 桥接设计模式 } // 4.将jQuery作为对象,fn是其属性 jQuery.fn = jQuery.prototype = { // 原型对象 init:function(selector){ // 原型对象初始化方法,相当于构造函数 /* 1:DOM元素 2:body 3:字符串 html字符串 #id .class 4:选择器表达式 #id .class 5:function 事件回调 6:对象 */ } // jQuery.extend // 对象 属性 // jQuery.prototype // 原型 }; // 3.桥接设计模式 // jQuery.prototype.init.prototype = jQuery.prototype; jQuery.fn.init.prototype = jQuery.fn; // console.log(jQuery.prototype.init); // 5 jQuery.extend = jQuery.fn.extend = function(){ var length = arguments.length; // 参数个数 var target = arguments[0] || {}; var i = 1; var options; var name; var copy; var src; // 类型 if(typeof target !=="object" && typeof target !=="function"){ target = {}; // 默认是一个对象 } console.log(target); // 传一个参数 if(length == i){ target = this; // 改变this指向 console.log(target); --i; } // 传2个以上 for(;i<length;i++){ // 1 if((options = arguments[i]) != null){ // 下标为1及以上 console.log(options); for(name in options){ // // 循环可枚举属性 console.log(options[name]); copy = options[name]; src = target[name]; // 第一参数 扩展属性 console.log(src); if(copy != undefined){ target[name] = copy; } } } return target; } // 扩展工具函数 jQuery.extend = ({ isFunction:function(){ // 静态方法 // }, isWindow:function(){ // } }) } window.$ = window.jQuery = jQuery; })(window) // 1.传window对象(全局作用域里的对象) console.log($().css); // 数据类型是object $() 创建实例对象 $(this) mvc mvvm Grunt // 类 class 构造函数 函数 对象 // function xxx() {} Function // var obj = {}; // obj.name="max"; //私有 静态 /* 工具函数 jQuery静态方法 异步列队 数据缓存 属性操作 事件处理 选择器 // 正则 sizzle DOM遍历 DOM操作 css操作 动画 坐标 */
.