cgb2108-day11

本文主要是介绍cgb2108-day11，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

- 一,JS练习
- - --1,测试
- 二,DOM
- - --1,概述
  - --2,测试
- 三,JSON
- - --1,概述
  - --2,测试
  - - 创建js文件,存放js代码
    - 创建html网页文件,引入js代码
- 四,Vue
- - --1,概述
  - --2,入门案例
  - --3,总结
  - 4,改造入门案例
- 五,Vue的运算符
- - --1,测试

一,JS练习

–1,测试

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>//创建JS对象:	let an2 = {name : "大黄", //添加属性eat : function(x){ //添加函数console.log('正在吃'+x);}}console.log(an2.name); //调用属性an2.eat('rou');//调用函数function Animal(){}let an = new Animal();an.name="大黄"; //添加属性an.eat=function(x){ //添加函数console.log('正在吃'+x);}console.log(an.name);//调用属性an.eat('s');//调用函数//练习JS函数:模拟concat()拼接字符串 // function concat(a){var concat = function(a){let str = 'hello';return str+a;//返回结果给调用者}//调用函数var res = concat('jack');console.log(res);</script></head><body></body>
</html>

二,DOM

–1,概述

全称是文档对象模型,是JS提供的一种用来快速解析 HTML网页的技术.
利用Document对象提供的API操作元素
常用功能:

getElementById(id属性的值)--通过id属性的值获取元素(只能获取到一个)
getElementsByName(name属性的值)--通过name属性的值获取元素(获取到多个,存入数组)
getElementsByClassName(class属性的值)--通过class属性的值获取元素(获取到多个,存入数组)
getElementsByTagName(标签名的值)--通过标签名获取元素(获取到多个,存入数组)
write(数据)--向网页输出指定数据
innerHTML--获取元素的内容
innerText--获取元素的内容

–2,测试

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 dom技术</title><script>// 1,创建函数function fun(){//先获取Document对象,再调用对象的API// 练习1: 选中id="d",获取内容var a = window.document.getElementById('d');console.log(a); //获取到的元素console.log(a.innerHTML); //获取了内容console.log(document.getElementById('d').innerHTML);//获取了内容// 练习2: 选中我是p2元素,并获取内容var x = document.getElementsByName("b");console.log(x);console.log( x[2] );//获取下标为2的元素console.log( x[2].innerHTML );//获取下标为2的元素 的内容// 练习3: 选中我是p2元素,并修改内容//document.getElementsByName("b")[2].innerHTML='<h1>我变了...</h1>';document.getElementsByName("b")[2].innerText='<h1>我变了...</h1>';//总结:innerText无法解析HTML标签.innerHTML是可以解析HTML标签的// 练习4: 选中我是div3元素,并修改内容document.getElementsByClassName("a")[1].innerHTML='我也变了...';// 练习5: 选中我是div3元素,并修改样式document.getElementsByTagName("div")[2].style.color="red";}</script></head><body><div id="d" onclick="fun()">我是div1</div><div class="a">我是div2</div><div class="a">我是div3</div><div name="b">我是div4</div><p name="b">我是p1</p><p name="b">我是p2</p><p name="b">我是p3</p><p class="a">我是p4</p></body>
</html>

三,JSON

–1,概述

规定了浏览器和服务器交互数据的格式,本质上就是一个字符串.
好处: 轻量级,简洁明了
语法:

–2,测试

在这里插入图片描述

创建js文件,存放js代码

//1,定义json字符串--发送给服务器
var a = '"name":"tony"' ;//json串
var b = '{"name":"jack","age":"20"}' ;//json对象
var c = '[{"name":"rose","age":"20"},{"name":"jerry","age":"10"}]' ;//json数组
console.log(a.length);//求长度
console.log(b.concat('123'));//拼接字符串
//练习1:获取c里的数据 rose 10
var jsobj = JSON.parse(c); //把JSON串变成JS对象
console.log(jsobj);
console.log(jsobj[0]);
console.log(jsobj[0].name);//rose
console.log(jsobj[1].age);//10
//---把两种数据互转,利用JSON工具类---
//2,JSON的parse():json字符串->js对象,好处是:方便的解析对象的属性
var obj = JSON.parse(b);
console.log(obj);
console.log(obj.name);//对象的属性
console.log(obj.age);//对象的属性
//3,JSON的stringify():js对象->json字符串,好处是:方便的对字符串操作,还可以发送给服务器
var car = {name:"BMW",price:9.9} ;
var str = JSON.stringify(car);
console.log(str);
console.log(str.length);//求字符串的长度
//TODO json串和js对象的区别?语法不同+数据的解析方式不同
var d = { name:"tony" , age:20 }//js对象
console.log(d.name);//获取了d对象的name属性的值

创建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,概述

基于JavaScript的渐进式前端框架
基于JavaScript : 本质上就是封装了js代码, 提供vue.js文件
渐进式 : vue框架的功能很丰富的, 自己选择用哪些功能.
前端框架 : 只是提供了一套完善的功能,指定软件的流程
特点:
轻量级 + MVVM思想 + 数据驱动/双向绑定 + 组件化

–2,入门案例

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 vue入门案例</title><!--1.引入vue.js文件,src指定js文件的位置(先找到和自己同级的资源)--><script src="vue/vue.js"></script></head><body><!-- 2.准备数据渲染区:是指在指定位置展示vue提供的数据{{ }} 插值表达式,{{msg}}获取vue提供的msg的值--><div id="app"> {{msg}} </div><!-- 3.创建Vue对象,使用vue准备数据,让第二步获取数据 --><script>var a = { //js对象msg:'hello vue~~~'}new Vue({el:"#app" , data: a})</script></body>
</html>

–3,总结

在这里插入图片描述

4,改造入门案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 vue入门案例</title><!--1.引入vue.js文件,src指定js文件的位置(先找到和自己同级的资源)--><script src="vue/vue.js"></script></head><body><!-- 2.准备数据渲染区:是指在指定位置展示vue提供的数据{{ }} 插值表达式,{{msg}}获取vue提供的msg的值--><div id="app"> {{msg}} </div>{{msg}} <!-- 3.创建Vue对象,使用vue准备数据,让第二步获取数据 --><script>new Vue({//el属性是:挂载点,即将把数据展示在指定位置(css选择器)el:"#app" , //id选择器,用#获取id的值//data属性是:用来准备数据data:{ //js对象msg:'hello vue~~~'}})</script></body>
</html>

五,Vue的运算符

–1,测试

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 vue的运算符</title><!-- 1.引入vue.js --><script src="vue/vue.js"></script></head><body><!-- 2.准备数据渲染区 --><div id="app">加法:{{2+3}}减法:{{2-3}}乘法:{{2*3}}除法:{{3/2}}三元运算符:{{age > 18 ? '成年人' : '未成年' }}</div><!-- 3.创建Vue对象 --><script>new Vue({el:"#app", //挂载点,指定数据要在哪儿展示data:{age:20}})</script></body>
</html>