JavaScript学习

JavaScript

跨平台、面向对象的脚本语言，用来控制网页行为，网页交互。

js引擎运行

分两步：预解析，再执行代码

• 预解析：js引擎会把js里面的所有var还有function提升到当前作用域的最前面；
  • 变量预解析(变量提升)：把所有的变量声明提升到当前作用域最前面，但不提升赋值操作。
  • 函数预解析(函数提升)：把所有的函数声明提升到当前作用域最前面，不会调用函数。
• 代码执行：按照代码书写顺序从上往下执行。

引入方式

内部脚本：定义在HTML页面中

<script>
	...
</script>

JS代码必须在< script >< /script >之间，可以放置在任何地方，任意数量。一般放在< body >的底部，可改善显示速度，因为脚本执行会拖慢显示。

外部脚本：作为外部JS文件引入

<script src="文件路径"></script>

外部脚本不能包含< script >标签，< script >不能自闭合

---

基础语法

与java相似，不过语句末的分号；可有可无。

输出语句

window.alert(" ... ")  //写入警告框
document.write(" ... ")  //写入HTML输出
console.log(" ... ")   //写入浏览器控制台
console.dir(object)  //打印元素对象，查看属性,方法
prompt(info) //弹出输入框，用户可以输入

变量

使用 var 关键字来声明变量。（variable）

• 作用域：全局变量；
• 变量可以重复声明；

var test = 20;
test = "张三";

JS是弱类型语言，变量可以存放不同类型的值

ES6新增 let 关键字来定义变量，其变量只在let所在的代码块内有效，且不允许重复声明。

ES6新增 const 关键字来声明一个只读的常量。

• 全局变量 在浏览器关闭时销毁；
• 局部变量 在程序运行完毕后就销毁；

常量

使用const声明，必须初始化，不能被修改。

const birthday = '11.22.1922'

数据类型

• 原始类型：

  • number：数字(整数，小数，NaN(Not a Number))

    .toFixed(x) —— 格式化一个数字，x是要保留的小数点后位数。

  • string：字符，字符串，单双引号皆可

  • boolean：布尔类型

  • null：空

  • undefined：变量未初始化时的默认值

  使用typeof运算符可以获取数据类型

  typedef 变量名
  

• 引用类型

类型转换

• 其他类型转为number：
  • string：按字符的字面值转为数字，如果字面值不是数字，则转为NaN。一般使用正负号 或 parseInt 进行转化。
  • boolean：true 转为 1， false 转为 0.
• 其他类型转为boolean：
  • number：0和NaN转为 false，其他转为 true
  • string：空字符串转为 false，其他转为true
  • null：转为false
  • nudefined：转为false

运算符

关系运算符

• == ：先判断类型是否一致，不一致会进行类型转换再比较两个值；
• === ：（全等于）如果类型不一致，会直接返回false，类型一致时才会比较两个值。

函数

函数通过function关键字进行定义。

function functionName(参数列表){
	......
}
//形式参数不需要类型，返回值也不需要定义类型，因为JavaScreipt是弱类型语言
function add(a,b){
    return a + b;
}
    
//定义方式二
var functionName = function(参数列表){...}
var add = function(a,b){
    return a + b;
}
//调用，JS函数调用函数，可以传递任意个参数个数
let result = add(1,2,3);
let result = add(1);
                                  
//立即执行函数,作用:立即执行，同时也独立创建了一个作用域,里面所有变量都是局部变量,避免命名冲突;
(function(){})();
(function(){}());                               //如: 
(function(a,b){
    console(a + b);
})(2,3);
(function(a,b){
    console.log(a + b);
}(2,3));

arguments

是当前函数的内置对象，存储了传递的所有实参。其展示形式是一个伪数组，可以遍历，有lenght属性，有索引，没有push，pop等方法。

内部函数可以访问外部函数的变量：采用链式查找的方式来决定取哪个值，即找最近的——作用域链。

匿名函数：没有名字的函数，通常与事件处理程序一起使用。

const myButton = document.querySelector('button');

myButton.onclick = function() { // 匿名函数
    alert('hello');
}

const textBox = document.querySelector('#text-box');

textBox.addEventListener('keydown', function(event) {
	console.log(`You pressed "${event.key}".`);
});

箭头函数： 尽量使用箭头函数（更简洁）

// 前面的匿名函数也可以写成如下的箭头函数的形式
textBox.addEventListener('keydown', (event) => {
    console.log(`You pressed "${event.key}".`);
});

// 如果函数体只有一条语句，还可以省略花括号
textBox.addEventListener('keydown', (event) => console.log(`You pressed
"${event.key}".`));

