[关闭]
@fantaghiro 2014-11-17T14:15:16.000000Z 字数 42225 阅读 1710

妙味课堂 - JS面向对象

学习笔记 妙味课堂 js

什么是面向对象编程

面向对象编程（OOP）的特点

对象的组成

创建第一个面向对象程序

  1. //var obj = {};
  2. var obj = new Object(); //创建了一个空的对象
  4. obj.name = '小明'; //属性
  5. obj.showName = function(){ //方法
  6.     alert(this.name);
  7. }
  9. obj.showName();
  1. //var obj = {};
  2. var obj = new Object(); //创建了一个空的对象
  4. obj.name = '小明'; //属性
  5. obj.showName = function(){ //方法
  6.     alert(this.name);
  7. }
  9. obj.showName();
  11. var obj2 = new Object(); 
  13. obj2.name = '小强';
  14. obj.showName = function(){
  15.     alert(this.name);
  16. }
  18. obj2.showName();

工厂方式

  1. //工厂方式：封装函数
  3. function createPerson(name){
  4.     //1. 原料
  5.     var obj = new Object();
  7.     //2. 加工
  8.     obj.name = name;
  9.     obj.showName = function(){
  10.         alert(this.name);
  11.     };
  13.     //3. 出厂
  14.     return obj;
  15. }
  17. var p1 = createPerson('小明');
  18. p1.showName();
  19. var p2 = createPerson('小强');
  20. p2.showName();
  1. /* 当new去调用一个函数：这个时候函数中的this就是创建出来的对象，而且函数的返回值直接就是this啦。（这叫做隐式返回） */
  3. // new后面调用的函数：构造函数
  5. function CreatePerson(name){
  6.     this.name = name;
  7.     this.showName = function(){
  8.         alert(this.name);
  9.     };
  10.     // return obj; 隐式返回，所以这一行不用写了
  11. }
  13. var p1 = new CreatePerson('小明');
  14. p1.showName();
  15. var p2 = new CreatePerson('小强');
  16. p2.showName();
  1. /* 当new去调用一个函数：这个时候函数中的this就是创建出来的对象，而且函数的返回值直接就是this啦。（这叫做隐式返回） */
  3. // new后面调用的函数：构造函数
  5. function CreatePerson(name){
  6.     this.name = name;
  7.     this.showName = function(){
  8.         alert(this.name);
  9.     };
  10.     // return obj; 隐式返回，所以这一行不用写了
  11. }
  13. var p1 = new CreatePerson('小明');
  14. p1.showName();
  15. var p2 = new CreatePerson('小强');
  16. p2.showName();
  18. //alert(p1.showName == p2.showName); //false
  1. /*
  2.     var a = [1, 2, 3];
  3.     var b = [1, 2, 3];
  5.     alert(a == b); //false;
  6. */
  8. /*
  9.     var a = 5;
  10.     var b = a;
  11.     b += a;
  12.     alert(b); //8
  13.     alert(a); //5 基本类型：赋值的时候只是值的复制
  14. */
  16. /*
  17.     var a = [1, 2, 3]; 
  18.     var b = a; 
  19.     b.push(4);
  20.     alert(b); //[1, 2, 3, 4]
  21.     alert(a); //[1, 2, 3, 4] 对象类型：赋值不仅是值的复制，而且也是引用的传递
  22. */
  24. /*
  25.     var a = [1, 2, 3];
  26.     var b = a;
  27.     b = [1, 2, 3, 4];
  28.     alert(b); //[1, 2, 3, 4]
  29.     alert(a); //[1, 2, 3] 只要赋值就会在内存中重新生成，所以a，b互补影响
  30. */
  32. /*
  33.     var a = 5;
  34.     var b = 5;
  35.     alert(a == b); //true 基本类型的比较：只要值相同就可以
  36. */
  38. /*
  39.     var a = [1, 2, 3];
  40.     var b = [1, 2, 3];
  41.     alert(a == b); //false 对象类型：值和引用都相同才行
  42. */
  44. /*
  45.     var a = [1, 2, 3];
  46.     var b = a;
  47.     alert(a == b); //true
  48. */

原型 —— prototype

  1. var arr = []; 
  2. arr.number = 10;
  3. Array.prototype.number = 20;
  4. alert(arr.number); //10 普通方法的优先级高于原型
  1. //原型：prototype：要写在构造函数下面
  2. var arr = [1, 2, 3, 4, 5];
  3. var arr2 = [2, 2, 2, 2, 2];
  4. Array.prototype.sum = function(){
  5.     var result = 0;
  6.     for(var i=0; i<this.length; i++){
  7.         result += this[i];
  8.     }
  9.     return result;
  10. }
  12. /*
  13. arr.sum = function(){
  14.     var result = 0;
  15.     for(var i=0; i<this.length; i++){
  16.         result += this[i];
  17.     }
  18.     return result;
  19. }
  21. alert(arr.sum()); //15
  22. */
  23. alert(arr.sum());
  24. alert(arr2.sum());
  1. function CreatePerson(name){
  2.     this.name = name; //变化的，不能公用的属性不能写在原型上
  3. }
  4. CreatePerson.prototype.showName = function(){
  5.     alert(this.name);
  6. }   
  8. var p1 = new CreatePerson('小明');
  9. var p2 = new CreatePerson('小强');
  11. alert(p1.showName == p2.showName); //true

混合的编程模式

  1. //面向对象的写法
  2. function 构造函数(){
  3.     this.属性
  4. }
  5. 构造函数.原型.方法 = function(){};
  7. //面向对象的使用
  8. var 对象1 = new 构造函数();
  9. 对象1.方法();

面向对象的选项卡

先写出普通方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>面向对象的选项卡</title>
  6.     <style>
  7.         #div1 div { width: 200px; height: 200px; border: 1px solid #000; display: none; }
  8.         .active { background: red; }
  9.     </style>
  10.     <script>
  11.         window.onload = function(){
  12.             var oParent = document.getElementById('div1');
  13.             var aInput = oParent.getElementsByTagName('input');
  14.             var aDiv = oParent.getElementsByTagName('div');
  16.             for(var i=0; i<aInput.length; i++){
  17.                 aInput[i].index = i;
  18.                 aInput[i].onclick = function(){
  19.                     for(var i=0; i<aInput.length; i++){
  20.                         aInput[i].className = '';
  21.                         aDiv[i].style.display = 'none';
  22.                     }
  23.                     this.className = 'active';
  24.                     aDiv[this.index].style.display = 'block';
  25.                 }
  26.             }
  27.         }
  28.     </script>
  29. </head>
  30. <body>
  31.     <div id="div1">
  32.         <input type="button" value="1" class="active">
  33.         <input type="button" value="2">
  34.         <input type="button" value="3">
  35.         <div style="display: block">11111</div>
  36.         <div>22222</div>
  37.         <div>33333</div>
  38.     </div>
  39. </body>
  40. </html>

普通方法变型

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>面向对象的选项卡</title>
  6.     <style>
  7.         #div1 div { width: 200px; height: 200px; border: 1px solid #000; display: none; }
  8.         .active { background: red; }
  9.     </style>
  10.     <script>
  12.         var oParent = null;
  13.         var aInput = null;
  14.         var aDiv = null;
  16.         window.onload = function(){
  17.             oParent = document.getElementById('div1');
  18.             aInput = oParent.getElementsByTagName('input');
  19.             aDiv = oParent.getElementsByTagName('div');
  21.             init();
  23.         };
  25.         function init(){ //初始化的函数方法
  26.             for(var i=0; i<aInput.length; i++){
  27.                 aInput[i].index = i;
  28.                 aInput[i].onclick = change;
  29.             }
  30.         }
  32.         function change(){
  33.             for(var i=0; i<aInput.length; i++){
  34.                 aInput[i].className = '';
  35.                 aDiv[i].style.display = 'none';
  36.             }
  37.             this.className = 'active';
  38.             aDiv[this.index].style.display = 'block';
  39.         }
  41.         /*
  42.         - 普通方法变型
  43.             - 尽量不要出现函数嵌套函数
  44.             - 可以有全局变量
  45.             - 把onload中不是赋值的语句放到单独的函数中
  46.         */
  47.     </script>
  48. </head>
  49. <body>
  50.     <div id="div1">
  51.         <input type="button" value="1" class="active">
  52.         <input type="button" value="2">
  53.         <input type="button" value="3">
  54.         <div style="display: block">11111</div>
  55.         <div>22222</div>
  56.         <div>33333</div>
  57.     </div>
  58. </body>
  59. </html>

关于this的指向

  1. oDiv.onclick = function(){
  2.     this: oDiv
  3. };
  5. ---
  7. oDiv.onclick = show;
  8. function show(){
  9.     this: oDiv
  10. }
  12. ---
  14. oDiv.onclick = function(){
  15.     show();
  16. };
  17. function show(){
  18.     this: window
  19. }

