JavaScript -- 基础篇

1. ① 基础类型

① 未定义类型（变量类型），空类型（对象类型）： 
var item; item：undefined
var temp = null; temp：null --> object == null
undefined与null严格相等

② typeof 描述：获取变量的类型 ：
var item=10;
console.log(typeof  item); === number （数字类型）

③ 文档注释：/**  */ （一般是代码块的前面）
  /**
   * 设置后台传过来的数据，并解析出来；后台的properties文件，每一行用^分隔
   * @param {String} data
   * @memberof Properties
   */
   public setData(data:String){}

④ 加法/连接，减法运算：
 var num1=10; var num2='3';  var result1=num1 + num2 = 103;var result2=num1 - num2 = 7;
 var num1=10; var num2='abc';  var result3 = num1 - num2 = NaN (not a number);
 console.log(NaN == NaN) --> false 

② alert() prompt() substring() slice() substr() indexOf() lastIndexOf() replace()  trim() toLowerCase() toUpperCase() split()

① var arr = [1,2,3,4,5];
for(var num in arr){
    console.log(arr[num]);
}

② var str = 'The Three FireGuners';
str.substring(9,4); // Three 从第一下标开始截取，参数二的下标为止，不包含第二个字符（可颠倒）
str.slice(4,9); // Three 从第一下标开始截取，到参数二的下标为止，不包含第二个字符（不可颠倒）
str.substr(9,4); // Fire 从第一下标开始截取，截取参数二的长度内容
str.indexOf('Th'); // 0 返回一个字符串在另一个字符串首次出现位置的索引
str.lastIndexOf('Fire'); // 6 返回一个字符串在另一个字符串最后出现位置的索引
str.replace('Three','Two');将【查找到的第一个指定字符串】替换成【目标字符串】。
str.trim() // 能够去掉字符串两端多余的空格
str.toLowerCase() // 把字符串中的英文字母全都转换成小写字母
str.toUpperCase() // 把字符串中的英文字母全都转换成大写字母。
str.match('Three') // object or null 返回该字符串在另一个字符串中首次出现的信息
str.split(' '); // The Three FireGuners
while(str.indexOf('Three')!=-1){    // 替换字符串中所有的sxt
    str=str.replace('Three','Two');
}

③ 加密解密：
  解析非中文代码
  btoa(str)：字符串或二进制值转为Base64编码
  atob(str)：Base64编码转为原来的编码
  加密解密中文文字
  encodeURIComponent()(加密)
  decodeURIComponent()(解密)

3. 数组常用方法

①对原数组更改： 
  arr.toString()：能够将数组转换成字符串，默认是以逗号隔开
  arr.join('分隔符')：将给定的参数做分隔符，将所有的数组元素组成一个字符串
  arr.push(item1,item2...)： 在末端添加一个或多个元素，并返回数组的长度
  arr.pop()：删除数组的最后一个元素，并返回删除的这个元素
  arr.shift()：删除数组中的第一个元素，并返回删除的这个元素
  arr.unshift('item1','item2'...)：在数组的第一个位置添加元素，并返回添加元素后新数组的长度。
  arr.reverse()：能够反序排列数组(反序排列)
  arr.splice(3,3,4,5)：从下标为3的元素开始删除3个元素，并将4,5插入数组中（前两个元素必有）

①不对原数组更改：
  arr.slice(fromIndex,toIndex)：对数组进行截取，并生成一个新数组（前包后不包）
  arr.sort(排序的规则)：对数组进行排序，默认按照编码方式排序

4. 对象

一.【中括号】和【点符号】到底有什么区别呢？ 
总结：中括号运算符总是能代替点运算符。但点运算符却不一定能全部代替中括号运算符
（1）中括号运算符可以用字符串变量的内容作为属性名。点运算符不能。
     var obj={name:'贝西', height:170 }; var str='height';
     console.log(obj.str);  console.log(obj[str]);
(2)中括号运算符可以用纯数字为属性名。点运算符不能。
     var obj={}; obj[0]='aa';  obj[1]='bb'; console.log(obj);
(3)中括号运算符可以用js的关键字和保留字作为属性名。点运算符不能。

二.
Object.keys(对象)：获取对象中所有的属性并构成数组返回
delete obj.property：删除对象的一个属性(实际删除的时一对键值对)
console.log(key  in obj)检查对象是否包含一个属性
for(var pro  in obj){...} 循环变量pro表示的是对象的属性名，并不表示属性的值！

三.
对象的引用：
如果一个变量指向一个对象，那么这个变量就称为这个对象的引用，对一个对象的对象引用做出的修改，会影响整个对象的状态。
var obj1={name:'张三'}; var obj2=obj1; var obj3=obj1;
obj1.name='贝西'; console.log(obj2); console.log(obj3);

