JavaScript笔记08：类的操作和JSON

类的操作

• 通过style属性来修改元素的样式，每修改一个样式，浏览器就要重新渲染一次页面，性能比较差，且当修改的样式较多时不方便编写代码
• 可以通过修改元素的class属性来间接的修改元素的样式，此时修改一次就可以同时修改多个样式，浏览器也只会渲染一次，性能较高，且这种方式可以将表现和行为分离开

点击以后修改box的样式


.b1 {
width: 100px;
height: 100px;
background-color: aqua;
}
.b2 {
height: 200px;
background-color: tomato;
}


window.Onload= function () {
var btn01 = document.getElementById("btn01");
var box = document.getElementById("box");
btn01.Onclick= function () {
toggleClass(box, "b2");
}
// 向一个元素中添加指定的class属性值
function addClass(obj, className) {
if (!hasClass(obj, className)) {
obj.className += " " + className;
}
}
// 判断元素中是否含有指定的class属性值
function hasClass(obj, cn) {
var reg = new RegExp("\\b" + cn + "\\b");
return reg.test(obj.className);
}
// 移除元素中原有的class属性值
function removeClass(obj, cn) {
var reg = new RegExp("\\b" + cn + "\\b");
obj.className = obj.className.replace(reg, "");
}
// 切换：如果元素中具有该类就删除，没有该类则添加
function toggleClass(obj, cn) {
if (hasClass(obj, cn)) {
removeClass(obj, cn);
} else {
addClass(obj, cn);
}
}
};


JSON

• JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换为任意语言中的对象
• JSON在开发中主要用来做数据的交互
• JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号
• JSON允许的值：字符串，数值，布尔值，空值null，对象，数组
• JSON分类：对象{}，数组[]

// 创建一个JSON对象
var obj1 = '{ "name": "费渡", "age": 22, "gender": "男"}';
console.log(typeof obj1); // string
var obj2 = '[12, 25, "dudu", true]';
// 将JSON字符串转换成JS中的对象
var result = JSON.parse(obj1);
console.log(result.name); // 费渡
result = JSON.parse(obj2);
console.log(result[2]); // dudu
// 将JS对象转换为JSON字符串
result = JSON.stringify({ name: "dudu", tel: "12345" });
console.log(result); // {"name":"dudu","tel":"12345"}