JS面向对象及组件开发

面向对象的组成

[html]  view plain  copy
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. var arr = [];  
  9.   
  10. arr.number = 10;  //对象下面的变量：叫做对象的属性  
  11.   
  12. //alert( arr.number );  
  13. //alert( arr.length );  
  14.   
  15. arr.test = function(){  //对象下面的函数 : 叫做对象的方法  
  16.     alert(123);  
  17. };  
  18.   
  19. arr.test();  
  20.   
  21. arr.push();  
  22. arr.sort();  
  23.   
  24. </script>  
  25. </head>  
  26.   
  27. <body>  
  28. </body>  
  29. </html>  

创建第一个面向对象程序
[html]  view plain  copy
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //var obj = {};  
  9.   
  10. var obj = new Object();  //创建了一个空的对象  
  11. obj.name = '小明';  //属性  
  12. obj.showName = function(){  //方法  
  13.     alert(this.name);  
  14. };  
  15.   
  16. obj.showName();  
  17.   
  18.   
  19. var obj2 = new Object();  //创建了一个空的对象  
  20. obj2.name = '小强';  //属性  
  21. obj2.showName = function(){  //方法  
  22.     alert(this.name);  
  23. };  
  24.   
  25. obj2.showName();  
  26.   
  27.   
  28.   
  29. </script>  
  30. </head>  
  31.   
  32. <body>  
  33. </body>  
  34. </html>  

工厂方式
[html]  view plain  copy
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //工厂方式 : 封装函数  
  9.   
  10. function createPerson(name){  
  11.       
  12.     //1.原料  
  13.     var obj = new Object();  
  14.     //2.加工  
  15.     obj.name = name;  
  16.     obj.showName = function(){  
  17.         alert( this.name );  
  18.     };  
  19.     //3.出场  
  20.     return obj;  
  21.       
  22. }  
  23.   
  24. var p1 = createPerson('小明');  
  25. p1.showName();  
  26. var p2 = createPerson('小强');  
  27. p2.showName();  
  28.   
  29. </script>  
  30. </head>  
  31.   
  32. <body>  
  33. </body>  
  34. </html>  

[html]  view plain  copy
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8.   
  9. //当new去调用一个函数 : 这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回)  
  10.   
  11. //new后面调用的函数 : 叫做构造函数  
  12.   
  13. function CreatePerson(name){  
  14.       
  15.     this.name = name;  
  16.     this.showName = function(){  
  17.         alert( this.name );  
  18.     };  
  19.       
  20. }  
  21.   
  22. var p1 = new CreatePerson('小明');  
  23. //p1.showName();  
  24. var p2 = new CreatePerson('小强');  
  25. //p2.showName();  
  26.   
  27. alert( p1.showName == p2.showName );  //false  
  28.   
  29. var arr = new Array();  
  30. var date = new Date();  
  31.   
  32. </script>  
  33. </head>  
  34.   
  35. <body>  
  36. </body>  
  37. </html>  

对象的引用

[html]  view plain  copy
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. /*var a = [1,2,3];  
  9. var b = [1,2,3];  
  10.   
  11. alert( a == b );  //false*/  
  12.   
  13. //var a = 5;  
  14. //var b = a;  
  15. //b += 3;  
  16. ////alert(b); //8  
  17. //alert(a); //5   基本类型 : 赋值的时候只是值的复制  
  18.   
  19.   
  20. //var a = [1,2,3];  
  21. //var b = a;  
  22. //b.push(4);  
  23. ////alert(b);  //[1,2,3,4]  
  24. //alert(a);  //[1,2,3,4]   对象类型 : 赋值不仅是值的复制，而且也是引用的传递  
  25.   
  26. //var a = [1,2,3];  
  27. //var b = a;  
  28. //b = [1,2,3,4];  
  29. ////alert(b); //[1,2,3,4]  
  30. //alert(a); //[1,2,3]  
  31.   
  32. //var a = 5;  
  33. //var b = 5;  
  34. //  
  35. //alert(a == b);  //基本类型 : 值相同就可以  
  36.   
  37.   
  38. //var a = [1,2,3];  
  39. //var b = [1,2,3];  
  40.   
  41. //alert( a == b );  //false  //对象类型 : 值和引用都相同才行  
  42.   
  43. var a = [1,2,3];  
  44. var b = a;  
  45. alert( a==b );  //true  
  46.   
  47. </script>  
  48. </head>  
  49.   
  50. <body>  
  51. </body>  
  52. </html>  

原型

[html]  view plain  copy
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //原型 : 去改写对象下面公用的方法或者属性 , 让公用的方法或者属性在内存中存在一份 ( 提高性能 )  
  9.   
  10. //原型 : CSS中的class  
  11. //普通方法 : CSS中的style  
  12.   
  13. //原型 : prototype : 要写在构造函数的下面  
  14.   
  15. /*var arr = [1,2,3,4,5];  
  16. var arr2 = [2,2,2,2,2];  
  17.   
  18. arr.sum = function(){  
  19.       
  20.     var result = 0;  
  21.     for(var i=0;i<this.length;i++){  
  22.         result += this[i];  
  23.     }  
  24.     return result;  
  25.       
  26. };  
  27. arr2.sum = function(){  
  28.       
  29.     var result = 0;  
  30.     for(var i=0;i<this.length;i++){  
  31.         result += this[i];  
  32.     }  
  33.     return result;  
  34.       
  35. };  
  36.   
  37. //alert( arr.sum() );  //15  
  38. //alert( arr2.sum() );  //10*/  
  39.   
  40. var arr = [1,2,3,4,5];  
  41. var arr2 = [2,2,2,2,2];  
  42.   
  43. Array.prototype.sum = function(){  
  44.     var result = 0;  
  45.     for(var i=0;i<this.length;i++){  
  46.         result += this[i];  
  47.     }  
  48.     return result;  
  49. };  
  50.   
  51. alert( arr.sum() );  //15  
  52. alert( arr2.sum() );  //10  
  53.   
  54. </script>  
  55. </head>  
  56.   
  57. <body>  
  58. </body>  
  59. </html>  

[html]  view plain  copy
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. var arr = [];  
  9. //arr.number = 10;  
  10. Array.prototype.number = 20;  
  11.   
  12. alert(arr.number);  
  13.   
  14. </script>  
  15. </head>  
  16.   
  17. <body>  
  18. </body>  
  19. </html>  

工厂方法之原型

[html]  view plain  copy
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8.   
  9. //当new去调用一个函数 : 这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回)  
  10.   
  11. //new后面调用的函数 : 叫做构造函数  
  12.   
  13. function CreatePerson(name){  
  14.       
  15.     this.name = name;  
  16.       
  17. }  
  18. CreatePerson.prototype.showName = function(){  
  19.     alert( this.name );  
  20. };  
  21.   
  22. var p1 = new CreatePerson('小明');  
  23. //p1.showName();  
  24. var p2 = new CreatePerson('小强');  
  25. //p2.showName();  
  26.   
  27. alert( p1.showName == p2.showName );  //true  
  28.   
  29. var arr = new Array();  
  30. var date = new Date();  
  31.   
  32. </script>  
  33. </head>  
  34.   
  35. <body>  
  36. </body>  
  37. </html>  

面向对象的写法

[html]  view plain  copy
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. function 构造函数(){  
  9.     this.属性  
  10. }  
  11.   
  12. 构造函数.原型.方法 = function(){};  
  13.   
  14.   
  15. var 对象1 = new 构造函数();  
  16. 对象1.方法();  
  17. </script>  
  18. </head>  
  19.   
  20. <body>  
  21. </body>  
  22. </html>  

面向对象的选项卡

