Javascript复习第十三天

这是我参与更文挑战的第17天，活动详情查看：更文挑战

信号量

多个函数同时改变一个变量的值，这个变量称为信号量。（全局变量）

一般信号量不会无限大，或者无限小。需要进行信号量边界的验证

// box宽度在400范围内，点击btn,盒子才边长
oBtn.onclick = function() {
	// 信号量改变
	nowWidth += 20;
	// 信号量后验证方式
	if(nowWidth >= 400) {
		nowWidth = 400;
	}
	console.log(nowWidth);
	// 体现在元素身上
	oBox.style.width = nowWidth + "px";
};
复制代码

定时器

设置定时器：每隔一段时间，定时器（函数）会自动执行一次。

setInterval():
第一个参数：函数； 第二个参数：间隔时间，单位ms，省略不写 1s = 1000ms

调用对象：window省略不写

一般我们习惯将设置定时器赋值给timer变量。

清除定时器： clearInterval():

参数：只需要书写要清除定时器的名称。

// 鼠标离开盒子，继续变长
oBox.onmouseleave = function() {
	// 设表先关
	// 重新开启定时器，需要先关闭之前的定时器
	clearInterval(timer);
	timer = setInterval(function() {
		// 信号量改变
		nowWidth += 20;
		// 验证信号量
		if(nowWidth >= 400) {
			nowWidth = 400;
			// 拉终停表，达到终点关闭定时器
			clearInterval(timer);
		}
		// 体现在元素身上
		oBox.style.width = nowWidth + "px";
	}, 2000);
 }
复制代码

getElementsByTagName()

概述

表示通过标签名的到类数组对象。

参数：标签名

返回值：类数组对象

调用对象：可以是document，还可以是任何一个节点对象（表示从该节点范围内进行查找）

• 该类数组对象中保存的是元素对象

该类数组对象可以通过索引值读取每一项的值，也可以使用length属性。

如果标签只有一个仍然需要通过索引值获取元素对象。

document.getElementsByTagName("div")[0].style.backgroundColor = "lightblue";
复制代码

• 不管标签嵌套多深都可以查找到
• 类数组对象保存数据时只和标签出现的位置有关，和嵌套没有关系

<div id="box1">
	<div id="box2"></div>
	<div id="box3">
		<div id="box4"></div>
	</div>
</div>
<div id="box5"></div>
复制代码

连续打点

// 让第二个p变色
// 1的到box对象
var oBox = document.getElementById("box");
// 在box范围找到p
var ps = oBox.getElementsByTagName("p");
ps[1].style.backgroundColor = "red";
复制代码

可以将上面语句使用连续打点，当元素对象改变，再次打点表示从该元素对象进行调用。

document.getElementById("box").getElementsByTagName("p")[1].style.backgroundColor = "green";
复制代码

getElementsByTagName()也可以连续打点

document.getElementsByTagName("div")[0].getElementsByTagName("p")[1].style.color = "red";
复制代码

批量操作

通过标签名的到类数组对象，将每一元素对象添加相同的事件。

// 获取类数组对象
var ps = document.getElementsByTagName("p");
console.log(ps);
// 通过遍历添加事件,点击p弹出对应的索引值
for(var i = 0 ; i <= ps.length -1; i ++) {
	ps[i].onclick = function() {
		console.log(i);
	}
}
复制代码

由于闭包的影响： i 记住了 4

• IIFE解决

for(var i = 0 ; i < ps.length ; i ++) {
	(function(a) {
		ps[a].onclick = function() {
			console.log(a);
		}
	})(i);
}
复制代码

• this关键字，触发事件的该对象。原对象具有属性和方法，this也同样是具有相同的属性和方法

this只能使用在函数内部。

// this触发事件的该对象
for(var i = 0 ; i < ps.length ; i ++) {
	ps[i].onclick = function() {
		console.log(this.innerHTML);
	}
}
复制代码

• this使用

for(var i = 0 ; i < ps.length ; i ++) {
	// 提前将i保存在元素对象属性中
	ps[i].index = i;
	// 所有p添加点击事件输出索引值
	ps[i].onclick = function() {
		// console.log(i)
		// console.log(ps[i].index);
		console.log(this.index);
	};
}
复制代码

对应思想

我们经常利用其它元素控制另外的元素，他们索引值相同。

// 通过遍历批量添加事件
for(var i = 0 ; i < ps1.length ; i ++) {
	// 提前将i保存在index属性中
	ps1[i].index = i;
	// 点击事件
	ps1[i].onclick = function() {
		// 对应的ps2中索引值i变色
		// ps2[i].style.backgroundColor = "red";
		ps2[this.index].style.backgroundColor = "red";
	}
}
复制代码