改写成面向对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>面向对象bianxie</title>
  6.     <style>
  7.         #div1 div { width: 200px; height: 200px; border: 1px solid #000; display: none; }
  8.         .active { background: red; }
  9.     </style>
  10.     <script>
  12.         var oParent = null;
  13.         var aInput = null;
  14.         var aDiv = null;
  16.         window.onload = function(){
  18.             var t1 = new Tab();
  19.             t1.init();
  21.         };
  23.         function Tab(){
  24.             this.oParent = document.getElementById('div1');
  25.             this.aInput = this.oParent.getElementsByTagName('input');
  26.             this.aDiv = this.oParent.getElementsByTagName('div');
  27.         }
  29.         Tab.prototype.init = function(){
  30.             var This = this;
  31.             for(var i=0; i<this.aInput.length; i++){
  32.                 this.aInput[i].index = i;
  33.                 this.aInput[i].onclick = function(){
  34.                     This.change(this);
  35.                 };
  36.             }
  37.         }
  39.         Tab.prototype.change = function(obj){
  40.             for(var i=0; i<this.aInput.length; i++){
  41.                 this.aInput[i].className = '';
  42.                 this.aDiv[i].style.display = 'none';
  43.             }
  44.             obj.className = 'active';
  45.             this.aDiv[obj.index].style.display = 'block';
  46.         }
  48.         /*
  49.         - 改成面向对象
  50.             - 全局变量就是属性
  51.             - 函数就是方法
  52.             - onload中创建对象
  53.             - 改this指向问题：注意事件或者是定时器里面的this。要尽量保持面向对象中的this指向对象
  54.         */
  55.     </script>
  56. </head>
  57. <body>
  58.     <div id="div1">
  59.         <input type="button" value="1" class="active">
  60.         <input type="button" value="2">
  61.         <input type="button" value="3">
  62.         <div style="display: block">11111</div>
  63.         <div>22222</div>
  64.         <div>33333</div>
  65.     </div>
  66. </body>
  67. </html>

面向对象的复用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>面向对象bianxie</title>
  6.     <style>
  7.         #div1 div, #div2 div { width: 200px; height: 200px; border: 1px solid #000; display: none; }
  8.         .active { background: red; }
  9.     </style>
  10.     <script>
  12.         var oParent = null;
  13.         var aInput = null;
  14.         var aDiv = null;
  16.         window.onload = function(){
  18.             var t1 = new Tab('div1');
  19.             t1.init();
  21.             var t2 = new Tab('div2');
  22.             t2.init();
  23.             t2.autoplay();
  25.         };
  27.         function Tab(id){
  28.             this.oParent = document.getElementById(id);
  29.             this.aInput = this.oParent.getElementsByTagName('input');
  30.             this.aDiv = this.oParent.getElementsByTagName('div');
  31.             this.iNow = 0;
  32.         }
  34.         Tab.prototype.init = function(){
  35.             var This = this;
  36.             for(var i=0; i<this.aInput.length; i++){
  37.                 this.aInput[i].index = i;
  38.                 this.aInput[i].onclick = function(){
  39.                     This.change(this);
  40.                 };
  41.             }
  42.         }
  44.         Tab.prototype.change = function(obj){
  45.             for(var i=0; i<this.aInput.length; i++){
  46.                 this.aInput[i].className = '';
  47.                 this.aDiv[i].style.display = 'none';
  48.             }
  49.             obj.className = 'active';
  50.             this.aDiv[obj.index].style.display = 'block';
  51.         }
  52.         Tab.prototype.autoplay = function(){
  53.             var This = this;
  54.             setInterval(function(){
  55.                 if(This.iNow == This.aInput.length - 1){
  56.                     This.iNow = 0;
  57.                 } else {
  58.                     This.iNow ++;
  59.                 }
  60.                 for(var i=0; i<This.aInput.length; i++){
  61.                     This.aInput[i].className = '';
  62.                     This.aDiv[i].style.display = 'none';
  63.                 }
  64.                 This.aInput[This.iNow].className = 'active';
  65.                 This.aDiv[This.iNow].style.display = 'block';
  66.             }, 2000)
  67.         }
  68.     </script>
  69. </head>
  70. <body>
  71.     <div id="div1">
  72.         <input type="button" value="1" class="active">
  73.         <input type="button" value="2">
  74.         <input type="button" value="3">
  75.         <div style="display: block">11111</div>
  76.         <div>22222</div>
  77.         <div>33333</div>
  78.     </div>
  80.     <div id="div2">
  81.         <input type="button" value="1" class="active">
  82.         <input type="button" value="2">
  83.         <input type="button" value="3">
  84.         <div style="display: block">11111</div>
  85.         <div>22222</div>
  86.         <div>33333</div>
  87.     </div>
  88. </body>
  89. </html>

面向对象的拖拽

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>面向对象编写拖拽</title>
  6.     <style>
  7.         #div1 { width: 100px; height: 100px; background: red; position: absolute; }
  8.     </style>
  9.     <script>
  11.     /* 普通拖拽
  12.         window.onload = function(){
  13.             var oDiv = document.getElementById('div1');
  14.             var disX = 0;
  15.             var disY = 0;
  17.             oDiv.onmousedown = function(ev){
  18.                 var ev = ev || window.event;
  20.                 disX = ev.clientX - oDiv.offsetLeft;
  21.                 disY = ev.clientY - oDiv.offsetTop;
  23.                 document.onmousemove = function(ev){
  24.                     var ev = ev || window.event;
  26.                     oDiv.style.left = ev.clientX - disX + 'px';
  27.                     oDiv.style.top = ev.clientY - disY + 'px';
  28.                 }
  30.                 document.onmouseup = function(){
  31.                     document.onmousemove = null;
  32.                     document.onmouseup = null;
  33.                 }
  35.                 return false;
  37.             }
  38.         }
  39.     */
  41.     /* 第一步：普通方法变型
  42.     //先变型
  43.         var oDiv = null;
  44.         var disX = 0;
  45.         var disY = 0;
  47.         window.onload = function(){
  48.             oDiv = document.getElementById('div1');
  49.             init();         
  50.         }
  52.         function init(){
  53.             oDiv.onmousedown = fnDown;
  54.         }
  56.         function fnDown(ev){
  57.             var ev = ev || window.event;
  59.                 disX = ev.clientX - oDiv.offsetLeft;
  60.                 disY = ev.clientY - oDiv.offsetTop;
  62.                 document.onmousemove = fnMove;
  63.                 document.onmouseup = fnUp;
  65.                 return false;
  66.         }
  68.         function fnMove(ev){
  69.             var ev = ev || window.event;
  71.             oDiv.style.left = ev.clientX - disX + 'px';
  72.             oDiv.style.top = ev.clientY - disY + 'px';
  73.         }
  75.         function fnUp(){
  76.             document.onmousemove = null;
  77.             document.onmouseup = null;
  78.         }
  79.         */
  81.         //改成面向对象
  82.         window.onload = function(){
  83.             var d1 = new Drag('div1');
  84.             d1.init();          
  85.         }
  87.         function Drag(id){
  88.             this.oDiv = document.getElementById(id);
  89.             this.disX = 0;
  90.             this.dixY = 0;
  91.         }
  93.         Drag.prototype.init = function(){
  94.             var This = this;
  95.             this.oDiv.onmousedown = function(ev){
  96.                 var ev = ev || window.event;
  97.                 This.fnDown(ev);
  98.                 return false;
  99.             };
  100.         }
  102.         Drag.prototype.fnDown = function(ev) {
  103.             var ev = ev || window.event;
  104.             var This = this;
  106.                 this.disX = ev.clientX - this.oDiv.offsetLeft;
  107.                 this.disY = ev.clientY - this.oDiv.offsetTop;
  109.                 document.onmousemove = function(ev){
  110.                     var ev = ev || window.event;
  111.                     This.fnMove(ev);
  112.                 };
  113.                 document.onmouseup = this.fnUp;         
  114.         }
  116.         Drag.prototype.fnMove = function(ev){
  117.             this.oDiv.style.left = ev.clientX - this.disX + 'px';
  118.             this.oDiv.style.top = ev.clientY - this.disY + 'px';
  119.         }
  121.         Drag.prototype.fnUp = function(){
  122.             document.onmousemove = null;
  123.             document.onmouseup = null;
  124.         }
  125.     </script>
  126. </head>
  127. <body>
  128.     <div id="div1"></div>
  129. </body>
  130. </html>

本课练习

  1. 为数组对象添加求和，最大值
  2. 为字符串对象添加判断是不是最后一个字母
  3. 面向对象的选项卡
  4. 给选项卡添加一个自动播放的方法
  5. 任意学过的效果改写成面向对象
  6. 面向对象的面试题

高级面向对象

包装对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style> 
  8.     </style>
  9.     <script>
  11.     /*
  12.         function Aaa(){
  13.             this.name='小明';
  14.         }
  16.         Aaa.prototype.showName=function(){
  17.             alert(this.name);
  18.         }
  20.         var a1 = new Aaa();
  21.         a1.showName();
  23.         var arr = new Array();
  24.         arr.push();
  25.         arr.sort();
  27.         // 在js源码中：系统对象也是基于原型的程序
  29.         function Array(){
  30.             this.length = 0;
  31.         }
  33.         Array.prototype.push = function(){};
  34.         Array.prototype.sort = function(){};
  35.     */
  37.     //尽量不要去修改或添加系统对象下面的方法和属性
  38.     var arr = [1, 2, 3];
  39.     //Arr.prototype.push = function(){}; //加上这句话，就修改了源码中的push方法，那么后面那一句中的4、5、6就添加不进去了
  40.     Array.prototype.push = function(){ //自己写一个数组的push方法
  41.         //this : 1, 2, 3
  42.         //arguments: 4, 5, 6
  44.         for(var i=0; i<arguments.length; i++){
  45.             this[this.length] = arguments[i];
  46.         }
  48.         return this.length;
  49.     }
  50.     arr.push(4, 5, 6);
  51.     alert(arr);
  52.     </script>
  53. </head>
  54. <body>
  55. </body>
  56. </html>

