[关闭]
@fantaghiro 2014-11-24T09:16:31.000000Z 字数 22563 阅读 1417

妙味课堂-问题解答视频

学习笔记 js 前端 妙味课堂

HTML5视频-历史管理

没有历史管理的彩票抽奖

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>彩票</title>
  6.     <script>
  7.         window.onload = function(){
  8.             var oInput = document.getElementById('input1');
  9.             var oDiv = document.getElementById('div1');
  11.             oInput.onclick = function(){
  12.                 var number = randomNum(35, 7);
  13.                 oDiv.innerHTML = number;
  14.             }
  16.             function randomNum(all, now){
  17.                 var arr = [];
  18.                 var newArr = [];
  19.                 for(var i=1; i<=all; i++){
  20.                     arr.push(i);
  21.                 }
  22.                 for(var i=0; i<now; i++){
  23.                     newArr.push(arr.splice(Math.floor(Math.random()*arr.length), 1));
  24.                 }
  25.                 return newArr;
  26.             }
  27.         }
  28.     </script>
  29. </head>
  30. <body>
  31.     <input type="button" value="35选7" id="input1">
  32.     <div id="div1"></div>
  33. </body>
  34. </html>

采用onhashchange的方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>彩票</title>
  6.     <script>
  8.         //onhashchange : 事件 当hash值有变化的时候，就会触发
  10.         window.onload = function(){
  11.             var oInput = document.getElementById('input1');
  12.             var oDiv = document.getElementById('div1');
  13.             var obj = {};
  15.             oInput.onclick = function(){
  16.                 var number = randomNum(35, 7);
  17.                 oDiv.innerHTML = number;
  18.                 var oRD = Math.random();
  19.                 obj[oRD] = number;
  20.                 window.location.hash = oRD;
  21.             }
  23.             window.onhashchange = function(){
  24.                 var number = obj[window.location.hash.substring(1)] || '';
  25.                 oDiv.innerHTML = number;
  26.             }
  28.             function randomNum(all, now){
  29.                 var arr = [];
  30.                 var newArr = [];
  31.                 for(var i=1; i<=all; i++){
  32.                     arr.push(i);
  33.                 }
  34.                 for(var i=0; i<now; i++){
  35.                     newArr.push(arr.splice(Math.floor(Math.random()*arr.length), 1));
  36.                 }
  37.                 return newArr;
  38.             }
  39.         }
  40.     </script>
  41. </head>
  42. <body>
  43.     <input type="button" value="35选7" id="input1">
  44.     <div id="div1"></div>
  45. </body>
  46. </html>

用html5的history对象来实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>彩票</title>
  6.     <script>
  7.         window.onload = function(){
  8.             var oInput = document.getElementById('input1');
  9.             var oDiv = document.getElementById('div1');
  10.             var iNow = 1;
  12.             oInput.onclick = function(){
  13.                 var number = randomNum(35, 7);
  14.                 oDiv.innerHTML = number;
  15.                 history.pushState(number, '', iNow++);
  16.             }
  18.             window.onpopstate = function(ev){
  19.                 var number = ev.state || '';
  20.                 oDiv.innerHTML = number;
  21.             }
  23.             function randomNum(all, now){
  24.                 var arr = [];
  25.                 var newArr = [];
  26.                 for(var i=1; i<=all; i++){
  27.                     arr.push(i);
  28.                 }
  29.                 for(var i=0; i<now; i++){
  30.                     newArr.push(arr.splice(Math.floor(Math.random()*arr.length), 1));
  31.                 }
  32.                 return newArr;
  33.             }
  34.         }
  35.     </script>
  36. </head>
  37. <body>
  38.     <input type="button" value="35选7" id="input1">
  39.     <div id="div1"></div>
  40. </body>
  41. </html>

JavaScript性能-DOM优化

什么是DOM

DOM与JavaScript

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Javascript性能-DOM优化</title>
  6.     <script>
  7.         window.onload = function(){
  8.             var oDiv = document.getElementById('div1');
  9.             var str = '';
  11.             /* 这个在控制台打印出来的时间大约是240多毫秒
  12.             console.time('hello');
  13.             for(var i=0; i<5000; i++){
  14.                 oDiv.innerHTML += 'a';
  15.             }
  16.             console.timeEnd('hello');
  17.             */
  19.             console.time('hello'); //这样执行，大约用0.2毫秒
  20.             for(var i=0; i<5000; i++){
  21.                 str += 'a';
  22.             }
  23.             oDiv.innerHTML = str;
  24.             console.timeEnd('hello');
  25.         }
  26.     </script>
  27. </head>
  28. <body>
  29.     <div id="div1"></div>
  30. </body>
  31. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Javascript性能-DOM优化</title>
  6.     <script>
  8.     // chrome、safari类型的webkit的浏览器：dom方法要不innerHTML要好
  9.     // IE、火狐中：innerHTML比dom方法要好
  11.         window.onload = function(){
  12.             var oUl = document.getElementById('ul1');
  13.             var str = '';
  15.             /*console.time('hello'); 
  16.             for(var i=0; i<5000; i++){
  17.                 var oLi = document.createElement('li');
  18.                 oUl.appendChild(oLi);
  19.             }
  20.             console.timeEnd('hello');*/
  22.             console.time('hello'); 
  23.             for(var i=0; i<5000; i++){
  24.                 str += '<li></li>';
  25.             }
  26.             oUl.innerHTML = str;
  27.             console.timeEnd('hello');
  28.         }
  29.     </script>
  30. </head>
  31. <body>
  32.     <ul id="ul1"></ul>
  33. </body>
  34. </html>