[html]  view plain  copy
 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <style>  
  7. #div1 div{ width:200px; height:200px; border:1px #000 solid; display:none;}  
  8. .active{ background:red;}  
  9. </style>  
  10. <script>  
  11.   
  12. /*window.onload = function(){  
  13.     var oParent = document.getElementById('div1');  
  14.     var aInput = oParent.getElementsByTagName('input');  
  15.     var aDiv = oParent.getElementsByTagName('div');  
  16.       
  17.     for(var i=0;i<aInput.length;i++){  
  18.         aInput[i].index = i;  
  19.         aInput[i].onclick = function(){  
  20.             for(var i=0;i<aInput.length;i++){  
  21.                 aInput[i].className = '';  
  22.                 aDiv[i].style.display = 'none';  
  23.             }  
  24.             this.className = 'active';  
  25.             aDiv[this.index].style.display = 'block';  
  26.         };  
  27.     }  
  28.       
  29. };*/  
  30.   
  31. //先变型:  
  32. //尽量不要出现函数嵌套函数  
  33. //可以有全局变量  
  34. //把onload中不是赋值的语句放到单独函数中  
  35.   
  36.   
  37. var oParent = null;  
  38. var aInput = null;  
  39. var aDiv = null;  
  40.   
  41. window.onload = function(){  
  42.       
  43.     oParent = document.getElementById('div1');  
  44.     aInput = oParent.getElementsByTagName('input');  
  45.     aDiv = oParent.getElementsByTagName('div');  
  46.   
  47.     init();  
  48.       
  49. };  
  50.   
  51. function init(){  
  52.     for(var i=0;i<aInput.length;i++){  
  53.         aInput[i].index = i;  
  54.         aInput[i].onclick = change;  
  55.     }  
  56. }  
  57.   
  58. function change(){  
  59.     for(var i=0;i<aInput.length;i++){  
  60.         aInput[i].className = '';  
  61.         aDiv[i].style.display = 'none';  
  62.     }  
  63.     this.className = 'active';  
  64.     aDiv[this.index].style.display = 'block';  
  65. }  
  66.   
  67. </script>  
  68. </head>  
  69.   
  70. <body>  
  71. <div id="div1">  
  72.     <input class="active" type="button" value="1">  
  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>  
  79. </body>  
  80. </html>  

[html]  view plain  copy
 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <style>  
  7. #div1 div{ width:200px; height:200px; border:1px #000 solid; display:none;}  
  8. .active{ background:red;}  
  9. </style>  
  10. <script>  
  11.   
  12. /*window.onload = function(){  
  13.     var oParent = document.getElementById('div1');  
  14.     var aInput = oParent.getElementsByTagName('input');  
  15.     var aDiv = oParent.getElementsByTagName('div');  
  16.       
  17.     for(var i=0;i<aInput.length;i++){  
  18.         aInput[i].index = i;  
  19.         aInput[i].onclick = function(){  
  20.             for(var i=0;i<aInput.length;i++){  
  21.                 aInput[i].className = '';  
  22.                 aDiv[i].style.display = 'none';  
  23.             }  
  24.             this.className = 'active';  
  25.             aDiv[this.index].style.display = 'block';  
  26.         };  
  27.     }  
  28.       
  29. };*/  
  30.   
  31. //先变型:  
  32. //尽量不要出现函数嵌套函数  
  33. //可以有全局变量  
  34. //把onload中不是赋值的语句放到单独函数中  
  35.   
  36.   
  37. /*var oParent = null;  
  38. var aInput = null;  
  39. var aDiv = null;  
  40.   
  41. window.onload = function(){  
  42.       
  43.     oParent = document.getElementById('div1');  
  44.     aInput = oParent.getElementsByTagName('input');  
  45.     aDiv = oParent.getElementsByTagName('div');  
  46.   
  47.     init();  
  48.       
  49. };  
  50.   
  51. function init(){  
  52.     for(var i=0;i<aInput.length;i++){  
  53.         aInput[i].index = i;  
  54.         aInput[i].onclick = change;  
  55.     }  
  56. }  
  57.   
  58. function change(){  
  59.     for(var i=0;i<aInput.length;i++){  
  60.         aInput[i].className = '';  
  61.         aDiv[i].style.display = 'none';  
  62.     }  
  63.     this.className = 'active';  
  64.     aDiv[this.index].style.display = 'block';  
  65. }*/  
  66.   
  67. //改成面向对象:  
  68. //全局变量就是属性  
  69. //函数就是方法  
  70. //Onload中创建对象  
  71.   
  72. //改this指向问题 : 事件或者是定时器,尽量让面向对象中的this指向对象  
  73.   
  74. window.onload = function(){  
  75.       
  76.     var t1 = new Tab();  
  77.     t1.init();  
  78.       
  79. };  
  80.   
  81. function Tab(){  
  82.     this.oParent = document.getElementById('div1');  
  83.     this.aInput = this.oParent.getElementsByTagName('input');  
  84.     this.aDiv = this.oParent.getElementsByTagName('div');  
  85. }  
  86.   
  87. Tab.prototype.init = function(){  
  88.     var This = this;  
  89.     for(var i=0;i<this.aInput.length;i++){  
  90.         this.aInput[i].index = i;  
  91.         this.aInput[i].onclick = function(){  
  92.             This.change(this);  
  93.         };  
  94.     }  
  95. };  
  96.   
  97. Tab.prototype.change = function(obj){  
  98.     for(var i=0;i<this.aInput.length;i++){  
  99.         this.aInput[i].className = '';  
  100.         this.aDiv[i].style.display = 'none';  
  101.     }  
  102.     obj.className = 'active';  
  103.     this.aDiv[obj.index].style.display = 'block';  
  104. };  
  105.   
  106. </script>  
  107. </head>  
  108.   
  109. <body>  
  110. <div id="div1">  
  111.     <input class="active" type="button" value="1">  
  112.     <input type="button" value="2">  
  113.     <input type="button" value="3">  
  114.     <div style="display:block">11111</div>  
  115.     <div>22222</div>  
  116.     <div>33333</div>  
  117. </div>  
  118. </body>  
  119. </html>  

[html]  view plain  copy
 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <style>  
  7. #div1 div,#div2 div{ width:200px; height:200px; border:1px #000 solid; display:none;}  
  8. .active{ background:red;}  
  9. </style>  
  10. <script>  
  11.   
  12. /*var arr = [4,7,1,3];  
  13. arr.sort();  // 1 3 4 7  
  14.   
  15. var arr2 = [4,7,1,3];  
  16. arr2.push(5);  
  17. arr2.sort(); // 1 3 4 5 7  
  18. */  
  19.   
  20. window.onload = function(){  
  21.       
  22.     var t1 = new Tab('div1');  
  23.     t1.init();  
  24.     t1.autoPlay();  
  25.       
  26.     var t2 = new Tab('div2');  
  27.     t2.init();  
  28.     t2.autoPlay();  
  29.       
  30. };  
  31.   
  32. function Tab(id){  
  33.     this.oParent = document.getElementById(id);  
  34.     this.aInput = this.oParent.getElementsByTagName('input');  
  35.     this.aDiv = this.oParent.getElementsByTagName('div');  
  36.     this.iNow = 0;  
  37. }  
  38.   
  39. Tab.prototype.init = function(){  
  40.     var This = this;  
  41.     for(var i=0;i<this.aInput.length;i++){  
  42.         this.aInput[i].index = i;  
  43.         this.aInput[i].onclick = function(){  
  44.             This.change(this);  
  45.         };  
  46.     }  
  47. };  
  48.   
  49. Tab.prototype.change = function(obj){  
  50.     for(var i=0;i<this.aInput.length;i++){  
  51.         this.aInput[i].className = '';  
  52.         this.aDiv[i].style.display = 'none';  
  53.     }  
  54.     obj.className = 'active';  
  55.     this.aDiv[obj.index].style.display = 'block';  
  56. };  
  57.   
  58. Tab.prototype.autoPlay = function(){  
  59.       
  60.     var This = this;  
  61.       
  62.     setInterval(function(){  
  63.           
  64.         if(This.iNow == This.aInput.length-1){  
  65.             This.iNow = 0;  
  66.         }  
  67.         else{  
  68.             This.iNow++;  
  69.         }  
  70.           
  71.         for(var i=0;i<This.aInput.length;i++){  
  72.             This.aInput[i].className = '';  
  73.             This.aDiv[i].style.display = 'none';  
  74.         }  
  75.         This.aInput[This.iNow].className = 'active';  
  76.         This.aDiv[This.iNow].style.display = 'block';  
  77.           
  78.           
  79.     },2000);  
  80.       
  81. };  
  82.   
  83. </script>  
  84. </head>  
  85.   
  86. <body>  
  87. <div id="div1">  
  88.     <input class="active" type="button" value="1">  
  89.     <input type="button" value="2">  
  90.     <input type="button" value="3">  
  91.     <div style="display:block">11111</div>  
  92.     <div>22222</div>  
  93.     <div>33333</div>  
  94. </div>  
  95.   
  96. <div id="div2">  
  97.     <input class="active" type="button" value="1">  
  98.     <input type="button" value="2">  
  99.     <input type="button" value="3">  
  100.     <div style="display:block">11111</div>  
  101.     <div>22222</div>  
  102.     <div>33333</div>  
  103. </div>  
  104. </body>  
  105. </html>  

