Web API介绍

API的概念

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

 

任何开发语言都有自己的API

API的特征输入和输出(I/O)

API的使用方法(console.log())

Web API的概念

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

此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义

 

对象分三种:内置对象,自定义对象,浏览器对象

    内置对象:系统提供的

    自定义对象：自己写的

    浏览器对象:浏览器的

    

    Math Date String Array

    Math 是一个对象,但是不是一个函数

    Math对象下的属性和方法都是静态

    

    方法:

    Math.ceil()---向上取整

    Math.floor()---向下取整

    Math.Pi----π

    Math.Max()---最大值

    Math.Min()---最小值

    Math.abs()----绝对值

    Math.random()---[0,1)之间的随机数

    Math.sqrt(2)----求平方根

    Math.pow(2,3)----求指数的幂次方

    Math.round():四舍五入求整

    

 Date对象的方法：

    var dt=new Date();

    dt.getFullYear();//年

    dt.getMonth();//月

    dt.getDate();//日

    dt.getHours();//时

    dt.getMinutes();//分

    dt.getSeconds();//秒

    dt.getDay();//星期几

    dt.toDateString();//获取日期：年月日

    dt.toLocaleDateString();//获取日期：中文的

    dt.toTimeString();//获取时间：时分秒

    dt.toLocaleTimeString();//获取时间：时分秒

    dt.valueOf();//

    getTime()

    Date.now();

    

 String对象的特性：不可变性

    方法：

    .length------>获取字符串的长度

    .charAt(索引)；字符串的位置，返回索引，如果没有，空

    String.fromCharCode(数字值,可以是多个参数),返回数字值对应的Unicode码

    .concat(字符串1,字符串2,...);拼接字符串

    .indexOf(要找的字符串,从某个位置开始的索引);找到字符串对应的索引，如果没有，返回-1

    .lastIndexOf(要找的字符串,开始索引);从后往前找到对应的字符串的索引，

    .replace("原来的字符串","新的字符串");替换字符串，返回新的字符串

    .slice(开始的索引,结束的索引); 截取字符串，【开始，结束）

    .split("要干掉的字符串",切割后留下的个数);切割字符串，返回数组 "hello-nihao"

    .substr(开始的位置,个数);截取字符串，字符串的长度为个数

    .substring(开始的索引,结束的索引),截取字符串，【开始，结束）

    .toLocaleLowerCase();转小写

    .toLowerCase();转小写

    .toLocaleUpperCase()：转大写

    .toUpperCase();转大写

    .trim();去除前后空格 “  哈哈   您  ”

    

    

     Array.isArray(对象)---->判断对象是不是数组，是true，否false

    instanceof关键字  对象 instanceof Array

    .concat(数组,数组,数组,...) ：拼接数组

    .every(函数)--判断这个数组中是不是所有的元素都符合条件，回调函数中有三个参数：element：数组元素，index:元素的索引，array：数组本身 回调函数有返回值：bool，数组元素全部符合条件，返回true，有一个不符合，返回false

    .filter(函数);过滤，从数组中过滤符合条件的元素，返回一个新的数组

    .push(值);--->向数组后追加新的元素，返回数组的长度

    .pop();--->删除最后一个元素，返回的删除的这个元素

    .shift();--->删除第一个元素，返回的删除的这个元素

    .unshift();--->向数组最前面添加一个元素，返回数组的长度

    .indexOf(元素值); 获取数组元素的索引

    .join("字符串");----将数组拼接成字符串，返回这个字符串

    .reverse();----->数组翻转

    .sort();---排序

    .arr.slice(开始的索引,结束的索引);获取数组中这一段数组元素，返回子数组

.splice(开始的位置,要删除的个数,替换的元素的值);一般是用于删除数组中的元素,或者是替换元素,或者是插入元素

 

JavaScript分三个部分:

    1. ECMAScript标准----JS基本的语法

    2. DOM:Document Object Model 文档对象模型

    3. BOM:浏览器对象模型

    

    DOM的作用:操作页面的元素

    DOM树:把html页面或者是xml文件看成是一个文档,文档就是一个对象,这个文档中所有的标签都是元素,元素也可以看成是对象,标签(元素,对象)有很多,还有嵌套的关系,组成的这种层次结构,可以模拟成树形结构图,简称:树状图 ,就是DOM树

    

this关键字----如果是在当前的元素的事件中使用this,那么this就是当前的对象

  DOM对象:------->通过DOM方式获取的元素得到的对象

    元素:element:页面中的标签

    节点:Node:页面中所有的内容,标签,属性,文本

根元素:html标签

页面中的顶级对象---:document

 

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

我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，

比如：刷新浏览器、后退、前进、在浏览器中输入URL等

浏览器的顶级对象：window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window注意：window下一个特殊的属性 window.name

 

BOM:Browser Object Model 浏览器对象模型---操作浏览器

      历史记录的后退和前进 history: back()后退 forward()前进 go(-1)

      地址栏上的地址的操作 location href属性跳转页面, assgin()跳转页面 reload()刷新 replace()方法替换地址栏上的地址的,没有历史记录的

      获取系统和浏览器的信息的 navigator userAgent属性---获取系统,浏览器的信息的

 