DOM优化

cloneNode

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Javascript性能-DOM优化</title>
  6.     <script>
  8.     //克隆方式要比上面的那种方式好一些。复制节点要比新创建好一些
  10.     window.onload = function(){
  11.             var oUl = document.getElementById('ul1');
  12.             var str = '';
  14.             /*console.time('hello'); 
  15.             for(var i=0; i<5000; i++){
  16.                 var oLi = document.createElement('li');
  17.                 oLi.innerHTML = 'li';
  18.                 oUl.appendChild(oLi);
  19.             }
  20.             console.timeEnd('hello');*/
  22.             console.time('hello');
  23.             var oLi = document.createElement('li');
  24.             oLi.innerHTML = 'li';
  25.             for(var i=0; i<5000; i++){
  26.                 var newLi = oLi.cloneNode(true);
  27.                 oUl.appendChild(newLi);
  28.             }
  29.             console.timeEnd('hello');
  31.         }
  32.     </script>
  33. </head>
  34. <body>
  35.     <ul id="ul1"></ul>
  36. </body>
  37. </html>

尽量使用局部变量

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Javascript性能-DOM优化</title>
  6.     <script>
  8.     window.onload = function(){
  9.             var oUl = document.getElementById('ul1');
  10.             var aLi = oUl.getElementsByTagName('li');
  12.             for(var i=0; i<5000; i++){
  13.                 var oLi = document.createElement('li');
  14.                 oUl.appendChild(oLi);
  15.             }
  17.             /*console.time('hello');
  18.             for(var i=0; i<aLi.length; i++){
  19.                 aLi[i].innerHTML = 'li';
  20.             }
  21.             console.timeEnd('hello');*/
  23.             console.time('hello');
  24.             var len = aLi.length;
  25.             for(var i=0; i<len; i++){
  26.                 aLi[i].innerHTML = 'li';
  27.             }
  28.             console.timeEnd('hello');
  30.             //下面这种方法比上面注释起来的那种好。因为在aLi.length那里，不需要重复去获取元素计算长度
  31.         }
  32.     </script>
  33. </head>
  34. <body>
  35.     <ul id="ul1"></ul>
  36. </body>
  37. </html>

尽量用只获取元素的节点方法

例如：

选择器API

  1. //var oUl = document.getElementById('ul1');
  2. //var aLi = oUl.getElementsByTagName('li');
  4. //用querySelectorAll这个方法，获取aLi，下面一句话就够了
  5. var aLi = document.querySelectorAll('#ul1 li');

DOM与浏览器

尽量在appendChild前添加操作

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Javascript性能-DOM优化</title>
  6.     <script>
  8.     window.onload = function(){
  9.             var oUl = document.getElementById('ul1');
  11.             /*console.time('hello');
  12.             for(var i=0; i<5000; i++){
  13.                 var oLi = document.createElement('li');
  14.                 oUl.appendChild(oLi);
  15.                 oLi.innerHTML = 'li';
  16.             }
  17.             console.timeEnd('hello');*/
  19.             console.time('hello'); //下面这种写法，性能上要优于上面的写法
  20.             for(var i=0; i<5000; i++){
  21.                 var oLi = document.createElement('li');
  22.                 oLi.innerHTML = 'li';
  23.                 oUl.appendChild(oLi);
  24.             }
  25.             console.timeEnd('hello');
  27.         }
  28.     </script>
  29. </head>
  30. <body>
  31.     <ul id="ul1"></ul>
  32. </body>
  33. </html>

用cssText

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Javascript性能-DOM优化</title>
  6.     <script>
  8.     window.onload = function(){
  9.             var oUl = document.getElementById('ul1');
  11.             /*console.time('hello');
  12.             for(var i=0; i<5000; i++){
  13.                 var oLi = document.createElement('li');
  14.                 oLi.style.width = '100px';
  15.                 oLi.style.height = '100px';
  16.                 oLi.style.background = 'red';
  17.                 oUl.appendChild(oLi);
  18.             }
  19.             console.timeEnd('hello');*/
  21.             console.time('hello');
  22.             for(var i=0; i<5000; i++){
  23.                 var oLi = document.createElement('li');
  24.                 oLi.style.cssText = 'width: 100px; height: 100px; background: red';
  25.                 oUl.appendChild(oLi);
  26.             }
  27.             console.timeEnd('hello');
  28.         }
  29.     </script>
  30. </head>
  31. <body>
  32.     <ul id="ul1"></ul>
  33. </body>
  34. </html>

