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>

     

 

posted @ 2015-04-24 15:32  晚秋ing  阅读(163)  评论(0编辑  收藏  举报