• 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>
  • 相关阅读:
    c语言实现双色球和大乐透
    字符串数组的三种内存模型
    c语言实现数组的排序
    C语言实现二级指针表示字符串数组
    c语言实现字符指针(字符串)数组的排序
    Windows Defender检查文件和应用要管理员设置
    java方法学习1
    The second day of studing English
    Selenium-通过classname定位注意的小问题
    Selenium-ChromeWebDriver
  • 原文地址：https://www.cnblogs.com/qq308015824/p/10960400.html
Copyright © 2020-2023  润新知