jQuery 技术揭秘
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操作
动画
坐标
*/
.
