cgb2107-day10

cgblpx

已于 2022-02-09 09:34:32 修改

阅读量4.1k

点赞数 7

分类专栏： cgb2107班的笔记文章标签： java

于 2021-09-07 09:01:06 首次发布

本文链接：https://blog.csdn.net/u012932876/article/details/120150473

版权

cgb2107班的笔记专栏收录该内容

19 篇文章 62 订阅

订阅专栏

文章目录

一,JS函数

在这里插入图片描述

–1,测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js函数</title>
		<script>
			//统计1~100里4的整数倍数的和
			//方式1: 
			//1. 定义js函数
				function test1(){
					var sum = 0 ;//定义变量,记录总和
					for(var i=1;i<=100;i++){
						if(i % 4 == 0){//4的整数倍
							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;
				}
			//2.调用函数
				var tt = test4(1,2,3);
				console.log(tt);
				
				var t = test3();
				console.log(t);
				
				test2();
				
		</script>
	</head>
	<body>
	</body>
</html>

二,JS对象

–1,测试

<!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对象提供的各种属性和方法,方便快速的定位网页中的所有元素

–3,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>