JavaScript 类的操作、JSON
一、类的操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .b1{ width: 100px; height: 100px; background-color: red; } .b2{ /* width: 200px; */ height: 200px; background-color: gold; } </style> <script type="text/javascript"> window.onload = function(){ // 获取box var box = document.getElementById("box"); // 获取btn1 var btn1 = document.getElementById("btn1"); // 为btn1绑定一个单击响应函数 btn1.onclick = function(){ // 修改box的样式 // 通过style属性来修改元素的样式,每修改一个样式,浏览器就需要重新渲染一次页面 // 这样执行的性能是比较差的,而且这种形式当我们要修改多个样式时也不太方便 // box.style.width = "200px"; // box.style.height = "200px"; // box.style.backgroundColor = "glod"; // 一行代码可以修改多个样式 // 可以通过修改元素的class属性来间接的修改样式 // box.className += " b2"; addClass(box , "b2"); alert(hasClass(box , "hello")); removeClass(box , "b2"); toggleClass(box , "b2"); }; }; // 定义一个函数,用来向一个元素中添加一个指定的class属性值 // 参数 // 1.obj 要添加class属性的元素 // 2.cn 要添加的class值 function addClass(obj , cn){ // 检查obj中是否含有cn if(!hasClass(obj , cn)){ obj.className += " "+cn; } } // 判断一个元素中是否含有指定的class属性值 function hasClass(obj , cn){ // 判断obj中有没有cn class // 创建正则表达式 // var reg = /\bb2\b/; var reg = new RegExp("\\b"+cn+"\\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 , ""); } // toggleClass可以用来切换一个类 // 如果元素具有该类,则删除 // 如果元素没有该类,则添加 function toggleClass(obj , cn){ // 判断obj中是否含有cn if(hasClass(obj , cn)){ // 有,则删除 removeClass(obj , cn); }else{ // 没有,则添加 addClass(obj , cn); } } </script> </head> <body> <button id="btn1">点击按钮以后修改box的样式</button> <br /> <br /> <div id="box" class="b1 b2"></div> </body> </html>
二、JSON
<script type="text/javascript"> // JSON - javaScript,Object,Notation,JS对象表示法 // - JSON和JS对象格式一样,只不过JSON字符串中的属性名必须加双引号,其他的和JS语法一致 // - js中的对象只有js自己认识,其他的语言都不认识 // - JSON就是一个特殊格式的字符串,这个字符串可以被任意的语言识别,并且可以转换为任意语言中的对象 // - JSON这个对象在IE7及以下的浏览器中不支持 // JSON分类 // 1.对象{} // 2.数组[] var arr = '[1,2,3,"hello","true"]'; // JSON中允许的值 // 1.字符串 // 2.数值 // 3.布尔值 // 4.null // 5.对象 // 6.数组 // 创建一个对象 var obj = '{"name":"HPLS","age":18,"gender":"男"}'; console.log(typeof obj); // 将JSON字符串转换为JS中的对象 // 在JS中,为我们提供了一个工具类,就叫JSON // 这个对象可以帮助我们将一个JSON转换为JS对象,也可以将一个JS对象转换为JSON var json = '{"name":"HPLS","age":18,"gender":"男"}'; // JSON.parse() // 可以将JSON字符串转换为JS对象 // 它需要一个JSON字符串作为参数,会将该字符串转换为JS对象并返回 var o= JSON.parse(json); console.log(o.name); var obj2 = {name:"HPLS" , age:18 , gender:"男"}; // JS对象--->JSON // JSON.stringify() // 可以将一个JS对象转换为JSON字符串 // 需要一个JS对象作为参数,会返回一个JSON字符串 var str = JSON.stringify(obj2); console.log(str); // eval() // 这个函数可以用来执行一段字符串形式的JS代码,并执行返回结果 // 如果使用的eval()执行的字符串中含有{},它会将{}当成是代码块 // 如果不希望将其当成代码块解析,则需要在字符串前后各加一个() // 例:var obj = eval("("+str+")"); var str2 = "alert('hello');"; eval(str2); // eval()这个函数的功能很强大,可以直接执行一个字符串中的JS代码 // 但是在开发中尽量不要使用,首先它的执行性能比较差,然后它还具有安全隐患 // 如果需要兼容IE7及以下的JSON操作,则可以通过引入一个外部的js文件来处理 // 例:<script type="text/javascript" src="js/json2.js"> </script>