缓存布局信息

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Javascript性能-DOM优化</title>
  6.     <style>
  7.         #div1 {width: 100px; height: 100px; background: red; position: absolute;}
  8.     </style>
  9.     <script>
  10.     window.onload = function(){
  11.             var oDiv = document.getElementById('div1');
  12.             var L = oDiv.offsetLeft;
  13.             var T = oDiv.offsetTop;
  14.             /*setInterval(function(){
  15.                 oDiv.style.left = oDiv.offsetLeft + 1 + 'px';
  16.                 oDiv.style.top = oDiv.offsetTop + 1 + 'px';
  17.             }, 30)*/
  19.             setInterval(function(){
  20.                 L++;
  21.                 T++;
  22.                 oDiv.style.left = L + 'px';
  23.                 oDiv.style.top = T + 'px';
  24.             }, 30)
  25.     }
  26.     </script>
  27. </head>
  28. <body>
  29.     <div id="div1"></div>
  30. </body>
  31. </html>

文档碎片

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Javascript性能-DOM优化</title>
  6.     <style>
  7.         #div1 {width: 100px; height: 100px; background: red; position: absolute;}
  8.     </style>
  9.     <script>
  10.     window.onload = function(){
  11.         var oUl = document.getElementById('ul1');
  12.         var oFrag = document.createDocumentFragment();
  14.         /*console.time('hello');
  15.         for(var i=0; i<5000; i++){
  16.             var oLi = document.createElement('li');
  17.             oUl.appendChild(oLi);
  18.         }
  19.         console.timeEnd('hello');*/
  21.         console.time('hello');
  22.         for(var i=0; i<5000; i++){
  23.             var oLi = document.createElement('li');
  24.             oFrag.appendChild(oLi);
  25.         }
  26.         oUl.appendChild(oFrag);
  27.         console.timeEnd('hello');
  28.     }
  29.     </script>
  30. </head>
  31. <body>
  32.     <ul id="ul1"></ul>
  33. </body>
  34. </html>

DOM与事件

DOM与前端模板

JS的跨域

存在跨域问题的包括：

ajax: XMLHttpRequest(); //ajax是不能跨域的

解决方式：

  1. 子域与主域之间：设置document.domain = 'a.com'
  2. 通过服务器代理：在服务器上做一个XMLHttpRequest代理文件
  3. 利用script标签：jsonp
  4. 利用location.hash来跨域
  5. 利用window.name来跨域
  6. 通过flash
  7. html5的postMessage

jsonp : json + padding(内填充)

a.com

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Javascript性能-DOM优化</title>
  6.     <script>
  7.         //a.com
  8.         //jsonp : json + padding(内填充)
  10.         function box(json){
  11.             alert(json.name); //miaov
  12.         }
  14.     </script>
  15.     <script type="text/javascript" src="jsonp.js"></script>
  16. </head>
  17. <body>
  18. </body>
  19. </html>

b.com的jsonp文件

  1. //jsonp.js
  2. //b.com
  3. box({name: 'miaov'});

a.com优化的写法

  1. function createJs(sUrl){
  2.     var oScript = document.createElement('script');
  3.     oScript.type = 'text/javascript';
  4.     oScript.src = sUrl;
  5.     document.getElementsByTagName('head')[0].appendChild(oScript);
  6. }
  7. createJs('jsonp.js?callback=box');
  8. function box(json){
  9.     alert(json.name); //miaov
  10. }

闭包

什么是闭包？

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>闭包</title>
  6.     <script>
  7.         //函数嵌套函数，内部函数可以应用外部函数的参数和变量，参数和变量不会被垃圾回收机制所收回。
  9.         /*function aaa(a){
  10.             var b = 5;
  12.             function bbb(){
  13.                 alert(a);
  14.                 alert(b);
  15.             }
  16.         }
  18.         aaa(); //aaa执行后，变量a、b并没有被垃圾回收机制收回。因为里面的函数bbb还在应用着。
  20.         //JS中的垃圾回收机制
  22.         function aaa(){
  23.             var a = 1;
  24.         }
  26.         aaa(); //函数一致性，变量a就会被垃圾回收机制收回*/
  28.         function aaa(){
  29.             var a = 5;
  31.             function bbb(){
  32.                 alert(a);
  33.             }
  34.             return bbb;
  35.         }
  37.         var c = aaa(); //aaa这里已经执行了，返回的bbb函数给了c
  38.         c(); //c执行就相当于函数bbb执行了，这时候还是能够找到变量a，因此可以弹出5。这说明变量a并没有被垃圾回收机制收回。这就是一个典型的闭包。
  40.     </script>
  41. </head>
  42. <body>
  43. </body>
  44. </html>

闭包有什么好处？应用在哪里？

  1. 希望一个变量长期驻扎在内存当中
  2. 可以避免全局变量的污染
  3. 私有成员的存在
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>闭包</title>
  6.     <script>
  7.         /* 全局变量受到污染
  8.             var a = 1;
  10.             function aaa(){
  11.                 a++;
  12.                 alert(a);
  13.             }
  15.             aaa(); //2
  16.             aaa(); //3
  17.             alert(a);
  18.          */
  20.             /* 垃圾回收机制起作用，虽然全局变量没被污染，但是a却不能累加了
  21.             function aaa(){
  22.                 var a = 1;
  23.                 a++;
  24.                 alert(a);
  25.             }
  27.             aaa(); //2
  28.             aaa(); //2
  29.              */
  31.             // 通过闭包实现在不污染全局变量的情况下，a还能够累加
  32.             function aaa(){
  33.                 var a = 1;
  34.                 return function(){
  35.                     a++;
  36.                     alert(a);
  37.                 }
  38.             }
  40.             var b = aaa();
  41.             b(); //2
  42.             b(); //3
  43.             alert(a); //报错，因为这个a是局部的，不是全局的了
  45.     </script>
  46. </head>
  47. <body>
  48. </body>
  49. </html>

