cgb2107-第二阶段-day10-js-json

最新推荐文章于 2022-04-18 00:06:03 发布

qq_40151384

最新推荐文章于 2022-04-18 00:06:03 发布

阅读量84

点赞数

分类专栏：学习经历文章标签： json javascript node.js

本文链接：https://blog.csdn.net/qq_40151384/article/details/120168583

版权

学习经历专栏收录该内容

44 篇文章 0 订阅

订阅专栏

一,js 函数

在这里插入图片描述

一测试

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试js函数</title>
    <script>
      //统计1~100里4的整数倍数的和
      //1方式1:
      //1.定义js函数
      function test1() {
        var sum = 0; //定义总量,记录总和
        for (var i = 1; i < 100; i++) {
          if (i % 4 == 0) {
            sum = sum + i;
          }
        }
        return sum; //把算完的和返回给调用者
      }
      //2.调用函数
      var a = test1();
      console.log(a);

      //方式2:
      //1.定义函数:
      var test2 = function () {
        console.log(100);
      };
      var test3 = function () {
        return 666; //返回值, 交给调用者保存
      };
      var test4 = function (a, b, c) {
        return a + b + c;
      };

      //调用函数
      var tt = test4(1, 2, 3);
      console.log(tt);

      var t = test3();
      console.log(t);

      test2();
    </script>
  </head>
  <body></body>
</html>

二js对象

测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 JS的对象</title>
		<script>
			//2. js的自定义对象
			//方式2: {name: 'jack', age: 20}
				//练习:创建新的js对象
				var car = {
					//绑定属性 k:v
					color : 'red' ,
					price : 9.9 ,
					//绑定函数
					run : function(a,b){
						console.log(a+b);
					},
					stop : function(x,y,z){
						return x+y+z ;//返回给调用者
					}
				}
				//调用属性
				console.log(car.color + car.price);
				//调用函数
				var res = car.stop(1,2,3);
				console.log(res);
				car.run(1,2);
				console.log(car);
				
				var teacher = {
					//绑定属性
					name : 'jack',
					age : 20 ,
					//绑定函数
					run : function(){
						console.log(100);
					},
					eat : function(){
						console.log(200);
					}
				}
				teacher.eat();//调用函数
				teacher.run();
				console.log( teacher.name );//调用属性的值可以打印或修改
			
			//方式1:
				function Student(){}//声明对象
				var s = new Student();//创建对象
				//绑定属性
				s.name='蔡徐坤';
				s.hobby='唱跳rap';
				//绑定函数
				s.sing=function(){
					console.log("solo...");
				}
				console.log(s);
				s.sing();
			
				function Person(){}//声明对象
				var p = new Person();//创建对象
				//动态的给对象绑定属性
				p.name = 'jack';
				p.age = 20;
				//动态的给对象绑定函数
				p.eat = function(){
					console.log(100);
				} 
				console.log(p);
				p.eat();//调用函数
				
			//1.js的内置对象
				//document对象,JSON对象...重点后面讲
				//window对象的常用功能--了解
				// window.alert('123');//弹出框
				// window.confirm('请选择');//确认框
				// window.prompt('请输入');//输入框
				// window.document //获取document文档对象
				// //string对象的常用功能--了解
				// alert('123'.length);//求字符串的长度
				// alert('123'.concat("hello"));//拼接字符串
				// //number对象的常用功能--了解
				// alert(3.3333.toFixed(2));//约束小数位数,参数是小数的位数
				// var a = parseInt('100')+1 ;//把字符串转成数字
				// alert(a);//101
		</script>
	</head>
	<body>
	</body>
</html>

三.dom技术

1. 概述

全称是文档对象模型.用来利用document对象提供的各种属性和方法,方便快速的定位网页中的所有元素

–2,document对象

1, 获取对象: window.document
2, 常用的方法:
按照id的值获取元素: getElementById(id属性的值)–只会获取到一个元素
按照name的值获取元素: getElementsByName(name属性的值)–获取到多个元素 , 存入数组
按照class的值获取元素: getElementsByClassName(class属性的值)–获取到多个元素 , 存入数组
按照标签名的值获取元素: getElementsByTagName(标签的名字)–获取到多个元素 , 存入数组
直接向网页输出: write()
3, 常用的属性:
title–返回网页的标题
id–设置或返回元素的id
innerHTML–设置或返回元素的内容

3.测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 DOM技术</title>
		<!-- 
			DOM: document object model 文档对象模型,用来利用js的技术快速的操作元素 
			利用核心对象document提供的API完成
		-->
		
	</head>
	<body>
		<!-- onclick给元素设置鼠标点击事件,调用指定函数test1() -->
		<div onclick="test1()">我是div1</div>
		<div name="n1">我是div2</div>
		<div class="c1">我是div3</div>
		<span id="d1">我是span1</span>
		<span name="n1">我是span2</span>
		<a href="#" class="c1">点我</a>
		<script>
			// 1. 定义函数--当点击我是div1时触发
			function test1(){
				//需求3:输出第二个class="c1"的元素内容
				var data2 = document.getElementsByClassName("c1")[1].innerText;
				console.log(data2);
				//修改元素内容
				// document.getElementsByClassName("c1")[1].innerText='<p>我是p1</p>';//不解析标签
				document.getElementsByClassName("c1")[1].innerHTML='<p>我是p1</p>';//解析
				//修改元素的样式css变字的颜色
				document.getElementById("d1").style.color='red' ;
				
				//需求2:输出第一个name="n1"的元素内容
				//document.getElementsByName根据name属性获取到多个元素,存入数组
				//[0]按照下标,获取到数组里的第一个元素
				var data = document.getElementsByName("n1")[0].innerText ;
				console.log(data);
				//也可以选中元素后,直接修改内容
				document.getElementsByName("n1")[0].innerHTML='<h1>我又变了...</h1>' ;
			//document对象提供的innerHTML和innerText属性的区别?前者可以解析HTML代码
				
				
				//需求1:输出了id=d1的元素内容
				var a = document.getElementById("d1");//获取id=d1的元素
				console.log(a);//输出了整个元素
				console.log(a.innerHTML);//获取元素的内容
				a.innerHTML='我变了....';//修改元素的内容
			}
		</script>
	</body>
</html>

四,JSON

–1,概述

就是一个字符串,作用就是用来,完成浏览器和服务器之间的数据的交换
规定了浏览器和服务器之间的数据的格式 : ’ “name” : “jack” ’

-2.测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 JSON字符串</title>
		<!-- JSON用来完成  浏览器和服务器之间 的数据交换 的格式 -->
		<script>
			// 1. 定义一个简单的json字符串
			var a = '"name":"jack"' ;
			console.log(a);
			console.log(a.length);//求字符串的长度
			// 2. 定义一个json对象
			var b = '{"name":"jack","age":"20"}' ;
			console.log(b);
			var c = b.concat('hello');//b拼接字符串
			// 3. 定义一个json数组
var d ='[{"firstname":"tom","lastname":"chen"},{"firstname":"jerry","lastname":"wang"}]';
			console.log(d);
			
	//问题: 解析json字符串里的数据太麻烦,还要对字符串进行切割截取....
	//解决方案:把一个json字符串转成JS对象,再通过对象方便的调用属性的值--利用JSON对象
			
			
		</script>
	</head>
	<body>
	</body>
</html>

qq_40151384

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cgb2107-第二阶段-day10-js-json

一,js 函数一测试<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
复制链接

扫一扫