cgb2106-day09

逃离我推掉我的手 2021-09-11 03:24 357阅读 0赞

### 文章目录 ###

*   *  一,JS对象
     *   *  \--1,内置对象
         *  \--2,自定义对象
     *  二,DOM
     *   *  \--1,概述
         *  \--2,测试
     *  三,JSON
     *   *  \--1,概述
         *  \--2,测试
     *  四,把HTML代码和JS代码分离
     *   *  \--1,创建js文件
         *  \--2,修改html文件,引入js文件
     *  五,Vue
     *   *  \--1,概述
         *  \--2,入门案例
         *  \--3,总结
         *  \--4,改造入门案例
         *  \--5，总结

## 一,JS对象 ##

### –1,内置对象 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>JS 对象</title>
    		<script>  //当整个网页都加载完,才会被执行的功能 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,概述 ###

本质就是把网页文件看做一个Document文档对象. 提供了一套API, 可以操作网页中的所有元素  
Document文档对象:  
提供方法:  
getElementById(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代码分离 ##

![在这里插入图片描述][bb9302aae35b4be2947cb808fd53db70.png]

### –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>
    		
    		
    		<script src="1.js"></script>
    		
    	</head>
    	<body>
    	</body>
    </html>

## 五,Vue ##

### –1,概述 ###

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

### –2,入门案例 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测试 Vue的入门案例</title>
    		
    		<script src="vue.js"></script>
    		
    	</head>
    	<body>
    		
    		<div id="app"> {
       {msg}}  </div>
    		
    		<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,总结 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70]

### –4,改造入门案例 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测试 Vue的入门案例</title>
    		
    		<script src="vue.js"></script>
    		
    	</head>
    	<body>
    		
    		<div id="app"> {
       {msg}}  </div>
    		
    		
    		<script> //准备Vue对象, 把数据渲染到挂载点 new Vue({ // el属性是用来描述元素(挂载点), 通过css提供的id选择器,选中了id=app的元素 el : "#app" , // data属性是具体要展示的数据,即将把数据渲染在挂载点 data : { msg :"hello vue~" } }); </script>
    	</body>
    </html>

### –5，总结 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 1]

[bb9302aae35b4be2947cb808fd53db70.png]: /images/20210911/e9a10bd340284c22b0c1d418e05fd744.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70]: /images/20210911/83319c7f4cda418883aab6d7370128c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 1]: /images/20210911/70b0fa9b0401475da7197afa5dd0c35e.png