cgb2106-day09
Posted cgblpx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了cgb2106-day09相关的知识，希望对你有一定的参考价值。
文章目录
一,JS对象
–1,内置对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS 对象</title>
<script>
<!-- Window对象 -->
//当整个网页都加载完,才会被执行的功能
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代码分离
–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>
<!-- 引入外部的js文件 -->
<script src="1.js"></script>
</head>
<body>
</body>
</html>
五,Vue
–1,概述
Vue是一个渐进式的前端框架. 渐进式是指按需配置
–2,入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 Vue的入门案例</title>
<!-- 1, 导入vue.js,用vue的功能 -->
<script src="vue.js"></script>
</head>
<body>
<!-- 2,准备数据渲染区,{{msg}} 叫插值表达着,是vue的固定语法,获取msg变量的值-->
<div id="app"> {{msg}} </div>
<!-- 3,导入vue.js,vue就提供了Vue的工具,想用就new -->
<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,总结
–4,改造入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 Vue的入门案例</title>
<!-- 1, 导入vue.js,用vue的功能 -->
<script src="vue.js"></script>
</head>
<body>
<!-- 2,准备数据渲染区,{{msg}} 叫插值表达着,是vue的固定语法,获取msg变量的值-->
<div id="app"> {{msg}} </div>
<!-- 3,导入vue.js,vue就提供了Vue的工具,想用就new -->
<script>
//准备Vue对象, 把数据渲染到挂载点
new Vue({
// el属性是用来描述元素(挂载点), 通过css提供的id选择器,选中了id=app的元素
el : "#app" ,
// data属性是具体要展示的数据,即将把数据渲染在挂载点
data : {
msg :"hello vue~"
}
});
</script>
</body>
</html>
–5，总结
以上是关于cgb2106-day09的主要内容，如果未能解决你的问题，请参考以下文章