给基本类型添加方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style> 
  8.     </style>
  9.     <script>
  10.     /*
  11.         var str = 'hello';
  12.         alert( typeof str); //string
  13.         str.charAt(0); //字符串为什么下面会有方法呢？
  14.         str.indexOf('e');
  15.     */
  17.     //包装对象：基本类型都有自己对应的包装对象（String, Number, Boolean）（null和undefined没有包装对象）
  19.     /*
  20.     var str = new String('hello');
  21.     alert(typeof str); //object
  22.     alert(str.charAt(1)); //弹出e
  24.     String.prototype.charAt = function(){}; //基本类型的方法都是放在它们的包装对象上
  25.     */
  27.     /*
  28.     var str = 'hello'; //str是字符串
  29.     str.charAt(0); //基本类型找到对应的包装对象类型，然后包装对象把所有的属性和方法给了基本类型，然后包装对象消失
  30.     */
  32.     //给基本类型添加对象的时候，就是把方法添加到基本类型对应的包装对象下面
  33.     var str = 'hello';
  34.     String.prototype.lastValue = function(){
  35.         return this.charAt(this.length-1);
  36.     };
  37.     alert(str.lastValue()); //o
  39.     var str1 = 'hello';
  40.     str1.number = 10; //在str1的包装对象上创建了一个number，然后包装对象就消失了
  41.     alert(str1.number); //undefined 再去调用这句话的时候，此时又重新创建了一个对象，这个对象与刚才那个对象不是同一个    
  43.     </script>
  44. </head>
  45. <body>
  46. </body>
  47. </html>

原型链

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>面向对象中的原型链</title>
  6.     <style></style>
  7.     <script>
  9.         //原型链：实例对象与原型之间的连接叫作原型链
  10.         //_proto_ (隐式连接)
  11.         //原型链的最外层是Object.prototype
  13.         function Aaa(){
  15.         }
  17.         Aaa.prototype.num = 10;
  19.         var a1 = new Aaa();
  20.         alert(a1.num); //10 a1现在它自己下面找，找不到这个num，然后又通过原型链到了Aaa.prototype，到它下面去找，最终找到了num
  22.         function Bbb(){
  23.             this.num = 20;
  24.         }
  26.         Bbb.prototype.num = 10;
  27.         var b1 = new Bbb();
  28.         alert(b1.num); //20 简单来讲，实例上的方法的优先级高于原型上的方法；本质上来讲，是从b1下面找num直接就找到了，于是就不需要再进一步通过原型链去找到Bbb.prototype上的num了。
  30.         function Ccc(){};
  31.         var c1 = new Ccc();
  32.         Object.prototype.num = 30; //弹出30 c1下找不到num；顺着原型链找到Ccc也找不到num，继续顺着原型链往上找，找到Object.prototype，找到了num
  33.         alert(c1.num);
  34.     </script>
  35. </head>
  36. <body>
  37. </body>
  38. </html>

面向对象的一些属性和方法

hasOwnProperty()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>面向对象中的原型链</title>
  6.     <style></style>
  7.     <script>
  8.         //hasOwnProperty: 看是不是对象自身下面的属性
  10.         var arr = [];
  11.         arr.num = 10;
  12.         Array.prototype.num2 = 20;
  14.         alert(arr.hasOwnProperty('num')); //true
  15.         alert(arr.hasOwnProperty('num2')); //false
  16.         alert(arr.hasOwnProperty == Object.prototype.hasOwnProperty); //true hasOwnProperty其实是Object.prototype下面的方法
  17.     </script>
  18. </head>
  19. <body>
  20. </body>
  21. </html>

constructor

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>面向对象中的原型链</title>
  6.     <style></style>
  7.     <script>
  8.         //constructor: 查看对象的构造函数
  10.         function Aaa(){
  12.         }
  14.         var a1 = new Aaa();
  16.         alert(a1.constructor); //function Aaa
  18.         var arr = [];
  19.         alert(arr.constructor == Array); //true
  21.         /*
  22.         在写完一个构造函数之后
  23.         function Aaa(){}
  24.         程序会自动添加一句话：
  25.         Aaa.prototype.constructor = Aaa; //每一个函数都会有的，都是自动生成的
  26.         这时候new一个Aaa
  27.         var a1 = new Aaa();
  28.         alert(a1.constructor); //弹出Aaa
  29.         如果手动写一句：
  30.         Aaa.prototype.constructor = Array;
  31.         那么再去弹a1.constructor的话，弹出的就是Array了。
  33.         而hasOwnProperty这个属性是添加在Object.prototype下面的，所以每个对象下面去查这个hasOwnProperty也都会有。但是hasOwnProperty这个方法不是在具体对象下面的，而都是沿着原型链找到Object.prototype身上找到的。跟constructor是不一样的。
  34.         */
  36.         function Bbb(){
  38.         }
  40.         Bbb.prototype.name = '小明';
  41.         Bbb.prototype.age = 20;
  43.         var b1 = new Bbb();
  44.         alert(b1.constructor); //function Bbb()
  46.         //下面这种写法就无意识地改变了c1的constructor，因为json直接赋值给了Ccc.prototype，而不是向上面那段代码是添加操作。那么原本系统自动生成的那句话Ccc.prototype.constructor = Ccc这句话就被覆盖掉了。然后通过c1.constructor去找的话，其实找的就是这个json所对应的constructor了。
  47.         function Ccc(){
  49.         }
  50.         Ccc.prototype = {
  51.             name: '小明',
  52.             age: 20
  53.         }
  54.         var c1 = new Ccc();
  55.         alert(c1.constructor); //function Object
  57.         //为了避免上述问题，应该注意，用json简写的时候，要把constructor修正过来，如下：
  59.         function Ddd(){
  61.         }
  62.         Ddd.prototype = {
  63.             constructor: Ddd, //通过这一句来修正一下
  64.             name: '小明',
  65.             age: 20
  66.         }
  67.         var d1 = new Ddd();
  68.         alert(d1.constructor); //Ddd
  70.     </script>
  71. </head>
  72. <body>
  73. </body>
  74. </html>

for in循环，有些属性找不到

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>面向对象中的原型链</title>
  6.     <style></style>
  7.     <script>
  8.         function Aaa(){
  10.         }
  11.         Aaa.prototype.name = 10;
  12.         Aaa.prototype.constructor = Aaa;
  13.         for (var attr in Aaa.prototype){
  14.             alert(attr); //只能找到自己添加的，系统自动生成的比如constructor，for in循环是找不到的
  15.         }
  16.     </script>
  17. </head>
  18. <body>
  19. </body>
  20. </html>

instanceof

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>instanceof()</title>
  6.     <style></style>
  7.     <script>
  8.         // instanceof: 对象与构造函数在原型链上是否有关系
  10.         function Aaa(){
  12.         }
  13.         var a1 = new Aaa();
  14.         alert(a1 instanceof Aaa); //true 看a1是否与Aaa在同一个原型链上
  15.         alert(a1 instanceof Array); //false
  16.         alert(a1 instanceof Object); //true
  17.     </script>
  18. </head>
  19. <body>
  20. </body>
  21. </html>

toString()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>toString()</title>
  6.     <style></style>
  7.     <script>
  8.         // toString(): 
  9.         // 位置：系统对象下面都是自带的；自己写的对象都是通过原型链找Object下面的
  10.         // 作用：把对象转成字符串
  12.         var arr = [];
  13.         alert(arr.toString); //找得到
  14.         alert(arr.toString == Object.prototype.toString); //false 系统对象下面的toString不在Object原型上
  16.         function Aaa(){
  18.         }
  19.         var a1 = new Aaa();
  20.         alert(a1.toString); //找得到
  21.         alert(a1.toString == Object.prototype.toString); //true 构造函数生成的对象的toString方法在Object原型上
  23.         var arr = [1, 2, 3];
  24.         alert(typeof arr.toString()); //string
  26.         alert(arr.toString()); //"1, 2, 3"
  28.         //因为知道toString在哪儿了，所以可以手动修改toString方法
  29.         Array.prototype.toString = function(){
  30.             return this.join('+');
  31.         }
  32.         alert(arr.toString()); //"1+2+3"
  34.         var num = 255;
  35.         alert(num.toString(16)); //"ff" 将255转成16进制
  37.         //利用toString进行类型判断（用constructor和instanceof也都可以进行类型判断）。推荐toString来判断例如数组的类型
  38.         var arr = []
  39.         var date = new Date;
  40.         var json = {}
  41.         var reg = new RegExp;
  42.         var n = null;
  43.         alert(Object.prototype.toString.call(arr)); //[object Array]
  44.         alert(Object.prototype.toString.call(date)); //[object Date]
  45.         alert(Object.prototype.toString.call(json)); //[object Object]
  46.         alert(Object.prototype.toString.call(reg)); //[object RegExp]
  47.         alert(Object.prototype.toString.call(n)); //[object Null]
  48.         //判断类型时直接进行比较就可以了，例如判断arr是否是数组：
  49.         alert(Object.prototype.toString.call(arr) == '[object Array]'); //true
  51.         //举例说明用instanceof和constructor来判断数组失效，但是toString依然有效的例子
  52.         window.onload = function(){
  53.             var oF = document.createElement('iframe');
  54.             document.body.appendChild(oF);
  55.             var ifArray = window.frames[0].Array; //ifArray就是iframe里面的数组
  56.             var arr = new ifArray(); //ifArray就是iframe里面的数组 这时候跨页面了
  58.             alert(arr.constructor == Array); //false constructor判断iframe下面的数组失效
  59.             alert(arr instanceof Array); //false 判断失效
  60.             alert(Object.prototype.toString.call(arr) == '[object Array]'); //true 判断依然有效
  61.         }
  62.     </script>
  63. </head>
  64. <body>
  65. </body>
  66. </html>