四.
arguments对象:
(1)arguments对象包含了函数【运行时】的所有参数。
    var func = function(one) {
      console.log(arguments[0]); console.log(arguments[1]); console.log(arguments[2]);
    }
    func(1, 2, 3);
（2）arguments对象除了可以读取参数，还可以为参数赋值
    function  func(num1,num2){
        arguments[0]=10; arguments[1]=20; console.log(num1+num2);
    }
   func(2,3);

五.
Math.random()：随机取[0,1)的数
Math.floor()：向下取整
Math.ceil()：向上取整
取m-n之间的随机整数：Math.floor(Math.random()*(m-n)+m);

5.DOM

一.
按照指定的周期(毫秒)来调用函数或计算表达式: setInterval(function(){},500);  
清除定时器：clearInterval(timer);   
超时操作：setTimeout(function(){},3000);   
跳转页面：document.location.href='http://www.bjsxt.com';   
二.
选中页面元素对象：
用来选中页面元素，根据指定的选择器进行筛选，返回第一个匹配的节点：p.querySelector('span')
根据指定的选择器进行筛选：document.querySelectorAll('选择器名');  
     var pList= document.querySelectorAll('.pp');  console.log(pList[1]  );
返回匹配指定ID属性的元素节点：getElementById();  
     var p2=document.getElementById('p2');  console.log(p2);
返回所有指定标签的元素：getElementsByTagName()  
     var p= document.getElementsByTagName('p'); console.log(p[1]); console.log(p.length);
返回符合指定类名的所有元素：getElementsByClassName() 
     var pp=document.getElementsByClassName('pp'); console.log(pp[1]);
用于选择拥有name属性的HTML元素：getElementsByName() 
     var p2_name= document.getElementsByName('p2_name'); console.log(p2_name[0]);
三.
创建页面元素：
创建一个页面元素：document.createElement("标签名");
给某个节点添加子节点：document.body.appendChild(p);
创建文本节点：document.createTextNode('这是p段落');
创建一个属性节点：document.createAttribute('属性名');
创建的属性节点使用setAttributeNode（）方法绑定到元素上
例子：var p= document.createElement('p');
    var p_text=document.createTextNode('这是p段落');
    p.appendChild(p_text);
    var p_align=document.createAttribute('align');
    p_align.value='center';
    p.setAttributeNode(p_align); //将元素节点放到body中
    document.body.appendChild(p);
四.
获取元素属性的方法：
     getAttribute('属性名');           获取元素属性值
     setAttribute('属性名','属性值'); 设置元素属性
     removeAttribute('属性名');        删除元素属性
五.
style属性用来读写和设置元素的行内样式：元素节点.style.xxx
     a.将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写
     b.CSS属性名是JavaScript保留字的，在属性名之前需要加上字符串“css”
     c.style对象的属性值都是字符串，而且包括单位。
        h2.style.textAlign='center';
        h2.style.color='red';
        h2.style.cssFloat='left';
        document.body.appendChild(h2);
六.
cssText属性
     可以用来读写或删除整个style属性：元素节点.style.cssText='css样式';
        h2.style.cssText='color:red;text-align:center';
        document.body.appendChild(h2);
childNodes属性返回一个节点集合(NodeList)：div1.childNodes;
nodeValue属性一般只用于Text节点;
node.insertBefore(newNode,subNode)方法：
    第一个参数是所要插入的节点，
    第二个参数是当前节点的一个子节点，新的节点将插在这个节点的前面。
七.
①返回当前节点和它的所有后代节点的文本内容：document.getElementById('divA').textContent
②返回第一个\最后一个子节点，如果不存在返回null：div1.firstChild/ lastChild
③判断一个节点是否有子节点，如果有返回true，否则false：div.hasChildNodes();
④从当前节点移除该节点：div.removeChild(div.firstChild)
⑤将一个节点替换当前节点：div.replaceChild(span,div2);（第一个参数是用来替换的新节点）
⑥判断当前节点是否包含参数节点，包含返回true，否则false：document.body.contains(div2)
⑦判断两个节点是否相等：span.isEqualNode(span1)
⑧窗口大小：document.documentElement.clientWidth / document.documentElement.clientHeight
⑨html元素大小：document.documentElement.offsetWidth/document.documentElement.offsetHeight

6.事件处理

一.
①  事件冒泡：沿着DOM树逐级向上触发  （注意：如没有特殊情况，均采用事件冒泡。）
   事件捕获：沿着DOM树逐级向下依次触发  
