JavaScript
JavaScript
- JavaScript 一种直译式脚本语言，是一种动态类型、弱类型、 基于原型的语言，内置支持类型
- JavaScript 是当今最流行的脚本语言，我们生活中看到的网页 和基于 html5 的 app 里面的交互逻辑都是由 JavaScript 驱动的
- 一句话概括就是 JavaScript 是一种运行在浏览器中的解释型的编程语言
JS 的组成
- ECMAScript : 解释器、翻译者 (描述了该语言的语法和基本对 象) 它是 JavaScript 的标准。
- DOM : Document Object Model 文档对象模型 W3C 是 DOM 的标准。
- BOM : Browser Object Model 浏览器对象模型 缺乏标准。
演示
注册事件、找到目标元素、修改 CSS 属性
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5 <style type="text/css">
6 #tim{
7 width: 200px;
8 height: 200px;
9 border:1px solid black;
10 margin:0 auto;
11 }
12 </style>
13</head>
14<body>
15 <div id="tim" onmouseover="tim.style.background='red'" onmouseout="tim.style.background='white'"></div>
16</body>
17</html>
获取标签元素
1# 返回这个id名的元素
2 document.getElementById('ID名')
3
4# 返回所有这个标 签名的元素的集合
5 document.getElementsByTagName('div')
6
7# 返回所有这个 class的元素的集合
8 document.getElementsByClassName('className')
9
10# 返回第一个
11 document.querySelector("css任意选择器")
12
13# 返回符合的所有
14 document.querySelectorAll("css任意选择器")
15
16# 获取HTML元素
17 document.documentElement
18
19# 获取body元素
20 document.body
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5 <style type="text/css">
6 #tim{
7 width: 200px;
8 height: 200px;
9 border:1px solid black;
10 margin:0 auto;
11 }
12 </style>
13</head>
14<body>
15 <div id="tim" class="xiaod"></div>
16 <script type="text/javascript">
17 //返回这个id名的元素
18 // document.getElementById('tim').style.background='red'
19 //返回所有这个标签名的元素的集合 获取到的是一个集合，拥有数组的特性
20 // document.getElementsByTagName('div')[0].style.background='black'
21 //通过classname获取到的也是一个集合
22 // document.getElementsByClassName('xiaod')[0].style.background='yellow'
23 //document.querySelector("css任意选择器") 返回第一个
24 // document.querySelector("div").style.background='black'
25 //document.querySelectorAll("css任意选择器") 返回符合的所有
26 document.querySelectorAll("div")[0].style.background='red'
27 </script>
28</body>
29</html>
JS 编写的位置
- 一般情况下 JS 是写在页面的任何位置都可以的，需要 script 标签包着，但是别写在 HTML 标签外
- 最常见的是写在 head 标签内部和 body 内部
- 写在 head 标签内需要写上 window.onload 包着，要不然会报错,因为执行 js 时页面标签还没加载
1* window.onload的作用是当页面加载完成后自动触发事件
2* ⼀个页面应该只有⼀个window.onload事件，因为如果写多个的话会覆盖只执行最后一个
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5 <style type="text/css">
6 #tim{
7 width: 200px;
8 height: 200px;
9 border:1px solid black;
10 margin:0 auto;
11 }
12 </style>
13 <script type="text/javascript" src="js代码应该写在哪里.js"></script>
14</head>
15<body>
16 <div id="tim" class="xiaod"></div>
17<!-- <script type="text/javascript">
18 //window.onload的作用是当页面加载完成后自动触发事件
19 window.onload=function(){
20 document.getElementsByTagName('div')[0].style.background='red'
21 alert(1)
22 }
23 window.onload=function(){
24 document.getElementsByTagName('div')[0].style.background='black'
25 alert(2)
26 }
27 window.onload=function(){
28 document.getElementsByTagName('div')[0].style.background='yellow'
29 alert(3)
30 }
31 </script> -->
32</body>
33</html>
详细分析 JS 输出及调试方式
1# 弹窗型输出
2 alert('输出内容')
3
4# 浏览器调试窗口输出
5 console.log('输出内容')
6
7# innerHTML、innerText（innerText不会解析HTML标签，而是原样输出）
8 document.getElementById('id名').innerHTML='内容'
9
10# document.wirte("输出内容")
11 输出内容会清空原有的 html 再生成一个新的 html
12 document.getElementById('rewrite').onclick=function(){
13 document.write('我是新的html了，原本的已经被我替代掉')
14 }
JS 常见事件
JS 事件就是我们的行为能被检测到，且触发相对应的函数（to do sth）
1onclick 鼠标点击事件
2onmouseover 鼠标被移到某元素之上
3onmouseout 鼠标从某元素上面移开
4onchange 元素值改变，一般用在表单元素上
5onkeydown 用户按下键盘按键
6onfocus 元素获得焦点
7onblur 元素失去焦点
8window.onload 页面加载完成
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5 <style type="text/css">
6 #tim{
7 width:300px;
8 height: 300px;
9 background:red;
10 margin: 0 auto;
11 }
12
13 </style>
14</head>
15<body>
16 <div id="tim"></div>
17 <input type="" name="" id="xd">
18 <script type="text/javascript">
19 //点击事件
20 document.getElementById("tim").onclick=function(){
21 //函数里面写我们要做的事情
22 alert('我是被点击了')
23 }
24 //鼠标移入事件
25 document.getElementById("tim").onmouseover=function(){
26 console.log('鼠标移入我的范围内了')
27 }
28 //鼠标移出事件
29 document.getElementById("tim").onmouseout=function(){
30 console.log('鼠标移出我的范围内了')
31 }
32 //元素改变事件，一般用在表单元素
33 document.getElementById('xd').onchange=function(){
34 console.log(document.getElementById('xd').value)
35 }
36 //键盘事件，按下键盘事件
37 document.getElementById('xd').onkeydown=function(){
38 console.log('键盘按下了')
39 }
40 //获取焦点事件
41 document.getElementById('xd').onfocus=function(){
42 console.log('我获取到焦点了')
43 }
44 //失去焦点事件
45 document.getElementById('xd').onblur=function(){
46 console.log('我失去焦点了')
47 }
48 </script>
49</body>
50</html>
手动操作 DIV 的任意样式
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5 <style type="text/css">
6
7 #tim{
8 width: 100px;
9 height: 100px;
10 background: red;
11 margin: 0 auto;
12 }
13 </style>
14</head>
15<body>
16 <button id="taller">增高</button>
17 <button id="longer">增长</button>
18 <button id="changebg">改变背景颜色</button>
19 <div id="tim" ></div>
20 <script type="text/javascript">
21
22 window.onload=function(){
23 //给我们的增高按钮添加点击事件
24 document.getElementById('taller').onclick=function(){
25 //获取id名为tim的div
26 document.getElementById('tim').style.height='300px'
27 }
28 //给我们的增高长按钮添加点击事件
29 document.getElementById('longer').onclick=function(){
30 //获取id名为tim的div
31 document.getElementById('tim').style.width='300px'
32 }
33 //给我们的改变背景颜色按钮添加点击事件
34 document.getElementById('changebg').onclick=function(){
35 //获取id名为tim的div
36 document.getElementById('tim').style.background='black'
37 }
38 }
39 </script>
40</body>
41</html>
数据类型
基础数据类型
1* 字符串 string
2* 数字(整型浮点型) number
3* 布尔 boolean
4* 空对象 null console.log(typeof(null)) => null
5* undefined 未定义
复杂数据类型
1* 数组 Array
2* 对象 Object console.log(typeof({})) =>
检测数据类型的两种基本方法
1* typeof //复杂数据类型、引用数据类型 在 typeof() 下都显示为 object
2* Object.prototype.toString.call('数据') //鉴别复杂数据类型、引用数据类型
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7 <script type="text/javascript">
8 //字符串
9 console.log(typeof('string'))
10 //数字
11 console.log(typeof(234))
12 //布尔值
13 console.log(typeof(true))
14 //null
15 console.log(typeof(null))
16 //undefined
17 console.log(typeof(undefined))
18 //object
19 // console.log(typeof({}))
20 console.log(Object.prototype.toString.call({})) /* [object Object] */
21 //数组
22 // console.log(typeof([]))
23 console.log(Object.prototype.toString.call([])) /* [object Array] */
24 </script>
25</body>
26</html>
变量
如何定义变量
var name
命名规则
首字母(a-zA-Z)或下划线()或美元符($)开头，不能是数字
后面的可以是字母(a-zA-Z)或下划线()或美元符($)或数字，并且是区分大小写的。
区分大小写的意思是 var name 和 var Name 是定义两个不同的变量。
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5 <style type="text/css">
6
7 #tim{
8 width: 100px;
9 height: 100px;
10 background: red;
11 margin: 0 auto;
12 }
13 </style>
14</head>
15<body>
16 <button id="taller">增高</button>
17 <button id="longer">增长</button>
18 <button id="changebg">改变背景颜色</button>
19 <div id="tim" ></div>
20 <script type="text/javascript">
21
22 //定义变量 用var
23 console.log('我是'+a)
24 var a='tim'
25
26 //上面两行代码等同于下面的代码 因为js执行是先定义再执行 变量提升问题
27 var a
28 console.log('我是'+a)
29 a='tim'
30
31 //变量的使用方式
32 window.onload=function(){
33 var oDiv=document.getElementById('tim')
34 //给我们的增高按钮添加点击事件
35 document.getElementById('taller').onclick=function(){
36 //获取id名为tim的div
37 oDiv.style.height='300px'
38 }
39 //给我们的增高长按钮添加点击事件
40 document.getElementById('longer').onclick=function(){
41 //获取id名为tim的div
42 oDiv.style.width='300px'
43 }
44 //给我们的改变背景颜色按钮添加点击事件
45 document.getElementById('changebg').onclick=function(){
46 //获取id名为tim的div
47 oDiv.style.background='black'
48 }
49 }
50 </script>
51</body>
52</html>
数据类型之间的转换
显式转换（强制类型转换）
1Number()
2parseInt()
3pareFloat()
4String()
5toString()
6Boolean()
隐式转换
1* 操作符或者语句进行运算时
2* if while 比较里面也会进行隐式转换
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7 <script type="text/javascript">
8 var a='123'
9 var b='abc'
10 //强制类型转换(显式转换)
11 console.log(a,"类型："+typeof(a))
12 console.log(a,"用number进行类型转换之后的类型："+typeof(Number(a)))
13
14 //用number转换一个是字符串类型，但内容不是数字
15 console.log(b,"类型："+typeof(b))
16 console.log(b,Number(b),"用number进行类型转换之后的类型："+typeof(Number(b)))
17 //NaN是not a number的缩写 意思是 不是一个数字
18
19 var c='3.1415926abc'
20 console.log(c,'整形转换：'+parseInt(c))
21 console.log(c,'浮点型转换:'+parseFloat(c))
22
23 var d=123456
24 console.log(d,String(d),typeof(String(d)))
25 console.log(d,d.toString(),typeof(d.toString()))
26
27 console.log(d,Boolean(d))
28
29 //隐式转换
30 //数字跟数字相加，不用转换类型
31 // var sum
32 // sum=1+2
33 // console.log('sum='+sum)
34 //数字跟字符串相加 发生类型转换，会变成字符串之间的拼接，就是把我们的数字1变成了字符串‘1’
35 var sum
36 sum=1+'2'
37 console.log('sum='+sum,typeof(sum))
38 if(12=='12'){
39 console.log('判断成立了，我被执行了')
40 }
41 </script>
42</body>
43</html>
复杂数据类型的创建
数组创建
1# 直接创建
2 var arr=[] //空数组
3 var arr=[1,2] //创建有内容的数组
4# 利用构造函数创建
5 var arr1 = new Array(); //创建空数组
6 var arr2 = new Array(10); //创建一个长度为10的数组
7 var arr3 = new Array(5,4,3,2,1) //创建数组并初始化
对象创建
1# 直接创建
2 var obj={} //创建空对象
3 var obj1={a:1,b:2} //创建有内容的对象
4# 利用构造函数创建
5 var obj = new Object()
函数
函数出现的意义：方便我们封装、调用代码
函数的定义
1function fun(){console.log(1)}
2var fun = function(){console.log(2)}
3var fun = new Function(console.log(3)) //这种方式函数会自调用（函数自己完成调用动作）
函数的调用
1fun()
示例
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5 <style type="text/css">
6
7 #tim{
8 width: 100px;
9 height: 100px;
10 background: red;
11 margin: 0 auto;
12 }
13 </style>
14</head>
15<body>
16 <button id="taller" onClick="taller()">增高</button>
17 <button id="longer" onClick="longer()">增长</button>
18 <button id="changebg" onClick="changebg()">改变背景颜色</button>
19 <div id="tim" ></div>
20 <script type="text/javascript">
21 //获取到要改变的div id为tim
22 var oDiv=document.getElementById('tim')
23 //写点击增高的按钮时需要调用的函数
24 var taller=function(){
25 oDiv.style.height='300px'
26 }
27 //写点击增长的按钮时需要调用的函数
28 function longer(){
29 oDiv.style.width='300px'
30 }
31 //写点击改变背景颜色的按钮时需要调用的函数
32 function changebg(){
33 oDiv.style.background='black'
34 }
35
36 // window.onload=function(){
37 // //给我们的增高按钮添加点击事件
38 // document.getElementById('taller').onclick=function(){
39 // //获取id名为tim的div
40 // document.getElementById('tim').style.height='300px'
41 // }
42 // //给我们的增高长按钮添加点击事件
43 // document.getElementById('longer').onclick=function(){
44 // //获取id名为tim的div
45 // document.getElementById('tim').style.width='300px'
46 // }
47 // //给我们的改变背景颜色按钮添加点击事件
48 // document.getElementById('changebg').onclick=function(){
49 // //获取id名为tim的div
50 // document.getElementById('tim').style.background='black'
51 // }
52 // }
53 </script>
54</body>
55</html>
命名规范
1# 变量
2 小驼峰命名法：第一个单词以小写字母开始，第二个单词开始以后的每个单词的首字母都大写 var tim
3
4# 函数名
5 小驼峰命名法 function getUserInfo(){}
6
7# 常量
8 全大写单词间用下划线隔开(_) var CH_NAME='tim'
函数的几种写法
1function fun(){} //最常见的声明
2(function fun(){}) //函数表达式声明方式，只在括号内起作用，外部无法访问
3(function(){}) //匿名函数表达式，外部无法访问
4new Function() //通过构造器方式，因为麻烦，很少用
5export default function(){} //es6的向外暴露方法
6()=>{} //箭头函数，es6
函数的传参、取参
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5 <style type="text/css">
6
7 #tim{
8 width: 100px;
9 height: 100px;
10 background: red;
11 margin: 0 auto;
12 }
13 </style>
14</head>
15<body>
16 <button id="taller" onClick="change('height','300px')">增高</button>
17 <button id="longer" onClick="change('width','300px')">增长</button>
18 <button id="changebg" onClick="change('background','black')">改变背景颜色</button>
19 <div id="tim" ></div>
20 <script type="text/javascript">
21 //获取到要改变的div id为tim
22 var oDiv=document.getElementById('tim')
23 //写点击增高的按钮时需要调用的函数
24 // var taller=function(){
25 // oDiv.style.height='300px'
26 // }
27 // //写点击增长的按钮时需要调用的函数
28 // function longer(){
29 // oDiv.style.width='300px'
30 // }
31 // //写点击改变背景颜色的按钮时需要调用的函数
32 // function changebg(){
33 // oDiv.style.background='black'
34 // }
35
36 function change(styleattr,value){
37 //两种写法是一样的，但是如果需要传入变量就需要用第二种
38 // oDiv.style.styleattr=value
39 oDiv.style[styleattr]=value
40 }
41 </script>
42</body>
43</html>
不定参数（arguments）
不确定传入的参数有多少个。
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7
8 <script type="text/javascript">
9 //利用arguments来编写一个求和函数
10 function sum(){
11 var sum=0
12 for(var i=0;i<arguments.length;i++){
13 sum=sum+arguments[i]
14 }
15 console.log(sum)
16 }
17
18sum(1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10,1,2,3,10)
19
20 </script>
21</body>
22</html>
变量作用域
1# 局部变量
2 只在定义的函数内部使用
3
4# 全局变量
5 可以在整个script作用域内都可以使用
6
7# 作用域链
8 只有在自己当前的小作用域内找不到才会向父级作用域寻找，直到找不到为止（存在同名变量时，在当前作用域内局部变量会覆盖全局变量，局部变量优先级比较高）
闭包
可以调用函数内部变量的函数。
1 //闭包
2 function a(){
3 var tim=10
4 var b=function(){
5 console.log(tim)
6 }
7 return b
8 }
9 //a方法返回b方法，再执行：b方法可以调用函数内部变量tim，避免造成全局变量的污染
10 a()()
函数的返回值
1* 一个函数可以有多个return，但是第一个return代表函数结束运行。
2* 不写return，函数默认返回undefined
3* 想返回多个值，可以把多个值封装成：数组、或是json对象
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7 <script type="text/javascript">
8 //函数不写返回值会默认返回undefined
9 function fun(){
10 var tim=10
11 var xd=20
12 var obj={'tim':tim,'xd':xd}
13 return obj
14
15 }
16 console.log(fun())
17 </script>
18</body>
19</html>
流程控制
- if else if else
- b==='10'?console.log('成立'):console.log('不成立')
- switch case
示例
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7
8 <script type="text/javascript">
9 var a=9
10 //判断 一个=表示赋值 两个==是判断左右两边是否相等 还会进行类型的转换
11 //三个===是全等的类型，意思是不会转换类型 ，要判断===左右两边的类型和值都相等才会返回true
12 // if(a==10){
13 // console.log('a等于10是成立的')
14 // }else{
15 // console.log('a等于10是不成立的')
16 // }
17
18 // if(a=='11'){
19 // console.log('两个==会转换类型')
20 // }else if(a==10){
21 // console.log('a等于10是成立的')
22 // }else{
23 // console.log('a不等于10 也不等于11')
24 // }
25
26 //全等是三个=== ，需要左右两边的类型和值都一样才返回true
27 // if(a==='9'){
28 // console.log('现在的是指和类型都相等')
29 // }else{
30 // console.log('现在的是指和类型不全相等，有可能是值不相等，有可能是类型不相等，也有可能两者都不相等')
31 // }
32
33 //三目运算 条件？'成立执行冒号前面的': '不成立执行冒号后面的'
34 // var b=10
35 // b==='10'?console.log('成立'):console.log('不成立')
36
37 //switch case 的高级用法 这里case 是 === 全等的判断
38
39 function fun(type){
40 switch(type){
41 case 0:
42 console.log('传入的条件是0');
43 break;
44 case 1:
45 console.log('传入的条件是1');
46 break;
47 case 2:
48 console.log('传入的条件是2');
49 break;
50 case 3:
51 console.log('传入的条件是3');
52 break;
53 case 4:
54 console.log('传入的条件是4');
55 break;
56 default:
57 console.log('我是默认的，就是上述条件都不成立就输出我');
58 break;
59 }
60 }
61 fun(0)
62 </script>
63</body>
64</html>
循环
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7 <script type="text/javascript">
8 //第一种 while循环
9 //1、创建循环变量
10 // var tim =10
11 // //2、判断循环条件
12 // while(tim>=5){
13 // //3、判断成立就执行循环体里面的操作
14 // console.log(tim)
15 // //4、更新循环变量
16 // tim=tim-1
17 // // tim--
18 // }
19
20 // do while 循环
21 //创建循环变量
22 // var tim = -1;
23 // //即使初始条件不成立，循环体内容还是会执行一次
24 // do{
25 // //执行循环体内容
26 // console.log(tim);//10 9 8 7 6 5 4 3 2 1 0
27 // //更新循环变量
28 // tim--;
29 // }while(tim>=0);//判断循环条件
30
31 // console.log(tim);//-1
32
33 //for循环 一般拿来循环数组
34 // var arr=['篮球','足球','乒乓球','羽毛球','排球']
35 // console.log(arr.length,arr[4])
36 // for(var i=0;i<arr.length;i++){
37 // console.log(arr[i])
38 // }
39
40 //for in 一般拿来循环对象
41 var obj={a:'篮球',b:'足球',c:'乒乓球'}
42 // console.log(obj.b)
43 for(o in obj){
44 // console.log(o)
45 console.log(obj[o])
46 }
47 </script>
48</body>
49</html>
break、continue
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7 <script type="text/javascript">
8 //break用于循环体内部跳出循环
9 // for(var i=0;i<=5;i++){
10 // if(i==3){
11 // break;
12 // }
13 // console.log(i)
14 // }
15 // console.log(i,'我是循环体外的i，不是循环体内部的内容')
16
17 //continue用于中断符合判断条件的当前迭代
18 for(var i=0;i<=5;i++){
19 if(i==3){
20 continue;
21 }
22 console.log(i)
23 }
24 console.log(i,'我是循环体外的i，不是循环体内部的内容')
25 </script>
26</body>
27</html>
真假
- 真：除了假都是真
- 假：false 数字 0 空字符串 null undefined NAN
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7 <script type="text/javascript">
8 //判断里面的真假
9 // 假: false 数字0 空字符串 null undefined NAN
10 var a={a:'1'}
11 var key=true
12 if(key){
13 console.log('我是真的')
14 }else{
15 console.log('我是假的')
16 }
17 </script>
18</body>
19</html>
逻辑运算符
- && 全部真才返回真
- || 一个真就返回真
- ! 真变成假，假变成真
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7 <script type="text/javascript">
8 //判断里面的真假
9 // 假: false 数字0 空字符串 null undefined NAN
10 //与 && 意思是判断条件都需要为真才返回真
11 var a=false
12 var b=undefined
13 var c=null
14 // if( a && b && c){
15 // console.log('a和b都是真的')
16 // }else{
17 // console.log('a和b不全是真')
18 // }
19
20 //或 || 只需要有一个条件成立为真 就返回真
21
22 // if( a || b || c){
23 // console.log('a或b或c有一个为真')
24 // }else{
25 // console.log('三者都为假')
26 // }
27
28 // ！ 非 真变成假 假变成真
29
30 if(!a){
31 console.log('a是假')
32 }
33 </script>
34</body>
35</html>
JSON
JavaScript Object Notation 的缩写，它是一种数据交换格式。
JSON 基于文本，轻量，用于前后端交换数据。
JSON 是 ECMA 的一个标准，几乎所有的变成语言都有解析 JSON 的库。
1# JSON VS XML
2* 可读写 XML更加规范
3* 便捷性 JSON更加便捷
4* 轻量级 意味着数据交换速率快
JSON 对象
1{"name":"JSON对象","address":"广东省广州市","age":28}
JSON 数据
1[
2 {"name":"JSON数组1","address":"广东省广州市","age":28},
3 {"name":"JSON数组1","address":"广东省广州市","age":28},
4]
JSON 字符串
1'{"name":"JSON数组1","address":"广东省广州市","age":28}'
演示：JSON 对象、JSON 数组、JSON 字符串
1 <script type="text/javascript">
2 //json对象
3 var jsonObj={"name":"tim","age":28}
4 console.log(jsonObj,typeof(jsonObj))
5
6 //json数组
7 var jsonarr=[
8 {"name":"tim","age":28},
9 {"name":"tim","age":28},
10 "json字符串"
11 ]
12 console.log(jsonarr,typeof(jsonarr))
13
14 //json字符串
15 var jsonString='{"name":"tim","age":28}'
16 console.log(jsonString,typeof(jsonString))
17 </script>
JSON 字符解析
1# 序列化 JSON.parse()
2 把 js 对象转成 json 字符串
3
4# 反序列化 JSON.stringify()
5 把 JSON 字符串转成 js 对象
JSON 对象操作
1# 增
2 obj.xxx='xxx'
3
4# 删
5 delete obj.xxx
6
7# 改
8 obj.xxx='xxx'
9
10# 查
11 obj.xxx
1 <script type="text/javascript">
2 //对于json对象的操作
3 var obj={"name":"tim","age":18}
4 // console.log(obj)
5
6 //对对象增加一个属性
7 obj.height="180cm"
8
9 //删除一个属性 删除年龄
10 delete obj.age
11
12 //更改一个属性的值 把名字改成tom
13 obj.name="tom"
14
15 //查找名字是什么 obj.name
16 console.log(obj.name)
17
18 var arr=[
19 {"name":"tim","age":18},
20 {"name":"tony","age":20},
21 {"name":"jerry","age":23}
22 ]
23
24 for(var i=0;i<arr.length;i++){
25 console.log(arr[i])
26 }
27 </script>
数组操作
1* shift() 删除数组第一个元素，并返回被删除的元素
2* pop() 删除数组最后一个元素，并返回被删除的元素
3* unshift() 向数组第一个元素前面添加一个元素，返回数组长度
4* push() 向数组最后一个元素后面添加一个元素，返回数组长度
5* concat() 合并两个或多个数组
6* join(separator) 数组转字符串，可传入一个参数用于分隔元素
7* split(separator,howmany) 字符串转数组，可传入两个参数
8 separator：必选，实现方法为将字符串按某个字符切割成若干个字符串，并以数组形式返回
9 howmany：可选，该参数可指定返回的数组的最大长度，如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。
10* reverse() 翻转数组，颠倒数组中元素的顺序
11* sort(fucntion) 数组排序，传入一个参数function
12 function 规定排序顺序，必须函数。如果不传入函数则按照字符编码顺序排序
13* slice(start,end) 返回数据中被选定的元素，不包含下标end的元素
14 start 必选，从何处开始选取。如果是负数，则从数组未必开始算起，-1代表最后一个元素。
15 end 可选，规定从何处结束选取。如果不指定则从start开始截取到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组为不开始算起的元素。
16* splice(index,howmany,x,y,z) 可以对数组进行增加，删除，更改的操作，会返回被删除的元素。
17 index 必选，整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
18 howmany 必选，要删除的元素数目，如果设置为0，则不会删除元素.
19 x,y,z 可选项，为添加的新元素
20
21* indexOf(item,start) 返回元素的索引，即下标，如果没有查找的元素就返回-1
22 item 必选，查找的元素
23 start 可选，整数，规定在数组中开始检索的位置，如不选则为第一个开始检索
1 <script type="text/javascript">
2 //创建数组
3 var arr=["篮球","足球","乒乓球","羽毛球"]
4 //删除数组第一个元素 返回值为被删除的元素
5 // var first=arr.shift()
6 // console.log(first)
7 // console.log(arr)
8
9 //删除数组最后一个元素 返回值为被删除的元素
10 // var end=arr.pop()
11 // console.log(end)
12 // console.log(arr)
13
14 //向我们的数组的第一个元素前面添加元素，返回添加后数组长度
15 // var arrLength=arr.unshift('排球')
16 // console.log(arrLength)
17 // console.log(arr)
18
19 //向我们数组最后一个元素后面添加元素，返回添加后数组长度
20 var arrLength=arr.push("排球")
21 console.log(arrLength)
22 console.log(arr)
23
24
25 //创建数组
26 //合并数组，可合并两个或多个
27 // var arr=["篮球"]
28 // var arr1=["足球"]
29 // var arr2=["乒乓球"]
30 // console.log(arr.concat(arr1,arr2))
31 // console.log(arr)
32 //数组转字符串
33 // var arr=["篮球","足球","乒乓球"]
34 // console.log(arr.join(''))
35 //字符串转数组
36 // var string1="abcdecefg"
37 // console.log(string1.split('c',3))
38 //翻转数组，颠倒数组中元素的顺序
39 var arr=[1,2,3,4,5]
40 console.log(arr.reverse())
41
42 // var arr=[1,3,5,4,2,6,7,7,9,11,8]
43 //数组排序 有正向和反向（从大到小或从小到大） 不传参数就是按照字符编码排序
44 //sort函数接收的参数也是一个函数,里面接收两个参数，
45 // 返回第一个参数减第二个参数(a-b)即按照从小到大排序，
46 // 返回第二个参数减第一个参数(b-a)即按照从大到小排序
47 // console.log(arr.sort(function(a,b){
48 // return b-a
49 // }))
50
51 //选定数组里面指定下标的元素 slice
52 // var a=arr.slice(6,8)
53 // console.log(a)
54
55 //可以对数组进行增删改的方法 splice
56 // var arr=["篮球","足球"]
57 // //利用splice方法增加
58 // // arr.splice(0,0,"排球")
59 // // console.log(arr)
60 // //利用splice方法删除
61 // // arr.splice(0,1)
62 // // console.log(arr)
63 // //利用splice方法进行更改元素
64 // arr.splice(0,1,"排球","乒乓球")
65 // console.log(arr)
66
67 //查找元素索引，即下标 indexOf
68 var arr=["篮球","足球","乒乓球","排球"]
69 console.log(arr.indexOf("棒球"))
70
71 </script>
定时器
1# 间隔性定时器 setInterval(fun,time)
2* fun为执行的函数
3* time为间隔执行的时间，单位为毫秒，每过time时间就执行一次fun里面的代码
4
5# 延时性定时器 setTimeout(fun,time)
6* fun为执行的函数
7* time为延时执行时间，单位为毫秒，经过time时间后执行fun代码，只执行一次
1 <script type="text/javascript">
2 //延时型的定时器 setTimeout 只会执行一次
3 // setTimeout(function(){
4 // alert("我是延时三秒执行的弹窗")
5 // },3000)
6
7 //间隔型定时器 setInterval 每间隔time的时间就会执行一次
8 setInterval(function(){
9 console.log(1)
10 },2000)
11 </script>
清除定时器
1* clearInterval 清除间隔性定时器
2* clearTimeout 清除延时性定时器
1 <script type="text/javascript">
2 //清除定时器
3 //创建间隔性定时器
4 var timer1=setInterval(function(){
5 console.log("我是间隔型定时器")
6 // clearTimeout(timer2)
7 },1000)
8 //创建延时性的定时器
9 var timer2=setTimeout(function(){
10 console.log("我是延时性定时器")
11 clearInterval(timer1)
12 },3000)
13 </script>
延时性定时器演示
延时提示框
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5 <style type="text/css">
6 #div1{
7 float: left;
8 width: 50px;
9 height: 50px;
10 background: red;
11 margin-right: 30px;
12 }
13 #div2{
14 float: left;
15 width: 200px;
16 height: 200px;
17 background: black;
18 display: none;
19 }
20
21 </style>
22</head>
23<body>
24 <div id="div1"></div>
25 <div id="div2"></div>
26 <script type="text/javascript">
27
28 window.onload=function(){
29 var oDiv1=document.getElementById('div1')
30 var oDiv2=document.getElementById('div2')
31 var timer=null
32 //给div2添加鼠标移入事件
33 oDiv2.onmouseover=oDiv1.onmouseover=function(){
34 //改变div2的display
35 clearTimeout(timer)
36 oDiv2.style.display='block'
37 }
38 //给div2添加鼠标移出事件
39 oDiv2.onmouseout=oDiv1.onmouseout=function(){
40 //改变div2的display
41 timer=setTimeout(function(){
42 oDiv2.style.display='none'
43 },500)
44 }
45 </script>
46</body>
47</html>
间隔性定时器演示
无缝滚动图片展示
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5 <style type="text/css">
6 *{margin:0;padding: 0;}
7 #banner{
8 position: relative;
9 width: 600px;
10 height: 150px;
11 margin:100px auto;
12 overflow: hidden;
13 }
14 #banner ul{
15 position: absolute;
16 left: 0;
17 top:0;
18 }
19 #banner li{
20 float: left;
21 width: 200px;
22 height: 150px;
23 list-style: none;
24 }
25 #banner li img{
26 width: 200px;
27 height: 150px;
28 }
29 </style>
30</head>
31<body>
32 <div id="banner">
33 <ul>
34 <li><img src="img/1.png"></li>
35 <li><img src="img/2.png"></li>
36 <li><img src="img/3.png"></li>
37 <li><img src="img/4.png"></li>
38 <li><img src="img/5.png"></li>
39 <li><img src="img/6.png"></li>
40 </ul>
41 </div>
42 <script type="text/javascript">
43 window.onload=function(){
44 var oDiv=document.getElementById('banner')
45 var oUl=oDiv.getElementsByTagName('ul')[0]
46 var oLi=oUl.getElementsByTagName('li')
47 var timer=null
48 //拼接多一份ul里面的内容 这两种写法相等
49 // oUl.innerHTML=oUl.innerHTML+oUl.innerHTML
50 oUl.innerHTML+=oUl.innerHTML
51 //计算ul的宽度
52 oUl.style.width=oLi[0].offsetWidth*oLi.length+'px'
53 function moving(){
54 if(oUl.offsetLeft<-oUl.offsetWidth/2){
55 oUl.style.left='0'
56 }
57 oUl.style.left=oUl.offsetLeft-2+'px'
58 }
59 timer=setInterval(moving,30)
60 oDiv.onmouseover=function(){
61 clearInterval(timer)
62 }
63 oDiv.onmouseout=function(){
64 timer=setInterval(moving,30)
65 }
66 }
67 </script>
68</body>
69</html>
DOM 操作
节点获取
1# 获取子节点
2childNodes 获取子节点（包括换行和空格）
3children children不会返回文本节点，返回的是元素节点
4
5# 获取父节点
6parentNode 获取的是当前元素的直接父元素，w3c的标准
7parentElement 获取的是当前元素的直接父元素，ie的标准
8offsetParent 获取离当前节点最近的一个有定位的父节点或祖先节点，如果没有即为获取body
9
10# 判断节点的类型
11nodeType 1为元素节点 3为文本节点（即空格或换行，字符）
12
13# 获取第一个子节点
14firstChild 有可能会匹配到时空白或换行的节点信息
15firstElementChild 不会匹配空白或换行的节点信息（获取到的是元素节点，不会获取到文本节点）
16
17# 获取最后一个子节点
18lastChild 有可能会匹配到时空白或换行的节点信息
19lastElementChild 不会匹配空白或换行的节点信息（获取到的是元素节点，不会获取到文本节点）
20
21# 获取上一个兄弟节点
22previousSibling 有可能会匹配到空白或换行的节点信息
23previousElementSibling 不会匹配空白或换行的节点信息（获取到的是元素节点，不会获取到文本节点）
24
25# 获取下一个兄弟节点
26nextSibling 有可能会匹配到时空白或换行的节点信息
27nextElementSibling 不会匹配空白或换行的节点信息（获取到的是元素的即诶但，不会获取到文本节点）
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5 <style type="text/css">
6 #bigdiv{
7 position: relative;
8 }
9 </style>
10</head>
11<body>
12 <div id="bigdiv">
13 <div id="div1">
14 <div>1111</div>
15 <div>2222</div>
16 </div>
17 </div>
18
19 <script type="text/javascript">
20 var oDiv=document.getElementById('div1')
21
22 //childNodes获取子节点会获取到文本节点和元素节点
23 var div1=oDiv.childNodes
24 console.log(oDiv.childNodes)
25
26 //这种只获取元素节点，不会获取到文本节点 children
27 console.log(oDiv.children)
28
29 //获取父节点
30 // console.log(oDiv.parentNode)
31 // console.log(oDiv.parentElement)
32 // console.log(oDiv.offsetParent)
33
34 //判断节点类型 1是元素节点 3是文本节点
35 console.log(div1[0].nodeType,'我是第一个，我是文本节点')
36 console.log(div1[1].nodeType,'我是第二个，我是元素节点')
37 </script>
38</body>
39</html>
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7 <div id="div1">
8 <div>我是第一个</div>
9 <div>我是第二个</div>
10 <div id="three">我是第三个</div>
11 <div>我是第四个</div>
12 <div>我是第五个</div>
13 </div>
14
15 <script type="text/javascript">
16 var oDiv=document.getElementById('div1')
17 var three=document.getElementById('three')
18 //获取第一个子节点
19 // console.log(oDiv.firstChild)
20 // console.log(oDiv.firstElementChild)
21 //获取最后一个子节点
22 // console.log(oDiv.lastElementChild)
23 //获取上一个兄弟节点
24 console.log(three.previousElementSibling)
25 //获取下一个兄弟节点
26 console.log(three.nextElementSibling)
27 </script>
28</body>
29</html>
元素属性操作的三种方式
1# 第一种
2 oDiv.style.display="block";
3
4# 第二种
5 oDiv.style["display"]="block";
6
7# 第三种(DOM方式)
8 获取 getAttribute(属性名字)
9 设置 setAttribute(属性名称，值)
10 删除 removeAttribute(属性名称)
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7 <div id="div1" value="2">123</div>
8
9 <script type="text/javascript">
10
11 var oDiv=document.getElementById('div1')
12
13 //第一种
14 // oDiv.style.color='red'
15 //第二种
16 oDiv.style['color']='red'
17 //第三种 dom的方式
18
19 //获取属性
20 console.log("我是改变前的id："+oDiv.getAttribute('id'))
21 console.log("我是改变前的value："+oDiv.getAttribute('value'))
22
23 //改变属性
24 oDiv.setAttribute('id','tim')
25 oDiv.setAttribute('value','100')
26 console.log("我是改变后的id："+oDiv.getAttribute('id'))
27 console.log("我是改变后的value："+oDiv.getAttribute('value'))
28
29 //删除属性 removeAttribute
30 oDiv.removeAttribute('value')
31
32 </script>
33</body>
34</html>
DOM 节点的创建、插入、删除
1# 创建并添加DOM元素
2document.createElement('标签名') 创建一个DOM节点
3appendChild(DOM节点) 为某个DOM添加一个子节点，在最后面添加
4
5# 插入元素
6insertBefore(节点，原有节点) 在已有元素前插入
7
8# 删除DOM元素
9removeChild(节点) 删除一个节点
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7 <ul id="ullist">
8 <li>我是第一个</li>
9 <li>我是第二个</li>
10 <li>我是第三个</li>
11 <li>我是第四个</li>
12 </ul>
13 <script type="text/javascript">
14 var oUl=document.getElementById('ullist')
15 var oLi=oUl.getElementsByTagName('li')
16
17 //创建dom节点
18 var li=document.createElement('li')
19 li.innerHTML='我是新创建的li'
20 // oUl.appendChild(li)
21 //我们要在指定的位置插入新创建的li
22 // oUl.insertBefore(li,oLi[2])
23
24 //删除节点
25 oUl.removeChild(oLi[3])
26 </script>
27</body>
28</html>
文档碎片
减少页面渲染 DOM 的次数
DOM 操作表格元素
早期提供了更便捷的方法。
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7 <table id="table1" border="1">
8 <thead>
9 <td>姓名</td>
10 <td>年龄</td>
11 <td>身高</td>
12 </thead>
13 <tbody>
14 <tr>
15 <td>张三</td>
16 <td>18</td>
17 <td>180cm</td>
18 </tr>
19 <tr>
20 <td>李四</td>
21 <td>19</td>
22 <td>190cm</td>
23 </tr>
24 <tr>
25 <td>王五</td>
26 <td>20</td>
27 <td>170cm</td>
28 </tr>
29 </tbody>
30 </table>
31
32 <script type="text/javascript">
33
34 var table1=document.getElementById('table1')
35 // alert(table1.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[0].innerHTML)
36 // alert(table1.tBodies[0].rows[0].cells[0].innerHTML)
37 table1.tBodies[0].rows[0].cells[0].innerHTML='tim'
38
39 </script>
40</body>
41</html>
运动框架
运动基础演示
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5 <style type="text/css">
6
7 *{
8 margin:0;
9 padding:0;
10 }
11 #div1{
12 position: absolute;
13 left: 0;
14 top:50px;
15 width: 200px;
16 height: 200px;
17 background:red;
18 }
19 </style>
20</head>
21<body>
22 <button onclick="moving()">开始运动</button>
23 <div id="div1"></div>
24
25 <script type="text/javascript">
26 var oDiv=document.getElementById('div1')
27 var timer=null
28 function moving(){
29 timer=setInterval(function(){
30 if(oDiv.offsetLeft>=300){
31 clearInterval(timer)/*清楚定时器就会停止运动*/
32 }else{
33 oDiv.style.left=oDiv.offsetLeft+1+'px'
34 }
35
36 },30)
37 }
38
39 </script>
40</body>
41</html>
单物体运动框架
封装好一个方法，让外部传入目的地的值，即让物体停下来的值。
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5 <style type="text/css">
6
7 *{
8 margin:0;
9 padding:0;
10 }
11 #div1{
12 position: absolute;
13 left: 0;
14 top:50px;
15 width: 200px;
16 height: 200px;
17 background:red;
18 }
19 </style>
20</head>
21<body>
22 <button onclick="moving(500)">开始运动</button>
23 <div id="div1"></div>
24
25 <script type="text/javascript">
26 var oDiv=document.getElementById('div1')
27 var timer=null
28 function moving(target){
29 var speed=0
30 if(oDiv.offsetLeft<target){
31 speed=7
32 }else{
33 speed=-7
34 }
35 timer=setInterval(function(){
36 if(Math.abs(target-oDiv.offsetLeft)<=7){
37 oDiv.style.left=target+'px'
38 clearInterval(timer)
39 }else{
40 oDiv.style.left=oDiv.offsetLeft+speed+'px'
41 }
42
43 },30)
44 }
45
46 </script>
47</body>
48</html>
多物体运动框架
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5 <style type="text/css">
6 #div1,div{
7 float: left;
8 width: 100px;
9 height: 100px;
10 background: red;
11 margin-right: 20px;
12 }
13 </style>
14</head>
15<body>
16 <div id="div1"></div>
17 <div></div>
18 <div></div>
19 <script type="text/javascript">
20 var oDiv=document.getElementsByTagName('div')
21 // var timer=null
22
23 for(var i=0;i<oDiv.length;i++){
24 //添加鼠标移入事件
25 oDiv[i].timer=null
26 oDiv[i].onmouseover=function(){
27 moving(this,400)
28 }
29 //添加鼠标移出事件
30 oDiv[i].onmouseout=function(){
31 moving(this,100)
32 }
33 }
34
35 // //添加鼠标移入事件
36 // oDiv.onmouseover=function(){
37 // moving(400)
38 // }
39 // //添加鼠标移出事件
40 // oDiv.onmouseout=function(){
41 // moving(100)
42 // }
43 function moving(obj,target){
44 clearInterval(obj.timer)
45 obj.timer=setInterval(function(){
46 var speed=(target-obj.offsetHeight)/8
47 //做向上取整和向下取整处理
48 speed=speed>0?Math.ceil(speed):Math.floor(speed)
49 if(obj.offsetHeight==target){
50 clearInterval(obj.timer)
51 }else{
52 obj.style.height=obj.offsetHeight+speed+'px'
53 }
54 },30)
55 }
56 </script>
57
58</body>
59</html>
改变单一任意值运动框架
在多物体运动框架的前提下增加一个修改样式的参数
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5 <style type="text/css">
6 #div1,div{
7 float: left;
8 width: 100px;
9 height: 100px;
10 background: red;
11 margin-right: 20px;
12 }
13 </style>
14</head>
15<body>
16 <div id="div1" style="color:black;">111</div>
17 <div id="div2"></div>
18 <div id="div3"></div>
19 <script type="text/javascript">
20 var oDiv1=document.getElementById('div1')
21 var oDiv2=document.getElementById('div2')
22 var oDiv3=document.getElementById('div3')
23
24 //给div1添加鼠标移入事件
25
26 oDiv1.onmouseover=function(){
27 moving(this,'fontSize',50)
28 }
29 //给div1添加鼠标移出事件
30 oDiv1.onmouseout=function(){
31 moving(this,'fontSize',12)
32 }
33 //给div2添加鼠标移入事件
34
35 oDiv2.onmouseover=function(){
36 moving(this,'width',400)
37 }
38 //给div2添加鼠标移出事件
39 oDiv2.onmouseout=function(){
40 moving(this,'width',100)
41 }
42 //给div3添加鼠标移入事件
43
44 oDiv3.onmouseover=function(){
45 moving(this,'height',400)
46 }
47 //给div3添加鼠标移出事件
48 oDiv3.onmouseout=function(){
49 moving(this,'height',100)
50 }
51 //oDiv1.style.xxx只能获取行内样式(内联样式)
52 // console.log(oDiv1.style.color,'颜色')
53 // console.log(oDiv1.style.width,'宽度')
54 //获取内部样式（写在style标签内部的） 外部样式（通过link引入的样式表）
55 //在谷歌浏览器获取内部和外部样式getComputedStyle
56 // console.log(getComputedStyle(oDiv1,false)['width'])
57 //在ie浏览器下就是用oDiv1.currentStyle
58
59 //写一个方法获取我们需要改变的样式的值
60 function getStyleValue(obj,attr){
61 if(obj.currentStyle){
62 return obj.currentStyle[attr]
63 }else{
64 return getComputedStyle(obj,false)[attr]
65 }
66 }
67
68 console.log(getStyleValue(oDiv1,'width'))
69
70 function moving(obj,attr,target){
71 clearInterval(obj.timer)
72 obj.timer=setInterval(function(){
73 //定义一个变量接收我们需要改变的样式的值
74 var currvalue=parseInt(getStyleValue(obj,attr))
75 var speed=(target-currvalue)/8
76 //做向上取整和向下取整处理
77 speed=speed>0?Math.ceil(speed):Math.floor(speed)
78 if(currvalue==target){
79 clearInterval(obj.timer)
80 }else{
81 obj.style[attr]=currvalue+speed+'px'
82 }
83 },30)
84 }
85
86 </script>
87</body>
88</html>
链式运动框架
在改变单一任意值运动框架添加一个回调函数参数
链式运动顾名思义就是先运动完一个值，再运动另一个。
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5 <style type="text/css">
6 #div1,div{
7 float: left;
8 width: 100px;
9 height: 100px;
10 background: red;
11 margin-right: 20px;
12 }
13 </style>
14</head>
15<body>
16 <div id="div1">点击我展开</div>
17 <div id="div2"></div>
18 <div id="div3">点击我收起</div>
19 <script type="text/javascript">
20 var oDiv1=document.getElementById('div1')
21 var oDiv2=document.getElementById('div2')
22 var oDiv3=document.getElementById('div3')
23
24
25 oDiv1.onclick=function(){
26 moving(oDiv2,'width',400,function(){
27 moving(oDiv2,'height',400)
28 })
29 }
30 oDiv3.onclick=function(){
31 moving(oDiv2,'height',100,function(){
32 moving(oDiv2,'width',100)
33 })
34 }
35 //写一个方法获取我们需要改变的样式的值
36 function getStyleValue(obj,attr){
37 if(obj.currentStyle){
38 return obj.currentStyle[attr]
39 }else{
40 return getComputedStyle(obj,false)[attr]
41 }
42 }
43
44 console.log(getStyleValue(oDiv1,'width'))
45
46 function moving(obj,attr,target,callbackfun){
47 clearInterval(obj.timer)
48 obj.timer=setInterval(function(){
49 //定义一个变量接收我们需要改变的样式的值
50 var currvalue=parseInt(getStyleValue(obj,attr))
51 var speed=(target-currvalue)/8
52 //做向上取整和向下取整处理
53 speed=speed>0?Math.ceil(speed):Math.floor(speed)
54 if(currvalue==target){
55 clearInterval(obj.timer)
56 if(callbackfun){
57 callbackfun()
58 }
59 }else{
60 obj.style[attr]=currvalue+speed+'px'
61 }
62 },30)
63 }
64
65 </script>
66</body>
67</html>
改变多值运动框架
同时改变多个需要改变的样式值。
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5 <style type="text/css">
6 #div1,div{
7 float: left;
8 width: 100px;
9 height: 100px;
10 background: red;
11 margin-right: 20px;
12 }
13 </style>
14</head>
15<body>
16 <div id="div1">点击我展开</div>
17 <div id="div2"></div>
18 <div id="div3">点击我收起</div>
19 <script type="text/javascript">
20 var oDiv1=document.getElementById('div1')
21 var oDiv2=document.getElementById('div2')
22 var oDiv3=document.getElementById('div3')
23
24
25 oDiv1.onclick=function(){
26 moving(oDiv2,{"width":400,"height":400})
27 }
28 oDiv3.onclick=function(){
29 moving(oDiv2,{"width":100,"height":100})
30 }
31 //写一个方法获取我们需要改变的样式的值
32 function getStyleValue(obj,attr){
33 if(obj.currentStyle){
34 return obj.currentStyle[attr]
35 }else{
36 return getComputedStyle(obj,false)[attr]
37 }
38 }
39
40 console.log(getStyleValue(oDiv1,'width'))
41
42 function moving(obj,json){
43 clearInterval(obj.timer)
44 obj.timer=setInterval(function(){
45 //判断所有运动是否已完成
46 var beclear=true
47 for(var attr in json){
48 //定义一个变量接收我们需要改变的样式的值
49 var currvalue=parseInt(getStyleValue(obj,attr))
50 var speed=(json[attr]-currvalue)/8
51 //做向上取整和向下取整处理
52 speed=speed>0?Math.ceil(speed):Math.floor(speed)
53 if(currvalue!=json[attr]){
54 beclear=false
55 obj.style[attr]=currvalue+speed+'px'
56 }
57 }
58 if(beclear){
59 clearInterval(obj.timer)
60 }
61 },30)
62 }
63
64 </script>
65</body>
66</html>
完美运动框架
基于多值运动框架，在运动完之后传入回调函数。
改变透明度 opacity 需要做特殊处理
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5 <style type="text/css">
6 #div1,div{
7 float: left;
8 width: 100px;
9 height: 100px;
10 background: red;
11 margin-right: 20px;
12 }
13 #div2{
14 /*兼容ie的写法*/
15 filter: alpha(opacity:30);
16 /*兼容非ie浏览器的写法*/
17 opacity:0.3;
18 }
19 </style>
20</head>
21<body>
22 <div id="div1">点击我展开</div>
23 <div id="div2"></div>
24 <div id="div3">点击我收起</div>
25 <script type="text/javascript">
26 var oDiv1=document.getElementById('div1')
27 var oDiv2=document.getElementById('div2')
28 var oDiv3=document.getElementById('div3')
29
30
31 oDiv1.onclick=function(){
32 moving(oDiv2,{"width":400,"height":400,"opacity":100},function(){
33 alert('我已经执行完了')
34 })
35 }
36 oDiv3.onclick=function(){
37 moving(oDiv2,{"width":100,"height":100,"opacity":30})
38 }
39 //写一个方法获取我们需要改变的样式的值
40 function getStyleValue(obj,attr){
41 if(obj.currentStyle){
42 return obj.currentStyle[attr]
43 }else{
44 return getComputedStyle(obj,false)[attr]
45 }
46 }
47
48 console.log(getStyleValue(oDiv1,'width'))
49
50 function moving(obj,json,callbackfun){
51 clearInterval(obj.timer)
52 obj.timer=setInterval(function(){
53 //判断所有运动是否已完成
54 var beclear=true
55 for(var attr in json){
56 //定义一个变量接收我们需要改变的样式的值
57 var currvalue=0
58 if(attr=='opacity'){
59 // 为什么使用四舍五入的取整方式，是因为计算机对于计算存在一些bug，大家可以尝试输出 0.7*100就明白了
60 currvalue=Math.round(getStyleValue(obj,attr)*100)
61 }else{
62 currvalue=parseInt(getStyleValue(obj,attr))
63 }
64
65 var speed=(json[attr]-currvalue)/8
66 //做向上取整和向下取整处理
67 speed=speed>0?Math.ceil(speed):Math.floor(speed)
68
69 if(currvalue!=json[attr]){
70 beclear=false
71 if(attr=='opacity'){
72 obj.style.filter='alpha(opacity:'+(currvalue+speed)+')'
73 obj.style.opacity=(currvalue+speed)/100
74 }else{
75 obj.style[attr]=currvalue+speed+'px'
76 }
77
78 }
79 }
80 if(beclear){
81 clearInterval(obj.timer)
82 if(callbackfun){
83 callbackfun()
84 }
85 }
86 },30)
87 }
88
89 </script>
90</body>
91</html>
事件
事件对象
用来获取事件的详细信息，例如：鼠标位置、键盘按键。
IE 下可以直接使用 event、非 IE 需要传入事件对象参数。
事件冒泡
&esmp;事件流会从 DOM 节点最里面的事件往最外面执行。
取消事件冒泡兼容写法
1* 获取事件对象(兼容写法) var oEvent=ev || event;
2* 取消事件冒泡 oEvent.cancelBubble=true;
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5 <style type="text/css">
6 #div1{
7 width: 300px;
8 height: 300px;
9 background: pink;
10 }
11 #div2{
12 width: 150px;
13 height: 150px;
14 background: black;
15 color: #fff;
16 }
17 </style>
18</head>
19<body>
20 <div id="div1" >
21 <div id="div2"></div>
22 </div>
23
24 <script type="text/javascript">
25 var oDiv1=document.getElementById('div1')
26 var oDiv2=document.getElementById('div2')
27 // //通过事件对象获取鼠标移动时的坐标位置
28 // document.onmousemove=function(ev){
29 // //定义获取事件对象兼容（获取鼠标移动的横坐标、纵坐标）
30 // var oEvent=ev||event
31 // oDiv2.innerHTML=oEvent.clientX+','+oEvent.clientY
32 // }
33 // //通过事件对象获取键盘按键的值
34 // document.onkeydown=function(ev){
35 // //定义获取事件对象兼容
36 // var oEvent=ev||event
37 // //键盘每个键对应的值可以百度搜索一下有一个表的 keyCode就是键的值
38 // oDiv2.innerHTML=oEvent.keyCode
39 // }
40 oDiv1.onclick=function(){
41 console.log("你点击了div1")
42 }
43 oDiv2.onclick=function(ev){
44 console.log("你点击了div2")
45 //阻止冒泡
46 var oEvent=ev||event
47 oEvent.cancelBubble=true
48 console.log(oEvent)
49 }
50
51 </script>
52</body>
53</html>
事件绑定、事件解绑、事件捕获
1# 事件绑定
2 addEventListener(事件名称，函数，捕获)，第三个参数为可选，默认为false，false 即事件流为事件冒泡。
3
4# 事件解绑
5 removeEventListener(事件名称，函数，捕获)，默认为false，false即事件流为事件冒泡
6 注意，时间绑定中传入匿名函数会导致无法进行事件解绑
7
8# 事件捕获
9 addEventListener(事件名称，函数，true) 和时间冒泡相反，如果开启了时间捕获就先执行捕获的事件，再执行当前被点击事件。
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5 <style type="text/css">
6 #div1{
7 width: 300px;
8 height: 300px;
9 background: pink;
10 }
11 #div2{
12 width: 100px;
13 height: 100px;
14 background: black;
15 }
16 </style>
17</head>
18<body>
19 <div id="div1">
20 <div id="div2"></div>
21 </div>
22
23 <script type="text/javascript">
24 var oDiv1=document.getElementById('div1')
25 var oDiv2=document.getElementById('div2')
26 //当你需要解绑的时候，事件绑定里面的函数不能是匿名函数
27 oDiv1.addEventListener('click',fun,true)
28 oDiv2.addEventListener('click',function(){
29 console.log('你点击了div2')
30 oDiv1.removeEventListener('click',fun,true)
31 },false)
32 function fun(){
33 console.log('你点击了div1')
34 }
35 </script>
36
37</body>
38</html>
键盘事件以键盘码
1单个键盘事件 document.onkeydown
2组合按键事件 document.onkeyup
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7 <script type="text/javascript">
8 //键盘事件
9 // document.onkeydown=function(event){
10 // console.log(event)
11 // if(event.keyCode==13){
12 // alert('你按下了回车键')
13 // }
14 // }
15 document.onkeyup=function(event){
16 if(event.ctrlKey && event.keyCode==67){
17 alert('你按下了crtl+c')
18 }
19 }
20 </script>
21</body>
22</html>
默认行为，阻止默认行为
在浏览器里鼠标右键事件 oncontextmenu 会默认的给我们显示一个弹窗，这些就是事件的默认行为。
a 标签跳转也是一个默认行为，我们可以通过在他的点击事件里面用 return false 来阻止默认行为。
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7 <a href="https://baidu.com" onClick="return false;">百度</a>
8 <script type="text/javascript">
9
10 document.oncontextmenu=function(){
11 //用return false来阻止默认行为
12 return false;
13 }
14
15 </script>
16</body>
17</html>
AJAX
AJAX 是什么？
AJAX 是一种无须重新加载整个网页的情况下，能够更新部分网页的技术。
AJAX 是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量的数据交换，AJAX 可以使网页实现异步更新。 这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
使用 AJAX
调用封装好的 AJAX，传入读取的文件地址，成功需要做的事情和失败需要做的事。情.ajax(url,fnSucceed,fnFailed)
npm install -g http-server 安装 http-server 启动一个本地静态服务。 启动服务使用 http-server
浏览器为了安全考虑，默认禁止跨域访问。
调用 AJAX
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7 <button id="read">读取数据</button>
8 <script type="text/javascript" src="ajax.js"></script>
9 <script type="text/javascript">
10
11 var oBtn=document.getElementById('read')
12 oBtn.onclick=function(){
13 ajax('xiaod.txt?t='+new Date().getTime(),function(res){
14 alert(res)
15 },function(){
16 alert('读取失败')
17 })
18 }
19
20
21 </script>
22</body>
23</html>
封装 AJAX
1# 创建AJAX对象
2 ie5、ie6 使用 var oAjax=new ActiveXObject("Microsoft.XMLHTTP")
3 现在浏览器使用 var oAjax=new XMLHttpRequest()
4
5# 连接服务器
6 oAjax.open('GET',url,true)
7 请求类型、文件服务器地址、异步(true) || 同步(false)
8
9# 接收数据 （onreadystatechange事件）
10readyState属性：请求状态
11 0 (为初始化) 还没有调用open()方法
12 1 (载入) 已调用send()方法
13 2 (载入完成) send()方法完成，已收到全部响应内容
14 3 (解析) 正在解析响应内容
15 4 (完成) 响应内容解析完成，可以在客户端调用了
16
17status 属性：请求结果
18 200："OK"
19 404：未找到页面
20
21请求成功返回内容
22 oAjax.responseText
1//封装ajax调用事件
2function ajax(url,fnSucceed,fnFailed){
3 //1、创建ajax对象
4 //创建ajax对象需要兼容，看看是否是ie5、6
5 if(window.XMLHttpRequest){
6 var oAjax=new XMLHttpRequest()
7 }else{
8 var oAjax=new ActiveXObject("Microsoft.XMLHTTP")
9 }
10
11 //2、连接服务器
12 //传入三个参数，第一个为请求类型、第二个给请求地址，第三个是同步(true)或异步(false)
13 oAjax.open('GET',url,true)
14
15 //3、发送请求
16 oAjax.send()
17
18 //4、接收数据
19 oAjax.onreadystatechange=function(){
20 if(oAjax.readyState==4){
21 if(oAjax.status==200){
22 fnSucceed(oAjax.responseText)
23 }else{
24 if(fnFailed){
25 fnFailed()
26 }
27 }
28 }
29 }
30}
面向对象
封装、继承、多态。
1# 对象的组成
2 方法：函数：过程、动态的
3 属性：变量：状态、静态的
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7 <script type="text/javascript">
8 // var obj1=new Object() //创建对象
9 // //定义属性
10 // obj1.name='Tim'
11 // obj1.age=29
12 // //定义方法
13 // //this指向调用此方法的对象 所以this指向obj1
14 // obj1.showName=function(){
15 // alert('我的名字'+this.name)
16 // }
17 // obj1.showAge=function(){
18 // alert('我的年龄'+this.age)
19 // }
20 // obj1.showName()
21 // obj1.showAge()
22
23 // var obj2=new Object() //创建对象
24 // //定义属性
25 // obj2.name='xiaod'
26 // obj2.age=32
27 // //定义方法
28 // //this指向调用此方法的对象 所以this指向obj1
29 // obj2.showName=function(){
30 // alert('我的名字'+this.name)
31 // }
32 // obj2.showAge=function(){
33 // alert('我的年龄'+this.age)
34 // }
35 // obj2.showName()
36 // obj2.showAge()
37
38 function createMan(name1,age1){ //构造函数
39 var obj=new Object() //创建对象
40 //定义属性
41 obj.name=name1
42 obj.age=age1
43 //定义方法
44 obj.showName=function(){
45 alert('我的名字'+this.name)
46 }
47 obj.showAge=function(){
48 alert('我的年龄'+this.age)
49 }
50 return obj
51 }
52
53 var obj1=createMan('Tim',29)
54 var obj2=createMan('xiaod',32)
55 // obj1.showName()
56 // obj2.showName()
57 alert(obj1.showName==obj2.showName) //返回false 证明每次调用构造函数的时候他都会重新创建showName和showAge这两个方法 ，这不是我们想要的
58 </script>
59</body>
60</html>
构造函数等同于我们此时只做了初始化
我们还需要用 new 来实例化我们的构造函数
1# new 帮我们做了两件事
2 帮我们创建空白对象 var this = new Object()
3 帮我们返回经过加工过的对象 obj
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7 <script type="text/javascript">
8 //工厂函数
9 //构造函数此时只是做了初始化工作
10 function createMan(name1,age1){ //构造函数
11 //添加原料
12 // var obj=new Object() //创建对象
13 //当使用new实例化的时候，其实系统帮我们做了这步
14 //var this=new Object()
15 //对我们的原料进行加工
16 //定义属性
17 this.name=name1
18 this.age=age1
19 //定义方法
20 this.showName=function(){
21 alert('我的名字'+this.name)
22 }
23 this.showAge=function(){
24 alert('我的年龄'+this.age)
25 }
26 //出厂
27 // return obj
28 }
29 //使用new进行实例化构造函数
30 //new帮我们做了两件事 1、创建原料var this=new Object() 2、return this
31 var obj1=new createMan('Tim',29)
32 var obj2=new createMan('xiaod',32)
33 obj1.showAge()
34 obj2.showAge()
35 alert(obj1.showAge==obj2.showAge)
36 //输出的还是false ，证明每次调用还是会重新生成了我们的定义的方法
37 </script>
38</body>
39</html>
原型可以避免公共方法的多次创建
protoype （原型，雏形） 这个英文在不同编程语言里面居然意思完全不一样。 在 Java 里面，原型属于一种设计模式，原型实例可以指定创建对象的种类，并且通过拷贝这些原型创建新的对象。不需要知道任何创建的细节，不调用构造函数。 属于—— 创建型。 因为 new 产生的一个对象需要非常繁琐的过程（数据准备、访问权限等），原型模式性能比直接 new 一个对象性能高(在内存中进行二进制流拷贝)。 也就是说原型是为了创建多个相同类型对象的模板，很明显是多例。 在 Java 里面 singleton(单例) 有单例模式去实现。 而在 JavaScript 中 prototype 恰恰相反，它的作用是用来避免对象中的公共方法被的多次创建，也就是说是为了让对象中的公共方法变为单例而出现的。
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7 <script type="text/javascript">
8 //工厂函数
9 //构造函数此时只是做了初始化工作
10 function createMan(name1,age1){ //构造函数
11 //添加原料
12 //当使用new实例化的时候，其实系统帮我们做了这步
13 //var this=new Object()
14 //对我们的原料进行加工
15 //定义属性
16 this.name=name1
17 this.age=age1
18
19 //出厂
20 // return obj
21 }
22 //利用原型来添加共用的方法（行为)
23 createMan.prototype.showName=function(){
24 alert('我的名字'+this.name)
25 }
26 createMan.prototype.showAge=function(){
27 alert('我的年龄'+this.age)
28 }
29
30 //使用new进行实例化构造函数
31 //new帮我们做了两件事 1、创建原料var this=new Object() 2、return this
32 var obj1=new createMan('Tim',29)
33 var obj2=new createMan('xiaod',32)
34 // obj1.showAge()
35 // obj2.showAge()
36 alert(obj1.showAge==obj2.showAge) //true
37
38 </script>
39</body>
40</html>
BOM
什么是 BOM
BOM（Browser Object Model）即浏览器对象模型，是一个与浏览器窗口进行交互的对象。
打开或关闭一个窗口
1window.open()
2window.close()
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7 <button onClick="window.open('12.1.close.html')">打开新页面</button>
8 <!-- <button onClick="openNewPage()">打开新页面</button> -->
9 <script type="text/javascript">
10
11 function openNewPage(){
12 var openPage=window.open()
13 openPage.document.write('你好，我是新打开的页面')
14 }
15
16 </script>
17</body>
18</html>
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7 <button onClick="window.close()">关闭页面</button>
8</body>
9</html>
BOM 常用属性和系统对话框
1# 获取设备及浏览器的类型型号
2 windows.navigator.userAgent
3
4# 获取当前文档地址对象
5windows.location
6 location.host 主机加端口号
7 location.hostname 主机
8 location.port 端口号
9 location.protocol 协议
10 location.pathname 路径
11 location.hash 片段标识符，可以用于保存网页状态
12 location.search 返回问号后的字段
13 location.href 可以用location.href='url'去打开页面
14
15# 系统对话框
16 警告框：alert("内容")
17 选择框：confirm("提问的内容")
18 输入框：prompt()
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7 <button onClick="window.location.href='http://www.baidu.com'">跳转到官网</button>
8 <script type="text/javascript">
9 window.onload=function(){
10 //获取设备及浏览器的类型型号
11 console.log(window.navigator.userAgent)//Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36
12 //获取当前文档地址对象
13 console.log(window.location) //Location
14
15 }
16 </script>
17</body>
18</html>
BOM 常用事件
1window.onload
2
3windows.onscroll 滚动距离
4 谷歌浏览器 document.body.scrollTop
5 IE、火狐浏览器 document.documentElement.scrollTop
6
7windows.onresize 可视区尺寸
8 document.documentElement.clientWidth
9 document.documentElement.clientHeight
1<!DOCTYPE html>
2<html>
3<head>
4 <title></title>
5</head>
6<body>
7 <div style="height:2000px;background:red;"></div>
8
9 <script type="text/javascript">
10
11 window.onload=function(){
12 //滚动事件
13 window.onscroll=function(){
14 //兼容ie 获取滚动距离
15 if(document.body.scrollTop){
16 console.log(document.body.scrollTop)
17 }else{
18 console.log(document.documentElement.scrollTop)
19 }
20 }
21
22 //监听可是窗口变化事件
23 window.onresize=function(){
24 console.log(document.documentElement.clientHeight)
25 }
26 }
27
28 </script>
29</body>
30</html>