JavaScript基础学习——第十一天（类的操作、JSON）

最新推荐文章于 2024-10-02 05:39:15 发布

please tell me

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量119

点赞数

分类专栏： # JavaScript入门学习文章标签： javascript

本文链接：https://blog.csdn.net/WXY19990803/article/details/114628389

版权

JavaScript入门学习专栏收录该内容

17 篇文章 1 订阅

订阅专栏

目录
1. 类的操作
 2. JSON

知识一：类的操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.b1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			
			.b2{
				height: 300px;
				background-color: yellow;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				//获取box
				var box = document.getElementById("box");
				//获取btn01
				var btn01 = document.getElementById("btn01");
				
				//为btn01绑定单击响应函数
				btn01.onclick = function(){
					//修改box的样式
					/*
					 * 通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面
					 * 	这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便
					 */
					/*box.style.width = "200px";
					box.style.height = "200px";
					box.style.backgroundColor = "yellow";*/
					
					/*
					 * 我希望一行代码，可以同时修改多个样式
					 */
					
					//修改box的class属性
					/*
					 * 我们可以通过修改元素的class属性来间接的修改样式
					 * 这样一来，我们只需要修改一次，即可同时修改多个样式，
					 * 	浏览器只需要重新渲染页面一次，性能比较好，
					 * 	并且这种方式，可以使表现和行为进一步的分离
					 */
					//box.className += " b2";
					//addClass(box,"b2");
					
					//alert(hasClass(box,"hello"));
					
					//removeClass(box,"b2");
					
					toggleClass(box,"b2");
				};
				
			};
			
			//定义一个函数，用来向一个元素中添加指定的class属性值
			/*
			 * 参数:
			 * 	obj 要添加class属性的元素
			 *  cn 要添加的class值
			 * 	
			 */
			function addClass(obj , cn){
				
				//检查obj中是否含有cn
				if(!hasClass(obj , cn)){
					obj.className += " "+cn;
				}
				
			}
			
			/*
			 * 判断一个元素中是否含有指定的class属性值
			 * 	如果有该class，则返回true，没有则返回false
			 * 	
			 */
			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="btn01">点击按钮以后修改box的样式</button>
		
		<br /><br />
		
		<div id="box" class="b1 b2"></div>
	</body>
</html>

知识二：JSON

JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互。
JSON这个对象在IE7及以下的浏览器中不支持，所以在这些浏览器中调用时会报错

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!--
			如果需要兼容IE7及以下的JSON操作，则可以通过引入一个外部的js文件来处理
		-->
		<script type="text/javascript" src="js/json2.js"></script>
		<script type="text/javascript">
			
			/*
			 * JSON
			 * 	- JS中的对象只有JS自己认识，其他的语言都不认识
			 * 	- JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，
			 * 		并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互
			 * 	- JSON
			 * 		- JavaScript Object Notation JS对象表示法
			 * 		- JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号
			 * 			其他的和JS语法一致
			 * 		JSON分类：
			 * 			1.对象 {}
			 * 			2.数组 []
			 * 
			 * 		JSON中允许的值：
			 * 			1.字符串
			 * 			2.数值
			 * 			3.布尔值
			 * 			4.null
			 * 			5.对象
			 * 			6.数组
			 */
			
			//创建一个对象
			
			
			var arr = '[1,2,3,"hello",true]';
			
			var obj2 = '{"arr":[1,2,3]}';
			
			var arr2 ='[{"name":"孙悟空","age":18,"gender":"男"},{"name":"孙悟空","age":18,"gender":"男"}]';
			
			/*
			 * 将JSON字符串转换为JS中的对象
			 * 	在JS中，为我们提供了一个工具类，就叫JSON
			 * 	这个对象可以帮助我们将一个JSON转换为JS对象，也可以将一个JS对象转换为JSON
			 */
			
			var json = '{"name":"孙悟空","age":18,"gender":"男"}';
			
			/*
			 * json --> js对象
			 * 	 JSON.parse()
			 * 		- 可以将以JSON字符串转换为js对象
			 * 		- 它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回
			 */
			
			var o = JSON.parse(json);
			var o2 = JSON.parse(arr);
			
			//console.log(o.gender);
			//console.log(o2[1]);
			
			var obj3 = {name:"猪八戒" , age:28 , gender:"男"};
			
			
			/*
			 * JS对象 ---> JSON
			 * 	JSON.stringify()
			 * 		- 可以将一个JS对象转换为JSON字符串
			 * 		- 需要一个js对象作为参数，会返回一个JSON字符串
			 */
			
			var str = JSON.stringify(obj3);
			//console.log(str);
			
			/*
			 * JSON这个对象在IE7及以下的浏览器中不支持，所以在这些浏览器中调用时会报错
			 */
			
			
			var str3 = '{"name":"孙悟空","age":18,"gender":"男"}';
			
			JSON.parse(str3);

		</script>
	</head>
	<body>
	</body>
</html>

eval()：这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回。这个函数的功能很强大，可以直接执行一个字符串中的js代码，但是在开发中尽量不要使用，首先它的执行性能比较差，然后它还具有安全隐患。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			var str = '{"name":"孙悟空","age":18,"gender":"男"}';
			
			/*
			 * eval()
			 * 	- 这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回
			 * 	- 如果使用eval()执行的字符串中含有{},它会将{}当成是代码块
			 * 		如果不希望将其当成代码块解析，则需要在字符串前后各加一个()
			 */
			
			var str2 = "alert('hello');";
			
			var obj = eval("("+str+")");
			
			// console.log(obj);
			eval(str2);

		</script>
	</head>
	<body>
	</body>
</html>