对象的继承

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>继承</title>
  6.     <style></style>
  7.     <script>
  8.         // 继承：子类不影响父类；子类可以继承父类的一些功能（实现代码复用）
  10.         function CreatePerson(name, sex){ //父类
  11.             this.name = name;
  12.             this.sex = sex;
  13.         }
  14.         CreatePerson.prototype.showName = function(){
  15.             alert(this.name);
  16.         }
  18.         var p1 = new CreatePerson('小明', '男');
  19.         p1.showName();
  21.         //属性的继承：调用父类的构造函数 用call改this指向
  22.         //方法的继承：用for in循环
  24.         function CreateStar(name, sex, job){ //子类
  25.             // this.name = name;
  26.             // this.sex = sex;
  28.             CreatePerson.call(this, name, sex); //调用父类构造函数 需要修改指向
  29.             this.job = job;
  31.         }
  33.         /*
  34.         CreateStar.prototype = CreatePerson.prototype; //将父类的原型赋给子类，那么子类就获得了父类下所有的属性值，实现了方法的继承 但是这里有对象的引用问题，造成互相干涉
  35.         例如：
  36.         CreateStar.prototype.showJob = function(){}
  37.         上面子类的原型添加的方法，那么父类CreatePerson.prototype下面也有了showJob的方法
  38.         */
  40.         //方法的继承应该用for in循环，将父类的所有属性拷贝给子类，这叫作“拷贝继承”。jQuery也是采用拷贝继承extend
  42.         function extend(obj1, obj2){
  43.             for(var attr in obj2){
  44.                 obj1[attr] = obj2[attr];
  45.             }
  46.         }
  48.         extend(CreateStar.prototype, CreatePerson.prototype )
  49.         var p2 = new CreateStar('黄晓明', '男', '演员')
  50.         p2.showName();
  52.     </script>
  53. </head>
  54. <body>
  55. </body>
  56. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>继承</title>
  6.     <style></style>
  7.     <script>
  8.         var a = {
  9.             name: '小明'
  10.         };
  12.         //var b = a;
  14.         // var b = {};
  15.         // for(var attr in a){
  16.         //  b[attr] = a[attr];
  17.         // }
  18.         // b.name = "小强";
  19.         // alert(a.name);
  21.         //将对象属性的拷贝封装成一个函数
  22.         function extend(obj1, obj2){
  23.             for(var attr in obj2){
  24.                 obj1[attr] = obj2[attr];
  25.             }
  26.         }
  28.         var b = {};
  29.         extend(b, a); 
  30.         b.name = '小强';
  31.         alert(b.name);
  32.         alert(a.name);
  33.     </script>
  34. </head>
  35. <body>
  36. </body>
  37. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>继承</title>
  6.     <style></style>
  7.     <script>
  8.         var a = [1, 2, 3];
  9.         var b = a;
  10.         // b.push(4); //修改 a、b之间引用链条存在
  11.         // alert(a); //1, 2, 3, 4 a被b影响了
  13.         b = [1, 2, 3, 4]; //重新赋值，内存中这个b又重新生成了。a和b之间这个引用的链条已经断开，a、b没有关系
  14.         alert(a); //1, 2, 3 a未被影响
  16.         //在for in循环中，子类原型的方法也直接等于了父类原型的方法，因为方法是函数，也是个对象，为什么这种“对象 = 对象”没有互相干涉呢？这是因为函数有些特殊，不能被修改，只能被重新赋值
  17.     </script>
  18. </head>
  19. <body>
  20. </body>
  21. </html>

继承的拖拽

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         #div1 {width: 100px; height: 100px; background: red; position: absolute;}
  8.         #div2 {width: 100px; height: 100px; background: yellow; position: absolute; left: 100px;}
  9.     </style>
  10.     <script src="jquery-1.11.1.js"></script>
  11.     <script>
  12.         window.onload = function(){
  13.             var d1 = new Drag('div1');
  14.             d1.init();
  16.             var d2 = new ChildDrag('div2');
  17.             d2.init();
  18.         }
  20.         //父类的面向对象的拖拽开始
  21.         function Drag(id){ //父类
  22.             this.obj = document.getElementById(id);
  23.             this.disX = 0;
  24.             this.disY = 0;
  25.         }
  27.         Drag.prototype.init = function(){
  28.             var This = this;
  29.             this.obj.onmousedown = function(ev){
  30.                 var ev = ev || window.event;
  31.                 This.fnDown(ev);
  33.                 document.onmousemove = function(ev){
  34.                     var ev = ev || window.event;
  35.                     This.fnMove(ev);
  36.                 }
  37.                 document.onmouseup = function(){
  38.                     This.fnUp();
  39.                 }
  40.                 return false;
  41.             }
  42.         }
  44.         Drag.prototype.fnDown = function(ev){
  45.             this.disX = ev.clientX - this.obj.offsetLeft;
  46.             this.disY = ev.clientY - this.obj.offsetTop;
  47.         }
  48.         Drag.prototype.fnMove = function(ev){
  49.             this.obj.style.left = ev.clientX - this.disX + 'px';
  50.             this.obj.style.top = ev.clientY - this.disY + 'px';
  51.         }
  52.         Drag.prototype.fnUp = function(){
  53.             document.onmousemove = null;
  54.             document.onmouseup = null;
  55.         }
  56.         //父类的面向对象的拖拽结束
  58.         //子类继承父类开始
  59.         function ChildDrag(id){ //子类
  60.             Drag.call(this, id);
  61.         }
  63.         extend(ChildDrag.prototype, Drag.prototype);
  65.         //通过改变ChildDrap原型下的fnMove，给子类添加了限制拖拽时，元素超出可视区左右边界的功能
  66.         ChildDrag.prototype.fnMove = function(ev){
  67.             var L = ev.clientX - this.disX;
  68.             var T = ev.clientY - this.disY;
  70.             if(L < 0){
  71.                 L = 0;
  72.             } else if (L > document.documentElement.clientWidth - this.obj.offsetWidth){
  73.                 L = document.documentElement.clientWidth - this.obj.offsetWidth;
  74.             }
  76.             this.obj.style.left = L + 'px';
  77.             this.obj.style.top = T + 'px';
  78.         }
  80.         function extend(obj1, obj2){
  81.             for(var attr in obj2){
  82.                 obj1[attr] = obj2[attr];
  83.             }
  84.         }
  85.         //子类继承父类结束
  87.     </script>
  88. </head>
  89. <body>
  90.     <div id="div1"></div>
  91.     <div id="div2"></div>
  92. </body>
  93. </html>

类式继承

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     </style>
  8.     <script>
  9.         //类：JS是没有类的概念的，可以把JS中的构造函数看做是类
  10.         //要做属性和方法继承的时候，要分开继承
  12.         function Aaa(){ //父类
  13.             this.name = '小明';
  14.             this.arr = [1, 2, 3];
  15.         }
  16.         Aaa.prototype.showName = function(){
  17.             alert(this.name);
  18.         }
  20.         function Bbb(){ //子类        
  21.         }
  23.         Bbb.prototype = new Aaa(); //这句话就是类式继承
  24.         //只写上面一句话是有问题的，修改了constructor指向。
  25.         //Bbb.prototype.constructor = Bbb; //修正指向问题
  27.         var b1 = new Bbb();
  28.         b1.showName();
  29.         alert(b1.name);
  30.         alert(b1.constructor); //弹出的并不是Bbb，而是Aaa。只有写了上面修正指向的那句话，这里才会变成Bbb
  32.         //真正规范的类式继承要用下面几句话：
  33.         // function Bbb(){ //这里只继承了属性
  34.         //  Aaa.call(this)
  35.         // }
  36.         //var F = function(){}; //创建一个空的构造函数
  37.         //F.prototype = Aaa.prototype;
  38.         //Bbb.prototype = new F(); //这里只继承了方法
  39.         //Bbb.prototype.constructor = Bbb;
  41.         b1.arr.push(4);
  43.         var b2 = new Bbb();
  44.         alert(b2.arr); //[1, 2, 3, 4] 这里看到上面的b1.arr.push(4)影响到了这里 要避免这种问题，应该用上面的类式继承的规范写法才行
  45.     </script>
  46. </head>
  47. <body>
  48. </body>
  49. </html>

原型继承

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>原型继承</title>
  4.     <style>
  5.     </style>
  6.     <script>
  7.         var a = {
  8.             name: '小明'
  9.         }
  11.         var b = cloneObj(a); //让b继承a
  12.         b.name = '小强'; //这一句不会更改a的name，因为这一句在b的下面又新建了一个属性name，值为“小强”
  13.         alert(b.name); //小强
  14.         alert(a.name); //小明
  16.         function cloneObj(obj){
  17.             var F = function(){};
  18.             F.prototype = obj;
  19.             return new F();
  20.         }
  21.     </script>
  22. </head>
  23. <body>
  24. </body>
  25. </html>

组件开发

如何配置参数和默认参数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>组件开发中的参数问题</title>
  6.     <script>
  7.     //用json来解决参数数量问题
  8.         function show(opt){
  10.         }
  12.         show({
  13.             id: 'div1',
  14.             toDown: function(){},
  15.             toUp: function(){}
  16.         });
  18.     //用下面的方法解决参数顺序问题
  19.         var a = { //配置参数
  20.             //name: '小明'
  21.             name: '小明'
  22.         }
  23.         var b = { //默认参数
  24.             name: '小强'
  25.         }
  27.         extend(b, a); //当有配置的时候，走配置，没有配置的时候，走默认
  28.         alert(b.name);
  30.         function extend(obj1, obj2){
  31.             for(var attr in obj2){
  32.                 obj1[attr] = obj2[attr];
  33.             }
  34.         }
  35.     </script>
  36. </head>
  37. <body>
  39. </body>
  40. </html>

