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

妙味课堂-问题解答视频

学习笔记 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');
  10. oInput.onclick = function(){
  11. var number = randomNum(35, 7);
  12. oDiv.innerHTML = number;
  13. }
  14. function randomNum(all, now){
  15. var arr = [];
  16. var newArr = [];
  17. for(var i=1; i<=all; i++){
  18. arr.push(i);
  19. }
  20. for(var i=0; i<now; i++){
  21. newArr.push(arr.splice(Math.floor(Math.random()*arr.length), 1));
  22. }
  23. return newArr;
  24. }
  25. }
  26. </script>
  27. </head>
  28. <body>
  29. <input type="button" value="35选7" id="input1">
  30. <div id="div1"></div>
  31. </body>
  32. </html>

采用onhashchange的方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>彩票</title>
  6. <script>
  7. //onhashchange : 事件 当hash值有变化的时候,就会触发
  8. window.onload = function(){
  9. var oInput = document.getElementById('input1');
  10. var oDiv = document.getElementById('div1');
  11. var obj = {};
  12. oInput.onclick = function(){
  13. var number = randomNum(35, 7);
  14. oDiv.innerHTML = number;
  15. var oRD = Math.random();
  16. obj[oRD] = number;
  17. window.location.hash = oRD;
  18. }
  19. window.onhashchange = function(){
  20. var number = obj[window.location.hash.substring(1)] || '';
  21. oDiv.innerHTML = number;
  22. }
  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>

用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;
  11. oInput.onclick = function(){
  12. var number = randomNum(35, 7);
  13. oDiv.innerHTML = number;
  14. history.pushState(number, '', iNow++);
  15. }
  16. window.onpopstate = function(ev){
  17. var number = ev.state || '';
  18. oDiv.innerHTML = number;
  19. }
  20. function randomNum(all, now){
  21. var arr = [];
  22. var newArr = [];
  23. for(var i=1; i<=all; i++){
  24. arr.push(i);
  25. }
  26. for(var i=0; i<now; i++){
  27. newArr.push(arr.splice(Math.floor(Math.random()*arr.length), 1));
  28. }
  29. return newArr;
  30. }
  31. }
  32. </script>
  33. </head>
  34. <body>
  35. <input type="button" value="35选7" id="input1">
  36. <div id="div1"></div>
  37. </body>
  38. </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 = '';
  10. /* 这个在控制台打印出来的时间大约是240多毫秒
  11. console.time('hello');
  12. for(var i=0; i<5000; i++){
  13. oDiv.innerHTML += 'a';
  14. }
  15. console.timeEnd('hello');
  16. */
  17. console.time('hello'); //这样执行,大约用0.2毫秒
  18. for(var i=0; i<5000; i++){
  19. str += 'a';
  20. }
  21. oDiv.innerHTML = str;
  22. console.timeEnd('hello');
  23. }
  24. </script>
  25. </head>
  26. <body>
  27. <div id="div1"></div>
  28. </body>
  29. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Javascript性能-DOM优化</title>
  6. <script>
  7. // chrome、safari类型的webkit的浏览器:dom方法要不innerHTML要好
  8. // IE、火狐中:innerHTML比dom方法要好
  9. window.onload = function(){
  10. var oUl = document.getElementById('ul1');
  11. var str = '';
  12. /*console.time('hello');
  13. for(var i=0; i<5000; i++){
  14. var oLi = document.createElement('li');
  15. oUl.appendChild(oLi);
  16. }
  17. console.timeEnd('hello');*/
  18. console.time('hello');
  19. for(var i=0; i<5000; i++){
  20. str += '<li></li>';
  21. }
  22. oUl.innerHTML = str;
  23. console.timeEnd('hello');
  24. }
  25. </script>
  26. </head>
  27. <body>
  28. <ul id="ul1"></ul>
  29. </body>
  30. </html>

DOM优化

cloneNode

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