// 如果函数只有一个参数，还可以省略参数的括号
textBox.addEventListener('keydown', event => console.log(`You pressed
"${event.key}".`));

// 如果只有一个返回值，且函数体只有一条语句，可省略掉return语句
const originals = [1, 2, 3];
const doubled = originals.map((item) => item * 2);	// 将原始数组的每个元素乘以2得到新的数组

let sum = (a, b) => a + b;
alert(sum(1,3));  // 3

常用对象

Array对象

Array用于定义数组

• 创建方法：

  • 一、var 变量名 = new Array(元素列表)；

  var arr = new Array(1,2,3);
  

  • 二、var 变量名 = [元素列表]；

  var arr = [1,2,3]
  

• 属性：

  length：数组中元素的个数

  push：末尾添加一个元素； unshift：开头添加一个元素

  var arrs = [1,2,3];
  arrs.push(10);
  

  pop：末尾删除一个元素；shift：开头删除一个元素

  indexof：查找元素

  splice：删除多个元素

  arrs.splice(0,2); //参数:从0号位开始删，删2个
  

• 遍历数组：

  const array = [1,2,3];
  for(const e of array){
      console.log(e);
  }
  

• 字符串和数组的转化：

  const data = 'aa,bb,cc,dd';
  
  const array = data.split(',');
  
  const string = array.join(',');
  cosnt string2 = array.toString();
  

String对象

• 创建方法：

  • var 变量名 = new String(s)；

  • var 变量名 = s；

    var str = new String("hello");
    

• 属性：

  length：字符串的长度

• 方法：

  string[0]：查看指定下标位置的字符

  .chaAt()：返回在指定位置的字符

  .indexOf()：检索指定字符串

  .trim()：去除字符串前后的空格

  .concat(str1,str2…)：链接多个字符串，等效+，+更常用

  .substr(start,lenght)：从start开始，取lenght个字符

  .splice(a,b)：提取下标a到b-1的字符串，只有a下标的话，取下标a之后剩下的字符串。

  .replace(a,b)：将a替换成b

  .includes(string)：是否包含某字符串

  .startswith(string)：是否以某字符串开头

  .endswith(string)：是否以某字符串结束

Date对象

和Math不同，Date对象需要实例化后才能使用。

Date() ——（没有参数）返回系统的当前时间

使用 .valueOf() 或 getTime() 来获得总的毫秒数(时间戳)，从1970年1月1日到现在。

有更常用的写法：将 +new Date() 实例化，也可获得总的毫秒数。

H5新增的获取方法： Date.now()

方法名	说明
getFullYear()	获取当年
getMonth()	获取当月（0~11）
getDate()	获取当天日期
getDay()	获取星期几（周期0 到 周六6）
getHours()	当前小时
getMinutes()	当前分钟
getSeconds()	当前秒

自定义对象

格式：

• var 对象名 = {属性名 : 属性值，… 函数名 : function(参数){} … };

• 或者使用：var 对象名 = new Object(); 来创造一个空的对象，再利用追加属性的方法，往里面添加数据。

• 使用构造函数来创建对象：

  function 构造函数名(参数值){ this.属性 = 值； this.方法 = function(){} }————调用时，用“new 构造方法名” 赋值给变量。

  注：构造函数名字首字母要大写

var person = {
	name:"zhangsan",
	age:23,
	eat:function(){
		alert("干饭");
	}
};

var obj = new Object();
obj.name = "zhangsan"

function People(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang){
        sonsole.log(sang);
    }
}
var zhangsan = new People('刘德华'，19，'男');

调用属性：对象名.属性名 或者 对象名[‘属性名’]

调用方法：对象名.方法名

遍历对象属性：for…in可以对数组或对象进行遍历。

for(var k in obj){	
    console.log(k);	//k变量输出得到的是属性名
    console.log(obj[k]); //obj[k]得到的是属性值
}

JS执行机制

JS是单线程的，即同一时间只能做一件事，这意味着所有任务需要排队，如果JS执行时间过长，会导致页面渲染不流畅。

于是，HTML5提出Web Worker标准，允许JS脚本创建多个线程。于是就有了同步和异步。

• 同步

  程序之间的执行顺序与排列顺序一致，即同步。

• 异步

  执行某程序的同时可以执行另一个程序，即异步。

• 同步任务

  同步任务都在主线程执行，形成一个执行栈

• 异步任务

  JS的异步是通过回调函数实现的，一般而言，异步任务有三种：

  • 普通事件：如click，resize
  • 资源加载：如load，error
  • 定时器：如setInterval，setTimeout

  异步任务相关的回调函数会添加到任务队列(消息队列)中。

执行机制：

