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