JS,DOM,JSON,VUE

最新推荐文章于 2024-10-01 20:12:28 发布

mashenk

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量75

点赞数

文章标签： json javascript vue.js

本文链接：https://blog.csdn.net/mashenk/article/details/120653390

版权

一.JS对象

1.内置对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS 对象</title>
		<script>
			<!-- Window对象 -->
			//当整个网页都加载完,才会被执行的功能
			window.onload = function(){
				console.log(typeof 100); 
			}
			//弹出框
			window.alert(100);
			//确认框
			window.confirm("你说对吗?");
			//输入框
			var a = window.prompt("请输入数字");
			console.log(typeof a); //string
			//string类型的数字转成number类型的数字
			var b = parseInt(a);
			console.log(typeof b); //number
			
			//window.document返回document对象,代表整个网页文件.
			window.document.write('hello js');
			window.document.getElementById();
			window.document.getElementsByTagName();
			window.document.getElementsByClassName();
			window.document.getElementsByName();
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

2.自定义对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS 对象</title>
		<script>
			/* 2.自定义JS对象 方式2:*/
			var p = {
				//动态的绑定属性,逗号隔开多个属性
				name : "jack" ,
				age : 10 ,
				//动态的绑定函数
				eat : function(){
					// this用来调用这个对象的资源
					console.log(this.name);
				}
			}
			console.log(p);
			console.log(p.name);//调用属性
			p.eat(); //调用函数
			/* 2.自定义JS对象 方式1:*/
			function Car(){}//声明对象
			var c = new Car();//创建对象
			//动态的绑定属性
			c.color='red';
			c.price=9.9;
			console.log(c.color); //调用属性
			console.log(c.price); 
			//动态的绑定函数
			c.back=function(){
				console.log("back...."); 
			}
			c.back(); //调用函数
			console.log(c); 
			
		
			
		</script>
	</head>
	<body>
	</body>
</html>

二.DOM

1.概述

本质就是把网页文件看做一个Docunent文档对象提供了一套API,可以操作网页中的所有元素

Document文档对象

提供方法:

getElementByld(id属性的值)--只能获取到一个

getElementsByName(name属性的值)--获取到多个,并存入数组

getElementsByClassName(class属性的值)--获取到多个,并存入数组

getElementsByTagName(标签名的值)--获取到多个,并存入数组

write(想要浏览器展示的数据)

提供属性:innerHTML--获取内容

2.测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 DOM解析网页文件</title>
		<script>
			function fun(){
				// 1. 通过id的值,获取元素
				var x = document.getElementById("a");
				console.log(x);//打印了元素
				console.log(x.innerHTML); //获取内容
				x.innerHTML = "我变了"; //设置内容
				// 2. 通过class的值,获取元素
				var y = document.getElementsByClassName("b");
				console.log(y); //得到数组
				console.log(y[1].innerHTML); //根据下标获取元素里的内容
				y[2].innerHTML=' hello dom';//根据下标修改元素里的内容
				//TODO  3. 通过name的值,获取元素
				//TODO  4. 通过标签名,获取元素
			}
		</script>
	</head>
	<body>
		<div onclick="fun()"> 我是div1 </div>
		<div> 我是div2 </div>
		<span id="a"> 我是span </span>
		<p class="b"> 我是p1 </p>
		<p class="b"> 我是p2 </p>
		<p class="b"> 我是p3 </p>
		<a name="c"> 我是a1 </p>
		<a name="c"> 我是a2 </p>
	</body>
</html>

三.JSON

1.概述

本质就是一个字符串,用来规定了服务器和浏览器之间数据交互格式

JSON是一个轻量级的数据交换格式

格式:{"name":"jack","age":"18"}