1. 先执行执行栈中的同步任务；

2. 遇到异步任务，将其回调函数放入任务队列中；

   异步任务会先交给异步进程处理，只有异步任务的事件发生，或如click点击了，setInterval的时间到了，才会把相关的回调函数放入任务队列。

3. 等执行栈中的所有同步任务执行完毕后，系统会按次序读取任务队列中的异步任务，使其进入执行栈，开始执行。

   事件循环：主线程不断的重复获取任务，执行任务，再获取任务，反复循环。

BOM对象

Browser Object Model 浏览器对象模型，JS将浏览器的各个组成部分封装成对象：Window，Navigator，Screen，History，Location。

• Window对象：浏览器窗口对象

  • 获取：直接使用window，其中window. 可以省略。

    window.alert();
    

  • 属性：获取其他四个BOM对象

  • 方法：

    • alert() 显示带有一段消息和一个确认的警告框
    • confirm() 显示带有一段消息和确认和取消的对话框，点确定会返回ture，点取消会返回false
    • setInterval() 按照指定的周期(毫秒计)来调用函数或计算表达式（定时器，循环执行）
    • setTimeout() 在指定的毫秒后调用函数或计算表达式（定时器，只执行一次）

• Navigator：浏览器对象

  常用：userAgent 返回由客服端发送给服务器的user-agent头部的值。

  使用下面代码可判断用户在那个终端打开页面，以实现跳转：

  if ((navigator.userAgent.match(/(phone|pad| pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MOOBrowser|JUC|Fennec|wosBrowser|BrowserNG|Webos|Symbian|Windows Phone)/i))){
  	window.location.href =""	//手机
  }else{
  	window.location.href =""	//电脑
  }
  

• Screen：屏幕对象

• History：历史记录对象

  • 获取：使用window.history获取，其中window. 可以省略。

    window.history.方法();
    history.方法();
    

  • 方法：

    • back() 后退，加载history列表的前一个url
    • forward() 前进，加载history列表的下一个url
    • go(参数) 参数为n，前进n个页面，参数为-n，后退n个页面

• Location：地址栏对象

  • 获取：使用window.location获取，其中window. 可以省略。

    window.location.方法();
    location.方法();
    

    URL:同一资源定位符 Uniform Resource Locator

    是互联网上标准资源的地址，互联网的每个文件都有唯一的url，它包含的信息指出文件的位置，以及浏览器应该怎么处理它。

    格式：

    protocol://host[:port]/path/[?query]#fragment
    如:http:/www.baidu.cn/index.html?name=andy&age=18#link
    

    组成	说明
    protocol	通信协议常用的http, ftp, maito 等
    host	主机（域名）
    port	端口号，可选，省略时使用方案的默认端口如http的默认端口为80
    path	路径，由零或多个 ‘/’ 符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
    query	参数，以键值对的形式，通过&符号分隔开来
    fragment	片段，#后面内容，常见于链接、锚点

  • 属性：

    location.href 设置或返回完整的url

    location.host 返回主机/域名

    location.port 返回端口号，如果未写则返回空字符串

    location.pathname 返回路径

    location.search 返回参数

    location.hash 返回片段

    案例：第一页面，使用提交表单，url里的参数会携带表单的数据到另一个页面。

    <!-- 第一个页面 -->
    <form action="index.html"
       用户名: <input type="text" name="uname">
    	  <input type="submit" value="登录">
    </form>
    
    <!-- 第二个页面 url为index.html -->
    <!-- 假设表单提交的用户名输入为andy，则使用location.search得到 ?uname=andy -->
    var arr = location.search.substr(1).split('=');  <!-- 去掉问号，再根据等于号做分割，则arr[1]就是名字andy了
    

  • 方法：

    方法	返回值
    location.assign(url)	跟href一样，可以跳转页面/重定向页面；记录历史
    location.replace(url)	替换当前页面，不记录历史，所以不能后退
    location.reload()	重新加载页面，相当于刷新（部分有缓存的，从缓存获取数据）；如果参数为true，为强制刷新（从服务器重新获取数据）

页面加载事件

• onload事件是等页面内容全部加载完毕 才会开始执行。

  • document.addEventListener(‘load’, function(){ })

  • window.onload = function(){ } //传统方式只有最后一个onload生效

• DOMContentLoaded 是只需DOM加载完毕，不包括flash， css等 就可以执行，速度比load快一些。

  • document.addEventListener(‘DOMContentLoaded’, function(){})

窗口大小调整

• window.addEventListener(“resize”, function(){})

• window.onreasize = function(){ }

常用于响应式布局

定时器