定时器:

       var timeId=window.setInterval(函数,时间);

       执行过程:页面加载完毕后,过了一段时间执行函数,反复的,除非清理定时器

       该定时器会返回自己的id值

       window.clearInterval(定时器的id值);清理定时器

       setTimeout(函数,时间)---定时器,只执行一次函数的代码-----一次性的定时器

       clearTimeout(定时器的id);

 

 

 

------阻止超链接默认的跳转事件: return false;

 

我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作

 

获取元素的方式

根据id获取元素

   document.getElementById("id属性的值");

根据标签名字获取元素

   document.getElementsByTagName("标签的名字");

  

根据name属性的值获取元素

   document.getElementsByName("name属性的值");

根据类样式的名字获取元素

   document.getElementsByClassName("类样式的名字");

根据选择器获取元素

   document.querySelector("选择器");返回一个对象

根绝选择器获取元素

   document.querySelectorAll("选择器");返回数组,多个元素组成的

事件

 

事件：触发-响应机制

Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。

事件三要素

事件源:触发(被)事件的元素

件类型:事件的触发方式(例如鼠标点击或键盘点击)

事件处理程序:事件触发后要执行的代码(函数形式)

 

属性操作

非表单元素的属性

href、title、id、src、className

 

innerText和textContent的兼容问题

    目前的浏览器都支持innerText,应该是属于ie的标准

    textContent本身是火狐支持,IE8不支持

 

innerText和innerHTML的区别

    都可以设置标签的文本内容,如果要设置标签及内容推荐使用innerHTML

    如果要获取标签中的文本,innerText,也可以使用innerHTML

如果想要获取的是有标签,也有文本---innerHTML

 

 

表单元素属性

value 用于大部分表单元素的内容获取(option除外)

type 可以获取input标签的类型(输入框或复选框等)

disabled 禁用属性

checked 复选框选中属性

selected 下拉菜单选中属性

 

 

自定义属性操作

    自定义属性:标签原本没有这个属性,为了存储数据,程序员自己添加的属性

    自定义属性无法直接通过DOM对象的方式获取或者设置

    对象.getAttribute("自定义属性名字");获取自定义属性的值

    对象.setAttribute("属性名字","值");设置自定义属性及值

 移除自定义属性

    对象.removeAttribute("属性的名字");

    

 

节点操作

    节点:页面中所有的内容都是节点(标签,属性,文本:文字,空格,换行)

    文档：document---页面中的顶级对象

    元素:页面中所有的标签,   标签---元素--对象(通过DOM的方式来获取这个标签,得到了这个对象,此时这个对象叫DOM对象)

    节点的属性:作用:为了将来获取很多节点,得到节点中的标签(元素),识别节点中的标签元素

    节点的类型:1标签节点,2属性节点,3文本节点

    nodeType:节点的类型,1---标签节点,2----属性节点,3---文本节点

    nodeName:标签节点--大写的标签名字,属性节点---小写的属性名字,文本节点---#text

    nodeValue:标签---null,属性---属性的值,文本---文本内容

if(node.nodeType==1&&node.nodeName=="P")

 

元素的创建

    三种元素创建的方式

    1. document.write("标签代码及内容"); 如果在页面加载完毕后创建元素.页面中的内容会取消掉

    2. 父级对象.innerHTML="标签代码及内容";

    3. document.createElement("标签名字");得到的是一个对象,

       父级元素.appendChild(子级元素对象);

       父级元素.inerstBefore(新的子级对象,参照的子级对象);

       父级元素.replaceChild(新的子级对象,参照的子级对象);

       移除子元素

       父级元素.removeChild(要干掉的子级元素对象);

    

   事件的绑定:为同一个元素绑定多个相同的事件

   为元素绑定事件的三种方式:

    

      1.对象.on事件类型=事件处理函数;

      2.IE8不支持

      对象.addEventListener("没有on的事件类型",事件处理函数,false);

      3.谷歌和火狐不支持

      对象.attachEvent("有on的事件类型",事件处理函数);

    

    为元素解绑事件的三种方式:

      1.对象.on事件类型=null;

      2.

      对象.removeEventListener("没有on的事件类型",事件处理函数名字,false);

      3.

      对象.detachEvent("有on的事件类型",事件处理函数);

    

   事件冒泡:元素A中有元素B,都有相同的事件,里面的元素的事件触发了,外面元素的事件也会触发.可以是多个元素嵌套

    

  阻止事件冒泡:

      e.stopPropagation(); e---事件参数对象,谷歌和火狐都支持,IE8不支持

      IE8和谷歌支持

      window.event.cancelBubble=true;

 

      window.event就是事件参数对象----e是一样的

    

 事件的阶段：

    1----------捕获阶段(由外到内)

    2----------目标阶段（当前元素）

    3----------冒泡阶段（由内到外）

 获取当前事件的状态：e.eventPhase

 

 常用事件：

       onclick：点击元素时触发

       onmouseover：鼠标移入元素时触发

       onmouseout：鼠标移出元素时触发

       onkeyup：键盘抬起时触发

       onkeydown：键盘按下时触发

       onmouseup：鼠标抬起时触发

       onmousedown：鼠标按下时触发

       onfocus：获取焦点

       onblur：失去焦点