尽量使用局部变量

  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 oUl = document.getElementById('ul1');
  9. var aLi = oUl.getElementsByTagName('li');
  10. for(var i=0; i<5000; i++){
  11. var oLi = document.createElement('li');
  12. oUl.appendChild(oLi);
  13. }
  14. /*console.time('hello');
  15. for(var i=0; i<aLi.length; i++){
  16. aLi[i].innerHTML = 'li';
  17. }
  18. console.timeEnd('hello');*/
  19. console.time('hello');
  20. var len = aLi.length;
  21. for(var i=0; i<len; i++){
  22. aLi[i].innerHTML = 'li';
  23. }
  24. console.timeEnd('hello');
  25. //下面这种方法比上面注释起来的那种好。因为在aLi.length那里,不需要重复去获取元素计算长度
  26. }
  27. </script>
  28. </head>
  29. <body>
  30. <ul id="ul1"></ul>
  31. </body>
  32. </html>

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

例如:

选择器API

  1. //var oUl = document.getElementById('ul1');
  2. //var aLi = oUl.getElementsByTagName('li');
  3. //用querySelectorAll这个方法,获取aLi,下面一句话就够了
  4. 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>
  7. window.onload = function(){
  8. var oUl = document.getElementById('ul1');
  9. /*console.time('hello');
  10. for(var i=0; i<5000; i++){
  11. var oLi = document.createElement('li');
  12. oUl.appendChild(oLi);
  13. oLi.innerHTML = 'li';
  14. }
  15. console.timeEnd('hello');*/
  16. console.time('hello'); //下面这种写法,性能上要优于上面的写法
  17. for(var i=0; i<5000; i++){
  18. var oLi = document.createElement('li');
  19. oLi.innerHTML = 'li';
  20. oUl.appendChild(oLi);
  21. }
  22. console.timeEnd('hello');
  23. }
  24. </script>
  25. </head>
  26. <body>
  27. <ul id="ul1"></ul>
  28. </body>
  29. </html>