2.测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 json字符串</title>
		<script>
			//3. 定义json数组
			var c = '[{"name":"rose","age":"20"},{"name":"jack","age":"26"}]' ;
			//4. 把json字符串和js对象互转---JSON工具
			//4.1 json字符串 转成 js对象:::为了方便的调用属性,函数
			var jsobj = JSON.parse(c);
			console.log(jsobj);
			console.log(jsobj[1].age);//获取对象身上的属性值
			console.log(jsobj[0].name);//获取对象身上的属性值
			//4.2 js对象 转成 json字符串:::为了对字符串进行操作,给服务器发送数据
			var json2 = JSON.stringify(jsobj);
			console.log(json2);
			console.log(json2.concat(123));
			console.log(c);
			console.log(c.substr(5));//按照下标截取字符串
			
			//2. 定义json对象
			var b = '{"name":"jack","age":"18"}' ;//是JSON字符串,用来交互数据的格式
			var b2 = {name:"jack",age:18} ;//是JS对象,封装了属性函数
			console.log(b);
			console.log(b.length);//获取长度
			console.log(b.concat(10000));//拼接字符串
			//1. 定义json字符串
			var a =  '"name":"张三"';
			console.log(a);
			console.log(a.length);//获取长度
			console.log(a.concat(123));//拼接字符串
			console.log(a.substr(3));//按照下标截取字符串
		</script>
	</head>
	<body>
	</body>
</html>

四.把HTML代码和JS代码分离

1.创建js文件

//3. 定义json数组
var c = '[{"name":"rose","age":"20"},{"name":"jack","age":"26"}]' ;
//4. 把json字符串和js对象互转---JSON工具
//4.1 json字符串 转成 js对象:::为了方便的调用属性,函数
var jsobj = JSON.parse(c);
console.log(jsobj);
console.log(jsobj[1].age);//获取对象身上的属性值
console.log(jsobj[0].name);//获取对象身上的属性值
//4.2 js对象 转成 json字符串:::为了对字符串进行操作,给服务器发送数据
var json2 = JSON.stringify(jsobj);
console.log(json2);
console.log(json2.concat(123));
console.log(c);
console.log(c.substr(5));//按照下标截取字符串

//2. 定义json对象
var b = '{"name":"jack","age":"18"}' ;//是JSON字符串,用来交互数据的格式
var b2 = {name:"jack",age:18} ;//是JS对象,封装了属性函数
console.log(b);
console.log(b.length);//获取长度
console.log(b.concat(10000));//拼接字符串
//1. 定义json字符串
var a =  '"name":"张三"';
console.log(a);
console.log(a.length);//获取长度
console.log(a.concat(123));//拼接字符串
console.log(a.substr(3));//按照下标截取字符串

2.修改html文件,引入js文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 json字符串</title>
		
		<!-- 引入外部的js文件 -->
		<script src="1.js"></script>
		
	</head>
	<body>
	</body>
</html>

五.Vue

1.概述

Vue是一个渐进式的前端框架,渐进式是指按需配置

2.入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 Vue的入门案例</title>
		<!-- 1, 导入vue.js,用vue的功能 -->
		<script src="vue.js"></script>
		
	</head>
	<body>
		<!-- 2,准备数据渲染区,{{msg}} 叫插值表达着,是vue的固定语法,获取msg变量的值-->
		<div id="app"> {{msg}}  </div>
		<!-- 3,导入vue.js,vue就提供了Vue的工具,想用就new -->
		<script>
			// 3.1, 准备数据(js对象)
			var a = { 
				msg :"hello vue~" 
			}
			//3.2, 把数据渲染到挂载点
			var com = {
				// el属性是用来描述元素(挂载点),  data属性是具体要展示的数据
				el : "#app" ,   //通过css提供的id选择器,选中了id=app的元素
				data : a  //即将把a的数据渲染在挂载点
			}
			//3.3, 准备Vue对象
			new Vue(com);
		</script>
	</body>
</html>

3.总结

4.改造入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 Vue的入门案例</title>
		<!-- 1, 导入vue.js,用vue的功能 -->
		<script src="vue.js"></script>
		
	</head>
	<body>
		<!-- 2,准备数据渲染区,{{msg}} 叫插值表达着,是vue的固定语法,获取msg变量的值-->
		<div id="app"> {{msg}}  </div>
		
		<!-- 3,导入vue.js,vue就提供了Vue的工具,想用就new -->
		<script>
			//准备Vue对象, 把数据渲染到挂载点
			new Vue({
				// el属性是用来描述元素(挂载点), 通过css提供的id选择器,选中了id=app的元素
				el : "#app" ,   
				// data属性是具体要展示的数据,即将把数据渲染在挂载点
				data : { 
					msg :"hello vue~" 
				}  
			});
		</script>
	</body>
</html>

5.总结