cgb2110-day11
Posted cgblpx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了cgb2110-day11相关的知识，希望对你有一定的参考价值。
文章目录
一,复习
–1,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复习</title>
<script>
// 创建json对象 的串
let x = '"name":"tony","age":"20"' ;
//把一个json串(对象/数组)变成JS对象
let xobj = JSON.parse(x);
console.log(xobj);//name: 'tony', age: '20'
// 1,创建JS对象并调用
//方式2:
let u2 =
name : 'tony' ,
age : 20 ,
study : function()
return this.name+this.age ;
console.log(u2.name+u2.age);
let aa = u2.study();
console.log(aa);
//方式1:
function User()
let u = new User();
u.name='tony';
u.age=20;
u.study=function()
return this.name+this.age ;
console.log(u.name+u.age);
let a = u.study();
console.log(a);
</script>
</head>
<body>
</body>
</html>
二,JSON
–1,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 JSON对象</title>
<script>
//1,JSON对象用来把 json字符串 和 js对象互转
//JSON.parse():json字符串 和 js对象,
//好处是方便的解析对象中的属性值
//JSON.stringify():js对象 和 json字符串,
//好处是方便的处理字符串,顺序可以把数据发给后端
//需求:定义一个json串
let a = '"name":"tony","age":"20"';
let b = JSON.parse(a);//json字符串 和 js对象
console.log(b.name);//解析name属性的值
console.log(b.age);//解析age属性的值
//需求:定义一个js对象
let c = name:"rose",age:30;
let cstr = JSON.stringify(c);//把js对象转成json字符串
console.log(cstr.length);//求长度
console.log(cstr.concat(100));//拼接
console.log(cstr.substring(1,5));//截取[1,5)
</script>
</head>
<body>
</body>
</html>
三,DOM
–1,概述
是由JS提供的技术, 用来像CSS的选择器一样, 使用JS提供的一套API, 就可以选中网页中的各种元素
会把HTML网页翻译成一个Document.
–2,Document对象
window.document---获取Document对象
getElementById()---通过id属性的值,获取元素,只有一个
getElementsByName()---通过name属性的值,获取元素,会得到多个,存入数组
getElementsByClassName()---通过class属性的值,获取元素,会得到多个,存入数组
getElementsByTagName()---通过标签名,获取元素,会得到多个,存入数组
title--获取标题
innerHtml--获取内容
innerText--获取内容
–3,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 DOM</title>
</head>
<body>
<div id="d1" onclick="test1()">我是div1</div>
<div class="a">我是div2</div>
<div name="b">我是div3</div>
<p class="a">我是p1</p>
<p class="a">我是p2</p>
<p name="b">我是p3</p>
<span>我是span1</span>
<span>我是span2</span>
<script>
//练习6:点击我是div1时,打印name="b"的第一个元素的内容
function test1()
var x = document.getElementsByName("b");
//x是数组,存了多个数据,可以用下标操作数据
console.log(x[0].innerHTML);
//练习7:点击我是div1时,修改 我是span2 的内容
var y = document.getElementsByTagName("span");
//y是数组,存了多个数据,可以用下标操作数据
y[1].innerHTML='我也变了....';
//1,利用DOM技术,操作网页中的元素
//练习5:修改id="d1"的元素的内容
var e = document.getElementById('d1');
e.innerHTML='我变了';
// e.style.color='red';//修改样式
//了解:innerHTML和innerText的区别?前者能解析HTML标签后者不解析
//练习4:获取class="a"的第二个的内容
var d = document.getElementsByClassName("a");
console.log( d[1].innerHTML );
//练习3:获取id="d1"的元素的内容
var c = document.getElementById("d1");
console.log( c.innerHTML );
//练习1:获取id="d1"的元素
var a = window.document.getElementById("d1");
console.log(a);
//练习2:获取class="a"的元素
var b = document.getElementsByClassName("a");
console.log(b);
</script>
</body>
</html>
–4,把HTML和JS代码分离
HTML中引入js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 DOM</title>
</head>
<body>
<div id="d1" onclick="test1()">我是div1</div>
<div class="a">我是div2</div>
<div name="b">我是div3</div>
<p class="a">我是p1</p>
<p class="a">我是p2</p>
<p name="b">我是p3</p>
<span>我是span1</span>
<span>我是span2</span>
<!-- 引入js文件 -->
<script src="1.js"></script>
</body>
</html>
创建js文件
//练习6:点击我是div1时,打印name="b"的第一个元素的内容
function test1()
var x = document.getElementsByName("b");
//x是数组,存了多个数据,可以用下标操作数据
console.log(x[0].innerHTML);
//练习7:点击我是div1时,修改 我是span2 的内容
var y = document.getElementsByTagName("span");
//y是数组,存了多个数据,可以用下标操作数据
y[1].innerHTML='我也变了....';
//1,利用DOM技术,操作网页中的元素
//练习5:修改id="d1"的元素的内容
var e = document.getElementById('d1');
e.innerHTML='我变了';
// e.style.color='red';//了解修改样式
//了解:innerHTML和innerText的区别?前者能解析HTML标签后者不解析
//练习4:获取class="a"的第二个的内容
var d = document.getElementsByClassName("a");
console.log( d[1].innerHTML );
//练习3:获取id="d1"的元素的内容
var c = document.getElementById("d1");
console.log( c.innerHTML );
//练习1:获取id="d1"的元素
var a = window.document.getElementById("d1");
console.log(a);
//练习2:获取class="a"的元素
var b = document.getElementsByClassName("a");
console.log(b);
四,Vue
–1,概述
是一个轻量级的 MVVM的框架.可以使用数据驱动/双向绑定,组件化,路由…
特点:
1, 综合了HTML CSS JS 技术
2, 渐进式的框架: 按需配置, vue.js + ???
3, 优化了DOM操作网页元素的方式, 使用了CSS的选择器
使用步骤:
1, 在网页中引入 vue.js 文件
–2,入门案例
<!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">
msg
</div>
<!-- 3.准备数据,将被数据渲染区来获取 -->
<script>
//准备数据
var a =
msg : 'hello vue~'
//创建对象
new Vue(
//挂载点:即将在这个位置展示vue数据
el : "#app" , //element元素,使用了CSS里的id选择器
//数据:给挂载点准备数据
data : a
)
</script>
</body>
</html>
–3,MVVM
是Vue框架的一种设计思想,实现代码间的松耦合.
–4,改造入门案例
<!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">
msg
<h1> name </h1>
</div>
<h1> name </h1>
<!-- 3.准备数据,将被数据渲染区来获取 -->
<script>
//创建对象
let vm = new Vue(
//挂载点:即将在这个位置展示vue数据
el : "#app" , //element元素,使用了CSS里的id选择器
//数据:给挂载点准备数据
data ://准备数据
msg : 'hello vue~',
name: 'tony'
)
</script>
</body>
</html>
–5,练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue的练习</title>
<script src="vue.js"></script>
</head>
<body>
<div id="a">
姓名: name
年龄: age
</div>
<script>
new Vue(
el:"#a",
data:
name:'tony',
age:20
)
</script>
</body>
</html>
五,Vue的基础语法
–1,运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="a">
算术运算符: 3+2 3-2 3*2 3/2 3%2
三元运算符: age > 18 ? '成年人' : '未成年'
<div>字符串的内容是: str</div>
<div>字符串的长度是: str.length</div>
<div>字符串拼接后: str.concat(100)</div>
<div>字符串截取后: str.substring(1,3)</div>
</div>
<script>
new Vue(
el:"#a",
data:
age:10,
str:'hello'
)
</script>
</body>
</html>
–2,创建函数
<!DOCTYPE html>
<html>
<head>
以上是关于cgb2110-day11的主要内容，如果未能解决你的问题，请参考以下文章