闭包的用法

  1. 模块化代码
  2. 在循环中直接找到对应元素的索引

改写

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>闭包</title>
  6.     <script>
  7.         /*function aaa(){
  8.             alert(1);
  9.         }
  11.         aaa();*/
  13.         /*(function(){
  14.             alert(1);
  15.         })();*/
  17.         //下面这一段就是模块化代码
  18.         var aaa = (function(){
  19.             var a = 1;
  20.             return function(){
  21.                 a++;
  22.                 alert(a);
  23.             }
  24.         })();
  26.         aaa(); //2
  27.         aaa(); //3
  28.     </script>
  29. </head>
  30. <body>
  31. </body>
  32. </html>

私有成员的存在

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>闭包</title>
  6.     <script>
  7.         var aaa = (function(){
  8.             var a = 1;
  9.             function bbb(){
  10.                 a++;
  11.                 alert(a);
  12.             }
  13.             function ccc(){
  14.                 a++;
  15.                 alert(a);
  16.             }
  17.             return {
  18.                 b: bbb, //私有方法
  19.                 c: ccc  //私有方法
  20.             }
  21.         })();
  23.         aaa.b(); //2
  24.         aaa.c(); //3
  25.         alert(a); //报错
  26.         alert(bbb); //报错
  27.         alert(ccc); //报错 因为a、bbb和ccc都是私有的，在aaa外面调用不到
  28.     </script>
  29. </head>
  30. <body>
  31. </body>
  32. </html>

在循环中直接找到对应元素的索引

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>闭包</title>
  6.     <script>
  7.         window.onload = function(){
  8.             var aLi = document.getElementsByTagName('li');
  10.             /*for(var i=0; i<aLi.length; i++){
  11.                 aLi[i].onclick = function(){
  12.                     alert(i); //不论点击哪个li，都弹出3。当点击的时候，循环已经结束了，循环结束i就是3
  13.                 }
  14.             }*/
  16.             /* 写法一
  17.             for(var i=0; i<aLi.length; i++){
  18.                 (function(i){
  19.                     aLi[i].onclick = function(){
  20.                         alert(i); //这时候依次点击li，分别弹出0、1、2
  21.                     }
  22.                 })(i);  
  23.             }
  24.             */
  26.             //写法二
  27.             for(var i=0; i<aLi.length; i++){
  28.                 aLi[i].onclick = (function(i){
  29.                     return function(){
  30.                         alert(i); //这时候依次点击li，分别弹出0、1、2
  31.                     }
  32.                 })(i);
  33.             }
  34.         }
  35.     </script>
  36. </head>
  37. <body>
  38.     <ul>
  39.         <li>111111111</li>
  40.         <li>111111111</li>
  41.         <li>111111111</li>
  42.     </ul>
  43. </body>
  44. </html>

闭包需要注意的地方。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>闭包</title>
  6.     <script>
  7.         //IE下会引发内存泄露
  8.         /* 第一种解决IE下内存泄露的方法
  9.         window.onload = function(){
  10.             var oDiv = document.getElementById('div1');
  12.             oDiv.onclick = function(){
  13.                 alert(oDiv.id);
  14.             }
  16.             //以下是解决办法
  17.             window.onunload = function(){
  18.                 oDiv.onclick = null;
  19.             }
  20.         }
  21.         */
  23.         //第二种解决方法
  24.         window.onload = function(){
  25.             var oDiv = document.getElementById('div1');
  26.             var id = oDiv.id;
  27.             oDiv.onclick = function(){
  28.                 alert(id);
  29.             }
  30.             oDiv = null;
  31.         }
  32.     </script>
  33. </head>
  34. <body>
  35.     <div id="div1">aaaaaa</div>
  36. </body>
  37. </html>

操作iframe

iframe1.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>iframe1</title>
  6. </head>
  7. <body>
  8.     <div id="div1">aaaaaa</div>
  9. </body>
  10. </html>

操作iframe1的demo1.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>操作iframe</title>
  6.     <script>
  7.         window.onload = function(){
  8.             var oInput = document.getElementById('input1');
  9.             var oIframe = document.getElementById('iframe1');
  11.             oInput.onclick = function(){
  12.                 //alert(oIframe.contentWindow); //contentWindow就是iframe的window对象 所有浏览器都支持
  13.                 oIframe.contentWindow.document.getElementById('div1').style.color = 'red';
  14.                 //contentDocument直接获取到iframe的document对象 IE6、7不支持
  15.                 //oIframe.contentDocument.getElementById('div1').style.background = 'red'; 
  16.             }
  17.         }
  18.     </script>
  19. </head>
  20. <body>
  21.     <input type="button" value="改变" id="input1">
  22.     <iframe src="iframe1.html" id="iframe1"></iframe>
  23. </body>
  24. </html>