• setTimeout（函数，延迟时间）

  延迟设定的时候后调用函数。

  时间单位：毫秒，省略时默认为0毫秒；

  浏览器中经常需要多个定时器，为了区分，一般把定时器赋值给一个变量，以起一个名字。

  setTimeout也称为回调函数callback。想click点击事件里的函数也叫回调函数。

  • 清除定时器：clearTimeout (定时器)

• setInterval（函数，间隔时间）

  每隔设定的时间调用以此函数。

  • clearInterval（定时器）

DOM对象

Document Object Model，文档对象模型，JS将标记语言的各个组成部分封装为对象，分别有：Document，Element，Attribute，Text，Comment。

JS通过DOM，能对HTML进行操作：改变内容、样式，对事件做出反应，添加和删除元素。

• Document：整个文档对象

• Element：元素对象

  • 获取：使用document对象的方法获取（document.方法 或者 document对象.方法）

    • getElementByld

      根据id属性值取，返回一个Element对象

    • getElementsByTagName

      根据标签名称获取，返回Element对象数组

    • getElementsByName

      根据name属性值获取，返回Element对象数组

    • getElementsByClassName

      根据class属性值获取，返回Element对象数组

    • querySelector(选择器)

      返回指定选择器的第一个元素对象，选择器需要加符号以区分： .类名 #id 标签名

    • querySelectorAll (选择器)

      返回指定选择器的所有元素对象集合，选择器需要加符号以区分

    • 获取特殊元素：bod y，html

      document.body ：返回body元素对象

      document.documentElement：返回html元素对象

• Attribute：属性对象

• Text：文本对象

• Comment：注释对象

---

改变元素内容

• 普通盒子修改，如div标签：

  • 对象.innerHTML

    可以识别html标签，保留空格和换行

    var div = document.querySelector('div');
    div.innerHTML = //修改后的内容或对象
    

  • 对象.innerText

    不识别html标签，去除空格和换行

• 表单内容修改：

  对象**.value** = 修改内容

• 修改样式：

  • 行内样式操作（适合样式较少的情况）：

    对象.style.样式/属性 = 修改内容

  • 类名样式操作（适合样式复杂的情况）：

    对象.className = 新类名（修改内容放在新类名里）

    <head>
        <style>
            .change{
                background-color: red;
                font-size: 25px;
            }
        </style>
    </head>
    <script>
        对象.className = 'change';//覆盖原先的类名
        对象.className = '原类名 新类名';//不会覆盖原先的类名，存在多类名
    </script>
    

• 禁用元素：

  对象.disabled = true；

---

元素操作

获取属性值:

• element.属性 —— 获取内置属性值
• element.getAttribute(‘属性’) —— 主要获取自定义的属性

设置属性值：

• element.属性 = ‘值’ —— 设置内置属性
• element.setAttribute(‘属性’，‘值’) —— 主要设置自定义属性

移除属性：

• element.removeAttribute(‘属性’)

H5规定：

设置自定义属性要以 data- 开头，并且赋值。如：

<div data-index = "1"></div>

element.setAttribute('data-index', 2);

H5新增的获取自定义属性的方法（ie11后支持）：

使用dataset存放所有以data开头的自定义属性，通过dataset时属性名不用加 data- 前缀。

• element.dataset.属性名
• element.dataset[‘属性名’]

如果自定义属性中由多个 - 链接的单词，获取时使用驼峰命名法，去掉 -

阻止链接跳转：添加 javascript：；

<a href='javascript:;'> </a>

---

节点操作

节点：网页中所有内容都是节点 (标签，属性，文本，注释)，在DOM中，节点用node表示。

基本属性：

• nodeType（节点类型）

  • 元素节点 nodeType为1
  • 属性节点 nodeType为2
  • 文本节点 nodeType为3（文本节点包括文字，空格，换行等）

  实际主要操作的是元素节点

• nodeName（节点名称）

• nodeValue（节点值）

节点层级：

• 父节点： 节点 .parenNode

  返回指定节点的最近的父 节点，如果没有父节点则返回null

• 子节点：节点 .childNodes

  返回指定节点的子节点的集合，包括元素节点，文本节点等，需要再处理后才能得到元素节点，较麻烦，一般不使用。

  可以使用 节点 .children 来获取子元素节点，虽然不是标准规定，但各浏览器2都支持。

  首个字节点和最后一个子节点：

  • 节点 .children[0] ——首个
  • 节点.children[节点.children.lenght - 1] ——最后一个

• 下一个兄弟元素节点： 节点. nextElementSibling

  上一个兄弟元素节点： 节点. previousElementSibling

创建节点： document.createElement(‘新节点名’)

添加节点：