面向对象的拖拽

[html]  view plain  copy
 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <style>  
  7. #div1 div,#div2 div{ width:200px; height:200px; border:1px #000 solid; display:none;}  
  8. .active{ background:red;}  
  9. </style>  
  10. <script>  
  11.   
  12. /*var arr = [4,7,1,3];  
  13. arr.sort();  // 1 3 4 7  
  14.   
  15. var arr2 = [4,7,1,3];  
  16. arr2.push(5);  
  17. arr2.sort(); // 1 3 4 5 7  
  18. */  
  19.   
  20. window.onload = function(){  
  21.       
  22.     var t1 = new Tab('div1');  
  23.     t1.init();  
  24.     t1.autoPlay();  
  25.       
  26.     var t2 = new Tab('div2');  
  27.     t2.init();  
  28.     t2.autoPlay();  
  29.       
  30. };  
  31.   
  32. function Tab(id){  
  33.     this.oParent = document.getElementById(id);  
  34.     this.aInput = this.oParent.getElementsByTagName('input');  
  35.     this.aDiv = this.oParent.getElementsByTagName('div');  
  36.     this.iNow = 0;  
  37. }  
  38.   
  39. Tab.prototype.init = function(){  
  40.     var This = this;  
  41.     for(var i=0;i<this.aInput.length;i++){  
  42.         this.aInput[i].index = i;  
  43.         this.aInput[i].onclick = function(){  
  44.             This.change(this);  
  45.         };  
  46.     }  
  47. };  
  48.   
  49. Tab.prototype.change = function(obj){  
  50.     for(var i=0;i<this.aInput.length;i++){  
  51.         this.aInput[i].className = '';  
  52.         this.aDiv[i].style.display = 'none';  
  53.     }  
  54.     obj.className = 'active';  
  55.     this.aDiv[obj.index].style.display = 'block';  
  56. };  
  57.   
  58. Tab.prototype.autoPlay = function(){  
  59.       
  60.     var This = this;  
  61.       
  62.     setInterval(function(){  
  63.           
  64.         if(This.iNow == This.aInput.length-1){  
  65.             This.iNow = 0;  
  66.         }  
  67.         else{  
  68.             This.iNow++;  
  69.         }  
  70.           
  71.         for(var i=0;i<This.aInput.length;i++){  
  72.             This.aInput[i].className = '';  
  73.             This.aDiv[i].style.display = 'none';  
  74.         }  
  75.         This.aInput[This.iNow].className = 'active';  
  76.         This.aDiv[This.iNow].style.display = 'block';  
  77.           
  78.           
  79.     },2000);  
  80.       
  81. };  
  82.   
  83. </script>  
  84. </head>  
  85.   
  86. <body>  
  87. <div id="div1">  
  88.     <input class="active" type="button" value="1">  
  89.     <input type="button" value="2">  
  90.     <input type="button" value="3">  
  91.     <div style="display:block">11111</div>  
  92.     <div>22222</div>  
  93.     <div>33333</div>  
  94. </div>  
  95.   
  96. <div id="div2">  
  97.     <input class="active" type="button" value="1">  
  98.     <input type="button" value="2">  
  99.     <input type="button" value="3">  
  100.     <div style="display:block">11111</div>  
  101.     <div>22222</div>  
  102.     <div>33333</div>  
  103. </div>  
  104. </body>  
  105. </html>  

包装对象

[html]  view plain  copy
 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. /*function Aaa(){  
  9.     this.name = '小明';  
  10. }  
  11. Aaa.prototype.showName = function(){  
  12.     alert( this.name );  
  13. };  
  14.   
  15. var a1 = new Aaa();  
  16. a1.showName();  
  17.   
  18.   
  19. var arr = new Array();  
  20. arr.push();  
  21. arr.sort();  
  22.   
  23. //在JS源码 : 系统对象也是基于原型的程序  
  24.   
  25. function Array(){  
  26.     this.lenglth = 0;  
  27. }  
  28. Array.prototype.push = function(){};  
  29. Array.prototype.sort = function(){};*/  
  30.   
  31.   
  32. //尽量不要去修改或者添加系统对象下面的方法和属性  
  33.   
  34. var arr = [1,2,3];  
  35.   
  36. Array.prototype.push = function(){  
  37.       
  38.     //this : 1,2,3  
  39.     //arguments : 4,5,6  
  40.       
  41.     for(var i=0;i<arguments.length;i++){  
  42.         this[this.length] = arguments[i]  
  43.     }  
  44.       
  45.     return this.length;  
  46. };  
  47.   
  48. arr.push(4,5,6);  
  49.   
  50. alert( arr );  
  51.   
  52. //pop shift unshift splice sort  
  53.   
  54. </script>  
  55. </head>  
  56.   
  57. <body>  
  58. </body>  
  59. </html>  

[html]  view plain  copy
 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. /*var str = 'hello';  
  9.   
  10. alert( typeof str );  
  11.   
  12. str.charAt(0);  
  13. str.indexOf('e');*/  
  14.   
  15. //null undefined  
  16. //包装对象 : 基本类型都有自己对应的包装对象 : String  Number  Boolean   
  17.   
  18. /*var str = new String('hello');  
  19.   
  20. //alert( typeof str );  
  21.   
  22. alert(str.charAt(1));  
  23.   
  24. String.prototype.charAt = function(){};*/  
  25.   
  26.   
  27.   
  28. //var str = 'hello';  
  29. //str.charAt(0);  //基本类型会找到对应的包装对象类型，然后包装对象把所有的属性和方法给了基本类型，然后包装对象消失  
  30.   
  31.   
  32. /*var str = 'hello';  
  33.   
  34. String.prototype.lastValue = function(){  
  35.     return this.charAt(this.length-1);  
  36. };  
  37.   
  38. alert( str.lastValue() );  //o*/  
  39.   
  40.   
  41. var str = 'hello';  
  42.   
  43. str.number = 10;  
  44.   
  45. alert( str.number );  //undefined  
  46.   
  47. </script>  
  48. </head>  
  49.   
  50. <body>  
  51. </body>  
  52. </html>  

原型链

[html]  view plain  copy
 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //原型链 : 实例对象与原型之间的连接，叫做原型链  
  9.   
  10. //原型链的最外层 : Object.prototype  
  11.   
  12. function Aaa(){  
  13.     //this.num = 20;  
  14. }  
  15. //Aaa.prototype.num = 10;  
  16. Object.prototype.num = 30;  
  17.   
  18. var a1 = new Aaa();  
  19. alert(a1.num);  
  20.   
  21. </script>  
  22. </head>  
  23.   
  24. <body>  
  25. </body>  
  26. </html>  

hasOwnProperty

[html]  view plain  copy
 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //hasOwnProperty : 看是不是对象自身下面的属性  
  9.   
  10. var arr = [];  
  11. arr.num = 10;  
  12. Array.prototype.num2 = 20;  
  13.   
  14. //alert(  arr.hasOwnProperty('num')  );  //true  
  15.   
  16. alert(  arr.hasOwnProperty('num2')  );  //false  
  17.   
  18.   
  19.   
  20. </script>  
  21. </head>  
  22.   
  23. <body>  
  24. </body>  
  25. </html>  