排他思想

只有点击的对应元素改变，其它都恢复原状。

// 对应+排他
for(var i = 0 ; i < ps1.length ; i ++) {
	// 提前将i保存在index属性中
	ps1[i].index = i;
	// 点击事件
	ps1[i].onclick = function() {
		// 将所有的ps2都变成原状
		for(var j = 0 ;j < ps2.length; j ++) {
			ps2[j].style.backgroundColor = "lightblue";
		}
		// 对应的ps2改变
		ps2[this.index].style.backgroundColor = "red";
	};
}
复制代码

计算后的样式

计算后的样式：表示html元素在各种选择器的综合作用下，最终的样式。

高级浏览器

不兼容IE6,7,8

getComputedStyle():

调用对象：window

参数：要读取的元素对象

返回值：所有计算后的样式集合

返回值可以继续打点调用getPropertyValue()方法

参数：属性名

返回值：属性值

单一属性书写为短横语法

window.getComputedStyle(oPic).getPropertyValue("width");
复制代码

还可以使用中括号

window.getComputedStyle(oPic)["border-width"]
复制代码

IE6,7,8

IE6,7,8不认识window.getComputedStyle()

currentStyle:

调用对象：元素对象

返回值：样式集合

想的到属性值，需要继续打点调用属性名（使用驼峰命名法）

oBox.innerHTML = oPic.currentStyle.width;
复制代码

也可以使用中括号

oBox.innerHTML = oPic.currentStyle["borderColor"];
复制代码

能力检测

检测浏览器是否认识window.getComputedStyle，返回值true，不认识返回值false

// 获取元素对象
var oBox = document.getElementById("box");
var oPic = document.getElementById("pic");

// 将img边框宽度输出
// oBox.innerHTML = getValue("borderWidth",oPic);
oBox.innerHTML = getValue("border-width",oPic);

// 函数思维目的：用户输入属性名和对象，我们可以返回值该对象计算后的属性值
// 参数   border-width,borderWidth
// 返回值
function getValue(property, obj) {
	if(window.getComputedStyle) {
		// 高级
		// 将属性名改为短横写法borderWidth改为border-width
		property = property.replace(/([A-Z])/g,function(match,$1) {
			return "-" + $1.toLowerCase();
		});
		// 将属性值返回
		return window.getComputedStyle(obj)[property];
	}else {
		// IE border-width改为borderWidth
		property = property.replace(/-([a-z])/g,function(match,$1) {
			return $1.toUpperCase();
		});
		// 将属性值返回
		return obj.currentStyle[property];
	}
}
复制代码

对象的基础知识

在JavaScript中对象是一个无序属性的集合，任何事物都是对象。

我们现阶段研究的对象是具有属性和方法的数据。

属性是与对象相关的值。比如人身高，体重

方法是能够在对象上执行的动作。比如人的吃饭，睡觉

创建的对象：字面量{}

k : v每一项之间使用逗号隔开，最后一项不写逗号

var person = {
	// 属性
	name : "小明",
	age : 18,
	// 方法
	getName: function() {
		// this,表示该对象
		return this.name;
	} 
};
复制代码

读取：点语法、中括号

console.log(person.age);
console.log(person["name"]);
复制代码

设置： =

person.sex = "男性";
复制代码

json

json:js对象表示法

{

“k” : v,

}

创建

// 创建json
var json = {
	"name" : "小明",
	"sex"  : "男性",
	"age"  : 18
};
// 读取，点语法，中括号
console.log(json.name);
console.log(json["sex"]);
// 设置 = 
json.height = "180cm";
复制代码

json删除

delete json.sex;
复制代码

json嵌套

json可以嵌套，读取属性值使用连续打点或者中括号

var json = {
	"name" : "小明",
	"sex"  : "男性",
	"age"  : 18,
	"aihao" : {
		"aihao1" : "学习1",
		"aihao2" : "学习2",
		"aihao3" : "学习1"
	}
};
console.log(json.aihao.aihao2);
复制代码

json遍历

对JSON对象里面的属性进行遍历，方便逐一操作。

方法：循环遍历。for……in

定义一个变量k，依次接收JSON里面的每一个属性名，从第一个开始，直到循环到最后一个属性完，跳出循环。

for(var k in json) {
	console.log(json[k]);
}
复制代码

json复制

将json中每一项的值复制一份给另一个json

// 只是将json中的值复制，而不是将地址指向其他元素
var json3 = {};
for(var k in json) {
	json3[k] = json[k];
}

// json3和json是两个地址
// json3添加一项
json3.weight = "50kg";
console.log(json3);
// json不受json3影响
console.log(json);
复制代码