• 父节点.appendChild(新建的节点) —— 添加到父节点的子节点列表的末尾
• 父节点 .insertBefore(‘新建的节点’，指定节点) ——添加到指定子节点的前面

删除节点： 父节点.removeChild(要删除的子节点)

复制节点： 节点.cloneNode() ——如果括号里参数为空 或者为 false，则为浅拷贝，即只复制节点本身，不复制里面的内容；括号里为true，则为深拷贝，复制标签和里面的子节点。

---

事件

事件：HTML事件是发生在HTML元素上的"事情”。比如：按钮被点击，鼠标移动到元素之上，按下键盘按键。

对象.事件 = function(){
    事件处理
}

组成

• **事件源：**事件被触发的对象
• **事件类型：**如何触发/发生了什么事件
• **事件处理程序：**通过函数赋值的方式进行

事件监听：JavaScript可以在事件被侦测到时执行代码。

事件绑定

新方式——事件监听方式：

对象. addEventListener(事件类型，处理函数，flag）

事件监听方式：

事件类型 为字符串形式，如：click，mouseover，注意不再带on

第三个参数flag，如果为false或省略，那么事件流处于冒泡阶段，如果为true，则为捕获阶段。实际开发中，很少使用事件捕获，不过有些事件没有冒泡，如：onblur，onfocus，onmouseenter，onmouseleave

传统方式：

• 方法一：通过HTML标签中的事件属性进行绑定（耦合）

  <input type = "button" onclick='on()' >
  function on(){
  	alet("我被点了");
  }    
  

• 方法二：通过DOM元素属性绑定（推荐）

  <input type = "button" id = "btn" >
  
  const btn = document.querySelector("#btn");
  
  btn.addEventListener('click', () => alert("我被点了"));
  

删除事件

事件监听方式：对象. removeEventListener(事件类型，处理函数)

传统方式：对象. 事件类型 = null

DOM事件流

分为3个阶段：

1. 捕获阶段：由最顶层节点开始，然后逐级向下传播到最具体(最小)的元素。
2. 当前目标阶段
3. 冒泡阶段：事件开始由最具体(最小)的元素接收，然后逐级传播到最顶层阶段。

事件对象

event 是一个事件对象，写在监听函数的小括号里当形参，事件对象只有事件发生了才会存在，是系统自动创建的，不需要传递实参进去。

事件对象：是事件的一系列相关数据的集合，跟事件相关的，如鼠标点击里就包含了鼠标坐标之类的信息。

事件对象可以自己命名，如event，evt，e

属性方法

属性/方法	说明
e.target	返回触发事件的对象
e.type	返回事件的类型
e.preventDefault()	阻止事件的默认行为，如阻止链接跳转
e.stopPropagation()	阻止冒泡

在监听函数中，e.target指触发事件的对象，this指绑定该事件的对象。

阻止事件冒泡

事件对象.stopPropagation()

低版本浏览器：window.event.cancelBubble = true;

if(e && e.stopPropagation){//浏览器是否认识新特性
 e.stopPropagation();
}else{
 window.event.cancelBubble = true;
}

阻止默认行为

阻止默认行为： event.preventDefault()

事件委托

对于子节点要设置相同的事件监听，可以不用在子节点上单独设置，而是设置在其父节点上，然后利用冒泡原理影响设置的每个子节点。

作用：只操作了以此DOM，提供了程序的性能。

如果只想操作触发事件的那个子节点，可以利用e.target 得到触发事件的那个子节点

常见事件

使用传统方式window. 时，事件前要加on，如onclick，onfocus

click：对象被点击

focus：鼠标获得焦点

blur：鼠标失去焦点

mouseover：鼠标经过

mouseout：鼠标离开

mousemove：鼠标移动触发

mouseup：鼠标弹起触发

mousedown：鼠标按下触发

submit：确认按钮被点击（常用于v 表单提交）

change：域的内容被改变

keydown：某个按键被按下

keyup：某个按键被松开

keypress：某个按键被按下，但不识别ctrl shift等功能键

mouseover 和 mouseenter 区别：

mouseover 经过自身盒子会触发，经过子盒子还会触发；

mouseenter 只会经过自身盒子触发

---

鼠标事件对象

属性：

e.clientX / e.clientY —— 鼠标相对于浏览器窗口的X/Y坐标

e.pageX / e.pageY —— 鼠标相对于文档页面的X/Y坐标

e.screenX / e.screenY —— 鼠标相对于电脑屏幕的X/Y坐标

禁止鼠标右键菜单

document.addEventListener('contextmenu',function(e){
 e.preventDefault();
})

禁止鼠标选中

document.addEventListener('selectstart',function(e){
 e.preventDefault();
})

键盘事件对象

属性：

keyCode：识别按下的是哪个键

事件keyup和keydown不区分字母大小写，keypress区分大小写

例子：按s键，使搜索框获得焦点

var search = document.queryAelector('input');
document.addEventListener('keyup',function(e){
	if(e.keyCode === 83){
     search.focus();
 }	
})

网页特效

元素偏移量 offset

• 获得元素距离带有定位父元素的位置

• 获得元素自身的大小（宽度高度）

  注意：返回的数值都不带单位

常用属性：

offset系列属性	作用
element.offsetParent	返回该元素带有定位的父元素，如果父级都无定位则返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度，返回数值不带 单位

offset与style的区别：

offset	style
offset可以得到任意样式表中的样式值	style只能得到行内样式表中的样式值
offset系列获得的数值是没有单位的	style.width获得的是带有单位的字符串
offsetWidth包含padding+border+width	style.width获得不包含padding和border的值
offsetWidth等属性是只读属性，只能获取不能赋值	style.width是可读写属性，可以获取也可以赋值

所以，想要获取元素大小位置，用offset更合适；想要给元素更改值，则需要用stye改变

元素可视区 client

client翻译：客户端。可以动态获取元素可视区的相关信息

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

元素滚动 scroll

scroll翻译：滚动。可以动态的得到该元素的大小，滚动距离等

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight	返回自身实际的高度，不含边框，返回数值不带单位

常用方法：window.scroll(x, y) 滚动窗口至文档的特定位置

offset系列经常用于获得元素位置 offsetLeft offsetTop

client 经常用于获取元素大小 clientWidth clientHeight

scroll 经常用于获取滚动距离 scrallTop scrollLeft

注意：页面滚动的距离通过 window.pagexoffset 获得

动画函数封装

动画实现原理：通过定时器setInterval() 不断移动盒子位置。

步骤：

1. 获取盒子当前位置
2. 让盒子在当前位置加上一个移动距离
3. 利用定时器不断重复操作，并加一个结束的条件

注意 此元素需要添加定位，才能使用element.style.left

如：

//将移动效果封装成函数，调用即可
//obj是传入的对象，target是要移动的距离，callback为传入的其他函数，用于实现额外的效果
function animate(obj, target，callback){
    //防止同一对象同时开启多个定时器(只保留当前一个定时器执行)
    clearInterval(obj.timer); 	
    //将timer作为传入对象obj的属性，可以避免开辟过多空间
    obj.timer = setInterval(function(){
        var step = (target - obj.offsetLeft) / 10;	//实现缓动效果，速度从快到慢
        step = step > 0 ? Math.ceil(step) : Math.floor(step); //去掉小数点
    if(obj.offsetLeft >= target){
        cleatInterval(obj.timer); 	//停止定时器
        callback && callback;	//如果回调函数存在就执行回调函数
    }
    //步长值变化
    obj.style.left = obj.offsetLeft + s + 'px';},15);
}

var div = document.querySelector('div');
animate(div, 300);

因为动画函数经常被使用，所以可以将其单独封装到一个JS文件里面，使用的时候应用这个JS文件即可。

节流阀

作用：当上一个函数动画内容执行完毕，再取执行下一个函数动画，让事件不会连续过快触发。

思想：利用回调函数，添加一个变量来控制，所著函数和解锁函数。

var flag = true;
if(flag){
    flag = false;
    ......   //动画执行
    flag = true;
}

本地存储

本地存储特性：

• 数据存储在用户浏览器中
• 设置、读取方便、甚至页面刷新不丢失数据
• 容量较大，sessionStorage约5M、localStorage约20M
• 只能存储字符串，可以将对象 JSON.stringify0编码后存储

---

sessionStorage

特点：

• 生命周期为关闭浏览器窗口
• 在同一个窗口页面下数据可以共享
• 以键值对的形式存储使用

方法：

• 存储数据：

  sessionStorage.setItem（key, value）

• 获取数据：

  sessionStorage.getItem（key）

• 删除数据：

  sessionStorage.removeItem（key）

• 删除所有数据

  sessionStorage.clear()

---

localStorage

特点：

• 生命周期永久生效，除非手动删除否则关闭页面也会存在
• 可以多窗口（页面）共享（同一浏览器可以共享）
• 以键值对的形式存储使用

方法：

• 存储数据：

  localStorage.setItem（key, value）

• 获取数据：

  localStorage.getItem（key）

• 删除数据：

  localStorage.removeItem（key）

• 删除所有数据

  localStorage.clear()

jQuery

jQuery是JavaScript库，封装了JS中的DOM操作。

j 指 JavaScript，query 查询

优点：

• 轻量级。核心文件才几十kb,不会影响页面加截速度
• 跨浏览器兼容。基本兼容了现在主流的浏览器
• 链式编程、隐式迭代
• 对事件、样式、动画支持，大大简化了DOM操作
• 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
• 免费、开源

入口函数

等DOM接口渲染完毕即可执行内部代码，相当于原生js中的DOMContentLoaded

$(function(){
	....  //此处是页面DOM加载完成的入口
});

对象

顶级对象 $

$是jQuery的别称，在代码中也可以使用jQuery代替$。

$是jQuery的顶级对象，相当于原生JS中的window。把元素利用$包装成jQuery对象，就可以调用jQuery的方法。

jQuery对象 和 DOM对象

用原生JS获取过来的对象就是DOM对象。

用 jQuery 方式获取过来的对象是jQuery)对象。本质：通过$把DOM元素进行了包装