constructor 

[html]  view plain  copy
 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //constructor : 查看对象的构造函数  
  9.   
  10. /*function Aaa(){  
  11. }  
  12.   
  13. var a1 = new Aaa();  
  14.   
  15. alert( a1.constructor );  //Aaa  
  16.   
  17. var arr = [];  
  18. alert( arr.constructor == Array );  //true*/  
  19.   
  20.   
  21. /*function Aaa(){  
  22. }  
  23. //Aaa.prototype.constructor = Aaa;   //每一个函数都会有的，都是自动生成的  
  24.   
  25. //Aaa.prototype.constructor = Array;  
  26.   
  27. var a1 = new Aaa();  
  28. alert( a1.hasOwnProperty == Object.prototype.hasOwnProperty );  //true*/  
  29.   
  30.   
  31. /*function Aaa(){  
  32. }  
  33.   
  34. Aaa.prototype.name = '小明';  
  35. Aaa.prototype.age = 20;  
  36.   
  37. Aaa.prototype = {  
  38.     constructor : Aaa,  
  39.     name : '小明',  
  40.     age : 20  
  41. };  
  42.   
  43. var a1 = new Aaa();  
  44. alert( a1.constructor );*/  
  45.   
  46.   
  47. function Aaa(){  
  48. }  
  49.   
  50. Aaa.prototype.name = 10;  
  51. Aaa.prototype.constructor = Aaa;  
  52.   
  53. for( var attr in Aaa.prototype ){  
  54.     alert(attr);  
  55. }  
  56.   
  57. </script>  
  58. </head>  
  59.   
  60. <body>  
  61. </body>  
  62. </html>  

instanceof

[html]  view plain  copy
 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //instanceof : 对象与构造函数在原型链上是否有关系  
  9.   
  10. function Aaa(){  
  11. }  
  12.   
  13. var a1 = new Aaa();  
  14.   
  15. //alert( a1 instanceof Object );  //true  
  16.   
  17.   
  18. var arr = [];  
  19.   
  20. alert( arr instanceof Array );  
  21.   
  22. </script>  
  23. </head>  
  24.   
  25. <body>  
  26. </body>  
  27. </html>  

toString

[html]  view plain  copy
 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //toString() : 系统对象下面都是自带的 , 自己写的对象都是通过原型链找object下面的  
  9.   
  10. /*var arr = [];  
  11. alert( arr.toString == Object.prototype.toString ); //false*/  
  12.   
  13. /*function Aaa(){  
  14. }  
  15. var a1 = new Aaa();  
  16. alert( a1.toString == Object.prototype.toString );  //true*/  
  17.   
  18.   
  19. //toString() : 把对象转成字符串  
  20.   
  21. /*var arr = [1,2,3];  
  22.   
  23. Array.prototype.toString = function(){  
  24.     return this.join('+');  
  25. };  
  26.   
  27. alert( arr.toString() );  //'1,2,3'*/  
  28.   
  29.   
  30. //var num = 255;  
  31. //alert( num.toString(16) );  //'ff'  
  32.   
  33.   
  34. //利用toString做类型的判断 :   
  35.   
  36. /*var arr = [];  
  37.   
  38. alert( Object.prototype.toString.call(arr) == '[object Array]' ); */ //'[object Array]'  
  39.   
  40. window.onload = function(){  
  41.       
  42.     var oF = document.createElement('iframe');  
  43.     document.body.appendChild( oF );  
  44.       
  45.     var ifArray = window.frames[0].Array;  
  46.       
  47.     var arr = new ifArray();  
  48.       
  49.     //alert( arr.constructor == Array );  //false  
  50.       
  51.     //alert( arr instanceof Array );  //false  
  52.       
  53.     alert( Object.prototype.toString.call(arr) == '[object Array]' );  //true  
  54.       
  55.       
  56. };  
  57.   
  58. </script>  
  59. </head>  
  60.   
  61. <body>  
  62. </body>  
  63. </html>  

继承

[html]  view plain  copy
 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //继承 : 子类不影响父类，子类可以继承父类的一些功能 ( 代码复用 )  
  9.   
  10. //属性的继承 : 调用父类的构造函数 call  
  11.   
  12. //方法的继承 : for in :  拷贝继承 (<a href="http://lib.csdn.net/base/22" class="replace_word" title="jQuery知识库" target="_blank" style="color:#df3434; font-weight:bold;">jquery</a>也是采用拷贝继承extend)  
  13.   
  14. function CreatePerson(name,sex){   //父类  
  15.     this.name = name;  
  16.     this.sex = sex;  
  17. }  
  18. CreatePerson.prototype.showName = function(){  
  19.     alert( this.name );  
  20. };  
  21.   
  22. var p1 = new CreatePerson('小明','男');  
  23. //p1.showName();  
  24.   
  25.   
  26. function CreateStar(name,sex,job){  //子类  
  27.       
  28.     CreatePerson.call(this,name,sex);  
  29.       
  30.     this.job = job;  
  31.       
  32. }  
  33.   
  34. //CreateStar.prototype = CreatePerson.prototype;  
  35.   
  36. extend( CreateStar.prototype , CreatePerson.prototype );  
  37.   
  38. CreateStar.prototype.showJob = function(){  
  39. };  
  40.   
  41. var p2 = new CreateStar('黄晓明','男','演员');  
  42.   
  43. p2.showName();  
  44.   
  45.   
  46. function extend(obj1,obj2){  
  47.     for(var attr in obj2){  
  48.         obj1[attr] = obj2[attr];  
  49.     }  
  50. }  
  51. </script>  
  52. </head>  
  53.   
  54. <body>  
  55. </body>  
  56. </html>  

对象的复制

[html]  view plain  copy
 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. /*var a = {  
  9.     name : '小明'  
  10. };  
  11.   
  12. var b = a;  
  13.   
  14. b.name = '小强';  
  15.   
  16. alert( a.name );*/  
  17.   
  18.   
  19. /*var a = {  
  20.     name : '小明'  
  21. };  
  22.   
  23. //var b = a;  
  24.   
  25. var b = {};  
  26.   
  27. extend( b , a );  
  28.   
  29. b.name = '小强';  
  30.   
  31. alert( a.name );  
  32.   
  33.   
  34. function extend(obj1,obj2){  
  35.     for(var attr in obj2){  
  36.         obj1[attr] = obj2[attr];  
  37.     }  
  38. }*/  
  39.   
  40.   
  41. var a = [1,2,3];  
  42. var b = a;  
  43. //b.push(4);  
  44.   
  45. b = [1,2,3,4];  
  46.   
  47. alert(a);  
  48.   
  49. </script>  
  50. </head>  
  51.   
  52. <body>  
  53. </body>  
  54. </html>  

继承的拖拽

