JavaScript -- webAPI 随记

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
- 任何开发语言都有自己的API
- API的特征输入和输出(I/O)
- API的使用方法(console.log())

Web API的概念
浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

BOM的概念
BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

页面加载事件
- onload
window.onload = function () {
  // 当页面加载完成执行
  // 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行
}
window.onunload = function () {
  // 当用户退出页面时执行             }

定时器：setTimeout()和clearTimeout()
在指定的毫秒数到达之后执行指定的函数，只执行一次
// 创建一个定时器，1000毫秒后执行，返回定时器的标示
var timerId = setTimeout(function () {
  console.log('Hello World');
}, 1000);
clearTimeout(timerId);

setInterval()和clearInterval()

定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数
// 创建一个定时器，每隔1秒调用一次
var timerId = setInterval(function () {
  var date = new Date();
  console.log(date.toLocaleTimeString());
}, 1000);
clearInterval(timerId);

URL的组成：      scheme://host:port/path?query#fragment
scheme:通信协议----常用的http,ftp,maito等
host:主机----- 服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
port:端口号----整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
path:路径-----由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
query:查询-----可选，用于给动态网页传递参数，可有多个参数，用'&'符号隔开，每个参数的名和值用'='符号隔开。例如：name=zs
fragment:信息片断------字符串，锚点.

解析URL中的query，并返回对象的形式
function getQuery(queryStr) {
  var query = {};
  if (queryStr.indexOf('?') > -1) {
    var index = queryStr.indexOf('?');
    queryStr = queryStr.substr(index + 1);
    var array = queryStr.split('&');
    for (var i = 0; i < array.length; i++) {
      var tmpArr = array[i].split('=');
      if (tmpArr.length === 2) {
        query[tmpArr[0]] = tmpArr[1];
      }
    }
  }
  return query;
}
console.log(getQuery(location.search));
console.log(getQuery(location.href));

history对象
- back()
- forward()
- go()

navigator对象
- userAgent：通过userAgent可以判断用户浏览器的类型
- platform：通过platform可以判断浏览器所在的系统平台类型.

文档：一个网页可以称为文档
- 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
- 元素：网页中的标签
- 属性：标签的属性

根据标签名获取元素：返回一个伪数组，里面保存了多个DOM对象；
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
}

根据name获取元素*：返回一个伪数组，里面保存了多个DOM对象；
var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}

根据类名获取元素：返回一个伪数组，里面保存了多个DOM对象；
var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}

根据选择器获取元素
var text = document.querySelector('#text');
console.log(text);

var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}

表单元素属性
- value 用于大部分表单元素的内容获取(option除外)
- type 可以获取input标签的类型(输入框或复选框等)
- disabled 禁用属性
- checked 复选框选中属性
- selected 下拉菜单选中属性

自定义属性操作
- getAttribute() 获取标签行内属性
- setAttribute() 设置标签行内属性
- removeAttribute() 移除标签行内属性
- 与element.属性的区别: 上述三个方法用于获取任意的行内属性。

- 使用style方式设置的样式显示在标签行内
var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';

在表单标签中，如果属性和值只有一个，并且值是这个属性本身，那么，在写js代码，DOM操作的时候，这个属性值，是布尔类型就可以了。

$('input')checked = true/ false；    $('input').selected = true；    $('input').disabled = true；

显示和隐藏：

$("buuton").onclick = function(){

if(this.value == "隐藏"）{my$("dv").style.display = "none";   this.value = "显示”;  }  else if(this.value == "显示”){ my$("dv").style.display = "block";   this.value = "隐藏";  } 

在js代码中DOM操作的时候，设置元素的类样式，不用class关键字，应该使用className

my$("dv").className = "cls";

var box = document.getElementById('box');
box.className = 'clearfix';

创建元素的三种方式:
document.write()
document.write('新设置的内容<p>标签也可以生成</p>');
 innerHTML
var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';
document.createElement()
var div = document.createElement('div');
document.body.appendChild(div);

innerHTML和innerText的区别：
var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我会生成为标签</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不会生成为标签</p>';
console.log(box.innerText);

innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。
- 可以借助字符串或数组的方式进行替换，再设置给innerHTML
- 优化后与document.createElement性能相近

节点操作
var body = document.body;
var div = document.createElement('div');
body.appendChild(div);
var firstEle = body.children[0];
body.insertBefore(div,firstEle);
body.removeChild(firstEle);
var text = document.createElement('p');
body.replaceChild(text, div);

childNodes和children的区别，childNodes获取的是子节点，children获取的是子元素
nextSibling和previousSibling获取的是节点，获取元素对应的属性是nextElementSibling和previousElementSibling获取的是元素
nextElementSibling和previousElementSibling有兼容性问题，IE9以后才支持

节点操作，方法
    appendChild()
    insertBefore()
    removeChild()
    replaceChild()

节点层次，属性
    parentNode
    childNodes
    children
    nextSibling/previousSibling
    firstChild/lastChild

注册/移除事件的三种方式：
var box = document.getElementById('box');
box.onclick = function () {
  console.log('点击后执行');
};
box.onclick = null;

box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);

box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);
function eventCode() {
  console.log('点击后执行');
}