DOM对象只能使用原生的 JS 属性和方法

jQuery对象只能使用 jQuery 方法

//DOM对象
var myDiv = document.querySelect("div");
//jQuery对象
$("div");

jQuery对象 和 DOM对象 相互转换：

//DOM对象转换为jQuery对象
$(DOM对象)
//jQuery对象转换为DOM对象
$("div")[index]
$("div").get(index)

常用API

选择器操作

选择器： $(“选择器”)

**筛选选择器： **

语法	用法	说明
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(2)”)	获取的li元素中，选择下标为2的元素
:odd	$(“li:odd”)	获取的li元素中，选择下标为奇数的元素
:even	$(“li:even”)	获取的li元素中，选择下标为偶数的元素

筛选方法：

语法	用法	说明
parent()	$(“li”).parent()	查找父级
children(selector)	$(“ul”).children(“li”)	相当于$(“u1>li”),最近一级（亲儿子）
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”), 后代选择器
siblings(selector)	$(“.first”).siblings(“li”);	查找兄弟节点，不包括自己本身
nextAll ([expr])	$(“.first”).nextAll ()	查找当前元素之后所有的同辈元素
prevAll (class)	$(“.last”).prevAll ()	查找当前元素之前所有的同辈元素
hasClass (class)	$(‘div’).hasclass(“protected”)	检查当前的元素是否含有某个特定的类，如果有，则返回true
eq (index)	$(“li”).eq(2);	相当于$(“1i:eq(2)”), index从0开始

