面向对象编程
面向对象的编程，那么是更符合人类所接触的世界的逻辑思维。
将一个系统划分为各个子系统，子系统又由各个模块构成，将每个模块，系统划分为一个个对象，给这些对象赋予某些角色（属性/功能/方法）。
1 js创建对象的方式
(1) 字面量的方式
//字面量的形式
var student = {
name:"蔡徐坤",
type:"练习生",
like:"唱跳rap篮球",
rap:function(){
console.log("鸡你太美")
}
}
console.log(student)
student.rap()
优点：写起来简单方便
缺点：如果要生成大量的类似的对象，那么将会写一堆重复的代码
(2) 工厂模式
优点：可以快速生成批量的对象
缺点：对象的同样的方法（函数），没创建一个对象，都会生成一个一摸一样新的函数，所以会占内存
/工厂模式
function Student(name,type,like){
return {
name:name,
type:type,
like:like,
rap:function(){
console.log("鸡你太美")
}
}
}
var s1 = Student("蔡徐坤1","篮球运动员",'篮球')
console.log(s1)
(3) 构造函数创建对象
//构造函数
function Teacher(){
this.name = "苍老师";
this.type = "老师";
/*this.movies = function(){
console.log("拍电影")
}*/
}
//设置创建对象的原型函数
Teacher.prototype.movies = function(){
console.log("拍电影1")
}
//如果不用new来构建函数，那么就是一个普通的函数调用,并且this的指向是window
//如果用了new,就会创建一个新的对象，并且将对象给到t1.
var t1 =new Teacher()
console.log(t1)
原型链：原型上不断继承原型，从而形成原型链。
(4) ES6的class写法
//语法糖,ES6新增的语法。2015的新标准。es6 ==> EcmaScript 2015,2015发布的JavaScript的标准。
class Cat{
constructor(){
this.name = "波斯猫"
}
run(){
console.log("会跑")
}
say(){
console.log("喵喵喵")
}
}
var c1 = new Cat()
console.log(c1)
继承extends
1 class cxk{
2 rap(){
3 console.log("鸡你太美")
4 }
5 }
6
7 // var c1 = new Cat()
8 // console.log(c1)
9
10
11
12
13 class Cat extends cxk{
14 constructor(){
15 super()//super这个关键词，是调用继承的class的构造函数
16 this.name = "波斯猫"
17 }
18 run(){
19 console.log("会跑")
20 }
21 say(){
22 console.log("喵喵喵")
23 }
24 }
25
26 var c1 = new Cat()
27 console.log(c1)
2 DOM对象
DOM对象，就是HTML页面的文档对象。整个网页的显示，都由Document对象文档对象构成。文档对象又有许多的元素对象构成。文档对象就有许多的属性和方法，用来操纵整个页面的显示，以及事件的处理。所有的元素对象最终组成庞大的dom树。
查找元素对象
1 //ES5以前查找元素的方式
2 //通过ID查找元素对象
3 var d1 = document.getElementById("d1")
4 console.log(d1)
5 //通过class查找元素对象
6 var abc = document.getElementsByClassName('abc')
7 console.log(abc)
8 //通过标签名称查找元素对象
9 var div = document.getElementsByTagName("div")
10 console.log(div)
11
12 //ES5以后的查找方式
13 //选择单个元素，document.querySelector,选择器的写法，直接使用css选择器的写法,选择器如果能够匹配多个元素，那么只选择第一个元素,
14 var div1 = document.querySelector("div")
15 console.log(div1)
16 var id1 = document.querySelector("#d1")
17 console.log(id1)
18 var abc1 = document.querySelector('body .abc')
19 console.log(abc1)
20
21 //选择多个元素,document.querySelectorAll()
22 var abc2 = document.querySelectorAll("#d1")
23 console.log(abc2)
24
25
26 for(var i =0 ;i<abc2.length;i++){
27 abc2[i].innerHTML +=i
28 abc2[i].style.background="green"
29 }
3设置DOM对象
设置dom对象里面的HTML
s1.innerHTML = 'h1{color: red;}';
设置dom对象的样式
1、设置样式
//注意：凡是用-拼接的词组，都去掉-,然后首字母改为大写进行拼接成一个单词
//h1.style.background = "skyblue";
//h1.style.background-color = "skyblue"; 错误的
//h1.style.backgroundColor = "skyblue"
2、第二种方式修改dom的样式
//创建style标签，里面写好相对应的样式
//创建元素
var s1 = document.createElement("style")
//设置s1的innerHTML的内容
s1.innerHTML = 'h1{color: red;}';
//将style元素插入到HTML页面的body里
document.body.appendChild(s1)
3、第三种设置dom对象的类名
h1.className = "bgPurple"
列表切换案例：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6
7 <style type="text/css">
8 .list{
9 width: 400px;
10 position: absolute;
11 left: -400px;
12 top: 0;
13 transition: all 2s;
14
15 }
16 .listOut{
17 width: 400px;
18 position: absolute;
19 left: 0px;
20 top: 0;
21 transition: all 2s;
22 }
23 .list img{
24 width: 400px;
25 }
26 .btn{
27 position: absolute;
28 left: 20px;
29 top: 20px;
30 z-index: 1;
31 }
32 </style>
33 </head>
34 <body>
35 <div class="main">
36 <div class="btn">切换</div>
37 <div class="list">
38 <img src="img/timg.jfif"/>
39 </div>
40 </div>
41
42
43 <script type="text/javascript">
44 var btn = document.querySelector('.btn')
45 var list = document.querySelector('.list')
46 btn.onclick = function(){
47 console.log(list.className)
48 if(list.className == "list"){
49 list.className = "listOut"
50 }else{
51 list.className = "list"
52 }
53
54 }
55 </script>
56 </body>
57 </html>
4 设置元素事件
4.1 事件
3种定义事件的方式
On事件名称：
优点：简单方便
缺点：只能一个事件调用1个函数。只有冒泡
h1.onclick = function(){
h1.style.backgroundColor = "deeppink"
}
AddEventlistener:
优点：同一事件可以调用多个函数，这个模式下，可以设置事件是捕获还是冒泡，默认是冒泡。
h1.addEventListener(事件的名称,事件调用起的函数，true/false(捕获/冒泡))
//es5出的事件方式
//3 AddEventlistener:
//h1.addEventListener(事件的名称,事件调用起的函数，true/false(捕获/冒泡))
h1.addEventListener('click',abc);
h1.addEventListener('click',function(e){
h1.style.backgroundColor="green";
})
事件对象
每一个事件调用的执行函数，都会默认传入一个事件对象，这个对象会包含当次事件的相关信息。
冒泡事件
事件由最里面一层一层向上触发，直到HTML元素，那么这种事件模式就是冒泡事件。一般情况下就用冒泡。
捕获事件
由HTML开始一层一层向下出发，直到最小的子元素，那么这种事件模式就是捕获
点击事件
单击事件
h1.onclick = function(event){
console.log(event)
h1.style.background = "skyblue"
}
双击事件
h1.ondblclick = function(event){
console.log(event)
h1.style.background = "pink"
}
鼠标事件
鼠标移入
//鼠标移入某个元素
h1.onmouseenter = function(event){
console.log(event)
h1.style.background = "green"
}
鼠标移出
//鼠标移出某个元素
h1.onmouseleave = function(event){
console.log(event)
h1.style.background = "purple"
}
鼠标在某个元素上移动
//鼠标在某个元素上移动
h1.onmousemove = function(event){
console.log(event)
var div = document.createElement('div')
div.className = "circle"
div.style.left = event.clientX + "px";
div.style.top = event.clientY + "px";
h1.appendChild(div)
}
鼠标悬浮
//鼠标悬浮在某个元素上
h1.onmouseover = function(){
console.log("onmouseover")
}
按键事件
按键按下
按键弹起
按键press
触屏事件touch
移动端的事件，跟点击事件不一样的地方在于，可以多点触控。
案例代码:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 #d1{
8 width: 600px;
9 height: 400px;
10 margin: 0 auto;
11 background: skyblue;
12 }
13 </style>
14 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
15 </head>
16 <body>
17
18 <div id="d1">
19 手机触屏颜色改变
20 </div>
21 <script type="text/javascript">
22 var d1 = document.querySelector('#d1')
23 console.log(d1)
24
25 //触屏事件是2009年以后才有相关的触屏事件。只能用ECMASCRIPT5,才能够实现。只能用addEventListener才能创建事件
26 //在触屏事件中想要获取触控点的位置，可以通过属性touches来获取多个点的触控位置。
27 //触屏开始事件
28 d1.addEventListener("touchstart",function(event){
29 console.log(event)
30 })
31 //触摸移动事件
32 /*d1.addEventListener('touchmove',function(e){
33 console.log(e)
34 })
35 //触摸结束事件
36 d1.addEventListener("touchend",function(e){
37 console.log(e)
38 })*/
39
40
41
42 </script>
43 </body>
44 </html>
聚焦事件onfocus
当输入框被点击之后，光标在输入框闪动的时候，即为聚焦的事件。
案例：
1 var input1 = document.querySelector('#input1');
2 //聚焦事件
3 input1.onfocus = function(){
4 var alertDiv = document.createElement("div")
5 alertDiv.className = "alert"
6 alertDiv.innerHTML = "输入密码时候，请注意身旁无人"
7 document.body.appendChild(alertDiv)
8 }
输入事件onInput
输入事件与按键事件的主要区别在于，输入事件会以输入框是否真正输入新的内容而触发事件。而按键事件是每次按键都会触发。
var d1 = document.querySelector('#d1')
//输入事件
d1.oninput = function(e){
console.log(e)
//假设密码当密码等于123456的时候，那么显示绿色的背景，说明密码输入是正确
console.log([d1])
if(d1.value=='123456'){
d1.style.background = "green"
}else{
d1.style.background = "red"
}
document.querySelector('h1').innerHTML = d1.value
}
输入内容改变事件 onchange
//输入框内容变更事件,并且焦点失去之后才会触发
/*d1.onchange = function(e){
console.log(e)
}*/
文档加载事件onload
文档或者是图片或者视频，都可以使用onload事件来进行判断内容是否加载完毕。图片想要获取宽高，必须等待图片加载完毕
案例：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <script type="text/javascript">
9
10
11 window.onload = function(){
12 //文档加载完毕
13 console.log('文档加载完毕')
14 var d1 = document.querySelector('#d1')
15 console.log(d1)
16 }
17
18 var img = document.createElement("img")
19 //在JavaScript里，加载属于异步。
20 img.src = 'img/img1.jfif'
21 document.body.appendChild(img)
22 console.log([img])
23
24
25 //调用加载完毕的事件
26 img.onload = function(){
27 console.log(img.width)
28 console.log(img.height)
29 }
30
31 </script>
32 <div id="d1">
33 helloworld
34 </div>
35 </body>
36 </html>
5 改变文档结构的5种方法
1、在元素的最后面追加子元素
//语法:父元素.appendChild(子元素对象)
2、在什么元素前面追加元素
//语法：父元素.insertBefore(插入的元素对象,参考对象)
document.insertBefore()
3、替换元素
//语法：父元素.replaceChild(替换的元素对象，被替换的元素对象)
document.replaceChild()
4、删除某个元素
//语法：父元素.removeChild(删除元素对象)
document.removeChild()
5、创建元素，并没有显示在页面上，都需要上面的appendChild/insertBefore/replaceChild任意一种来完成插入到页面结构中
//语法：document.createElement("元素标签的名称")
6 视频和音频的方法
Audio音频
//audio常用的属性和方法
//play()播放、pause()暂停
//volume调节音量，设置的值是从0-1，0就相当于静音，1就是百分百的音量
//muted设置静音，true就静音，false不静音
//currentTime,获取和设置当前播放到什么位置
//onplay播放的事件
//onpause暂停事件
案例：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 .jdt{
8 width: 800px;
9 height: 20px;
10 line-height: 20px;
11 background: #ccc;
12 margin: 0 auto;
13 display: flex;
14
15 align-items: center;
16 }
17 .jd{
18 width: 20px;
19 height: 18px;
20 background: deepskyblue;
21 }
22 </style>
23 </head>
24 <body>
25 <!--
26 src="音频的网络资源地址"
27 controls ="设置音频是否显示控制器"
28
29
30
31 -->
32 <audio src="img/M500004PPCIB1Mq36U.mp3"></audio>
33
34 <div class="btn">
35 播放
36 </div>
37
38 <div class="next">
39 下一首
40 </div>
41
42 <div class="jdt">
43 <div class="jd">0%</div>
44 </div>
45
46 <script type="text/javascript">
47 //audio常用的属性和方法
48 //play()播放、pause()暂停
49 //volume调节音量，设置的值是从0-1，0就相当于静音，1就是百分百的音量
50 //muted设置静音，true就静音，false不静音
51 //currentTime,获取和设置当前播放到什么位置
52
53 //onplay播放的事件
54 //onpause暂停事件
55
56 var a1 = document.querySelector('audio')
57 console.log(a1)
58 var jd = document.querySelector('.jd')
59
60 var btn = document.querySelector('.btn')
61 btn.onclick = function(){
62 console.log(a1)
63 if(btn.innerHTML.trim()=="播放"){
64 a1.play()
65 btn.innerHTML = "暂停"
66 }else{
67 a1.pause()
68 btn.innerHTML = "播放"
69 }
70 }
71 var interTime = null;
72
73
74 a1.onplay = function(e){
75 console.log('onplay')
76 console.log(e)
77
78
79
80 interTime = setInterval(function(){
81 //获取当前的事件
82 var currentTime = a1.currentTime
83 //获取当前播放进度的百分比
84 var num = parseInt((currentTime/a1.duration)*100)
85 console.log(num)
86
87 var width = 800*num/100;
88 jd.style.width = width + 'px'
89
90 jd.innerHTML = num +'%'
91 },1000)
92
93 }
94
95
96 a1.onpause = function(){
97 clearInterval(interTime)
98 }
99 // a1.onplaying = function(e){
100 // console.log('onplaying')
101 // console.log(e)
102 // }
103
104
105 //更改歌曲
106 var next = document.querySelector('.next')
107 next.onclick = function(){
108 a1.src = 'img/zjl.wav'
109 a1.play()
110 }
111 </script>
112 </body>
113 </html>
Video视频
/*
muted:静音
play():播放
pause():暂停
volume:音量
currentTime:当前播放的世界
loop:是否循环播放
duration:播放总时间
//onplay播放的事件
//onpause暂停事件
webkitRequestFullScreen()：设置全屏播放，仅用于谷歌浏览器。
案例：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 video{
8
9 }
10 </style>
11 </head>
12 <body>
13 <!--
14 src="音频的网络资源地址"
15 controls ="设置视频是否显示控制器"
16 poster="设置没有播放内容时候的图片"
17 -->
18 <video poster="img/cute.jpg" controls="controls" src="img/3.mkv"></video>
19
20 <div class="play">
21 播放
22 </div>
23
24 <script type="text/javascript">
25 /*
26 muted:静音
27 play():播放
28 pause():暂停
29 volume:音量
30 currentTime:当前播放的世界
31 loop:是否循环播放
32 duration:播放总时间
33 //onplay播放的事件
34 //onpause暂停事件
35 webkitRequestFullScreen()：设置全屏播放，仅用于谷歌浏览器。
36 * */
37 var v1 = document.querySelector('video')
38 var play = document.querySelector(".play");
39
40 play.onclick = function(e){
41 console.log(e);
42 v1.volume=0.5
43 if(play.innerHTML.trim() == "播放"){
44 v1.play();
45 play.innerHTML="暂停"
46 }else{
47 v1.pause()
48 play.innerHTML = "播放"
49 }
50 }
51
52 </script>
53
54 </body>
55 </html>
来源：oschina
链接：https://my.oschina.net/u/4353727/blog/3515714