Javascript面向对象

面向对象编程

 

面向对象的编程，那么是更符合人类所接触的世界的逻辑思维。

 

将一个系统划分为各个子系统，子系统又由各个模块构成，将每个模块，系统划分为一个个对象，给这些对象赋予某些角色（属性/功能/方法）。

 

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>

 

posted @ 2019-06-01 17:51  cowbe  阅读(307)  评论(0)  编辑  收藏  举报