jQuery使用排他思想：

//例：思想点击 背景颜色跟随
$(function(){
    //隐式迭代，给所有按钮绑定点击事件
    $("button").click(function(){
        //当前元素设置背景颜色
        $(this).css("background","red");
        //其余兄弟去掉背景颜色
        $(this).siblings("button").css("background","");
    });
})

链式编程：

//原来写法
$("div").css("color","red");
$("div").siblings().css("color","");
//链式编程写法，节省代码量，比较简洁
$("div").css("color","red").siblings().css("color","");

---

样式操作

设置样式：

• $(“选择器”).css(“属性”) —— 只写属性，则返回属性值

• $(“选择器”).css(“属性”,“值”) ——设置一组样式，属性必须加引号，值如果是数字可以不用单位和引号

• $(“选择器”).css( {color: “red”, font-size: 20}); ——参数是对象形式，可以设置多组样式，属性和值用冒号隔开，属性可以不加引号

DOM元素设置样式需要显式迭代，而jQuery对象是以伪数组形式存储，它在设置样式时会自动遍历内部DOM元素，即隐式迭代。

类操作：

• 添加类：$(“div”).addClass(“类名”)
• 删除类：$(“div”).removeClass(“类名”)
• 切换类：$(“div”).toggleClass(“类名”)

可以先为某个类设置样式，需要时再通过类操作来修改样式。

---

效果

显示隐藏

• **show **( [speed], [easing], [fn] ) —— 显示

  参数都可以省略，则无动画直接显示

  speed：预定字符串(“slow”,“normal”,“fast”)或动画时长的毫秒值；

  easing：用来指定切换效果，默认”swing“，可选参数“linear”；

  fn：回调函数，在动画完成时执行，每个元素执行一次。

  （一般都是不加参数直接显示隐藏的）

• **hide **( [speed, [easing], [fn]] ) —— 隐藏

• toggle ( [speed, [easing], [fn]] ) —— 切换显示和隐藏

滑动

• slideDown ( [speed, [easing], [fn]] ) —— 下拉
• slideUp ( [speed, [easing], [fn]] ) —— 上拉
• slideToggle ( [speed, [easing], [fn]] ) ——切换上下拉动

淡入淡出

• fadeIn ( [speed, [easing], [fn]] ) —— 淡入