兼容代码：
function addEventListener(element, type, fn) {
  if (element.addEventListener) {
    element.addEventListener(type, fn, false);
  } else if (element.attachEvent){
    element.attachEvent('on' + type,fn);
  } else {
    element['on'+type] = fn;
  }
}

function removeEventListener(element, type, fnName) {
  if (element.removeEventListener) {
    element.removeEventListener(type, fnName, false);
  } else if (element.detachEvent) {
    element.detachEvent('on' + type, fnName);
  } else {
    element['on'+type] = null;
  }
}

事件的三个阶段：1. 捕获阶段；2. 当前目标阶段；3. 冒泡阶段

阻止事件冒泡：     window.event.cancelable = true;  IE            e.stopPropagation();  火狐Firefox

事件对象.eventPhase属性可以查看事件触发时所处的阶段

 event.type 获取事件类型；  clientX/clientY     所有浏览器都支持，窗口位置；  pageX/pageY       IE8以前不支持，页面位置；- event.target || event.srcElement 用于获取触发事件的元素；   event.preventDefault() 取消默认行为；   event.stopPropagation();

onmouseup 鼠标按键放开时触发； onmousedown 鼠标按键按下触发；  onmousemove 鼠标移动触发； onkeyup 键盘按键按下触发； onkeydown 键盘按键抬起触发；  onfocus  获取焦点、  onblur  失去焦点

阻止超链接跳转：<a href = "http://www.baidu.com" id = "ak">百度</a>

