JavaScript笔记 08：类的操作和JSON

类的操作

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

<button id="btn01">点击以后修改box的样式</button>
<br><br>
<div id="box" class="b1 b2"></div>

.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"}