• fadeOut ( [speed, [easing], [fn]] ) —— 淡出

• fadeToggle ( [speed, [easing], [fn]] ) —— 切换淡入淡出

• fadeTo ( [speed, opacity, [easing], [fn]] ) —— 修改透明度

  speed速度为动画时长，必须写，

  opacity透明度必须写，

• animate ( params, [speed], [easing], [fn] ) —— 自定义动画

  params： 样式选择，以对象形式传递，必须写

  $(function(
  	{$("button").click(function({
    		$("div").antimate({
          	legt:200
     		});
  	})
  })
  

事件切换

hover 是鼠标经过和离开的复合写法

//两个函数分别是鼠标经过和鼠标离开时分别调用的函数
$(".nav>li").hover(function(){},function(){})
//只写一个函数，则鼠标经过和离开都会调用这个函数
$(".nav>li").hover(function(){
    $(this).children("ul").slideToggle();
})

停止排队

动画效果一旦触发就会执行，如果多次触发，就会使多个动画同时执行。

停止排队：stop() —— 用于停止动画效果。可以写到动画的前面，相当于停止上一次的动画。

---

属性操作

获取元素固有属性的值：prop(“属性名”)

设置固有属性值： prop(“属性”，“属性值”)

元素固有属性就是元素本身自带的属性，如< a >里的href，< input > 里的type。

获取元素自定义属性的值：attr(“属性”)

设置元素自定义属性的值：attr(“属性”，“属性值”)

类似原生的getAttribute()和setAttribute()

数据缓存data()：可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除。

获取：data(“属性”) ；设置：data(“属性”,“值”)

---

内容文本值

普通元素内容：html()，相当于原生innerHTML。

获取：html()

设置：html(“内容”)

普通元素文本内容：text()，相当于原生innerText。

获取：text()

设置：text(“内容”)

表单的值 val() ，相当于原生value

获取：val()

设置：val(“内容”)

---

元素操作

jQuery隐式迭代是对同一类元素做同样的操作，如果想要给同一元素做不同操作，仍需要遍历。

$("div".each(function(index,domEle){...}))

index是每个元素的索引号，domEle是每个DOM元素对象，注意不是jquery对象，要用jquery方法，需要进行对象转化。

$.each(object, function(index, element){})

object可以是任何对象，所以$each主要用于数据处理，如数组，对象；

尺寸、位置操作

尺寸：

语法	说明
width() / height()	只算width / height
innerWidth() / innerHeight()	包含padding
outerWidth() / outerHeight()	包含padding、border
outerWidth(true) / outerHeight(true)	包含padding、borde、margin

位置：

offset()

设置或返回距离文档的位置(偏移)，跟父级没有关系。offset().left 获取距离文档左侧的距离， offset().top 获取距离文档顶部的距离

• scrollTop()

设置或返回被卷去的头部。

同样有 scrollTop().left 和 scrollTop().top 两个属性。

事件

注册事件

element.事件(function(){})
//例:
$("div").click(function(){
    ...
})

事件处理

on() 绑定事件：匹配元素上绑定一个或多个事件的处理函数。

element.on(events, [selector], fn)

events：一个或多个用空格分割的事件类型；

selector：元素的子元素选择器；

fn：回调函数；

//绑定多个事件，多个处理程序
$("div").on({
    mouseenter: function(){
        $(this).css("background", "skyblue");
    },
    click: function(){
        $(this).css("background","purple")
    }
});
//如果绑定事件的处理程序相同:
$("div").in("mouseover mouseout", function(){
    $(this).toggleClass("current");
});

//可以实现事件委派，把原来加给子元素的事件绑定到父元素上。
//点击事件绑定在ul上，但触发对象是li
$("ul").on("click","li",function(){
    ....
})

//on()可以给动态生成的元素绑定事件,而原来的 $("").事件(fn)不能给动态创建的元素绑定事件
$("ul").on("click","li",function(){
    ....
})
var li = $("<li>我是后来创建的</li>");
$("ul").append(li);

one() 绑定事件，只触发一次 ：

$("div").one("click",function(){
    ...
})

off() 解绑事件 ：

$("div").off();  //移除div身上的所有事件
$("div").off("click");   //移除div身上的点击事件
("ul").off("click","li");	//接触li的事件委托

**trigger() 自动触发事件 ** ：

element.trigger("type");
//如：
$("p").on("click", function(){
    ...
});
....    
$("p").trigger("click"); //此时自动触发事件

//触发事件，但不触发元素的默认行为
element.triggerHandler("type");

数据可视化

ECharts是一个使用JavaScript实现的开源可视化库，兼容大部分浏览器，底层依赖矢量图形库ZRender。