[html]  view plain  copy
 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; 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>  
  11.   
  12. window.onload = function(){  
  13.     var d1 = new Drag('div1');  
  14.     d1.init();  
  15.       
  16.     var d2 = new ChildDrag('div2');  
  17.     d2.init();  
  18. };  
  19.   
  20. function Drag(id){  //父类  
  21.     this.obj = document.getElementById(id);  
  22.     this.disX = 0;  
  23.     this.disY = 0;  
  24. }  
  25. Drag.prototype.init = function(){  
  26.       
  27.     var This = this;  
  28.       
  29.     this.obj.onmousedown = function(ev){  
  30.         var ev = ev || window.event;  
  31.         This.fnDown(ev);  
  32.           
  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.       
  43. };  
  44.   
  45. Drag.prototype.fnDown = function(ev){  
  46.     this.disX = ev.clientX - this.obj.offsetLeft;  
  47.     this.disY = ev.clientY - this.obj.offsetTop;  
  48. };  
  49. Drag.prototype.fnMove = function(ev){  
  50.     this.obj.style.left = ev.clientX - this.disX + 'px';  
  51.     this.obj.style.top = ev.clientY - this.disY + 'px';  
  52. };  
  53. Drag.prototype.fnUp = function(){  
  54.     document.onmousemove = null;  
  55.     document.onmouseup = null;  
  56. };  
  57.   
  58.   
  59. function ChildDrag(id){   //子类  
  60.     Drag.call(this,id);  
  61. }  
  62.   
  63. extend( ChildDrag.prototype , Drag.prototype );  
  64.   
  65. ChildDrag.prototype.fnMove = function(ev){  
  66.       
  67.     var L = ev.clientX - this.disX;  
  68.     var T = ev.clientY - this.disY;  
  69.       
  70.     if(L<0){  
  71.         L = 0;  
  72.     }  
  73.     else if(L>document.documentElement.clientWidth - this.obj.offsetWidth){  
  74.         L = document.documentElement.clientWidth - this.obj.offsetWidth;  
  75.     }  
  76.       
  77.     this.obj.style.left = L + 'px';  
  78.     this.obj.style.top = T + 'px';  
  79. };  
  80.   
  81. function extend(obj1,obj2){  
  82.     for(var attr in obj2){  
  83.         obj1[attr] = obj2[attr];  
  84.     }  
  85. }  
  86.   
  87. </script>  
  88. </head>  
  89.   
  90. <body>  
  91. <div id="div1"></div>  
  92. <div id="div2"></div>  
  93. </body>  
  94. </html>  

类式继承

[html]  view plain  copy
 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //类 : JS是没有类的概念的 , 把JS中的构造函数看做的类  
  9.       
  10. //要做属性和方法继承的时候，要分开继承  
  11.       
  12. function Aaa(){   //父类  
  13.     this.name = [1,2,3];  
  14. }     
  15. Aaa.prototype.showName = function(){  
  16.     alert( this.name );  
  17. };  
  18.   
  19. function Bbb(){   //子类  
  20.       
  21.     Aaa.call(this);  
  22.       
  23. }  
  24.   
  25. var F = function(){};  
  26. F.prototype = Aaa.prototype;  
  27. Bbb.prototype = new F();  
  28. Bbb.prototype.constructor = Bbb; //修正指向问题  
  29.   
  30. var b1 = new Bbb();  
  31. //b1.showName();  
  32. //alert( b1.name );  
  33. //alert( b1.constructor );  
  34. b1.name.push(4);  
  35.   
  36. var b2 = new Bbb();  
  37.   
  38. alert( b2.name );  
  39.   
  40.   
  41.   
  42. </script>  
  43. </head>  
  44.   
  45. <body>  
  46. </body>  
  47. </html>  

原型继承

[html]  view plain  copy
 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. var a = {  
  9.     name : '小明'  
  10. };  
  11.   
  12. var b = cloneObj(a);  
  13.   
  14. b.name = '小强';  
  15.   
  16. //alert( b.name );  
  17. alert( a.name );  
  18.   
  19. function cloneObj(obj){  
  20.       
  21.     var F = function(){};  
  22.       
  23.     F.prototype = obj;  
  24.       
  25.     return new F();  
  26.       
  27. }  
  28.   
  29.   
  30. 拷贝继承:  通用型的  有new或无new的时候都可以  
  31.   
  32. 类式继承:  new构造函数  
  33.   
  34. 原型继承:  无new的对象  
  35.   
  36.   
  37. </script>  
  38. </head>  
  39.   
  40. <body>  
  41. </body>  
  42. </html> 

你可能感兴趣的:(JS面向对象及组件开发)

  • 学点心理知识，呵护孩子健康 静候花开_7090
    昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
  • 我校举行新老教师师徒结对仪式暨名师专业工作室工作交流活动 李蕾1229
    为促进我校教师专业发展，发挥骨干教师的引领带头作用，11月6日下午，我校举行新老教师师徒结对仪式暨名师专业工作室工作交流活动。图片发自App会议由教师发展处李蕾主任主持，首先，由范校长宣读新老教师结对名单及双方承担职责。随后，两位新调入教师陈玉萍、莫正杰分别和他们的师傅鲍元美、刘召彬老师签订了师徒结对协议书。图片发自App图片发自App师徒拥抱、握手。有了师傅就有了目标有了方向，相信两位新教师在师
  • 向内而求 陈陈_19b4
    10月27日，阴。阅读书目:《次第花开》。作者:希阿荣博堪布，是当今藏传佛家宁玛派最伟大的上师法王，如意宝晋美彭措仁波切颇具影响力的弟子之一。多年以来，赴海内外各地弘扬佛法，以正式授课、现场开示、发表文章等多种方法指导佛学弟子修行佛法。代表作《寂静之道》、《生命这出戏》、《透过佛法看世界》自出版以来一直是佛教类书籍中的畅销书。图片发自App金句:1.佛陀说，一切痛苦的根源在于我们长期以来对自身及外
  • Python中os.environ基本介绍及使用方法 鹤冲天Pro #Pythonpython服务器开发语言
    文章目录python中os.environos.environ简介os.environ进行环境变量的增删改查python中os.environ的使用详解1.简介2.key字段详解2.1常见key字段3.os.environ.get()用法4.环境变量的增删改查和判断是否存在4.1新增环境变量4.2更新环境变量4.3获取环境变量4.4删除环境变量4.5判断环境变量是否存在python中os.envi
  • 基于社交网络算法优化的二维最大熵图像分割 智能算法研学社（Jack旭） 智能优化算法应用图像分割算法php开发语言
    智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码文章目录智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码1.前言2.二维最大熵阈值分割原理3.基于社交网络优化的多阈值分割4.算法结果：5.参考文献：6.Matlab代码摘要：本文介绍基于最大熵的图像分割，并且应用社交网络算法进行阈值寻优。1.前言阅读此文章前，请阅读《图像分割：直方图区域划分及信息统计介绍》htt
  • 509. 斐波那契数(每日一题) lzyprime
    lzyprime博客(github)创建时间：2021.01.04qq及邮箱：2383518170leetcode笔记题目描述斐波那契数，通常用F(n)表示，形成的序列称为斐波那契数列。该数列由0和1开始，后面的每一项数字都是前面两项数字的和。也就是：F(0)=0，F(1)=1F(n)=F(n-1)+F(n-2)，其中n>1给你n，请计算F(n)。示例1：输入：2输出：1解释：F(2)=F(1)+
  • 春季养肝正当时 dxn悟
    重温快乐2023年2月4日立春。春天来了，春暖花开，小鸟欢唱，那在这样的季节我们如何养肝呢？自然界的春季对应中医五行的木，人体五脏肝属木，“木曰曲直”，是以树干曲曲直直地向上、向外伸长舒展的生发姿态，来形容具有生长、升发、条达、舒畅等特征的食物及现象。根据中医天人相应的理念，肝五行属木，喜条达，主疏泄，与春天相应，所以春天最适合养肝。养肝首先要少生气，因为肝喜条达恶抑郁。人体五志肝为怒，生气发怒最
  • python八股文面试题分享及解析(1) Shawn________ python
    #1.'''a=1b=2不用中间变量交换a和b'''#1.a=1b=2a,b=b,aprint(a)print(b)结果：21#2.ll=[]foriinrange(3):ll.append({'num':i})print(11)结果:#[{'num':0},{'num':1},{'num':2}]#3.kk=[]a={'num':0}foriinrange(3):#0,12#可变类型，不仅仅改变
  • MYSQL面试系列-04 king01299 面试mysql面试
    MYSQL面试系列-0417.关于redolog和binlog的刷盘机制、redolog、undolog作用、GTID是做什么的？innodb_flush_log_at_trx_commit及sync_binlog参数意义双117.1innodb_flush_log_at_trx_commit该变量定义了InnoDB在每次事务提交时，如何处理未刷入（flush）的重做日志信息（redolog）。它
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • CX8836：小体积大功率升降压方案推荐（附Demo设计指南） 诚芯微科技 社交电子
    CX8836是一颗同步四开关单向升降压控制器，在4.5V-40V宽输入电压范围内稳定工作，持续负载电流10A，能够在输入高于或低于输出电压时稳定调节输出电压，可适用于USBPD快充、车载充电器、HUB、汽车启停系统、工业PC电源等多种升降压应用场合，为大功率TYPE-CPD车载充电器提供最优解决方案。提供CX8836Demo测试、CX8836样品申请及CX8836方案开发技术支持。CX8836同升
  • Rust基础知识 GRKF15 rust开发语言后端
    1.Rust语言简介1.1基础语法变量声明：let关键字用于声明变量，可以指定或不指定类型，如leta=10;和letmutc=30i32;。函数定义：使用fn关键字定义函数，并指定参数类型及返回类型，如fnadd(i:i32,j:i32)->i32{i+j}。控制流：包括if、else等，控制语句后需要使用;来结束语句。1.2数据类型整数类型：i8、i16、i32、i64、i128，以及无符号的
  • 【华为OD技术面试真题 - 技术面】- python八股文真题题库（1） 算法大师 华为od面试python
    华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.数据预处理流程数据预处理的主要步骤工具和库2.介绍线性回归、逻辑回归模型线性回归（LinearRegression）模型形式：关键点：逻辑回归（LogisticRegression）模型形式：关键点：参数估计与评估：3.python浅拷贝及深拷贝浅拷贝（Shal
  • 简介Shell、zsh、bash zhaosuningsn Shellzshbashshelllinuxbash
    Shell是Linux和Unix的外壳，类似衣服，负责外界与Linux和Unix内核的交互联系。例如接收终端用户及各种应用程序的命令，把接收的命令翻译成内核能理解的语言，传递给内核，并把内核处理接收的命令的结果返回给外界，即Shell是外界和内核沟通的桥梁或大门。Linux和Unix提供了多种Shell，其中有种bash，当然还有其他好多种。Mac电脑中不但有bash，还有一个zsh，预装的，据说
  • 舜公郑金锋书辛丑自剪扇面书法作品（四O六） 舜公郑金锋
    辛丑小阳春，新自剪扇面400品，大多为各色撒金、撒银、描金、描银、水印、彩绘、荧光等亚粉、色宣纸，以及域外包装填充纸等；王一品长锋羊毫秃笔；一得阁云头艳墨、宿墨、水等。书体有甲骨文，金文(商周金文、春秋战国金文、中山王厝器金文、汉金文……)，楚简帛书，侯马盟书，温县盟书，小篆，果蝙书等，隶书(秦简、汉简帛书、汉碑……)，草书(章草、小草、大草……)，行书(行楷、行草)，楷书(魏碑及北朝墓志、隋朝墓
  • [Python] 数据结构 详解及代码 AIAdvocate 算法python数据结构链表
    今日内容大纲介绍数据结构介绍列表链表1.数据结构和算法简介程序大白话翻译,程序=数据结构+算法数据结构指的是存储,组织数据的方式.算法指的是为了解决实际业务问题而思考思路和方法,就叫:算法.2.算法的5大特性介绍算法具有独立性算法是解决问题的思路和方式,最重要的是思维,而不是语言,其(算法)可以通过多种语言进行演绎.5大特性有输入,需要传入1或者多个参数有输出,需要返回1个或者多个结果有穷性,执行
  • mac 备份android 手机通讯录导入iphone,iphone如何导出通讯录（轻松教你iPhone备份通讯录的方法）... weixin_39762838 mac备份android手机通讯录导入iphone
    在日新月异的手机更替中，换手机已经成为一个非常稀松平常的事情，但将旧手机上面的通讯录导入到新手机还是让不少小伙伴为难，本篇将给大家详细讲解这方面的知识：“苹果手机通讯录怎么导入到新手机”及“安卓手机通讯录导入到新手机”的方法。一、苹果手机通讯录导入到新手机常用方法(SIM卡导入)在苹果手机主频幕上找到“设置”，单击进入设置菜单，下拉菜单列表，点击“邮件、通讯录、日历”，然后找到“导入SIM卡通讯录
  • 一分钟学会刷牙，受用终生！ 好易康
    讲真，刷了十几二十年牙，没刷对过一次......来来来，划重点，更重要的是执行：①每天刷牙2次，②每次刷牙2~3分钟，③每3个月更换牙刷。最后，请使用正确的刷牙方法：巴氏（BASS）刷牙法undefined_腾讯视频视频来源ADA美国牙医协会巴氏刷牙法又称龈沟清扫法或水平颤动法。是由美国牙科协会推荐的一种有效去除龈缘附近及龈沟内菌斑的方法。刷牙不仅是刷牙齿，同时也要刷牙龈。因为口腔与细菌的战场就在
  • Python入门之Lesson2:Python基础语法 小熊同学哦 Python入门课程python开发语言算法数据结构青少年编程
    目录前言一.介绍1.变量和数据类型2.常见运算符3.输入输出4.条件语句5.循环结构二.练习三.总结前言欢迎来到《Python入门》系列博客的第二课。在上一课中，我们了解了Python的安装及运行环境的配置。在这一课中，我们将深入学习Python的基础语法，这是编写Python代码的根基。通过本节内容的学习，你将掌握变量、数据类型、运算符、输入输出、条件语句等Python编程的基础知识。一.介绍1
  • 光盘文件系统 (iso9660) 格式解析 穷人小水滴 光盘文件系统iso9660denoGNU/Linuxjavascript
    越简单的系统,越可靠,越不容易出问题.光盘文件系统(iso9660)十分简单,只需不到200行代码,即可实现定位读取其中的文件.参考资料:https://wiki.osdev.org/ISO_9660相关文章:《光盘防水嘛?DVD+R刻录光盘泡水实验》https://blog.csdn.net/secext2022/article/details/140583910《光驱的内部结构及日常使用》ht
  • 逻辑思维的过程与力量 解晓萱
    之前我对逻辑思维的了解停留在，讲话时有逻辑，辩论时条理清晰。今天看了《开讲了》里面关于大学生质疑易中天老师的视频，听到易中天老师的回答，忽然对逻辑思维有了稍微深刻的理解。图片发自App逻辑学对我们太重要了，不仅仅是学习备考，更重要的是生活和事业及交流的选择及过程。偏激的起点和性格有关，更和逻辑思维水平有关。视频里，易中天老师评价北大学生逻辑时讲到：“他的逻辑环节是没问题的，但是逻辑起点错了，所以他
  • 阅读《认知觉醒》读书笔记 就看看书
    本周阅读了周岭的《认知觉醒开启自我改变的原动力》，启发较多，故做读书笔记一则，留待学习。全书共八章，讲述了大脑、潜意识、元认知、专注力、学习力、行动力、情绪力及成本最低的成长之道。具体描述了大脑、焦虑、耐心、模糊、感性、元认知、自控力、专注力、情绪专注、学习专注、匹配、深度、关联、体系、打卡、反馈、休息、清晰、傻瓜、行动、心智宽带、单一视角、游戏心态、早起、冥想、阅读、写作、运动等相关知识点。大脑
  • 入门MySQL——查询语法练习 K_un
    前言：前面几篇文章为大家介绍了DML以及DDL语句的使用方法，本篇文章将主要讲述常用的查询语法。其实MySQL官网给出了多个示例数据库供大家实用查询，下面我们以最常用的员工示例数据库为准，详细介绍各自常用的查询语法。1.员工示例数据库导入官方文档员工示例数据库介绍及下载链接：https://dev.mysql.com/doc/employee/en/employees-installation.h
  • 【2022 CCF 非专业级别软件能力认证第一轮（CSP-J1）入门级 C++语言试题及解析】 汉子萌萌哒 CCFnoi算法数据结构c++
    一、单项选择题(共15题，每题2分，共计30分；每题有且仅有一个正确选项)1.以下哪种功能没有涉及C++语言的面向对象特性支持：()。A.C++中调用printf函数B.C++中调用用户定义的类成员函数C.C++中构造一个class或structD.C++中构造来源于同一基类的多个派生类题目解析【解析】正确答案:AC++基础知识，面向对象和类有关，类又涉及父类、子类、继承、派生等关系，printf
  • 计算机网络八股总结 Petrichorzncu 八股总结计算机网络笔记
    这里写目录标题网络模型划分（五层和七层）及每一层的功能五层网络模型七层网络模型（OSI模型）==三次握手和四次挥手具体过程及原因==三次握手四次挥手TCP/IP协议组成==UDP协议与TCP/IP协议的区别==Http协议相关知识网络地址，子网掩码等相关计算网络模型划分（五层和七层）及每一层的功能五层网络模型应用层：负责处理网络应用程序，如电子邮件、文件传输和网页浏览。主要协议包括HTTP、FTP
  • 2022-1-12晨间日记 云卷云舒_a1b9
    起床：6：20就寝：23：00天气：阴心情：还好纪念日：法考主观体出分的日子叫我起床的不是闹钟是梦想年度目标及关键点：备考初级会计师；坚持运动，减重，阅读，学习本月重要成果：报名今日三只青蛙/番茄钟学习听课；瑜伽课；记账盘点成功日志-记录三五件有收获的事务1.收到鲜花2.早起做早餐3.引导孩子做计划财务检视支出严重超预算，检视一月的预算是否合理人际的投入同学联系；开卷有益-学习/读书/听书听初级课
  • 天猫返利网哪个最好?天猫返利网站有哪些? 优惠券高省
    关于哪个返利网站好用，今天汐儿给大家介绍以下十大网站，可以作为参考：1、高省网【高省APP】（邀请码：668666）全网佣金最高。手机应用商店搜索“高省”即可免费下载安装，填写高省邀请码：668666，直升2皇冠，享更高佣金及分红奖励。高省APP全网佣金最高，手机应用商店搜索“高省”即可下载，高省邀请码：668666，此码注册，直升2皇冠，佣金更高！送万元推广大礼包，教你如何1年做到百万团队。其实
  • 进销存小程序源码 PHP网络版ERP进销存管理系统 全开源可二开 摸鱼小号 php
    可直接源码搭建部署发布后使用：一、功能模块介绍该系统模板主要有进，销，存三个主要模板功能组成，下面将介绍各模块所对应的功能；进：需要将产品采购入库，自动生成采购明细台账同时关联财务生成付款账单；销：是指对客户的销售订单记录，汇总生成产品销售明细及回款计划；存：库存的日常盘点与统计，库存下限预警、出入库台账、库存位置等。1.进购管理采购订单：采购下单审批→由上级审批通过采购入库；采购入库：货品到货>
  • 阿里云服务器4核8G配置购买及价格类文章汇总（10篇） 阿里云最新优惠和活动汇总
    阿里云服务器4核8G配置如何购买？价格是多少？4核8G配置的阿里云服务器可以通过云服务器产品页购买也可以通过阿里云活动去下单购买，一般通过活动购买的用户比较多，但是不同实例规格的阿里云服务器价格不一样，带宽不同价格也不一样，本文为大家汇总了10篇关于阿里云服务器4核8G配置购买教程文章和价格类文章，分为购买类文章和价格类文章，以供大家参考如何购买阿里云服务器4核8G配置和最新优惠价格是多少。阿里云
  • ChatGPT 高效学习套路揭秘：让知识获取事半功倍的秘诀 kkai人工智能 chatgpt人工智能学习媒体ai
    最近这段时间，AI热潮因ChatGPT的火爆再次掀起。如今，网上大部分内容都在调侃AI，但很少有人探讨如何正经使用ChatGPT做事情。作为一名靠搜索引擎和GitHub自学编程的开发者，第一次和ChatGPT深度交流后，我就确信：ChatGPT能够极大提高程序员学习新技术的效率。使用ChatGPT一个月后，我越发感受到它的颠覆性。因此，我想从工作和学习的角度，分享它的优势及我的一些使用技巧，而非娱
  • PHP，安卓，UI，java，linux视频教程合集 cocos2d-x小菜 javaUIlinuxPHPandroid
    ╔-----------------------------------╗┆                           
  • zookeeper admin 笔记 braveCS zookeeper
      Required Software 1) JDK>=1.6 2)推荐使用ensemble的ZooKeeper(至少3台)，并run on separate machines 3)在Yahoo!，zk配置在特定的RHEL boxes里，2个cpu，2G内存，80G硬盘   数据和日志目录 1)数据目录里的文件是zk节点的持久化备份，包括快照和事务日
  • Spring配置多个连接池 easterfly spring
    项目中需要同时连接多个数据库的时候，如何才能在需要用到哪个数据库就连接哪个数据库呢？ Spring中有关于dataSource的配置：     <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource"   &nb
  • Mysql 171815164 mysql
    例如，你想myuser使用mypassword从任何主机连接到mysql服务器的话。 GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'%'IDENTIFIED BY 'mypassword' WI TH GRANT OPTION; 如果你想允许用户myuser从ip为192.168.1.6的主机连接到mysql服务器，并使用mypassword作
  • CommonDAO（公共/基础DAO） g21121 DAO
            好久没有更新博客了，最近一段时间工作比较忙，所以请见谅，无论你是爱看呢还是爱看呢还是爱看呢，总之或许对你有些帮助。         DAO(Data Access Object)是一个数据访问（顾名思义就是与数据库打交道）接口，DAO一般在业
  • 直言有讳 永夜-极光 感悟随笔
      1.转载地址:http://blog.csdn.net/jasonblog/article/details/10813313   精华: “直言有讳”是阿里巴巴提倡的一种观念，而我在此之前并没有很深刻的认识。为什么呢？就好比是读书时候做阅读理解，我喜欢我自己的解读，并不喜欢老师给的意思。在这里也是。我自己坚持的原则是互相尊重，我觉得阿里巴巴很多价值观其实是基本的做人
  • 安装CentOS 7 和Win 7后，Win7 引导丢失 随便小屋 centos
    一般安装双系统的顺序是先装Win7，然后在安装CentOS，这样CentOS可以引导WIN 7启动。但安装CentOS7后，却找不到Win7 的引导，稍微修改一点东西即可。 一、首先具有root 的权限。      即进入Terminal后输入命令su，然后输入密码即可 二、利用vim编辑器打开/boot/grub2/grub.cfg文件进行修改 v
  • Oracle备份与恢复案例 aijuans oracle
    Oracle备份与恢复案例 一. 理解什么是数据库恢复当我们使用一个数据库时，总希望数据库的内容是可靠的、正确的，但由于计算机系统的故障（硬件故障、软件故障、网络故障、进程故障和系统故障）影响数据库系统的操作，影响数据库中数据的正确性，甚至破坏数据库，使数据库中全部或部分数据丢失。因此当发生上述故障后，希望能重构这个完整的数据库，该处理称为数据库恢复。恢复过程大致可以分为复原(Restore)与
  • JavaEE开源快速开发平台G4Studio v5.0发布 無為子
      我非常高兴地宣布,今天我们最新的JavaEE开源快速开发平台G4Studio_V5.0版本已经正式发布。   访问G4Studio网站 http://www.g4it.org   2013-04-06 发布G4Studio_V5.0版本 功能新增 (1). 新增了调用Oracle存储过程返回游标，并将游标映射为Java List集合对象的标
  • Oracle显示根据高考分数模拟录取 百合不是茶 PL/SQL编程oracle例子模拟高考录取学习交流
    题目要求: 1,创建student表和result表 2,pl/sql对学生的成绩数据进行处理 3,处理的逻辑是根据每门专业课的最低分线和总分的最低分数线自动的将录取和落选     1,创建student表,和result表 学生信息表; create table student( student_id number primary key,--学生id
  • 优秀的领导与差劲的领导 bijian1013 领导管理团队
    责任 优秀的领导：优秀的领导总是对他所负责的项目担负起责任。如果项目不幸失败了，那么他知道该受责备的人是他自己，并且敢于承认错误。 差劲的领导：差劲的领导觉得这不是他的问题，因此他会想方设法证明是他的团队不行，或是将责任归咎于团队中他不喜欢的那几个成员身上。 努力工作 优秀的领导：团队领导应该是团队成员的榜样。至少，他应该与团队中的其他成员一样努力工作。这仅仅因为他
  • js函数在浏览器下的兼容 Bill_chen jquery浏览器IEDWRext
      做前端开发的工程师，少不了要用FF进行测试，纯js函数在不同浏览器下，名称也可能不同。对于IE6和FF，取得下一结点的函数就不尽相同：   IE6：node.nextSibling,对于FF是不能识别的；   FF：node.nextElementSibling,对于IE是不能识别的； 兼容解决方式：var Div = node.nextSibl
  • 【JVM四】老年代垃圾回收：吞吐量垃圾收集器(Throughput GC) bit1129 垃圾回收
    吞吐量与用户线程暂停时间   衡量垃圾回收算法优劣的指标有两个： 吞吐量越高，则算法越好 暂停时间越短，则算法越好 首先说明吞吐量和暂停时间的含义。   垃圾回收时，JVM会启动几个特定的GC线程来完成垃圾回收的任务，这些GC线程与应用的用户线程产生竞争关系，共同竞争处理器资源以及CPU的执行时间。GC线程不会对用户带来的任何价值，因此，好的GC应该占
  • J2EE监听器和过滤器基础 白糖_ J2EE
    Servlet程序由Servlet，Filter和Listener组成，其中监听器用来监听Servlet容器上下文。 监听器通常分三类：基于Servlet上下文的ServletContex监听，基于会话的HttpSession监听和基于请求的ServletRequest监听。   ServletContex监听器 ServletContex又叫application
  • 博弈AngularJS讲义(16) - 提供者 boyitech jsAngularJSapiAngularProvider
      Angular框架提供了强大的依赖注入机制，这一切都是有注入器(injector)完成. 注入器会自动实例化服务组件和符合Angular API规则的特殊对象，例如控制器，指令，过滤器动画等。   那注入器怎么知道如何去创建这些特殊的对象呢？ Angular提供了5种方式让注入器创建对象，其中最基础的方式就是提供者(provider), 其余四种方式(Value, Fac
  • java-写一函数f(a,b)，它带有两个字符串参数并返回一串字符，该字符串只包含在两个串中都有的并按照在a中的顺序。 bylijinnan java
    public class CommonSubSequence { /** * 题目：写一函数f(a,b)，它带有两个字符串参数并返回一串字符，该字符串只包含在两个串中都有的并按照在a中的顺序。 * 写一个版本算法复杂度O(N^2)和一个O(N) 。 * * O(N^2)：对于a中的每个字符，遍历b中的每个字符，如果相同，则拷贝到新字符串中。 * O(
  • sqlserver 2000 无法验证产品密钥 Chen.H sqlwindowsSQL ServerMicrosoft
    在 Service Pack 4 (SP 4), 是运行 Microsoft Windows Server 2003、 Microsoft Windows Storage Server 2003 或 Microsoft Windows 2000 服务器上您尝试安装 Microsoft SQL Server 2000 通过卷许可协议 (VLA) 媒体。 这样做, 收到以下错误信息CD KEY的 SQ
  • [新概念武器]气象战争 comsci
           气象战争的发动者必须是拥有发射深空航天器能力的国家或者组织....        原因如下:        地球上的气候变化和大气层中的云层涡旋场有密切的关系,而维持一个在大气层某个层次
  • oracle 中 rollup、cube、grouping 使用详解 daizj oraclegroupingrollupcube
    oracle 中 rollup、cube、grouping 使用详解 -- 使用oracle 样例表演示 转自namesliu -- 使用oracle 的样列库，演示 rollup, cube, grouping 的用法与使用场景    --- ROLLUP ， 为了理解分组的成员数量，我增加了 分组的计数  COUNT(SAL)   
  • 技术资料汇总分享 Dead_knight 技术资料汇总 分享
    本人汇总的技术资料，分享出来，希望对大家有用。 http://pan.baidu.com/s/1jGr56uE 资料主要包含： Workflow->工作流相关理论、框架(OSWorkflow、JBPM、Activiti、fireflow...) Security->java安全相关资料(SSL、SSO、SpringSecurity、Shiro、JAAS...) Ser
  • 初一下学期难记忆单词背诵第一课 dcj3sjt126com englishword
    could 能够 minute 分钟 Tuesday 星期二 February 二月 eighteenth 第十八 listen 听 careful 小心的，仔细的 short 短的 heavy 重的 empty 空的 certainly 当然 carry 携带；搬运 tape 磁带 basket 蓝子 bottle 瓶 juice 汁，果汁 head 头；头部
  • 截取视图的图片, 然后分享出去 dcj3sjt126com OSObjective-C
    OS 7 has a new method that allows you to draw a view hierarchy into the current graphics context. This can be used to get an UIImage very fast. I implemented a category method on UIView to get the vi
  • MySql重置密码 fanxiaolong MySql重置密码
    方法一:  在my.ini的[mysqld]字段加入： skip-grant-tables 重启mysql服务，这时的mysql不需要密码即可登录数据库  然后进入mysql mysql>use mysql;  mysql>更新 user set password=password('新密码') WHERE User='root'; mysq
  • Ehcache（03）——Ehcache中储存缓存的方式 234390216 ehcacheMemoryStoreDiskStore存储驱除策略
    Ehcache中储存缓存的方式   目录 1     堆内存（MemoryStore） 1.1     指定可用内存 1.2     驱除策略 1.3     元素过期 2   &nbs
  • spring mvc中的@propertysource jackyrong spring mvc
      在spring mvc中，在配置文件中的东西，可以在java代码中通过注解进行读取了： @PropertySource  在spring 3.1中开始引入 比如有配置文件 config.properties mongodb.url=1.2.3.4 mongodb.db=hello 则代码中   @PropertySource(&
  • 重学单例模式 lanqiu17 单例Singleton模式
    最近在重新学习设计模式，感觉对模式理解更加深刻。觉得有必要记下来。 第一个学的就是单例模式，单例模式估计是最好理解的模式了。它的作用就是防止外部创建实例，保证只有一个实例。 单例模式的常用实现方式有两种，就人们熟知的饱汉式与饥汉式，具体就不多说了。这里说下其他的实现方式 静态内部类方式: package test.pattern.singleton.statics; publ
  • .NET开源核心运行时，且行且珍惜 netcome java.net开源
    背景 2014年11月12日，ASP.NET之父、微软云计算与企业级产品工程部执行副总裁Scott Guthrie，在Connect全球开发者在线会议上宣布，微软将开源全部.NET核心运行时，并将.NET 扩展为可在 Linux 和 Mac OS 平台上运行。.NET核心运行时将基于MIT开源许可协议发布，其中将包括执行.NET代码所需的一切项目——CLR、JIT编译器、垃圾收集器（GC）和核心
  • 使用oscahe缓存技术减少与数据库的频繁交互 Everyday都不同 Web高并发oscahe缓存
    此前一直不知道缓存的具体实现，只知道是把数据存储在内存中，以便下次直接从内存中读取。对于缓存的使用也没有概念，觉得缓存技术是一个比较”神秘陌生“的领域。但最近要用到缓存技术，发现还是很有必要一探究竟的。   缓存技术使用背景：一般来说，对于web项目，如果我们要什么数据直接jdbc查库好了，但是在遇到高并发的情形下，不可能每一次都是去查数据库，因为这样在高并发的情形下显得不太合理——
  • Spring+Mybatis 手动控制事务 toknowme mybatis
    @Override    public boolean testDelete(String jobCode) throws Exception {       boolean flag = false;  &nbs
  • 菜鸟级的android程序员面试时候需要掌握的知识点 xp9802 android
    熟悉Android开发架构和API调用 掌握APP适应不同型号手机屏幕开发技巧 熟悉Android下的数据存储  熟练Android Debug Bridge Tool 熟练Eclipse/ADT及相关工具  熟悉Android框架原理及Activity生命周期 熟练进行Android UI布局 熟练使用SQLite数据库； 熟悉Android下网络通信机制，S
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他