JS学习随手笔记
- ===================字符串=====================
- 字符串中间的空格也是要算长度的。
- 每一个字符都可以返回对应的Unicode 编码
- 文字的简单加密都是通过charCodeAt()方法得到 Unicode 编码（一个数字）， 再减掉一定的值，最后用fromCharCode()方法将前者转为字符，就完成了加密。
- 字符串之间比较大小，先比较第一位的 Unicode 编码 大小！
- split()切割字符串会把他们放进一个数组。
- 用字符串的方法可以完成一个查找并替换文本的功能。
- 字符串的长度 不能设置！！ 只能读取！
- 颠倒字符串 先将字符串 切割成数组，用数组的颠倒方法 ，最后将 数组 转换成字符串就好。
- ===================JSON和数组=====================
- json的格式 var json = {'name':'leoo','age':29};
- 读取： json .name json['name']
- 设置： json .name = '李旺' json['name'] = '李旺'
- json 中可以包数组 var json = {'name':[1,2,3,5]};
- 数组中包json var arr= [ {'name':[1,2,3,5]}, {'name':[1,2,3,5]}];
- 用下标可以很方便的读取 设置值。。。
- 遍历json 使用 for( var attr in json){ alert(attr); //得到的是所有的json 的 键
- alert(json[attr]); //得到所有的json的每一个键的值。 }
- json 没有长度属性
- 数组 和 对象 也可以用 for in 来遍历
- 快速清空一个数组的内容可以用 arr.leng = 0
- push() 和 unshift()方法返回一个数组新的长度值, unshift()返回值IE6\7不支持。
- pop() 和 shift() 方法分别删除数组最后一个 和 第一个 值， 并返回删除的值。
- splice()方法可以删除 替换 增加 数组值操作， 返回值是被删除的值， 如果没有删除，返回值就是空！
- sort()方法默认是将数组的每一个值变成字符串后进行比较。 如果要进行数组 的数字比较，可以在sort()中传递一个函数，列如：
1 var arr2 =[4,3,8,78,92,5]; 2 arr2.sort(function(a , b){ 3 return a-b; // a - b 如果大于 是正数 ，a 和 b调换位置，负数 和 0，则/ //不动 =》 从小到大的排序 b - a 则是从大到小排序。 4 })
//还有很多其他的 排序方法 ： 希尔 、 快速 等等。。。
随机排序， 使用 return Math.random()-0.5; 原理是一会 交换位置， 一会不交换位置，实现随机排序。 - 随机数0-1 Math.round(Math.random())
- 随机数0-10 Math.round(Math.random()*10)
- 随机数5-10 Math.round(Math.random()*5+5)
- 随机数公式 x - y Math.round(Math.random()*(y-x)+x)
- 随机数公式 0 - x Math.round(Math.random()*x)
- 随机数公式 1 - x Math.ceil(Math.random()*x)
- ===================Dom=====================
- 元素的子节点 用 元素.children 属性，不用 childNodes 会包含文本节点！！
- 元素第一个子节点 元素.firstElementChild IE 6 7 8 用firstChild 但是，当元素没有元素子节点 而有文本节点的时候，会报错， 所以，推荐使用 children[0] 找第一个元素子节点
- 操作兄弟节点和操作子节点需要注意文本节点的问题。
- 父节点 parentNode 只有一个，不是集合 offsetParent 得到向上查找第一个有定位父节点 IE7以下，如果当前元素没有定位，默认是body，有则是html 。标准浏览器 IE8都是body。 IE 7及 以下，如果 haslayout被触发，则会指向这个元素 。
- 获取指定元素的指定属性值 obj.getAttribute('value'); 设置属性 obj.setAttribute(attr,value); 删除指定属性 obj.removeAttribute(attr);
- ie6 7 8下自定义的元素属性可以用 obj.name obj[name]形式取得。
- ================BOM=======================
-
•可视区尺寸–document.documentElement.clientWidth–document.documentElement.clientHeight•滚动距离–document.body.scrollTop/scrollLeft–document.documentElement.scrollTop/scrollLeft•内容高度–document.body.scrollHeight•文档高度–document.documentElement.offsetHeight–document.body.offsetHeight
- ================BOM=======================
- 事件对象兼容的写法 var ev = ev || window.event；
- onmousemove 是在指定的时间内执行一次（如果目标发生了位置移动）
- 给元素添加的是事件处理函数，而不是事件。
- 事件冒泡机制： 当一个元素发生一个事件（例如：click 事件）的时候，他会把发生的这个事件 传递给 父级，其父级接收到后，又向上传递给其父级，一直到 document ，这个过程叫冒泡。 当其父级，或者其 祖先元素也同样绑定了 click 事件处理函数的话， 就会执行这些事件处理函数。 (元素是否绑定事件处理函数不影响其冒泡)
- 例如谷歌的下拉菜单： 点击按钮的时候，下拉的菜单显示。 点击页面上除 按钮 外的其他地方，下拉菜单消失（原因： 给document 绑定了点击事件处理函数，当我们点击页面中任何一个元素的时候，都会把 点击事件 最终传递给 document 接收到 ，而document 元素又绑定了一个点击事件处理函数，于是，就执行了，下拉菜单消失）。那么同样的，当我们点击按钮的时候，点击事件也会向上传递给 document 接收到 ，他也会执其绑定的仪的点击事件处理函数===》 就是让下拉菜单隐藏 ，这个时候，我们得让点击按钮的时候，阻止事件冒泡。
- 阻止事件冒泡：event.canceBubble = true;
- 有的时候，可以利用事件冒泡机制，只给其父亲绑定事件处理函数而实现效果。（例如：包含结构的下拉菜单， 只给其父级LI 绑定事件处理函数即可，而不是给按钮。）
- 事件绑定的两种方法： 1. obj.onclick = fn1; 2. 标准以及IE9+: obj.addEventListenner('click',fn2,false); IE9以下： obj.addachEvent('onclick',fn2);
-
1 //给一个对象绑定一个事件处理函数的第一种形式 2 //obj.onclick = fn; 3 function fn1() { 4 alert(this); 5 } 6 function fn2() { 7 alert(2); 8 } 9 10 //document.onclick = fn1; 11 //document.onclick = fn2; //会覆盖前面绑定fn1 12 13 //给一个对象的同一个事件绑定多个不同的函数 14 //给一个元素绑定事件函数的第二种形式 15 16 /* 17 ie：obj.attachEvent(事件名称，事件函数); 18 1.没有捕获 19 2.事件名称有on 20 3.事件函数执行的顺序：标准ie-》正序 非标准ie-》倒序 21 4.this指向window 22 标准：obj.addEventListener(事件名称，事件函数，是否捕获); 23 1.有捕获 24 2.事件名称没有on 25 3.事件执行的顺序是正序 26 4.this触发该事件的对象 27 */ 28 29 /*document.attachEvent('onclick', function() { 30 fn1.call(document); 31 }); 32 document.attachEvent('onclick', fn2);*/ 33 34 //是否捕获 : 默认是false false:冒泡 true：捕获 35 36 /*document.addEventListener('click', fn1, false); 37 document.addEventListener('click', fn2, false);*/ 38 39 function bind(obj, evname, fn) { 40 if (obj.addEventListener) { 41 obj.addEventListener(evname, fn, false); 42 } else { 43 obj.attachEvent('on' + evname, function() { 44 fn.call(obj); 45 }); 46 } 47 } 48 49 bind(document, 'click', fn1); 50 bind(document, 'click', fn2);
我们调用函数的时候一般用 fn(); 其实这样也可以调用：fn.call(); call()是每一个函数下早已经定义好的方法，其默认第一个参数，可以改变 函数内部this的指向。
1 //call 函数下的一个方法，call方法第一个参数可以改变函数执行过程中的内部this的指向，call方法第二个参数开始就是原来函数的参数列表 2 3 function fn1(a, b) { 4 alert(this); 5 alert(a + b); 6 } 7 8 //fn1(); //window 9 fn1.call(null, 10, 20); //调用函数 fn1() == fn1.call()
事件捕获： 第二种事件绑定处理函数的最后一个参数： false 和 true 用来分别区分 设置 事件出去 的时候 触发，和事件进去的时候触发。 （事件触发的顺序是， 就像敲键盘一样， 有一个 先按下 （进去）然后再 弹起（出来）的过程。）
-
1 window.onload = function() { 2 3 var oDiv1 = document.getElementById('div1'); 4 var oDiv2 = document.getElementById('div2'); 5 var oDiv3 = document.getElementById('div3'); 6 7 function fn1() { 8 alert( this.id ); 9 } 10 11 /*oDiv1.onclick = fn1; 12 oDiv2.onclick = fn1; 13 oDiv3.onclick = fn1;*/ 14 15 //false = 冒泡 16 17 //告诉div1，如果有一个出去的事件触发了你，你就去执行fn1这个函数 18 /*oDiv1.addEventListener('click', fn1, false); 19 oDiv2.addEventListener('click', fn1, false); 20 oDiv3.addEventListener('click', fn1, false);*/ 21 22 //告诉div1，如果有一个进去的事件触发了你，你就去执行fn1这个函数 23 /*oDiv1.addEventListener('click', fn1, true); 24 oDiv2.addEventListener('click', fn1, true); 25 oDiv3.addEventListener('click', fn1, true);*/ 26 27 oDiv1.addEventListener('click', function() { 28 alert(1); 29 }, false); 30 oDiv1.addEventListener('click', function() { 31 alert(3); 32 }, true); 33 oDiv3.addEventListener('click', function() { 34 alert(2); 35 }, false); 36 // 37 38 }
- 事件绑定的取消： 1. obj.onclick = null;
- 2. 第二种方式绑定的事件 取消：
- IE : obj.dettachEvent(事件名称，事件函数);
- 标准： obj.removeEventListener(事件名称，事件函数，是否捕获);
- event对象有三个属性， ctrlkey altkey shiftkey 分别返回 ctrl alt shift 三个键是否按下的布尔值。
- 只有一些表单元素 和 A标签 以及document 可以有 焦点事件和键盘事件。
- onkeydown: 如果按下不抬起，会连续触发。 （事实上，当你按下一个键准备输入文本，而不抬起的时候，你会发现第一个字母出来后，第二个字母需要等一下才出来，然后后续的很快就出来了，这是因为浏览器会给一定的时间来检查是否是用户误触。 但是，做游戏的时候，我们就需要解决这个问题了。 使用定时器来解决。）
-
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 </style> 9 <script> 10 window.onload = function() { 11 12 var oDiv = document.getElementById('div1'); 13 var timer = null; 14 15 //不是所有元素都能够接收键盘事件，能够响应用户输入的元素，能够接收焦点的元素就能够接收键盘事件 16 17 //onkeydown : 如果按下不抬起，那么会连续触发 18 //定时器 19 document.onkeydown = function(ev) { 20 21 var ev = ev || event; 22 23 switch(ev.keyCode) { 24 case 37: 25 clearInterval(timer); 26 timer = setInterval(function(){ 27 oDiv.style.left = oDiv.offsetLeft - 5 + 'px'; 28 },20) 29 30 break; 31 case 38: 32 clearInterval(timer); 33 timer = setInterval(function(){ 34 oDiv.style.top = oDiv.offsetTop - 5 + 'px'; 35 },20) 36 break; 37 case 39: 38 clearInterval(timer); 39 timer = setInterval(function(){ 40 oDiv.style.left = oDiv.offsetLeft + 5 + 'px'; 41 },20) 42 break; 43 case 40: 44 clearInterval(timer); 45 timer = setInterval(function(){ 46 oDiv.style.top = oDiv.offsetTop + 5 + 'px'; 47 },20) 48 break; 49 } 50 51 } 52 53 document.onkeyup = function(ev) { 54 clearInterval(timer); 55 } 56 57 } 58 </script> 59 </head> 60 61 <body> 62 <div id="div1"></div> 63 </body> 64 </html>
- 取消默认事件： 1. return false;(用于 使用第一种方式绑定的事件处理函数 和 IE下 使用 第二种方式绑定的事件处理函数) 2. ev.preventDefault(); (用于 标准浏览器使用第二种方式绑定的事件处理函数。)
- =========================JS中的运动====================================
- JS中读取CSS值的时候，会把小数四舍五入， 而在CSS中，是可以设置并且应用一些带小数的值。所以，在做有些效果，比如 缓冲运动的时候， 需要 向上或者向下取整。
-
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; left: 0px; top: 30px;} 8 </style> 9 <script> 10 //摩擦，减速 : 在运动过程中，速度越来越慢 11 //愈接近目标点，速度就越小 12 window.onload = function() { 13 14 var oBtn = document.getElementById('btn'); 15 var oDiv = document.getElementById('div1'); 16 var iTimer = null; 17 18 oBtn.onclick = function() { 19 20 clearInterval(iTimer); 21 var iSpeed = 0; 22 23 iTimer = setInterval(function() { 24 25 iSpeed = (500 - oDiv.offsetLeft) / 8; 26 27 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); 28 29 console.log( oDiv.offsetLeft + ' : ' + iSpeed ); 30 31 if (oDiv.offsetLeft == 500) { 32 clearInterval(iTimer); 33 } else { 34 oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px'; 35 } 36 37 }, 30); 38 39 } 40 41 } 42 </script> 43 </head> 44 45 <body> 46 <input type="button" value="动起来" id="btn" /> 47 <div id="div1"></div> 48 </body> 49 </html>
- 加入缓冲的运动框架：
-
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; left: 0px; top: 30px; left: 400px;} 8 </style> 9 <script> 10 window.onload = function() { 11 12 var oDiv1 = document.getElementById('div1'); 13 14 oDiv1.onclick = function() { 15 16 /*startMove(this, { 17 width : 200 18 }, function() { 19 startMove(this, { 20 height : 200 21 }); 22 });*/ 23 24 startMove(this, { 25 width : 200, 26 height : 200 27 }); 28 } 29 30 function startMove(obj, json, fn) { 31 clearInterval(obj.iTimer); 32 var iCur = 0; 33 var iSpeed = 0; 34 35 obj.iTimer = setInterval(function() { 36 37 var iBtn = true; 38 39 for ( var attr in json ) { 40 41 var iTarget = json[attr]; 42 43 if (attr == 'opacity') { 44 iCur = Math.round(css( obj, 'opacity' ) * 100); 45 } else { 46 iCur = parseInt(css(obj, attr)); 47 } 48 49 iSpeed = ( iTarget - iCur ) / 8; 50 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); 51 52 if (iCur != iTarget) { 53 iBtn = false; 54 if (attr == 'opacity') { 55 obj.style.opacity = (iCur + iSpeed) / 100; 56 obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')'; 57 } else { 58 obj.style[attr] = iCur + iSpeed + 'px'; 59 } 60 } 61 62 } 63 64 if (iBtn) { 65 clearInterval(obj.iTimer); 66 fn && fn.call(obj); 67 } 68 69 }, 30); 70 } 71 72 function css(obj, attr) { 73 if (obj.currentStyle) { 74 return obj.currentStyle[attr]; 75 } else { 76 return getComputedStyle(obj, false)[attr]; 77 } 78 } 79 80 } 81 </script> 82 </head> 83 84 <body> 85 <div id="div1"></div> 86 </body> 87 </html>