iframe2.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>iframe1</title>
  6.     <script>
  7.         window.onload = function(){
  8.             var oInput = document.getElementById('input1');
  10.             oInput.onclick = function(){
  11.                 window.parent.document.getElementById('div1').style.color = 'red'; //window.parent指的就是它的父层 只隔一层
  13.                 //window.top找的是最顶层，当iframe出现多层嵌套的时候，可以用window.top找到最顶层
  14.             }
  16.         }
  17.     </script>
  18. </head>
  19. <body>
  20.     <input type="button" value="改变" id="input1">
  21. </body>
  22. </html>

操作iframe2的demo2.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>操作iframe</title>
  6.     <script>
  7.     </script>
  8. </head>
  9. <body>
  10.     <div id="div1">aaaaaa</div>
  11.     <iframe src="iframe2.html" id="iframe2"></iframe>
  12. </body>
  13. </html>

iframe的onload事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>操作iframe</title>
  6.     <script>
  7.         window.onload = function(){
  8.             var oIframe = document.createElement('iframe');
  9.             oIframe.src = 'iframe1.html';
  10.             document.body.appendChild(oIframe);
  12.             /*oIframe.onload = function(){
  13.                 alert(123);
  14.             }*/
  16.             //IE下的iframe的onload事件只能用绑定的形式
  17.             oIframe.attachEvent('onload', function(){
  18.                 alert(123);
  19.             })
  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>操作iframe</title>
  6.     <script>
  7.         window.onload = function(){
  8.             //当当前的window不是window.top的时候，说明这个window被其他的iframe嵌套了，那么就将自己的地址赋给window.top的地址。这样打开嵌套了这个网页的网页，就会自动跳到真正被嵌套的网页的地址
  9.             if(window != window.top){
  10.                 window.top.location.href = window.location.href;
  11.             } 
  12.         }
  13.     </script>
  14. </head>
  15. <body>
  16. </body>
  17. </html>

如何改变iframe的大小

iframe3.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>iframe1</title>
  6. </head>
  7. <body>
  8.     <div style="width: 200px; height: 200px; background: red"></div>
  9. </body>
  10. </html>

iframe4.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>iframe1</title>
  6. </head>
  7. <body>
  8.     <div style="width: 400px; height: 400px; background: green"></div>
  9. </body>
  10. </html>

改变iframe大小的demo.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>操作iframe</title>
  6.     <script>
  7.         window.onload = function(){
  8.             var aInput = document.getElementsByTagName('input');
  9.             var oIframe = document.getElementById('iframe1');
  11.             function changeHeight(){
  12.                 setTimeout(function(){
  13.                     oIframe.height = oIframe.contentWindow.document.body.offsetHeight;
  14.                 }, 100);
  15.             }
  16.             changeHeight();
  18.             aInput[0].onclick = function(){
  19.                 oIframe.src = 'iframe3.html';
  20.                 changeHeight();
  21.             }
  22.             aInput[1].onclick = function(){
  23.                 oIframe.src = 'iframe4.html';
  24.                 changeHeight();
  25.             }
  26.         }
  27.     </script>
  28. </head>
  29. <body>
  30.     <input type="button" value="切换1">
  31.     <input type="button" value="切换2">
  32.     <iframe src="iframe3.html" id="iframe4" scrolling="no"></iframe>
  33. </body>
  34. </html>

对象引用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>对象引用</title>
  6.     <script>
  7.         /*var a = 5;
  8.         var b = a;
  10.         b += 3;
  11.         alert(b); //8
  12.         alert(a); //5
  14.         //以上这种赋值的关系，a/b之间不互相影响，这存在于基本类型中（字符串、数字、布尔、空对象和undefined）*/
  16.         /*var a = [1, 2, 3];
  17.         var b = a;
  19.         b.push(4);
  20.         alert(b); //[1, 2, 3, 4];
  21.         alert(a); //[1, 2, 3, 4]
  22.         //以上不是赋值关系，而是引用关系，因此a、b互相影响*/
  24.         //对象和函数都是引用的关系
  26.         var a = [1, 2, 3];
  27.         var b = a;
  29.         var b = [1, 2, 3, 4]; //这里b是重新赋值了，与a之间的引用关系就断开了
  30.         alert(b); //[1, 2, 3, 4]
  31.         alert(a); //[1, 2, 3]
  32.     </script>
  33. </head>
  34. <body>
  36. </body>
  37. </html>

对象的复制

**浅拷贝

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>对象引用</title>
  6.     <script>
  7.         /*var obj = {
  8.             a : 10
  9.         }
  10.         var obj2 = obj;
  12.         obj2.a = 20;
  13.         alert(obj.a); //20*/
  15.         var obj = {
  16.             a : 10
  17.         }
  19.         function copy(obj){ //浅拷贝 浅克隆
  20.             var newObj = {};
  22.             for(var attr in obj){
  23.                 newObj[attr] = obj[attr];
  24.             }
  26.             return newObj;
  27.         }
  28.         var obj2 = copy(obj);
  29.         obj2.a = 20;
  30.         alert(obj.a); //10
  31.     </script>
  32. </head>
  33. <body>
  35. </body>
  36. </html>

深拷贝

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>对象引用</title>
  6.     <script>
  7.         /*//浅拷贝的问题
  8.         var obj = {
  9.             a : { b : 10 }
  10.         }
  12.         function copy(obj){
  13.             var newObj = {};
  15.             for(var attr in obj){
  16.                 newObj[attr] = obj[attr];
  17.             }
  19.             return newObj;
  20.         }
  21.         var obj2 = copy(obj);
  22.         obj2.a.b = 20;
  23.         alert(obj.a.b); //20*/
  25.         /*//递归的写法：用递归求阶乘
  26.         //1. 函数调用函数自身，执行递的动作
  27.         //2. 最后一次判断一个终止条件，可以执行归的动作
  28.         function test(n){
  29.             if(n == 1){
  30.                 return 1;
  31.             }
  32.             return n*test(n-1);
  33.         }
  34.         alert(test(4)); //1*2*3*4=24*/
  37.         //深拷贝
  38.         var obj = {
  39.             a : { b : 10 }
  40.         }
  42.         function deepCopy(obj){ //深拷贝
  44.             if(typeof obj != 'object'){
  45.                 //console.trace();
  46.                 return obj;
  47.             }
  49.             var newObj = {};
  51.             for(var attr in obj){
  52.                 newObj[attr] = deepCopy(obj[attr]);
  53.             }
  55.             return newObj;
  56.         }
  58.         var obj2 = deepCopy(obj);
  59.         obj2.a.b = 20;
  60.         alert(obj.a.b); //10
  61.     </script>
  62. </head>
  63. <body>
  65. </body>
  66. </html>

快速排序

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>js中的排序</title>
  6.     <script>
  7.         //js自带的排序：sort
  8.         //比较流行的排序算法：快速排序
  10.         //快速排序：
  11.         //1. 找一个基准点
  12.         //2. 建立两个数组，分别存储左边和右边的数
  13.         //3. 利用递归进行下次比较
  15.         function quickSort(arr){
  16.             if(arr.length <= 1){
  17.                 return arr;
  18.             }
  20.             var num = Math.floor(arr.length / 2);
  21.             var numValue = arr.splice(num, 1);
  22.             var left = [];
  23.             var right = [];
  25.             for(var i=0; i<arr.length; i++){
  26.                 if(arr[i] < numValue){
  27.                     left.push(arr[i]);
  28.                 } else {
  29.                     right.push(arr[i]);
  30.                 }
  31.             }
  33.             return quickSort(left).concat([numValue], quickSort(right));
  34.         }
  36.         alert(quickSort([12, 5, 37, 6, 22, 40]));
  37.     </script>
  38. </head>
  39. <body>
  40. </body>
  41. </html>

枚举算法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>枚举算法</title>
  6.     <style>
  7.         div {width: 300px; position: relative;}
  8.         div span {margin: 10px;}
  9.     </style>
  10.     <script>
  11.         //枚举算法：用for来从众多的候选答案中，通过if找出正确的解
  13.         window.onload = function(){
  15.             var aP = document.getElementsByTagName('p');
  16.             var aSpan1 = aP[0].getElementsByTagName('span');
  17.             var aSpan2 = aP[1].getElementsByTagName('span');
  18.             var aSpan3 = aP[2].getElementsByTagName('span');
  19.             var oInput = document.getElementById('input1');
  21.             oInput.onclick = function(){
  22.                 solvePuzzle();
  23.             }
  25.             function solvePuzzle(){
  26.                 for(var i=1; i<=9; i++){
  27.                     for(var j=0; j<=9; j++){
  28.                         for(var k=0; k<=9; k++){
  29.                             for(var m=0; m<=9; m++){
  30.                                 for(var n=0; n<=9; n++){
  32.                                     var a = 10000*i + 1000*j + 100*k + 10*m +n;
  33.                                     var b = i;
  34.                                     var c = n*111111;
  36.                                     if(a*b == c){
  37.                                         aSpan1[0].innerHTML = i;
  38.                                         aSpan1[1].innerHTML = j;
  39.                                         aSpan1[2].innerHTML = k;
  40.                                         aSpan1[3].innerHTML = m;
  41.                                         aSpan1[4].innerHTML = n;
  43.                                         aSpan2[0].innerHTML = i;
  45.                                         for(var x=0; x<aSpan3.length; x++){
  46.                                             aSpan3[x].innerHTML = n;
  47.                                         }
  48.                                     }
  50.                                 }
  51.                             }
  52.                         }
  53.                     }
  54.                 }
  55.             }   
  56.         }
  57.     </script>
  58. </head>
  59. <body>
  60.     <div>
  61.         <p style="margin-left: 35px;"><span>枚</span><span>举</span><span>算</span><span>法</span><span>题</span></p>
  62.         <p>*  <span style="position: absolute; top: 30px; left: 180px;">枚</span></p>
  63.         <hr>
  64.         <p><span>题</span><span>题</span><span>题</span><span>题</span><span>题</span><span>题</span></p>
  65.     </div>
  66.     <input type="button" value="求解" id="input1">
  67. </body>
  68. </html>

枚举法用到页面中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>枚举算法</title>
  6.     <style>
  7.         div {width: 300px; position: relative;}
  8.         div span {margin: 10px;}
  9.     </style>
  10.     <script>
  11.         window.onload = function(){
  13.             var aA = document.getElementsByTagName('a');
  14.             var oUl = document.getElementById('ul1');
  15.             var aLi = oUl.getElementsByTagName('li');
  17.             for(var i=0; i<aA.length; i++){
  18.                 aA[i].onclick = function(){
  19.                     if (mj(this.innerHTML)){
  20.                         var oLi = document.createElement('li');
  21.                         oLi.innerHTML = this.innerHTML;
  22.                         if(!aLi[0]){
  23.                             oUl.appendChild(oLi);
  24.                         } else {
  25.                             oUl.insertBefore(oLi, aLi[0]);
  26.                         }
  27.                     } else {
  28.                         mj2(this.innerHTML);
  29.                     }
  30.                 }
  31.             }
  33.             function mj(text){
  34.                 var result = true;
  35.                 for(var i=0; i<aLi.length; i++){
  36.                     if(aLi[i].innerHTML == text){
  37.                         result = false;
  38.                     }
  39.                 }
  40.                 return result;
  41.             }
  43.             function mj2(text){
  44.                 for(var i=0; i<aLi.length; i++){
  45.                     if(aLi[i].innerHTML == text){
  46.                         oUl.insertBefore(aLi[i], aLi[0]);
  47.                     }
  48.                 }
  49.             }
  51.         }
  52.     </script>
  53. </head>
  54. <body>
  55.     <a href="javascript:;">北京</a>
  56.     <a href="javascript:;">上海</a>
  57.     <a href="javascript:;">深圳</a>
  58.     <a href="javascript:;">广州</a>
  59.     <a href="javascript:;">天津</a>
  60.     <a href="javascript:;">重庆</a>
  61.     <a href="javascript:;">杭州</a>
  62.     <ul id="ul1"></ul>
  63. </body>
  64. </html>

函数声明与函数表达式

函数声明与函数表达式的形式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>函数声明与函数表达式</title>
  6.     <script>
  7.         //函数声明：function 函数名(){}
  8.         //函数表达式：function 函数名（可写可不写）(){} : 命名函数表达式 匿名函数表达式
  10.         // function aaa(){} : 函数声明
  11.         // var a = function aaa(){} : 命名函数表达式
  12.         // var a = function(){} : 匿名函数表达式
  14.         // (function aaa(){}) : 表达式 函数放到括号里
  15.         // ~function aaa(){} : 表达式 函数前面加了运算符
  16.         // -function aaa(){} : 表达式 函数前面加了运算符
  17.         // +function aaa(){} : 表达式 函数前面加了运算符 
  18.         // !function aaa(){} : 表达式 函数前面加了运算符
  19.     </script>
  20. </head>
  21. <body>
  23. </body>
  24. </html>

函数声明与函数表达式的区别

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>函数声明与函数表达式</title>
  6.     <script>
  7.         //函数声明与函数表达式之间的区别
  8.         //1. 函数表达式可以直接后面加括号执行，而函数声明是不可以的
  9.         //2. 函数声明可以被提前解析出来的。函数声明有预解析
  11.         // function aaa(){alert(1);}(); //报错
  12.         //var a = function aaa(){alert(1);}(); //弹出1
  13.         //~function aaa(){alert(1);}(); //弹出1
  15.         /*if(true){
  16.             function aaa(){
  17.                 alert(1);
  18.             }
  19.         } else {
  20.             function aaa(){
  21.                 alert(2);
  22.             }
  23.         }
  24.         aaa(); //chrome下弹出2，因为函数声明预解析，后面的函数声明覆盖了前面的函数声明，等到if执行的时候，函数aaa里面已经变成alert(2)了*/
  26.         /*//用函数表达式就不会出现上述问题
  27.         if(true){
  28.             var a = function aaa(){
  29.                 alert(1);
  30.             }
  31.         } else {
  32.             var a = function aaa(){
  33.                 alert(2);
  34.             }
  35.         }
  36.         a();*/
  38.         /*//命名函数表达式VS匿名函数表达式
  39.         if(true){
  40.             var a = function aaa(){
  41.                 alert(1);
  42.             }
  43.         } else {
  44.             var a = function aaa(){
  45.                 alert(2);
  46.             }
  47.         }
  48.         aaa(); //在ie下可以，在chrome下报错，说aaa是undefined*/
  50.     </script>
  51. </head>
  52. <body>
  54. </body>
  55. </html>

命名函数表达式的问题

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>函数声明与函数表达式2</title>
  6.     <script>
  7.         //不推荐使用命名的函数表达式，只有在debug的时候可以考虑使用，否则容易出现问题：
  9.         /*var a = function aaa(){
  10.             alert();
  11.             alert(typeof aaa); //这个aaa在函数内部是可以找到的
  12.         }
  14.         // a(); //所有浏览器都支持
  15.         // aaa(); //chrome和firefox报错；ie下可以。在外面，标准浏览器是找不到的*/
  17.         (function aaa(){alert(1)}) //有名字的函数表达式
  18.         aaa(); //在外面在chrome和火狐下是找不到的
  19.     </script>
  20. </head>
  21. <body>
  23. </body>
  24. </html>

只有在debugger时使用命名函数表达式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>函数声明与函数表达式3</title>
  6.     <script>
  7.         function aaa(){
  8.             return bbb();
  9.         }
  11.         /*function bbb(){
  12.             debugger;
  13.         }*/
  15.         var bbb = (function bbb(){
  16.             return function(){
  17.                 debugger;
  18.             }
  19.         })();
  21.         aaa();
  22.     </script>
  23. </head>
  24. <body>
  26. </body>
  27. </html>

事件委托（事件代理）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>事件委托</title>
  6.     <script>
  8.         //事件委托：利用冒泡的原理，把事件加到父级上，触发执行效果
  9.         //好处：
  10.         //1. 提高性能
  11.         //2. 新添加的元素还有之前的事件
  13.         window.onload = function(){
  14.             var oUl = document.getElementById('ul1');
  15.             var aLi = oUl.getElementsByTagName('li');
  17.             /*for(var i=0; i<aLi.legnth; i++){
  18.                 aLi[i].onclick = function(){
  19.                     alert(123);
  20.                 }
  21.             }*/
  23.             oUl.onclick = function(){
  24.                 alert(123);
  25.             }
  26.         }
  27.     </script>
  28. </head>
  29. <body>
  30.     <ul id="ul1">
  31.         <li>001</li>
  32.         <li>002</li>
  33.         <li>003</li>
  34.         <li>004</li>
  35.     </ul>
  36. </body>
  37. </html>

提高性能

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>事件委托2</title>
  6.     <script>
  7.         //event对象：事件源：不管在哪个事件中，只要你操作的那个元素就是事件源
  8.         //ie: window.event.srcElement
  9.         //标准下: event.target
  10.         //nodeName : 找到元素的标签名
  12.         window.onload = function(){
  13.             var oUl = document.getElementById('ul1');
  14.             var aLi = oUl.getElementsByTagName('li');
  16.             /*for(var i=0; i<aLi.length; i++){
  17.                 aLi[i].onmouseover = function(){
  18.                     this.style.background = 'red';
  19.                 }
  20.                 aLi[i].onmouseout = function(){
  21.                     this.style.background = '';
  22.                 }
  23.             }*/
  25.             oUl.onmouseover = function(ev){
  26.                 var ev = ev || window.event;
  27.                 var target = ev.target || ev.srcElement;
  29.                 //alert(target.innerHTML);
  30.                 //alert(target.nodeName);
  32.                 if(target.nodeName.toLowerCase() == 'li'){
  33.                     target.style.background = 'red';
  34.                 }
  36.             }
  37.             oUl.onmouseout = function(ev){
  38.                 var ev = ev || window.event;
  39.                 var target = ev.target || ev.srcElement;
  41.                 if(target.nodeName.toLowerCase() == 'li'){
  42.                     target.style.background = '';
  43.                 }
  44.             }
  45.         }
  46.     </script>
  47. </head>
  48. <body>
  49.     <ul id="ul1">
  50.         <li>001</li>
  51.         <li>002</li>
  52.         <li>003</li>
  53.         <li>004</li>
  54.     </ul>
  55. </body>
  56. </html>

新添加的元素还有原来的事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>事件委托2</title>
  6.     <script>
  7.         window.onload = function(){
  8.             var oUl = document.getElementById('ul1');
  9.             var aLi = oUl.getElementsByTagName('li');
  10.             var oInput = document.getElementById('input1');
  11.             var iNow = 4;
  13.             oInput.onclick = function(){
  14.                 iNow++;
  15.                 var oLi = document.createElement('li');
  16.                 oLi.innerHTML = iNow * 111;
  17.                 oUl.appendChild(oLi);
  18.             }
  20.             /*for(var i=0; i<aLi.length; i++){
  21.                 aLi[i].onmouseover = function(){
  22.                     this.style.background = 'red';
  23.                 }
  24.                 aLi[i].onmouseout = function(){
  25.                     this.style.background = '';
  26.                 }
  27.             }*/
  29.             oUl.onmouseover = function(ev){
  30.                 var ev = ev || window.event;
  31.                 var target = ev.target || ev.srcElement;
  32.                 if(target.nodeName.toLowerCase() == 'li'){
  33.                     target.style.background = 'red';
  34.                 }
  36.             }
  37.             oUl.onmouseout = function(ev){
  38.                 var ev = ev || window.event;
  39.                 var target = ev.target || ev.srcElement;
  41.                 if(target.nodeName.toLowerCase() == 'li'){
  42.                     target.style.background = '';
  43.                 }
  44.             }
  45.         }
  46.     </script>
  47. </head>
  48. <body>
  49.     <input type="button" value="添加" id="input1">
  50.     <ul id="ul1">
  51.         <li>001</li>
  52.         <li>002</li>
  53.         <li>003</li>
  54.         <li>004</li>
  55.     </ul>
  56. </body>
  57. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注