面向对象编程
面向对象的编程,那么是更符合人类所接触的世界的逻辑思维。
将一个系统划分为各个子系统,子系统又由各个模块构成,将每个模块,系统划分为一个个对象,给这些对象赋予某些角色(属性/功能/方法)。
伪面向对象编程语言 ---> 面向对象编程语言
1、创建对象的方式
(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
class cxk{ rap(){ console.log("鸡你太美") } }
// var c1 = new Cat() // console.log(c1)
class Cat extends cxk{ constructor(){ super()//super这个关键词,是调用继承的class的构造函数 this.name = "波斯猫" } run(){ console.log("会跑") } say(){ console.log("喵喵喵") } }
var c1 = new Cat() console.log(c1) |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //1.字面量的形式 var student={ name:"杨超越", type:"101" , like:"唱歌", rap:function(){ console.log("超越,超越,超越一切") } } console.log(student) student.rap() //2.工厂模式 function student1(name,type,like){ return{ name:name, type:type, like:like, rap:function(){ console.log("宣仪,宣仪") } } } var s1=student1("吴宣仪","歌手","跳舞") console.log(s1) s1.rap() //3.构造函数 function student2(){ this.name="孟美岐", this.like="唱歌" } //设置创建对象的原型函数(也就是上面) student2.prototype=s1 student2.prototype.mo=function(){ console.log("美岐,美岐") } //如果不用new来构建函数,那么就是一个普通的函数调用,并且this的指向是window //如果用了new,就会创建一个新的对象,并且将对象给到t1. var t1=new student2() console.log(t1) t1.mo() //语法,ES6新增的语法。2015的新标准。es6 ==> EcmaScript 2015,2015发布的JavaScript的标准。 class huojian101{ constructor(){ this.name="杨超越" } run(){ console.log("会跑,会唱,会跳") } say(){ console.log("喵喵喵") } } var b1=new huojian101 console.log(b1) b1.run() b1.say() class bo{ rop(){ console.log("会啵啵啵") } } //继承 class huojian1001 extends bo{ constructor(){ super() this.name="杨超越" } run(){ console.log("会跑,会唱,会跳") } say(){ console.log("喵喵喵") } } var b2=new huojian1001() console.log(b2) b2.run() b2.say() b2.rop() </script> </body> </html>
DOM对象
DOM对象,就是HTML页面的文档对象。整个网页的显示,都由Document对象文档对象构成。文档对象又有许多的元素对象构成。文档对象就有许多的属性和方法,用来操纵整个页面的显示,以及事件的处理。所有的元素对象最终组成庞大的dom树。
查找元素对象
//ES5以前查找元素的方式 //通过ID查找元素对象 var d1 = document.getElementById("d1") console.log(d1) //通过class查找元素对象 var abc = document.getElementsByClassName('abc') console.log(abc) //通过标签名称查找元素对象 var div = document.getElementsByTagName("div") console.log(div)
//ES5以后的查找方式 //选择单个元素,document.querySelector,选择器的写法,直接使用css选择器的写法,选择器如果能够匹配过个元素,那么只选择第一个元素, var div1 = document.querySelector("div") console.log(div1) var id1 = document.querySelector("#d1") console.log(id1) var abc1 = document.querySelector('body .abc') console.log(abc1)
//选择多个元素,document.querySelectorAll() var abc2 = document.querySelectorAll("#d1") console.log(abc2)
for(var i =0 ;i<abc2.length;i++){ abc2[i].innerHTML +=i abc2[i].style.background="green" } |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="d1" class="abc"> helloworld </div> <div id="d1" class="abc"> helloworld </div> <script type="text/javascript"> //ES5以前查找元素的方式 //通过ID查找元素对象(只显示找到的第一个) var d1=document.getElementById("d1") console.log(d1) //通过class查找元素对象 var abc=document.getElementsByClassName("abc") console.log(abc) //通过标签名称查找元素对象 var div=document.getElementsByTagName("div") console.log(div) //ES5以后的查找方式 //选择单个元素,document.querySelector,选择器的写法,直接使用css选择器的写法,选择器如果能够匹配过个元素,那么只选择第一个元素, var div1=document.querySelector("div") console.log(div1) var id1=document.querySelector("#d1") console.log(id1) var abc1=document.querySelector("body .abc") console.log(abc1) //选择多个元素,document.querySelectorAll() var abc2=document.querySelectorAll("#d1") console.log(abc2) //元素后面加i,改变元素背景颜色 for (var i=0;i<abc2.length;i++) { abc2[i].innerHTML +=i abc2[i].style.background="green" } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .list{ width: 400px; position:absolute; left:-400px; top: 0; transition: :all 2s; } .listOut{ width: 400px; position:absolute; left:0px; top: 0; transition: :all 2s; } .list img{ width: 400px; } .btn{ position: absolute; left: 20px; top: 20px; z-index: 1; } </style> </head> <body> <div class="main"> <div class="btn">切换</div> <div class="list"> <img src="img/u=2129560155,3163871690&fm=26&gp=0.jpg"/> </div> </div> <script type="text/javascript"> var btn=document.querySelector(".btn") var list=document.querySelector(".list") //鼠标点击效果 btn.onclick=function(){ console.log(list.className) if (list.className=="list") { list.className="listOut" } else{ list.className = "list" } } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .h{ width: 50px; height: 50px; font-size: 50px; } </style> </head> <body> <h1>helloworld</h1> <script type="text/javascript"> //1、获取对象 var h1=document.querySelector("h1") //2、设置样式 //注意:凡是用-拼接的词组,都去掉-,然后首字母改为大写进行拼接成一个单词 h1.style.background="skyblue" h1.style.backgroundColor="yellow" //第二种方式修改dom的样式 //创建style标签,里面写好相对应的样式 //创建元素 var s1=document.createElement("style") //设置s1的innerHTML的内容 s1.innerHTML="h1{color:red}" document.body.appendChild(s1) //第三种设置dom对象的类名 h1.className="h" </script> </body> </html>
事件
3种定义事件的方式
On事件名称:
优点:简单方便
缺点:只能一个事件调用1个函数。只有冒泡
h1.onclick = function(){ h1.style.backgroundColor = "deeppink" } |
AddEventlistener:
优点:同一事件可以调用多个函数,这个模式下,可以设置事件是捕获还是冒泡,默认是冒泡。
h1.addEventListener(事件的名称,事件调用起的函数,true/false(捕获/冒泡)) |
事件对象
每一个事件调用的执行函数,都会默认传入一个事件对象,这个对象会包含当次事件的相关信息。
冒泡事件
事件由最里面一层一层向上触发,直到HTML元素,那么这种事件模式就是冒泡事件。一般情况下就用冒泡。
捕获事件
由HTML开始一层一层向下出发,直到最小的子元素,那么这种事件模式就是捕获
点击事件 click单机,dblclick双击
鼠标事件
按键事件
手指的触屏事件
聚焦事件
文档的加载事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .h{ width: 50px; height: 50px; font-size: 50px; } </style> </head> <body> <!--这种写在html上的事件非常少用,因为html与js耦合在一起,尽量少的去创建全局变量--> <h1 onclick="abc()">helloworld</h1> <script type="text/javascript"> var h1=document.querySelector("h1") //h1.on事件名称 = 事件执行函数 //鼠标点击事件 h1.onclick=function(){ h1.style.backgroundColor = "deeppink" } //es5出的事件方式 function abc(){ console.log(123) h1.style.color = "skyblue" } h1.addEventListener("click",abc) //另一种写法---------------------------------------------- h1.addEventListener('click',function(e){ h1.style.backgroundColor = "green" }) //冒泡(从里到外的执行顺序) var h1 = document.querySelector("h1") h1.addEventListener("click",function(e){ console.log('h1点击事件') },false) var body =document.querySelector("body") body.addEventListener("click",function(){ console.log("body点击事件") },false) //捕获(从外到里的执行顺序) h1.addEventListener("click",function(){ console.log('h1点击事件') },true) //var body = document.body var body = document.querySelector('body') body.addEventListener("click",function(){ console.log("body点击事件") },true) var h1 = document.querySelector('h1') h1.onclick = function(event){ //事件对象会存放这一次事件的相关信息 console.log(event) } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" name="input" id="input" value="" /> <h1>helloworld</h1> <script type="text/javascript"> var h1 = document.querySelector('h1') h1.onclick = function(event){ //事件对象会存放这一次事件的相关信息 console.log(event) } var input1=document.querySelector("#input") //键盘按下事件 input1.onkeydown= function(event){ console.log(event) } //键盘弹起事件 input1.onkeyup = function(event){ console.log(event) } //键盘按下press,按下加弹起为1个事件 input1.onkeypress = function(event){ console.log(event) } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h1{ width: 500px; height: 400px; background: skyblue; } .circle{ width: 20px; height: 20px; background: red; border-radius: 10px; position: absolute; } </style> </head> <body> <h1>helloworld</h1> <script type="text/javascript"> var h1=document.querySelector("h1") //鼠标移入某个元素 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") } </script> </body> </html>
打字游戏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h1{ text-align: center; } .alert{ width: 500px; height: 300px; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -150px; background: orangered; color: #fff; text-align: center; border-radius: 20px; } </style> </head> <body> <h1></h1> <div id="djs"> 还剩:10s </div> <script type="text/javascript"> var count = 0; var time = 10 //可以随机生成26个字母到h1标签 function createMathChar(){ //随机生成1单词,26个字母里的一个 var num = parseInt(Math.random()*26+97) //Math.random()生成[0-1)的随机值,parseInt实现向下取整数 //将随机值生成字母 var mathStr = String.fromCharCode(num) //将字母放入h1标签 var h1 = document.querySelector('h1') h1.innerHTML = mathStr } createMathChar() var body = document.body; body.onkeypress = function(event){ var h1 = document.querySelector('h1') if (event.key == h1.innerHTML){ count ++; console.log(count) createMathChar() } } //间隔函数 var interTime = setInterval(function(){ time -- var djs = document.querySelector('#djs') djs.innerHTML = "还剩:"+time+"s"; if(time==0){ clearInterval(interTime) /*alert("您每分钟打字速度为"+count*6+"字!")*/ var d1 = document.createElement('div') d1.className = "alert" d1.innerHTML = "<h1>您每分钟打字速度为"+count*6+"字!</h1>"
//关闭事件
//body中加入 document.body.appendChild(d1) body.onkeypress = null; } },1000) </script> </body> </html>