拖拽的组件开发

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         #div1 {width: 100px; height: 100px; background: red; position: absolute;}
  8.         #div2 {width: 100px; height: 100px; background: yellow; position: absolute; left: 100px;}
  9.         #div3 {width: 100px; height: 100px; background: blue; position: absolute; left: 200px;}
  10.         #div4 {width: 100px; height: 100px; background: green; position: absolute; left: 300px;}
  11.     </style>
  12.     <script src="jquery-1.11.1.js"></script>
  13.     <script>
  14.     /*
  15.         组件开发：像兄弟之间的关系（代码复用的一种形式）
  16.     */
  17.         window.onload = function(){
  18.             var d1 = new Drag();
  19.             d1.init('div1');
  21.             var d2 = new Drag();
  22.             d2.init('div2', { //配置参数
  23.                 toDown: function(){
  24.                     document.title = 'hello';
  25.                 }
  26.             });
  28.             var d3 = new Drag();
  29.             d3.init('div3', { //配置参数
  30.                 toDown: function(){
  31.                     document.title = '妙味';
  32.                 },
  33.                 toUp: function(){
  34.                     document.title = '课堂';
  35.                 }
  36.             });
  38.             var d4 = new Drag();
  39.             d4.init('div4', { //配置参数
  40.                 toUp: function(){
  41.                     document.title = 'byebye';
  42.                 }
  43.             });
  44.         }
  46.         function Drag(){
  47.             this.obj = null;
  48.             this.disX = 0;
  49.             this.disY = 0;
  51.             this.settings = { //默认参数
  52.                 //id不应该属于配置参数当中，它属于必填项
  53.                 toDown: function(){},
  54.                 toUp: function(){}
  55.             }
  56.         }
  58.         Drag.prototype.init = function(id, opt){
  59.             var This = this;
  60.             this.obj = document.getElementById(id);
  62.             extend(this.settings, opt); //用配置覆盖默认
  64.             this.obj.onmousedown = function(ev){
  65.                 var ev = ev || window.event;
  66.                 This.fnDown(ev);
  68.                 This.settings.toDown();
  70.                 document.onmousemove = function(ev){
  71.                     var ev = ev || window.event;
  72.                     This.fnMove(ev);
  73.                 }
  74.                 document.onmouseup = function(){
  75.                     This.fnUp();
  76.                     This.settings.toUp();
  77.                 }
  78.                 return false;
  79.             }
  80.         }
  82.         Drag.prototype.fnDown = function(ev){
  83.             this.disX = ev.clientX - this.obj.offsetLeft;
  84.             this.disY = ev.clientY - this.obj.offsetTop;
  85.         }
  86.         Drag.prototype.fnMove = function(ev){
  87.             this.obj.style.left = ev.clientX - this.disX + 'px';
  88.             this.obj.style.top = ev.clientY - this.disY + 'px';
  89.         }
  90.         Drag.prototype.fnUp = function(){
  91.             document.onmousemove = null;
  92.             document.onmouseup = null;
  93.         }
  95.         function extend(obj1, obj2){
  96.             for(var attr in obj2){
  97.                 obj1[attr] = obj2[attr];
  98.             }
  99.         }
  101.     </script>
  102. </head>
  103. <body>
  104.     <div id="div1"></div> <!-- 红色方块是老大 -->
  105.     <div id="div2"></div> <!-- 黄色方块是老二 黄色的按下之后title有一个变化 -->
  106.     <div id="div3"></div> <!-- 老三 按下title变化，抬起title变化 -->
  107.     <div id="div4"></div> <!-- 老四 鼠标抬起时title有变化 -->
  108. </body>
  109. </html>

