cgb2109-day12
Posted cgblpx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了cgb2109-day12相关的知识，希望对你有一定的参考价值。
文章目录
一,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>
以上是关于cgb2109-day12的主要内容，如果未能解决你的问题，请参考以下文章