②  <div class="div2" onclick="test3()">div2</div>
HTML事件：
   点击事件函数：function test2(){console.log("这是第二个函数");}
   清除事件函数：div2.setAttribute('onclick',null);
DOM0级事件：
   点击事件函数：var div2=document.querySelector('.div2');
                div2.onclick=function(){ console.log("div2被点击了2次"); }
   清除事件函数：div2.onclick=null;
DOM2级事件：通过addEventListener函数绑定的事件
   type:事件类型。（没有on！没有on！没有on！）
   listener:监听函数，绑定的函数
   useCapture:是否使用捕获机制。如果不写，默认值为false :冒泡机制；true：捕获机制
   点击事件函数：function  fun(){ console.log("这是dom2事件函数div2一次"); }
                div2.addEventListener('click',fun,true);
   清除事件函数：div2.removeEventListener('click',fun,true);
IE浏览器DOM2级事件：attachEvent(type,listener)
   type:事件类型。（有on！有on！有on！)
   listener:监听函数，绑定的函数 
   点击事件函数：div2.attachEvent('onclick',fun);
   清除事件函数：div2.detachEvent('onclick',fun);
解决浏览器事件绑定兼容性问题：
   var superEvent={
      add: function  (ele,type,func){
        if( ele.addEventListener){    // 有返回值就是true
            ele.addEventListener(type,func);
        }else{
            ele.attachEvent('on'+type,func);
        }
       },
    remove:function  (ele,type,func){
        if(ele.removeEventListener){
            ele.removeEventListener();
        }else{

        }
    }
  }
  superEvent.add(div,'click',show);
鼠标事件：
   单击事件：div.onclick=function(){ }
   双击事件：div.ondblclick=function(){ }
   鼠标按下时触发：div.onmousedown=function(){  div.style.backgroundColor='orange'; }
   鼠标抬起时触发：div.onmouseup=function(){ div.style.backgroundColor='orange'; }
   鼠标移动时触发：event对象，仅在函数内部使用，表示事件本身；
                 clientX  clientY  ,表示鼠标在视口中的坐标；
                 div.onmousemove=function(){ 
                     var x=event.clientX;  var y=event.clientY;
                     console.log('(x,y):('+x+','+y+')');
                     div.innerHTML=input.value; 
                     li.style.cssText='width:80px;height:30px;line-height:30px;text-align:center;background-color:skyblue;display:inline-block';}
鼠标移入移出时触发（不冒泡）：
  div2.addEventListener('mouseenter',function(){ console.log('鼠标进入div2区域'); })
  div1.addEventListener('mouseenter',function(){  console.log('鼠标进入div1区域'); })
  div2.addEventListener('mouseleave',function(){ console.log('鼠标移出div2区域'); })
  div1.addEventListener('mouseleave',function(){ console.log('鼠标移出div1区域');})
鼠标移入移出时触发（冒泡）：
  div2.addEventListener('mouseover',function(){ console.log('鼠标进入div2区域'); })
  div1.addEventListener('mouseover',function(){ console.log('鼠标进入div1区域'); })
  div2.addEventListener('mouseout',function(){ console.log('鼠标移出div2区域'); })
  div1.addEventListener('mouseout',function(){ console.log('鼠标移出div1区域'); })
带有hover样式的导航栏：
  this在函数中使用，表示谁调用函数，它就是谁
  this.style.backgroundColor='orange';
div跟着鼠标移动而移动：
  document.onmousemove=function(){
    if(flag==true){
       div.style.left=event.clientX-50+'px';
       div.style.top=event.clientY-50+'px';
    }
  }
焦点事件：（不支持事件冒泡）
  获取焦点：div.onfocus=function(){}
  失去焦点：div.onblur=function(){}  --> 输入框 例子input.onblur=function(){ }
注册用户：
  var userNameInput= document.querySelector('.userName');
  userNameInput.setAttribute('class','borderGreen');
  userNameSpan.innerHTML='正确';
滚动事件：
  滚动事件调用一次，就输出一次滚动距离：
  window.onscroll=function(){ 
    console.log(document.body.scrollTop||document.documentElement.scrollTop); //IE兼容性
  }
  直接跳转到哪一位置：
  document.querySelector('button').onclick=function(){
    document.body.scrollTop=1000;
    document.documentElement.scrollTop=1000;
  }
回到顶部：
  var timer=null;
  var button= document.querySelector('button');
  button.onclick=function(){ //每隔一秒，向上滚动100距离
    timer=setInterval(function(){
      var top=document.documentElement.scrollTop||document.body.scrollTop;
      top=top-100; console.log(top);
      document.documentElement.scrollTop=top; document.body.scrollTop=top;
      if(top<=0){ clearInterval(timer); }
    },100)
  }