每周总结（二）

BOM

• 浏览器对象模型
  - BOM可以使我们通过JS来操作浏览器
  - 在BOM中为我们提供了一组对象,用来完成对浏览器的操作
  - BOM对象
  window
• window对象代表的是整个浏览器的窗口,同时window也是网页中的全局对象

navigator

• 代表的当前浏览器的信息,通过该对象可以识别不同的浏览器

location

• 代表当前浏览器的地址栏信息,通过location可以获取地址栏信息,或者操作浏览器跳转页面

history

• 代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录。
• 由于隐私的原因,该对象不能获取到具体的历史栏记录,只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效。

screen

• 代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息

这些对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用,也可以直接使用

定时调用

如果希望一段程序，可以每间隔一段时间执行一次，就可以使用setInterval()该方法。

setInterval()的作用

• 定时调用
• 可以将一个函数，每隔一段时间执行一次
• 参数：
  1.回调函数：该函数会每隔一段时间调用一次。
  2.每次调用间隔的事件，单位是毫秒。

var num=1;
var timer= setInterval(function(){
	count.innerHTML=num++;
	if(num==11){
		clearInterval(timer);
    }
},100)//100是指每次调用该方法,中间间隔的时间为100ms
//结果:10

定时器的应用

我们可以使用定时器来使图片进行自动切换。

var img1 = document.getElementById("img1");//先获取img标签
var imgArr = ["img/1.png", "img/4.png", "img/5.png", "img/6.png", "img/7.png"];//再将需要播放的图片传进数组
var index = 0;//定义一个数组索引
 btn01.onclick = function () {
		setInterval(function () {
			index++;
			img1.src = imgArr[index];
			if (index == imgArr.length - 1) {
				index = 0;
			}//这里设置一个if判断语句,用来判断当前图片是否播放到最后一张,如果播放到最后一张,则将索引重新赋值为0,返回第一张图片
 			}, 1000);
}

我们写完了这块代码后会发现,如果重复点击btn01，图片切换的速度会越来越快。这是因为如果重复点击btn01，会同时开始多个定时器进行计时，所以我们在开启定时器时，要将当前元素上的其他定时器进行关闭。

var timer;
 btn01.onclick = function () {
 		clearInterval(timer);//调用清除方法,将定时器清除
		timer=setInterval(function () {
			index++;
			img1.src = imgArr[index];
			if (index == imgArr.length - 1) {
				index = 0;
			}
 			}, 1000);

延时调用

如果我们希望一个函数不马上执行，而是间隔一段时间后再执行，则可以使用setTimeout()方法。

setTimeout()使用方法和setInterval()一样，只不过会延时执行，在开发中根据需求使用。

类的操作

通过style属性来修改元素的样式,每修改一个样式,浏览器就需要冲洗渲染一次页面。这样执行的性能是比较差的,而且这种形式当我们要修改多个样式时,也不太方便。

而当我们想统一修改一项元素时，可以通过操作class属性来改变元素的样式。此时浏览器只需要重新渲染页面一次，性能比较好，并且这种方式，可以使表现和行为进一步地分离。

定义一个函数，用来向一个元素中添加指定的class属性

function addClass(obj, cn) {
	if(!hasClass(obj,cn)){
		obj.className +=" "+cn;
	}
}

判断一个元素中是否含有指定的class属性值,如果有返回true,没有返回false。

function hasClass(obj,cn){
	var reg=new RegExp("\\b"+cn+"\\b");// var reg=/\bb2\b/;
	return reg.test(obj.className);
}

删除一个元素中指定的class属性。

function removeClass(obj,cn){
	var reg=new RegExp("\\b"+cn+"\\b");
//删除class
	obj.className=obj.className.replace(reg,"");
}

定义一个函数用来切换一个类，如果元素中有该元素则删除，如果没有则添加。

function toggleClass(obj,cn){
	if(hasClass(obj,cn)){
		removeClass(obj,cn);
	}else {
		addClass(obj,cn);
	}
}

v-on指令

• v-on指令的作用是：为元素绑定事件
• 事件名不需要写on
• 指令可以简写为@
• 绑定的方法定义在methods属性中
• 方法内部通过this关键字可以访问定义在data中的数据

var app = new Vue({
	el: "#app",
	data: {
		food: "西蓝花炒蛋"
	},
	methods: {
		doIt: function () {
		alert("做IT");
		},
		changeFood: function () {
			this.food+="好好吃"
		}
	},
})

//HTML
input type="button" value="v-on指令" v-on:click="doIt">
<input type="button" value="v-on简写" @click="doIt">

计数器

• 创建Vue实例时,el(挂载点),data(数据),methods(方法)
• v-on指令的作用是绑定事件,简写为@
• 方法中通过this,关键字获取data中的数据
• v-text指令的作用是:设置元素的文本值,简写为{{}}
• v-html指令的作用是:设置元素的innerHTML

var app=new Vue({
	el:"#app",
	data:{
		num:0
	},
	methods: {
		add:function(){
			if(this.num<10){
			this.num++;
			}
		},
		sub:function(){
			if(this.num>0){
			this.num--;
			}
		}
	},
})

//HTML
<div id="app">
        <button @click="sub"> - </button>
        <span>{{num}}</span>
        <button @click="add"> + </button>
    </div>

let变量声明

1.变量不能重复声明

let star='罗志祥';
let star='小猪';//Identifier 'star' has already been declared

2.块级作用域

{
	let girl='周扬青';
	console.log(girl);
}
console.log(girl);//girl is not defined

3.不存在变量提升

console.log(song);
var song='恋爱达人';//undefined
let song='恋爱达人';//Cannot access 'song' before initialization

4.不影响作用域链

{
	let school='长江大学';
	function fn(){
		console.log(school);
	}
	fn();
}//长江大学