cgb2109-day12

admin • • 前端

文章目录

一,DOM

–1,用法

第一步:获取document对象, window.document,其中window可以省略不写
第二步:使用对象的属性和函数

getElementById()--按照id属性的值,来获取元素,只能获取一个
getElementsByName()--按照name属性的值,来获取元素,获取多个,并存入数组
getElementsByClassName()--按照class属性的值,来获取元素,获取多个,并存入数组
getElementsByTagName()--按照标签名的值,来获取元素,获取多个,并存入数组

innerHTML属性---获取内部的内容
innerText属性---获取内部的内容

–2,测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 DOM</title>
		<!-- DOM就是用一套API来快速的通过js代码获取元素 -->
		<script>
			function get(){
				//1,获取id="a"的元素的内容
				//获取document对象
				//按照id获取元素getElementById("id属性的值")
				var x = document.getElementById("a");
				console.log(x);
				var y = x.innerHTML;//获取元素的内容
				console.log(y);
				//2,获取id="b"的元素的内容 并修改????
				var z = document.getElementById("b").innerHTML;
				console.log(z);
				z='我变了...';
				console.log(z);
				//3,修改id="a"的元素的内容
				document.getElementById("a").innerHTML="我也变了";
				//4,获取我是span1--按照class的值获取
				var a = document.getElementsByClassName("c");
				console.log(a);//按照class获取到了数组
				var b = a[0].innerHTML;//按照下标操作元素
				console.log(b);
				//5,获取我是span1--按照标签名的值获取
				        //  按照标签名span获取到一个数组       下标  获取内容
				var c = document.getElementsByTagName("span")[0].innerHTML;
				console.log(c);
				//6,修改我是span2的内容
				//了解:innerHTML和innerText的区别?前者可以解析HTML代码,后者不能
document.getElementsByClassName("c")[1].innerHTML="<h1>我是渣渣辉</h1>";
				// document.getElementsByClassName("c")[1].innerText="<h1>我是渣渣辉</h1>";
			}
		</script>
	</head>
	<body>
		<button onclick="get()">按钮</button>
		<div id="a">我是div1</div>
		<div id="b">我是div2</div>
		<span class="c">我是span1</span>
		<span class="c">我是span2</span>
	</body>
</html>

二,!!!JSON

–1,概述

是一种轻量级的数据交换格式,本质就是一个字符串.
用来 规定浏览器和服务器之间 数据交换的一个格式.
在这里插入图片描述

–2,测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 json</title>
		<script>
			//1,创建json字符串
			var a ='"name":"jack"';//注意语法!!
			console.log(a);
			console.log(a.length);//求长度
			console.log(a.concat(100));//拼接
			//2,创建json对象--为了方便的操作字符串
			var b = '{"name":"jack","age":"20"}';
			console.log(b);
			console.log(b.length);//获取字符串的长度
			//js对象--为了方便的解析对象的属性
			var b2 = {name:"jack",age:20};
			console.log(b2.name);//获取属性的值
			//3,创建json数组
			var c = '[{"name":"jack","age":"20"},{"name":"rose","age":"18"}]';
			console.log(c.length);
			console.log(c.concat(100));
			//TODO 需求:解析c里面每个属性的值
		//解决方案:把json字符串转成js对象,否则就只能一点一点截取字符串啦!
			//利用js的内置对象JSON,完成json字符串和js对象的互转
			//parse(): json字符串->js对象:为了方便的调用对象的属性
			var obj = JSON.parse(c);
			console.log(obj);
			console.log(obj[0].name);//jack
			console.log(obj[0].age);//20
			console.log(obj[1].name);//rose
			console.log(obj[1].age);//18
			//stringify(): js对象->json字符串:为了方便的操作字符串
			//定义JS对象
			var person={name:"jack",age:20};
			//利用工具变成json字符串
			var str = JSON.stringify(person);
			console.log(str);
			console.log(str.length);
			var y = str.substring(9,13);
			console.log(y);//jack
		</script>
	</head>
	<body>
	</body>
</html>

三,Vue

–1,概述

是一个轻量级的前端框架.封装了HTML CSS JS的代码.
特点:
1, 是一个轻量级的 渐进式的框架, 按需配置
2, 实现了数据驱动/双向绑定 和 组件化的思想(高内聚)
3, vue框架可以避免了DOM的API
4, 遵循了MVVM设计模式,实现前端代码的松耦合
M是Model,是指数据
V是View,是指视图
VM是ViewModel,是指在指定视图里渲染指定数据

–2,入门案例

把vue.js导入到你的项目中

在这里插入图片描述

创建HTML文件,并引入vue.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue框架</title>
		<!-- 1.引入vue.js来用vue框架的核心功能 
			src用来指定js文件的位置
		-->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 2.准备解析vue的数据 
			{{message}}是插值表达式,用来获取message的值
		-->
		<div id="app"> {{message}} </div>
		<!-- 3.给第二步准备数据 -->
		<script>
			var a={
				message:"hello vue~"
			}
			//1,创建Vue对象
			new Vue({
				//el挂载点,意思是,把数据挂载到指定位置
				el:"#app",//利用CSS的id选择,选中了网页中的元素
				//data是vue为挂载点准备好的数据
				data:a
			})
		</script>
	</body>
</html>

测试

在这里插入图片描述

总结

–3,练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习 vue开发步骤</title>
		<!-- 1.引入vue.js -->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 2.准备数据渲染区,插值表达式获取属性的值-->
		<div id="app">
			姓名:{{name}}
			年龄:{{age}}
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			new Vue({
				el:"#app" , //挂载点
				data:{ //给挂载点准备数据
					name:"jack" ,
					age:20
				} 
			})
		</script>
	</body>
</html>

四,Vue的基础语法

–1,运算符&函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue的运算符</title>
		<!-- 1.引入vue.js -->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 2.准备数据渲染区 创建Vue对象 -->
		<div id="app">
			加减乘除运算: {{3+2}} {{3-2}} {{3*2}} {{3/2}} {{3%2}}
			三元运算符: {{ age > 18 ? "成年人" : "未成年" }}
			字符串的常见操作:{{str}} {{str.length}} {{str.concat(100)}}
		
			调用函数: {{ show() }}  {{ print(100) }}  {{add(1,2)}}
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			new Vue({
				//指定挂载点的位置,每个Vue对象必须有这个el属性!!!
				el:"#app",
				data:{ //给数据渲染区准备数据
					age:10,
					str:"hello"
				},
				methods:{ //准备函数
				 //函数名:函数的声明
					show:function(){
						console.log("show()调用成功!");
					},
					print:function(a){
						console.log("print()调用成功"+a);
					},
					add:function(a,b){
						console.log(a+b);
					}
				}
			})
		</script>
	</body>
</html>

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>