用cssText

  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 oUl = document.getElementById('ul1');
  9. /*console.time('hello');
  10. for(var i=0; i<5000; i++){
  11. var oLi = document.createElement('li');
  12. oLi.style.width = '100px';
  13. oLi.style.height = '100px';
  14. oLi.style.background = 'red';
  15. oUl.appendChild(oLi);
  16. }
  17. console.timeEnd('hello');*/
  18. console.time('hello');
  19. for(var i=0; i<5000; i++){
  20. var oLi = document.createElement('li');
  21. oLi.style.cssText = 'width: 100px; height: 100px; background: red';
  22. oUl.appendChild(oLi);
  23. }
  24. console.timeEnd('hello');
  25. }
  26. </script>
  27. </head>
  28. <body>
  29. <ul id="ul1"></ul>
  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 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)*/
  18. setInterval(function(){
  19. L++;
  20. T++;
  21. oDiv.style.left = L + 'px';
  22. oDiv.style.top = T + 'px';
  23. }, 30)
  24. }
  25. </script>
  26. </head>
  27. <body>
  28. <div id="div1"></div>
  29. </body>
  30. </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();
  13. /*console.time('hello');
  14. for(var i=0; i<5000; i++){
  15. var oLi = document.createElement('li');
  16. oUl.appendChild(oLi);
  17. }
  18. console.timeEnd('hello');*/
  19. console.time('hello');
  20. for(var i=0; i<5000; i++){
  21. var oLi = document.createElement('li');
  22. oFrag.appendChild(oLi);
  23. }
  24. oUl.appendChild(oFrag);
  25. console.timeEnd('hello');
  26. }
  27. </script>
  28. </head>
  29. <body>
  30. <ul id="ul1"></ul>
  31. </body>
  32. </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(内填充)
  9. function box(json){
  10. alert(json.name); //miaov
  11. }
  12. </script>
  13. <script type="text/javascript" src="jsonp.js"></script>
  14. </head>
  15. <body>
  16. </body>
  17. </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. //函数嵌套函数,内部函数可以应用外部函数的参数和变量,参数和变量不会被垃圾回收机制所收回。
  8. /*function aaa(a){
  9. var b = 5;
  10. function bbb(){
  11. alert(a);
  12. alert(b);
  13. }
  14. }
  15. aaa(); //aaa执行后,变量a、b并没有被垃圾回收机制收回。因为里面的函数bbb还在应用着。
  16. //JS中的垃圾回收机制
  17. function aaa(){
  18. var a = 1;
  19. }
  20. aaa(); //函数一致性,变量a就会被垃圾回收机制收回*/
  21. function aaa(){
  22. var a = 5;
  23. function bbb(){
  24. alert(a);
  25. }
  26. return bbb;
  27. }
  28. var c = aaa(); //aaa这里已经执行了,返回的bbb函数给了c
  29. c(); //c执行就相当于函数bbb执行了,这时候还是能够找到变量a,因此可以弹出5。这说明变量a并没有被垃圾回收机制收回。这就是一个典型的闭包。
  30. </script>
  31. </head>
  32. <body>
  33. </body>
  34. </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;
  9. function aaa(){
  10. a++;
  11. alert(a);
  12. }
  13. aaa(); //2
  14. aaa(); //3
  15. alert(a);
  16. */
  17. /* 垃圾回收机制起作用,虽然全局变量没被污染,但是a却不能累加了
  18. function aaa(){
  19. var a = 1;
  20. a++;
  21. alert(a);
  22. }
  23. aaa(); //2
  24. aaa(); //2
  25. */
  26. // 通过闭包实现在不污染全局变量的情况下,a还能够累加
  27. function aaa(){
  28. var a = 1;
  29. return function(){
  30. a++;
  31. alert(a);
  32. }
  33. }
  34. var b = aaa();
  35. b(); //2
  36. b(); //3
  37. alert(a); //报错,因为这个a是局部的,不是全局的了
  38. </script>
  39. </head>
  40. <body>
  41. </body>
  42. </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. }
  10. aaa();*/
  11. /*(function(){
  12. alert(1);
  13. })();*/
  14. //下面这一段就是模块化代码
  15. var aaa = (function(){
  16. var a = 1;
  17. return function(){
  18. a++;
  19. alert(a);
  20. }
  21. })();
  22. aaa(); //2
  23. aaa(); //3
  24. </script>
  25. </head>
  26. <body>
  27. </body>
  28. </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. })();
  22. aaa.b(); //2
  23. aaa.c(); //3
  24. alert(a); //报错
  25. alert(bbb); //报错
  26. alert(ccc); //报错 因为a、bbb和ccc都是私有的,在aaa外面调用不到
  27. </script>
  28. </head>
  29. <body>
  30. </body>
  31. </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');
  9. /*for(var i=0; i<aLi.length; i++){
  10. aLi[i].onclick = function(){
  11. alert(i); //不论点击哪个li,都弹出3。当点击的时候,循环已经结束了,循环结束i就是3
  12. }
  13. }*/
  14. /* 写法一
  15. for(var i=0; i<aLi.length; i++){
  16. (function(i){
  17. aLi[i].onclick = function(){
  18. alert(i); //这时候依次点击li,分别弹出0、1、2
  19. }
  20. })(i);
  21. }
  22. */
  23. //写法二
  24. for(var i=0; i<aLi.length; i++){
  25. aLi[i].onclick = (function(i){
  26. return function(){
  27. alert(i); //这时候依次点击li,分别弹出0、1、2
  28. }
  29. })(i);
  30. }
  31. }
  32. </script>
  33. </head>
  34. <body>
  35. <ul>
  36. <li>111111111</li>
  37. <li>111111111</li>
  38. <li>111111111</li>
  39. </ul>
  40. </body>
  41. </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');
  11. oDiv.onclick = function(){
  12. alert(oDiv.id);
  13. }
  14. //以下是解决办法
  15. window.onunload = function(){
  16. oDiv.onclick = null;
  17. }
  18. }
  19. */
  20. //第二种解决方法
  21. window.onload = function(){
  22. var oDiv = document.getElementById('div1');
  23. var id = oDiv.id;
  24. oDiv.onclick = function(){
  25. alert(id);
  26. }
  27. oDiv = null;
  28. }
  29. </script>
  30. </head>
  31. <body>
  32. <div id="div1">aaaaaa</div>
  33. </body>
  34. </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');
  10. oInput.onclick = function(){
  11. //alert(oIframe.contentWindow); //contentWindow就是iframe的window对象 所有浏览器都支持
  12. oIframe.contentWindow.document.getElementById('div1').style.color = 'red';
  13. //contentDocument直接获取到iframe的document对象 IE6、7不支持
  14. //oIframe.contentDocument.getElementById('div1').style.background = 'red';
  15. }
  16. }
  17. </script>
  18. </head>
  19. <body>
  20. <input type="button" value="改变" id="input1">
  21. <iframe src="iframe1.html" id="iframe1"></iframe>
  22. </body>
  23. </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');
  9. oInput.onclick = function(){
  10. window.parent.document.getElementById('div1').style.color = 'red'; //window.parent指的就是它的父层 只隔一层
  11. //window.top找的是最顶层,当iframe出现多层嵌套的时候,可以用window.top找到最顶层
  12. }
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. <input type="button" value="改变" id="input1">
  18. </body>
  19. </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);
  11. /*oIframe.onload = function(){
  12. alert(123);
  13. }*/
  14. //IE下的iframe的onload事件只能用绑定的形式
  15. oIframe.attachEvent('onload', function(){
  16. alert(123);
  17. })
  18. }
  19. </script>
  20. </head>
  21. <body>
  22. </body>
  23. </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');
  10. function changeHeight(){
  11. setTimeout(function(){
  12. oIframe.height = oIframe.contentWindow.document.body.offsetHeight;
  13. }, 100);
  14. }
  15. changeHeight();
  16. aInput[0].onclick = function(){
  17. oIframe.src = 'iframe3.html';
  18. changeHeight();
  19. }
  20. aInput[1].onclick = function(){
  21. oIframe.src = 'iframe4.html';
  22. changeHeight();
  23. }
  24. }
  25. </script>
  26. </head>
  27. <body>
  28. <input type="button" value="切换1">
  29. <input type="button" value="切换2">
  30. <iframe src="iframe3.html" id="iframe4" scrolling="no"></iframe>
  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 a = 5;
  8. var b = a;
  9. b += 3;
  10. alert(b); //8
  11. alert(a); //5
  12. //以上这种赋值的关系,a/b之间不互相影响,这存在于基本类型中(字符串、数字、布尔、空对象和undefined)*/
  13. /*var a = [1, 2, 3];
  14. var b = a;
  15. b.push(4);
  16. alert(b); //[1, 2, 3, 4];
  17. alert(a); //[1, 2, 3, 4]
  18. //以上不是赋值关系,而是引用关系,因此a、b互相影响*/
  19. //对象和函数都是引用的关系
  20. var a = [1, 2, 3];
  21. var b = a;
  22. var b = [1, 2, 3, 4]; //这里b是重新赋值了,与a之间的引用关系就断开了
  23. alert(b); //[1, 2, 3, 4]
  24. alert(a); //[1, 2, 3]
  25. </script>
  26. </head>
  27. <body>
  28. </body>
  29. </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;
  11. obj2.a = 20;
  12. alert(obj.a); //20*/
  13. var obj = {
  14. a : 10
  15. }
  16. function copy(obj){ //浅拷贝 浅克隆
  17. var newObj = {};
  18. for(var attr in obj){
  19. newObj[attr] = obj[attr];
  20. }
  21. return newObj;
  22. }
  23. var obj2 = copy(obj);
  24. obj2.a = 20;
  25. alert(obj.a); //10
  26. </script>
  27. </head>
  28. <body>
  29. </body>
  30. </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. }
  11. function copy(obj){
  12. var newObj = {};
  13. for(var attr in obj){
  14. newObj[attr] = obj[attr];
  15. }
  16. return newObj;
  17. }
  18. var obj2 = copy(obj);
  19. obj2.a.b = 20;
  20. alert(obj.a.b); //20*/
  21. /*//递归的写法:用递归求阶乘
  22. //1. 函数调用函数自身,执行递的动作
  23. //2. 最后一次判断一个终止条件,可以执行归的动作
  24. function test(n){
  25. if(n == 1){
  26. return 1;
  27. }
  28. return n*test(n-1);
  29. }
  30. alert(test(4)); //1*2*3*4=24*/
  31. //深拷贝
  32. var obj = {
  33. a : { b : 10 }
  34. }
  35. function deepCopy(obj){ //深拷贝
  36. if(typeof obj != 'object'){
  37. //console.trace();
  38. return obj;
  39. }
  40. var newObj = {};
  41. for(var attr in obj){
  42. newObj[attr] = deepCopy(obj[attr]);
  43. }
  44. return newObj;
  45. }
  46. var obj2 = deepCopy(obj);
  47. obj2.a.b = 20;
  48. alert(obj.a.b); //10
  49. </script>
  50. </head>
  51. <body>
  52. </body>
  53. </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. //比较流行的排序算法:快速排序
  9. //快速排序:
  10. //1. 找一个基准点
  11. //2. 建立两个数组,分别存储左边和右边的数
  12. //3. 利用递归进行下次比较
  13. function quickSort(arr){
  14. if(arr.length <= 1){
  15. return arr;
  16. }
  17. var num = Math.floor(arr.length / 2);
  18. var numValue = arr.splice(num, 1);
  19. var left = [];
  20. var right = [];
  21. for(var i=0; i<arr.length; i++){
  22. if(arr[i] < numValue){
  23. left.push(arr[i]);
  24. } else {
  25. right.push(arr[i]);
  26. }
  27. }
  28. return quickSort(left).concat([numValue], quickSort(right));
  29. }
  30. alert(quickSort([12, 5, 37, 6, 22, 40]));
  31. </script>
  32. </head>
  33. <body>
  34. </body>
  35. </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找出正确的解
  12. window.onload = function(){
  13. var aP = document.getElementsByTagName('p');
  14. var aSpan1 = aP[0].getElementsByTagName('span');
  15. var aSpan2 = aP[1].getElementsByTagName('span');
  16. var aSpan3 = aP[2].getElementsByTagName('span');
  17. var oInput = document.getElementById('input1');
  18. oInput.onclick = function(){
  19. solvePuzzle();
  20. }
  21. function solvePuzzle(){
  22. for(var i=1; i<=9; i++){
  23. for(var j=0; j<=9; j++){
  24. for(var k=0; k<=9; k++){
  25. for(var m=0; m<=9; m++){
  26. for(var n=0; n<=9; n++){
  27. var a = 10000*i + 1000*j + 100*k + 10*m +n;
  28. var b = i;
  29. var c = n*111111;
  30. if(a*b == c){
  31. aSpan1[0].innerHTML = i;
  32. aSpan1[1].innerHTML = j;
  33. aSpan1[2].innerHTML = k;
  34. aSpan1[3].innerHTML = m;
  35. aSpan1[4].innerHTML = n;
  36. aSpan2[0].innerHTML = i;
  37. for(var x=0; x<aSpan3.length; x++){
  38. aSpan3[x].innerHTML = n;
  39. }
  40. }
  41. }
  42. }
  43. }
  44. }
  45. }
  46. }
  47. }
  48. </script>
  49. </head>
  50. <body>
  51. <div>
  52. <p style="margin-left: 35px;"><span></span><span></span><span></span><span></span><span></span></p>
  53. <p>* <span style="position: absolute; top: 30px; left: 180px;"></span></p>
  54. <hr>
  55. <p><span></span><span></span><span></span><span></span><span></span><span></span></p>
  56. </div>
  57. <input type="button" value="求解" id="input1">
  58. </body>
  59. </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(){
  12. var aA = document.getElementsByTagName('a');
  13. var oUl = document.getElementById('ul1');
  14. var aLi = oUl.getElementsByTagName('li');
  15. for(var i=0; i<aA.length; i++){
  16. aA[i].onclick = function(){
  17. if (mj(this.innerHTML)){
  18. var oLi = document.createElement('li');
  19. oLi.innerHTML = this.innerHTML;
  20. if(!aLi[0]){
  21. oUl.appendChild(oLi);
  22. } else {
  23. oUl.insertBefore(oLi, aLi[0]);
  24. }
  25. } else {
  26. mj2(this.innerHTML);
  27. }
  28. }
  29. }
  30. function mj(text){
  31. var result = true;
  32. for(var i=0; i<aLi.length; i++){
  33. if(aLi[i].innerHTML == text){
  34. result = false;
  35. }
  36. }
  37. return result;
  38. }
  39. function mj2(text){
  40. for(var i=0; i<aLi.length; i++){
  41. if(aLi[i].innerHTML == text){
  42. oUl.insertBefore(aLi[i], aLi[0]);
  43. }
  44. }
  45. }
  46. }
  47. </script>
  48. </head>
  49. <body>
  50. <a href="javascript:;">北京</a>
  51. <a href="javascript:;">上海</a>
  52. <a href="javascript:;">深圳</a>
  53. <a href="javascript:;">广州</a>
  54. <a href="javascript:;">天津</a>
  55. <a href="javascript:;">重庆</a>
  56. <a href="javascript:;">杭州</a>
  57. <ul id="ul1"></ul>
  58. </body>
  59. </html>

