js（JavaScript）：面向对象，Document对象：查找元素对象，修改元素，事件

面向对象编程

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

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

伪面向对象编程语言 ---> 面向对象编程语言

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=s1student2.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 huojian101console.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 +=iabc2[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.bodyvar 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>

转载于:https://www.cnblogs.com/406070989senlin/p/10952181.html