弹窗的组件开发

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>弹窗的组件开发</title>
  6.     <style>
  7.         * {margin : 0; padding; 0}
  8.         .login {background: white; border: 1px #000 solid; position: absolute; left: 0; top: 0; z-index: 2;}
  9.         .title {height: 30px; background: gray; color: white;}
  10.         .title .close {float: right;}
  11.         #mask {width: 500px; height: 500px; background: black; filter: alpha(oapcity=50); opacity: 0.5; position: absolute; left: 0; top: 0; z-index: 1;}
  12.     </style>
  13.     <script>
  14.         window.onload = function(){
  15.             var aInput = document.getElementsByTagName('input');
  17.             aInput[0].onclick = function(){
  18.                 var d1 = new Dialog();
  19.                 d1.init({//配置参数
  20.                     iNow: 0,
  21.                     title: '登陆'
  22.                 });
  23.             }
  25.             aInput[1].onclick = function(){
  26.                 var d2 = new Dialog();
  27.                 d2.init({//配置参数
  28.                     iNow: 1,
  29.                     w : 100,
  30.                     h : 400,
  31.                     dir: 'right',
  32.                     title: '公告'
  33.                 });
  34.             }
  36.             aInput[2].onclick = function(){
  37.                 var d3 = new Dialog();
  38.                 d3.init({//配置参数
  39.                     iNow: 2,
  40.                     mask: true
  41.                 });
  42.             }
  43.         }
  45.         function Dialog(){
  46.             this.oLogin = null;
  47.             this.settings = { //默认参数
  48.                 w: 300,
  49.                 h: 300,
  50.                 dir: 'center',
  51.                 title: '',
  52.                 mask: false
  53.             }
  54.         }
  56.         Dialog.prototype.json = {}; //防止添加多个弹窗
  58.         Dialog.prototype.init = function(opt){
  60.             extend(this.settings, opt);
  62.             if(this.json[opt.iNow] == undefined){
  63.                 this.json[opt.iNow] = true;
  64.             }
  66.             if(this.json[opt.iNow]){ //防止添加多个弹窗
  67.                 this.create();
  68.                 this.fnClose();
  70.                 if(this.settings.mask){
  71.                     this.createMask();
  72.                 }
  74.                 this.json[opt.iNow] = false;
  75.             }
  78.         }
  80.         Dialog.prototype.create = function(){
  82.             this.oLogin = document.createElement('div');
  83.             this.oLogin.className = 'login';
  84.             this.oLogin.innerHTML = '<div class="title"><span>' + this.settings.title + '</span><span class="close">X</span></div><div class="content"></div>';
  85.             document.body.appendChild(this.oLogin);
  86.             this.setData();
  88.         }
  90.         Dialog.prototype.setData = function(){
  91.             this.oLogin.style.width = this.settings.w + 'px';
  92.             this.oLogin.style.height = this.settings.h + 'px';
  94.             if(this.settings.dir == 'center'){
  95.                 this.oLogin.style.left = (viewWidth() - this.oLogin.offsetWidth)/2 + 'px';
  96.                 this.oLogin.style.top = (viewHeight() - this.oLogin.offsetHeight)/2 + 'px';
  97.             } else if (this.settings.dir == 'right'){
  98.                 this.oLogin.style.left = (viewWidth() - this.oLogin.offsetWidth) + 'px';
  99.                 this.oLogin.style.top = (viewHeight() - this.oLogin.offsetHeight) + 'px';
  100.             }
  102.         }
  104.         Dialog.prototype.fnClose = function(){
  105.             var oClose = this.oLogin.getElementsByTagName('span')[1];
  106.             var This = this;
  107.             oClose.onclick = function(){
  108.                 document.body.removeChild(This.oLogin);
  109.                 if(This.settings.mask){
  110.                     document.body.removeChild(This.oMask);
  111.                 }
  113.                 This.json[This.settings.iNow] = true;
  114.             }
  115.         }
  117.         Dialog.prototype.createMask = function(){
  118.             var oMask = document.createElement('div');
  119.             oMask.id = 'mask';
  120.             document.body.appendChild(oMask);
  121.             this.oMask = oMask;
  123.             oMask.style.width = viewWidth() + 'px';
  124.             oMask.style.height = viewHeight() + 'px';
  125.         }
  127.         function extend(obj1, obj2){
  128.             for(var attr in obj2){
  129.                 obj1[attr] = obj2[attr];
  130.             }
  131.         }
  133.         function viewWidth(){
  134.             return document.documentElement.clientWidth;
  135.         }
  137.         function viewHeight(){
  138.             return document.documentElement.clientHeight;
  139.         }
  140.     </script>
  141. </head>
  142. <body>
  143.     <input type="button" value="1">
  144.     <input type="button" value="2">
  145.     <input type="button" value="3">
  147.     <!-- <div class="login">
  148.         <div class="title">
  149.             <span>标题</span><span class="close">X</span>
  150.         </div>
  151.         <div class="content"></div>
  152.     </div> -->
  153.     <!-- <div id="mask"></div> -->
  154. </body>
  155. </html>

理解自定义事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>自定义事件</title>
  6.     <script>
  7.         // 自定义事件：主要是跟函数有关系，让函数能够具备事件的某些特性
  9.         // 三个人都针对show来添加功能。都添加到一个地方会乱，于是三个人分开来写
  10.         /*
  11.         function show(){
  12.             alert(1); //第一个人写
  13.         }
  15.         function show(){
  16.             alert(2); //第二个人写
  17.         }
  19.         function show(){
  20.             alert(3); //第三个人写
  21.         }
  23.         show(); //只能执行第三个人写的，因为函数不能修改只能覆盖
  24.         */
  26.         //看看是否能让函数具备事件的特性，多人写的可以绑定上去，就解决了多人协作的问题。原理就如以下情形。当然以下代码不是添加自定义事件的代码，只是为了方便理解：
  27.         /*
  28.         window.addEventListener('show', function(){
  29.             alert(1); //第一个人写的
  30.         }, false);
  31.         window.addEventListener('show', function(){
  32.             alert(2); //第二个人写的
  33.         }, false);
  34.         window.addEventListener('show', function(){
  35.             alert(3); //第三个人写的
  36.         }, false);
  38.         show(); //主动触发自定义事件
  39.         */
  40.     </script>
  41. </head>
  42. <body>
  44. </body>
  45. </html>

用原生js实现自定义事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>自定义事件</title>
  6.     <script>
  7.     //自定义事件重点在于将函数和元素以及事件名称建立关系，在执行某个函数的时候，主动触发某个事件名称下面相关的所有函数
  8.         window.onload = function(){
  9.             var oDiv = document.getElementById('div1');
  10.             var oSpan = document.getElementById('span1');
  12.             bindEvent(oDiv, 'click', function(){
  13.                 alert(1);
  14.             })
  16.             bindEvent(oDiv, 'click', function(){
  17.                 alert(2);
  18.             })
  20.             bindEvent(oSpan, 'show', function(){ //这里的show就是个自定义事件
  21.                 alert(3);
  22.             })
  24.             bindEvent(oSpan, 'show', function(){ //这里的show就是个自定义事件
  25.                 alert(4);
  26.             })
  28.             bindEvent(oSpan, 'hide', function(){ //这里的show就是个自定义事件
  29.                 alert(5);
  30.             })
  32.             fireEvent(oSpan, 'show'); //主动触发，弹出3, 4
  33.             fireEvent(oDiv, 'click'); //主动触发，弹出1, 2
  34.         }
  38.         function bindEvent(obj, events, fn){
  40.             //fn: 看作一本书 《西游记》
  41.             //obj: 相当于图书馆的楼层 文学楼
  42.             //events: 相当于书架 古典文学书架
  44.             obj.listeners = obj.listeners || {}; //先找到楼层，没有楼层就创建楼层
  45.             obj.listeners[events] = obj.listeners[events] || []; //再找到书架，没有书架就创建书架
  46.             obj.listeners[events].push(fn); //把fn这本书放到书架上
  47.             /* 通过以上的方式，将obj，events和fn建立了关系*/
  49.             if(obj.addEventListener){
  50.                 obj.addEventListener(events, fn, false);
  51.             } else {
  52.                 obj.attachEvent('on' + events, fn);
  53.             }   
  54.         }
  56.         function fireEvent(obj, events){ //主动触发自定义事件
  57.             for(var i=0; i<obj.listeners[events].length; i++){
  58.                 obj.listeners[events][i]();
  59.             }
  60.         }
  62.     </script>
  63. </head>
  64. <body>
  65.     <div id="div1">div</div>
  66.     <span id="span1">span</span>
  67. </body>
  68. </html>

配置、方法、自定义事件分离——正规组件的写法——基于拖拽的组件进行的修改

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>自定义事件的拖拽组件</title>
  6.     <style>
  7.         #div1 {width: 100px; height: 100px; background: red; position: absolute;}
  8.         #div2 {width: 100px; height: 100px; background: yellow; position: absolute; left: 100px;}
  9.         #div3 {width: 100px; height: 100px; background: blue; position: absolute; left: 200px;}
  10.         #div4 {width: 100px; height: 100px; background: green; position: absolute; left: 300px;}
  11.     </style>
  12.     <script src="jquery-1.11.1.js"></script>
  13.     <script>
  14.         window.onload = function(){
  15.             var d1 = new Drag();
  16.             d1.init('div1');
  18.             var d2 = new Drag();
  19.             d2.init('div2');
  21.             bindEvent(d2, 'toDown', function(){
  22.                 document.title = 'hello';
  23.             });
  25.             bindEvent(d2, 'toDown', function(){ //新来的一个同事扩展d2的toDown事件的时候，更容易
  26.                 document.body.style.background = 'black';
  27.             })
  29.             var d3 = new Drag();
  30.             d3.init('div3');
  32.             bindEvent(d3, 'toDown', function(){
  33.                 document.title = '妙味';
  34.             })
  35.             bindEvent(d3, 'toUp', function(){
  36.                 document.title = '课堂';
  37.             })
  39.             var d4 = new Drag();
  40.             d4.init('div4');
  42.             bindEvent(d4, 'toUp', function(){
  43.                 document.title = 'byebye';
  44.             })
  45.         }
  47.         function Drag(){
  48.             this.obj = null;
  49.             this.disX = 0;
  50.             this.disY = 0;
  52.             this.settings = { 
  54.             }
  55.         }
  57.         Drag.prototype.init = function(id, opt){
  58.             var This = this;
  59.             this.obj = document.getElementById(id);
  61.             extend(this.settings, opt); 
  63.             this.obj.onmousedown = function(ev){
  64.                 var ev = ev || window.event;
  65.                 This.fnDown(ev);
  66.                 fireEvent(This, 'toDown');
  68.                 document.onmousemove = function(ev){
  69.                     var ev = ev || window.event;
  70.                     This.fnMove(ev);
  71.                 }
  72.                 document.onmouseup = function(){
  73.                     This.fnUp();
  74.                     fireEvent(This, 'toUp');
  75.                 }
  76.                 return false;
  77.             }
  78.         }
  80.         Drag.prototype.fnDown = function(ev){
  81.             this.disX = ev.clientX - this.obj.offsetLeft;
  82.             this.disY = ev.clientY - this.obj.offsetTop;
  83.         }
  84.         Drag.prototype.fnMove = function(ev){
  85.             this.obj.style.left = ev.clientX - this.disX + 'px';
  86.             this.obj.style.top = ev.clientY - this.disY + 'px';
  87.         }
  88.         Drag.prototype.fnUp = function(){
  89.             document.onmousemove = null;
  90.             document.onmouseup = null;
  91.         }
  93.         function extend(obj1, obj2){
  94.             for(var attr in obj2){
  95.                 obj1[attr] = obj2[attr];
  96.             }
  97.         }
  99.         function bindEvent(obj, events, fn){
  101.             obj.listeners = obj.listeners || {}; 
  102.             obj.listeners[events] = obj.listeners[events] || []; 
  103.             obj.listeners[events].push(fn); 
  105.             if(obj.nodeType){ //如果传进来的是DOM元素的话，走着下面；如果传进来的不是DOM，是对象的话，就不走下面，只走上面了
  106.                 if(obj.addEventListener){
  107.                     obj.addEventListener(events, fn, false);
  108.                 } else {
  109.                     obj.attachEvent('on' + events, fn);
  110.                 }   
  111.             }
  112.         }
  114.         function fireEvent(obj, events){ 
  115.             if(obj.listeners && obj.listeners[events]){
  116.                 for(var i=0; i<obj.listeners[events].length; i++){
  117.                     obj.listeners[events][i]();
  118.                 }
  119.             }
  120.         }
  122.     </script>
  123. </head>
  124. <body>
  125.     <div id="div1"></div> 
  126.     <div id="div2"></div> 
  127.     <div id="div3"></div> 
  128.     <div id="div4"></div> 
  129. </body>
  130. </html>

**用JQ实现选项卡的组件开发

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>基于JQ的选项卡组件开发</title>
  6.     <style>
  7.         html, body {margin: 0; padding: 0;}
  8.         #div1 div, #div2 div, #div3 div, #div4 div {width: 200px; height: 200px; border: 1px solid #000; display: none;}
  9.         #div1 .active, #div2 .active, #div3 .active, #div4 .active {background: red;}
  10.     </style>
  11.     <script src="jquery-1.11.1.js"></script>
  12.     <script>
  13.     /*
  14.         title: 基于JQ的选项卡组件
  15.         Options: 
  16.             - event 
  17.             - delay
  18.         Methods: 
  19.             - nowSel() - 设置开始的tab数
  20.             - getContent() - 获取当前内容
  21.         Events:
  22.             - beforeClick 点击前触发
  23.             - afterClick 点击后触发
  24.     */
  26.     // JQ中的主动触发：trigger()
  28.         $(function(){
  30.             var t1 = new Tab();
  31.             t1.init('div1', {});
  33.             var t2 = new Tab();
  34.             t2.init('div2', {
  35.                 event: 'mouseover'
  36.             });
  38.             var t3 = new Tab();
  39.             t3.init('div3', {
  40.                 event: 'mouseover',
  41.                 delay: 200
  42.             });
  44.             var t4 = new Tab();
  45.             t4.init('div4', {});
  46.             t4.nowSel(2);
  48.             $('#input1').click(function(){
  49.                 alert(t4.getContent());
  50.             })
  52.             $(t4).on('beforeClick', function(){
  53.                 alert(t4.getContent());
  54.             })
  56.             $(t4).on('afterClick', function(){
  57.                 alert(t4.getContent());
  58.             })
  60.         })
  62.         function Tab(){
  63.             this.oParent = null;
  64.             this.aInput = null;
  65.             this.aDiv = null;
  66.             this.iNow = 0;
  68.             this.settings = { //默认参数
  69.                 event: 'click',
  70.                 delay: 0
  71.             }
  72.         }
  74.         Tab.prototype.init = function(oParent, opt){
  75.             $.extend(this.settings, opt);
  76.             this.oParent = $('#' + oParent);
  77.             this.aInput = this.oParent.find('input');
  78.             this.aDiv = this.oParent.find('div');
  80.             this.change();
  81.         }
  83.         Tab.prototype.change = function(){
  84.             var This = this;
  85.             var timer = null;
  87.             this.aInput.on(this.settings.event, function(){
  89.                 if(This.settings.event == 'mouseover' && This.settings.delay){
  90.                     var _this = this;
  92.                     timer = setTimeout(function(){
  93.                         show(_this);
  94.                     }, This.settings.delay)
  95.                 } else {
  96.                     show(this);
  97.                 }
  99.             }).mouseout(function(){
  100.                 clearTimeout(timer);
  101.             });
  103.             function show(obj){
  105.                 $(This).trigger('beforeClick');
  107.                 This.aInput.attr('class', '');
  108.                 This.aDiv.css('display', 'none');
  109.                 $(obj).attr('class', 'active');
  110.                 This.aDiv.eq($(obj).index()).css('display', 'block');
  112.                 This.iNow = $(obj).index();
  114.                 $(This).trigger('afterClick');
  115.             }
  117.             Tab.prototype.nowSel = function(index){
  118.                 this.aInput.attr('class', '');
  119.                 this.aDiv.css('display', 'none');
  120.                 this.aInput.eq(index).attr('class', 'active');
  121.                 this.aDiv.eq(index).css('display', 'block');
  123.                 this.iNow = index;
  124.             }
  126.             Tab.prototype.getContent = function(){
  127.                 return this.aDiv.eq(this.iNow).html();
  128.             }
  129.         }
  130.     </script>
  131. </head>
  132. <body>
  133.     <div id="div1">
  134.         <input type="button" value="1" class="active">
  135.         <input type="button" value="2">
  136.         <input type="button" value="3">
  137.         <div style="display: block">111111</div>
  138.         <div>222222</div>
  139.         <div>333333</div>
  140.     </div>
  141.     <div id="div2">
  142.         <input type="button" value="1" class="active">
  143.         <input type="button" value="2">
  144.         <input type="button" value="3">
  145.         <div style="display: block">111111</div>
  146.         <div>222222</div>
  147.         <div>333333</div>
  148.     </div>
  149.     <div id="div3">
  150.         <input type="button" value="1" class="active">
  151.         <input type="button" value="2">
  152.         <input type="button" value="3">
  153.         <div style="display: block">111111</div>
  154.         <div>222222</div>
  155.         <div>333333</div>
  156.     </div>
  157.     <div id="div4">
  158.         <input type="button" value="1" class="active">
  159.         <input type="button" value="2">
  160.         <input type="button" value="3">
  161.         <div style="display: block">111111</div>
  162.         <div>222222</div>
  163.         <div>333333</div>
  164.     </div>
  165.     <input type="button" value="点击" id="input1">
  166. </body>
  167. </html>

妙味综合案例

图片放大镜效果

子集影响父级的bug

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         #div1 {width: 200px; height: 200px; background: red;}
  8.         #div2 {width: 100px; height: 100px; background: yellow;}
  9.     </style>
  10.     <script>
  11.         window.onload = function(){
  13.             var oDiv = document.getElementById('div1');
  15.             oDiv.onmouseover = function(){
  16.                 document.title += '1';
  17.             }
  18.             oDiv.onmouseout = function(){
  19.                 document.title += '2';
  20.             }
  22.             // 会发现鼠标移到黄色div上的时候，title部分会一下子出现21，这个2是从div1移到div2触发的，而1是通过div2冒泡到div1上触发的
  24.         }
  25.     </script>
  26. </head>
  27. <body>
  28.     <div id="div1">
  29.         <div id="div2"></div>
  30.     </div>
  31. </body>
  32. </html>

上述问题的解决方式(1)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         #div1 {width: 200px; height: 200px; background: red;}
  8.         #div2 {width: 100px; height: 100px; background: yellow;}
  9.     </style>
  10.     <script>
  11.         // 解决方案：    
  12.         // 1. js： 用onmouseener和onmouseleave事件替代onmouseover和onmouseout。onmouseenter和onmouseleave事件，子级不会影响到父级
  13.         // 2. css
  15.         window.onload = function(){
  17.             var oDiv = document.getElementById('div1');
  19.             oDiv.onmouseenter = function(){
  20.                 document.title += '1';
  21.             }
  22.             oDiv.onmouseleave = function(){
  23.                 document.title += '2';
  24.             }
  26.         }
  27.     </script>
  28. </head>
  29. <body>
  30.     <div id="div1">
  31.         <div id="div2"></div>
  32.     </div>
  33. </body>
  34. </html>

上述问题的解决方式(2)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         #div1 {width: 200px; height: 200px; background: red;}
  8.         #div2 {width: 100px; height: 100px; background: yellow;}
  9.     </style>
  10.     <script>
  11.         // 解决方案：    
  12.         // 1. js： 用onmouseener和onmouseleave事件替代onmouseover和onmouseout。onmouseenter和onmouseleave事件，子级不会影响到父级
  13.         // 上述两个事件有兼容性问题，但是兼容性问题不大，而且做兼容非常的麻烦 兼容方式如下：
  14.         // 2. css
  16.         window.onload = function(){
  18.             var oDiv = document.getElementById('div1');
  20.             oDiv.onmouseover = function(ev){
  21.                 var ev = ev || window.event;
  22.                 var a = this, b = ev.relatedTarget; //ev.relatedTarget是相对目标，可以理解为之前的目标
  24.                 /*
  25.                 1. 从body移到div1：a - div1；b - body
  26.                 2. 从div1移到div2：a - div1；b - div1
  27.                 3. 从div2移到div1：a - div1；b - div2
  28.                  */
  30.                 if(!elContains(a, b) && a!=b){
  31.                     document.title += '1';
  32.                 }
  33.             }
  34.             oDiv.onmouseout = function(ev){
  35.                 var ev = ev || window.event;
  36.                 var a = this, b = ev.relatedTarget;
  38.                 if(!elContains(a, b) && a!=b){
  39.                     document.title += '2';
  40.                 }
  41.             }
  43.         }
  45.         function elContains(a, b){ //判断两个元素是否是嵌套关系，看a是否包含b
  46.             return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
  47.         }
  48.     </script>
  49. </head>
  50. <body>
  51.     <div id="div1">
  52.         <div id="div2"></div>
  53.     </div>
  54. </body>
  55. </html>

图片的放大镜效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>图片放大镜效果</title>
  6.     <style>
  7.         html, body {margin: 0; padding: 0;}
  8.         #div1 {width: 180px; height: 180px; overflow: hidden; position: relative;}
  9.         #div1 span {width: 100px; height: 100px; background: yellow; opacity: 0.5; filter: alpha(opacity=50); position: absolute; left: 0; top: 0; display: none;}
  10.         #mask {width: 180px; height: 180px; background: red; position: absolute; left: 0; top: 0; opacity: 0; filter: alpha(oapcity=0);}
  11.         #div2 {width: 500px; height: 500px; position: absolute; left: 250px; top: 50px; overflow: hidden;}
  12.         #div2 img {position: absolute; left: 0; top: 0;}
  13.     </style>
  14.     <script>
  15.     //这里的onmouseover和onmouseout是用过CSS方式解决的问题，方法是添加了一个透明的层
  17.         window.onload = function(){
  18.             var oDiv = document.getElementById('div1');
  19.             var oSpan = oDiv.getElementsByTagName('span')[0];
  20.             var oDiv2 = document.getElementById('div2');
  21.             var img2 = oDiv2.getElementsByTagName('img')[0];
  23.             oDiv.onmouseenter = function(){ 
  24.                 oSpan.style.display = 'block';
  25.             }
  26.             oDiv.onmouseleave = function(){
  27.                 oSpan.style.display = 'none';
  28.             }
  30.             oDiv.onmousemove = function(ev){
  31.                 var ev = ev || window.event;
  32.                 var L = ev.clientX - oDiv.offsetLeft - oSpan.offsetWidth / 2;
  33.                 var T = ev.clientY - oDiv.offsetTop - oSpan.offsetHeight / 2;
  35.                 if(L <　0){
  36.                     L = 0;
  37.                 } else if (L > oDiv.offsetWidth - oSpan.offsetWidth){
  38.                     L = oDiv.offsetWidth - oSpan.offsetWidth;
  39.                 }
  41.                 if(T <　0){
  42.                     T = 0;
  43.                 } else if (T > oDiv.offsetHeight - oSpan.offsetHeight){
  44.                     T = oDiv.offsetHeight - oSpan.offsetHeight;
  45.                 }
  47.                 oSpan.style.left = L + 'px';
  48.                 oSpan.style.top = T + 'px';
  50.                 var scaleX = L / (oDiv.offsetWidth - oSpan.offsetWidth);
  51.                 var scaleY = T / (oDiv.offsetHeight - oSpan.offsetHeight);
  53.                 img2.style.left = -scaleX * (img2.offsetWidth - oDiv2.offsetWidth) + 'px';
  54.                 img2.style.top = -scaleY * (img2.offsetHeight - oDiv2.offsetHeight) + 'px';
  55.             }
  56.         }
  57.     </script>
  58. </head>
  59. <body>
  60.     <div id="div1">
  61.         <img src="b2.jpg">
  62.         <span></span>
  63.         <div id="mask"></div>
  64.     </div>
  65.     <div id="div2">
  66.         <img src="b1.jpg">
  67.     </div>
  68. </body>
  69. </html>

苹果菜单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>苹果菜单</title>
  6.     <script>
  7.         // Math.pow(3, 2); //3的平方 
  8.         // Math.pow(2, 3); //2的立方
  9.         // Math.sqrt(9); //9的开方
  10.         // Math.pow(9, 1/3); //9的开立方
  11.     </script>
  12.     <style>
  13.         html, body {margin: 0; padding: 0;}
  14.         #div1 img {width: 64px;}
  15.         #div1 {width: 100%; height: auto; position: absolute; bottom: 0; text-align: center;}
  16.         input {width: 300px;}
  17.     </style>
  18.     <script>
  19.         window.onload = function(){
  20.             var aInput = document.getElementsByTagName('input');
  21.             var oDiv= document.getElementById('div1');
  22.             var aImg = oDiv.getElementsByTagName('img');
  24.             document.onmousemove = function(ev){
  25.                 var ev = ev || window.event;
  27.                 for(var i=0; i<aImg.length; i++){
  28.                     var x = aImg[i].offsetLeft + aImg[i].offsetWidth/2;
  29.                     var y = aImg[i].offsetTop + aImg[i].offsetHeight/2 + oDiv.offsetTop;
  31.                     var a = ev.clientX - x;
  32.                     var b = ev.clientY - y;
  34.                     var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
  36.                     var scale = 1 - c/300;
  37.                     if(scale < 0.5){
  38.                         scale = 0.5;
  39.                     }
  42.                     aInput[i].value = 'x轴：' + x + '，Y轴：' + y + '，与鼠标距离：' + c;
  43.                     aImg[i].style.width = scale * 128 + 'px';
  44.                     aImg[i].style.height = scale * 128 + 'px';
  46.                 }
  47.             }
  50.         }
  51.     </script>
  52. </head>
  53. <body>
  54.     <input type="text">
  55.     <input type="text">
  56.     <input type="text">
  57.     <input type="text">
  58.     <input type="text">
  59.     <div id="div1">
  60.         <img src="images/1.png">
  61.         <img src="images/2.png">
  62.         <img src="images/3.png">
  63.         <img src="images/4.png">
  64.         <img src="images/5.png">
  65.     </div>
  66. </body> 
  67. </html>

妙味照片墙效果

找最小值和位置

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>找最小值和位置</title>
  6.     <script>
  7.         var arr = [34, 71, 8, 934, 10];
  9.         var value = 9999;
  10.         var index = -1;
  12.         for(var i=0; i<arr.length; i++){
  13.             if(arr[i]< value){
  14.                 value = arr[i];
  15.                 index = i;
  16.             }
  17.         }
  19.         alert('最小值：' + value + '，位置：' + index);
  20.     </script>
  21. </head>
  22. <body>
  24. </body>
  25. </html>

照片墙的实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>妙味照片墙效果</title>
  6.     <style>
  7.         html, body {margin: 0; padding: 0;}
  8.         #ul1 {width: 660px; position: relative; margin: 10px auto;}
  9.         li {width: 200px; height: 150px; margin: 10px; float: left; list-style: none;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             //布局转换，将浮动布局转成定位布局
  14.             var aLi = document.getElementsByTagName('li');
  15.             var izIndex = 2;
  16.             var arr = [];
  17.             var oInput = document.getElementById('input1');
  19.             for(var i=0; i<aLi.length; i++){
  20.                 arr.push([aLi[i].offsetLeft, aLi[i].offsetTop]);
  21.             }
  23.             for(var i=0; i<aLi.length; i++){
  24.                 aLi[i].style.position = 'absolute';
  25.                 aLi[i].style.left = arr[i][0] + 'px';
  26.                 aLi[i].style.top = arr[i][1] + 'px';
  27.                 aLi[i].style.margin = 0; //去掉影响定位的值。例如margin、padding都已经算到left和top里面了，所以不需要再算进去
  28.             }
  30.             for(var i=0; i<aLi.length; i++){
  31.                 aLi[i].index = i;
  32.                 drag(aLi[i]);
  33.             }
  35.             oInput.onclick = function(){
  36.                 var randomArr = [0, 1, 2, 3, 4, 5, 6, 7, 8];
  37.                 randomArr.sort(function(n1, n2){
  38.                     return Math.random() - 0.5;
  39.                 })
  40.                 for(var i=0; i<aLi.length; i++){
  41.                     startMove(aLi[i], {left: arr[randomArr[i]][0], top: arr[randomArr[i]][1]});
  42.                     aLi[i].index = randomArr[i];
  43.                 }
  44.             }
  46.             function drag(obj){
  47.                 var disX = 0;
  48.                 var disY = 0;
  50.                 obj.onmousedown = function(ev){
  51.                     var ev = ev || window.event;
  52.                     obj.style.zIndex = izIndex ++;
  53.                     disX = ev.clientX - obj.offsetLeft;
  54.                     disY = ev.clientY - obj.offsetTop;
  56.                     document.onmousemove = function(ev){
  57.                         var ev = ev || window.event;
  58.                         obj.style.left = ev.clientX - disX + 'px';
  59.                         obj.style.top = ev.clientY - disY + 'px';
  61.                         // for(var i=0; i<aLi.length; i++){
  62.                         //  if(pz(obj, aLi[i]) && obj != aLi[i]){
  63.                         //      aLi[i].style.border = '2px solid red';
  64.                         //  } else {
  65.                         //      aLi[i].style.border = '';
  66.                         //  }
  67.                         // }
  69.                         var nL = nearLi(obj);
  70.                         for(var i=0; i<aLi.length; i++){
  71.                             aLi[i].style.border = '';
  72.                         }
  74.                         if(nL){
  75.                             nL.style.border = '2px solid red';
  76.                         }
  79.                     }
  81.                     document.onmouseup = function(){
  82.                         document.onmousemove = null;
  83.                         document.onmouseup = null;
  85.                         var nL = nearLi(obj);
  86.                         var tmp = 0;
  88.                         if(nL){
  89.                             startMove(nL, {left: arr[obj.index][0], top: arr[obj.index][1]});
  91.                             startMove(obj, {left: arr[nL.index][0], top: arr[nL.index][1]});
  92.                             nL.style.border = '';
  94.                             tmp = obj.index;
  95.                             obj.index = nL.index;
  96.                             nL.index = tmp;
  97.                         } else {
  98.                             startMove(obj, {left: arr[obj.index][0], top: arr[obj.index][1]});
  99.                         }
  101.                     }
  103.                     return false; 
  104.                 }
  105.             }
  107.             function nearLi(obj){
  108.                 var value = 9999;
  109.                 var index = -1;
  110.                 for(var i=0; i<aLi.length; i++){
  111.                     if(pz(obj, aLi[i]) && obj != aLi[i]){
  113.                         var c = jl(obj, aLi[i]);
  115.                         if(c<value){
  116.                             value = c;
  117.                             index = i;
  118.                         }
  119.                     }
  120.                 }
  122.                 if(index != -1){
  123.                     return aLi[index];
  124.                 } else {
  125.                     return false;
  126.                 }
  127.             }
  129.             function jl(obj1, obj2){
  130.                 var a = obj1.offsetLeft - obj2.offsetLeft;
  131.                 var b = obj1.offsetTop - obj2.offsetTop;
  133.                 return Math.sqrt(a*a + b*b);
  134.             }
  136.             function pz(obj1, obj2){
  137.                 var L1 = obj1.offsetLeft;
  138.                 var R1 = obj1.offsetLeft + obj1.offsetWidth;
  139.                 var T1 = obj1.offsetTop;
  140.                 var B1 = obj1.offsetTop + obj1.offsetHeight;
  142.                 var L2 = obj2.offsetLeft;
  143.                 var R2 = obj2.offsetLeft + obj2.offsetWidth;
  144.                 var T2 = obj2.offsetTop;
  145.                 var B2 = obj2.offsetTop + obj2.offsetHeight;
  147.                 if(R1 < L2 || L1 > R2 || B1 < T2 || T1 > B2){ //碰不到的情况
  148.                     return false;
  149.                 } else { //其余都是碰到的情况
  150.                     return true;
  151.                 }
  152.             }
  154.             //以下是运动框架move.js的代码
  155.             function css(obj, attr){
  156.                 if(obj.currentStyle){
  157.                     return obj.currentStyle[attr];
  158.                 } else {
  159.                     return getComputedStyle(obj, false)[attr];
  160.                 }
  161.             }
  163.             function startMove(obj, json, fn){
  164.                 clearInterval(obj.iTimer);
  165.                 var iCur = 0;
  166.                 var iSpeed = 0; //速度初始化
  168.                 obj.iTimer = setInterval(function(){
  170.                     var iBtn = true;
  172.                     for(var attr in json){
  174.                         var iTarget = json[attr];
  176.                         if(attr == 'opacity'){
  177.                             iCur = Math.round(css(obj, 'opacity') * 100);
  178.                         } else {
  179.                             iCur = parseInt(css(obj, attr));
  180.                         }
  182.                         iSpeed = (iTarget - iCur) / 8;
  183.                         iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
  185.                         if(iCur != iTarget){
  186.                             iBtn = false;
  187.                             if(attr == 'opacity'){
  188.                                 obj.style.opacity = (iCur + iSpeed) / 100;
  189.                                 obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
  190.                             } else {
  191.                                 obj.style[attr] = iCur + iSpeed + 'px';
  192.                             }
  193.                         }
  194.                     }
  196.                     if(iBtn){
  197.                         clearInterval(obj.iTimer);
  198.                         fn && fn.call(obj);
  199.                     }
  201.                 }, 30);
  202.             }           
  204.         }
  205.     </script>
  206. </head>
  207. <body>
  208.     <input type="button" value="随机" id="input1">
  209.     <ul id="ul1">
  210.         <li><img src="photo/1.jpg"></li>
  211.         <li><img src="photo/2.jpg"></li>
  212.         <li><img src="photo/3.jpg"></li>
  213.         <li><img src="photo/4.jpg"></li>
  214.         <li><img src="photo/5.jpg"></li>
  215.         <li><img src="photo/1.jpg"></li>
  216.         <li><img src="photo/2.jpg"></li>
  217.         <li><img src="photo/3.jpg"></li>
  218.         <li><img src="photo/4.jpg"></li>
  219.     </ul>
  220. </body>
  221. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注