函数声明与函数表达式

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

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

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

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

命名函数表达式的问题

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

事件委托(事件代理)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>事件委托</title>
  6. <script>
  7. //事件委托:利用冒泡的原理,把事件加到父级上,触发执行效果
  8. //好处:
  9. //1. 提高性能
  10. //2. 新添加的元素还有之前的事件
  11. window.onload = function(){
  12. var oUl = document.getElementById('ul1');
  13. var aLi = oUl.getElementsByTagName('li');
  14. /*for(var i=0; i<aLi.legnth; i++){
  15. aLi[i].onclick = function(){
  16. alert(123);
  17. }
  18. }*/
  19. oUl.onclick = function(){
  20. alert(123);
  21. }
  22. }
  23. </script>
  24. </head>
  25. <body>
  26. <ul id="ul1">
  27. <li>001</li>
  28. <li>002</li>
  29. <li>003</li>
  30. <li>004</li>
  31. </ul>
  32. </body>
  33. </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 : 找到元素的标签名
  11. window.onload = function(){
  12. var oUl = document.getElementById('ul1');
  13. var aLi = oUl.getElementsByTagName('li');
  14. /*for(var i=0; i<aLi.length; i++){
  15. aLi[i].onmouseover = function(){
  16. this.style.background = 'red';
  17. }
  18. aLi[i].onmouseout = function(){
  19. this.style.background = '';
  20. }
  21. }*/
  22. oUl.onmouseover = function(ev){
  23. var ev = ev || window.event;
  24. var target = ev.target || ev.srcElement;
  25. //alert(target.innerHTML);
  26. //alert(target.nodeName);
  27. if(target.nodeName.toLowerCase() == 'li'){
  28. target.style.background = 'red';
  29. }
  30. }
  31. oUl.onmouseout = function(ev){
  32. var ev = ev || window.event;
  33. var target = ev.target || ev.srcElement;
  34. if(target.nodeName.toLowerCase() == 'li'){
  35. target.style.background = '';
  36. }
  37. }
  38. }
  39. </script>
  40. </head>
  41. <body>
  42. <ul id="ul1">
  43. <li>001</li>
  44. <li>002</li>
  45. <li>003</li>
  46. <li>004</li>
  47. </ul>
  48. </body>
  49. </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;
  12. oInput.onclick = function(){
  13. iNow++;
  14. var oLi = document.createElement('li');
  15. oLi.innerHTML = iNow * 111;
  16. oUl.appendChild(oLi);
  17. }
  18. /*for(var i=0; i<aLi.length; i++){
  19. aLi[i].onmouseover = function(){
  20. this.style.background = 'red';
  21. }
  22. aLi[i].onmouseout = function(){
  23. this.style.background = '';
  24. }
  25. }*/
  26. oUl.onmouseover = function(ev){
  27. var ev = ev || window.event;
  28. var target = ev.target || ev.srcElement;
  29. if(target.nodeName.toLowerCase() == 'li'){
  30. target.style.background = 'red';
  31. }
  32. }
  33. oUl.onmouseout = function(ev){
  34. var ev = ev || window.event;
  35. var target = ev.target || ev.srcElement;
  36. if(target.nodeName.toLowerCase() == 'li'){
  37. target.style.background = '';
  38. }
  39. }
  40. }
  41. </script>
  42. </head>
  43. <body>
  44. <input type="button" value="添加" id="input1">
  45. <ul id="ul1">
  46. <li>001</li>
  47. <li>002</li>
  48. <li>003</li>
  49. <li>004</li>
  50. </ul>
  51. </body>
  52. </html>
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注