document.getElementById("ak").onclick = function(){  alert("超链接跳转被阻止"）；return false;  };

在html标签中添加的自定义属性，若想要获取这个属性的值，需要使用getAttribute（‘自定义属性的名字’）才能获取这个属性的值。

setAttribute("属性的名字","属性的值");  getAttribute("属性的名字");  removeAttribute("属性名字");

nodeType:类型；nodeName：名字；nodeValue：节点值；

childNodes; parentNode;  firstChild;lastChild;firstElementChild;lastElementChild;  previousSibling; nextSibling;  

全选和全不选：

var ckAll=$('.j_cbAll");  //点击获取全选的这个复选框
var cks = $(".j_tb").getElementsByTagName("input");  //获取分类中所有了的复选框
   ckAll.onclick = function(){   //点击全选的复选框，获取其当前的状态，然后设置分类中复选框的状态
   for(var i = 0; i<cks.length; i++){
   cks[i].checked = this.checked;
          }
   };
   for(var i = 0; i<cks.length; i++){   //获取所有分类中的复选框，分别注册点击事件
   cks[i].onclick = function(){    //判断是否所有的复选框都选中
   var flag = true;  //默认都被选中
   for(var j = 0;j<cks.length; j++){
   if(cks[j].checked){   //没选中就进来
   flag = false;
   break;   }
   ckAll.checked = flag;  //都选中时全选复选框的状态
              }
         }
   }

点击按钮创建表格：

var arr = [
   {name:"百度",href:"http://www.baidu.com"},
   {name:"谷歌",href:"http://www.Google.com"},
   {name:"优酷",href:"http://www.youku.com"},
   {name:"土豆",href:"http://www.tudou.com"},
   {name:"腾讯",href:"http://www.tencent.com"},
   {name:"快播",href:"http://www.kuaibo.com"},]
   $(".btn").onclick = function (){
   var tableObj = document.createElement("table");
   tableObj.border = "1"; tableObj.cellpadding = "0"; tableObj.cellspacing = "0";
   $(".dv").appendChild(tableObj);
   for(var i = 0; i<arr.length; i++){
        var dt = arr[i];
        var trObj = document.createElement("tr");
        tableObj.appendChild(trObj);
        //创建第一列，然后加入到行中
        var td1 = document.createElement("td");
        td1.innerText = dt.name;
        trObj.appendChild(td1);
        //创建第二列
        var td2 = document.createElement("td");
        td1.innerText = "<a href = "+dt.href +">" +dt.name+"</a>";
        trObj.appendChild(td2);
        }
   };

$("#btn").onclick = function () {
    i++;
    var obj = document.createElement("input");
    obj.type = "button"; obj.value = "按钮"+i;
    //$("#dv").appendChild(obj);  //追加子元素
    $("#dv").insertBefore(obj,$("#div").firstElementChild);// 把新的元素插入到第一个子元素的前面
    $("#dv").replaceChild();
}
$("#btn2").onclick = function () {
    $("#dv").removeChild($("#div").firstElementChild);// 移除父级元素中第一个子元素
}
$("#btn3").onclick = function () {
    //点击按钮删除div中所有的子元素；
    //判断父级元素中有没有第一个子元素
    while ($("#div").firstElementChild) {
        $("#dv").removeChild($("#div").firstElementChild);// 移除父级元素中第一个子元素
    }
}
只创建一个元素;
有则删除，无则创建；
$("#btn").onclick = function () {
    if($("#dv #btn2")){   //如果为true，则删除
        $("#dv").removeChild($("#dv #btn2"));
    }
    var obj = document.createElement("input");
    obj.type ="button"; obj.value = "按钮"; obj.id = "btn2"
    $("#dv").appendChild(obj);
}

$("#btn").onclick = function () {
    if(!$("#dv #btn2")){   
        var obj = document.createElement("input");
        obj.type ="button"; obj.value = "按钮"; obj.id = "btn2"
        $("#dv").appendChild(obj);
    }
}

为元素绑定多个事件

//为元素绑定事件（DOM）：一种，不兼容（两种）
//1. 对象.addEventListener("事件类型"，事件处理函数，false)；支持谷歌火狐，不支持IE8
//为按钮绑定点击事件
//参数1：事件的类型 -----  事件的名字，没有on
//参数2：事件处理函数 ----- 函数（命名函数，匿名函数）
//参数3：布尔类型，目前false
 $("#btn").addEventListener("click",function () {
console.log(this); //事件对象
     console.log("111");
 },false);
$("#btn").addEventListener("click",function () {
    console.log("222");
},false);
$("#btn").addEventListener("click",function () {
    console.log("333");
},false);
//2. 对象.attachEvent("有on的事件类型"，事件处理函数)
$("#btn").attachEvent("onclick",function () {
console.log(this);  //this是window
    console.log("111");
});
$("#btn").attachEvent("onclick",function () {
    console.log("222");
});
$("#btn").attachEvent("onclick",function () {
    console.log("333");
});

为任意元素，绑定任意的事件

function addEventListener(element,type,fn) {
    //判断浏览器是否支持这个方法
    if(element.addEventListener){
        element.addEventListener(type,fn.false);
    }else if (element.attachEvent) {
        element.attachEvent('on'+type,fn);
    }else {
        element['on'+type] = fn;
    }
}
addEventListener($("#btn"),"click",function () {
    console.log("1111");
})

总结绑定事件的区别：
addEventListener();attachEvent();
相同点：都可以为元素绑定事件；
不同点：1.方法名不一样；
2.参数个数不一样addEventListener三个参数，attachEvent两个参数；
3.addEventListener  谷歌火狐IE11支持、IE8不支持；attachEvent 谷歌火狐IE11不支持、IE8支持；
4.this不同，addEventListener中的this是当前绑定事件的对象， attachEvent 中的this是window
5.addEventListener 中事件的类型（事件的名字）没有on，attachEvent 中的事件的类型（事件的名字）有on

解绑事件：注意：用什么方式绑定事件，就用什么方式解绑事件；
$("#btn2").onclick = function () {
    $("#btn").onclick = null;
}
$("#btn2").onclick = function () {
    $("#btn").removeEventListener("click",f1(命名函数),false);
}
$("#btn2").onclick = function () {
    $("#btn").detachEvent("onclick",f1(命名函数));
}

偏移量
- offsetParent用于获取定位的父级元素
- offsetParent和parentNode的区别
var box = document.getElementById('box');
console.log(box.offsetParent);
console.log(box.offsetLeft);
console.log(box.offsetTop);
console.log(box.offsetWidth);
console.log(box.offsetHeight);

客户区大小
var box = document.getElementById('box');
console.log(box.clientLeft);
console.log(box.clientTop);
console.log(box.clientWidth);
console.log(box.clientHeight);

滚动偏移
var box = document.getElementById('box');
console.log(box.scrollLeft)
console.log(box.scrollTop)
console.log(box.scrollWidth)
console.log(box.scrollHeight)

为同一个元素绑定多个不同事件指向同一个事件处理函数
$("#btn").onclick = f1;
$("#btn").onmouseover = f1;
$("#btn").onmouseout = f1;
function f1(e) {
    switch (e.type){
        case "click":
            alert("1111");
            break;
        case "mouseover":
            this.style.backgroundColor = "red";
            break;
        case "mouseout":
            this.style.backgroundColor = "blue";
            break;
    } 
}