Web--JavaScript（二）

最新推荐文章于 2023-10-09 11:33:43 发布

拯救发际线的张哈哈

最新推荐文章于 2023-10-09 11:33:43 发布

阅读量104

点赞数

分类专栏： MySQL

本文链接：https://blog.csdn.net/weixin_44863429/article/details/99689448

版权

MySQL 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、函数

（一）函数的定义方式

使用function关键词定义

函数的调用（也可以把调用函数放在函数前面，正常执行）

（二）函数的返回值

在函数的内部使用return关键字来返回指定内容（如果想要返回多个值，将多个值存入数组中再返回）

注意：如果函数没有设置返回值，默认返回undefined

（三）函数的三种形式

命名函数：function 函数名(){}

这种定义函数的方式，任何位置都可以调用

匿名函数：一般在表达式中定义，或者用于事件当中，或者是用做回调函数。只能在韩式定义之后调用

自运行函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>函数</title>
</head>
<body>
	<script>
		func();
		//一段特定功能的代码段，就是函数
		//函数的定义方式：使用关键字function
		function func(){
			console.log('我是一个函数');
		}
		//调用函数
		//func()
		//求和函数
		function sum(){
			var res = 1 + 1;
			console.log(res);
			return res;
		}
		var total = sum();
		console.log(total);

		//匿名函数
		//func1();匿名函数只能在函数定义之后调用
		var func1 = function(){
			console.log('我是匿名函数');
		}
		console.log(func1);//输出整个函数
		func1();//输出函数内容

		//自运行函数
		(function(){
			console.log('我是自运行函数');
		})()
	</script>
</body>
</html>

（四）函数的参数

1、定义了形参，传多个实参，多余的实参会自动忽略

2、定义了形参，不传实参，不会报错，形参的值undefined

在函数内部可以使用arguments，获取到所有的实参，是一个类数组对象

作用域：

全局变量：在函数外部定义的变量和在函数内部不适用var定义的变量是全局变量，在任意位置都可以使用

局部变量：在函数内部使用var定义的变量是局部变量，只能在当前函数内部使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>参数</title>
</head>
<body>
	<script>
		function func(msg1,msg2){
			console.log(msg1, msg2);
			//获取所有的实参
			console.log(arguments);
			for(i in arguments){
				console.log(arguments[i]);
				console.log(arguments instanceof Array);
			}
		}
		//定义函数时有形参，调用函数时不传参数
		//func();
		//传多个实参，按照位置传参，多余的实参会自动忽略
		func('a','b','c');

		function func2(){
			console.log('没有形参的函数');
		}
		func2(1, 2, 3);

		
		var a = '外部的a';
		function fun3(){
			a += '我是拼接的内容';
			var b = '我是内部的b';
			c = '我是函数内部定义的全局变量';
			console.log(a, b, c);
		}
		console.log(a);//外部的a
		// console.log(c);//函数内部定义的全局变量只能在函数调用后使用，此处会报错
		fun3();
		// console.log(b);//函数外部是不能访问函数内部的局部变量，此处会报错
		console.log(c);
	</script>
</body>
</html>

（五）对象的操作

对象的定义方式：

（1）使用系统提供Object()实例化对象var对象名=new Object();//创建一个空对象

（2）直接定义：var 对象名 = {key:val,key:function}

（3）使用构造函数创建对象

操作对象：

添加属性：如果属性已经存在就修改，不存在就添加。对象名.属性名=''

修改属性

删除属性：delete 对象名.属性名

查看属性的值：对象名.属性名

调用对象的方法：对象名.方法名()

[]问题：

for in 在遍历对象时，打印属性时需要[]

当属性名被存到变量中的时候，我们需要使用[]

当属性名是字符串的时候，也需要使用[]

this 哪个对象调用了this，this就指向哪个对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		//1.使用系统提供Object()实例化对象
		var obj1 = new Object();

		//对象的操作
		//添加成员属性和成员方法
		obj1.name = '欢欢';
		obj1.say = function(){
			console.log('我太难了~');
		}
		//修改name属性的值
		obj1.name = '刘欢';
		//删除
		// delete obj1.name;
		console.log(obj1.say());

		//2.直接定义
		var obj2 = {
			name:'萌萌',
			say:function(){
				console.log('我太萌了~');
			}
		}
		console.log(obj2);

		//3.使用构造函数实例化对象
		function Student(name){
			this.name = name;
			this.say = function(){
				console.log('我是一头狼');
			}
		}
		//实例化
		var haha = new Student('二哈');
		console.log(haha);

		//js中最大的对象window
		//this这个，那个对象调用了this，this就指向这个对象，在全局中this指向的是window对象
		

		//什么时候用[]
		//当键赋值给变量时，使用[变量名]
		//当键为字符串时，使用[该字符串]
		var obj3 = {name:'贵宾', age:3};
		var key = 'gender';
		obj3[key] = '男';
		console.log(obj3);
		console.log(obj3[key]);

		//添加一个成员属性'length'
		obj3['length'] = '180cm';
		console.log(obj3['length'])

		for(i in obj3){
			console.log(obj3[i]);
		}
	</script>
</body>
</html>

（六）元素操作

js主要的目的是用来操作HTML

如何操作html，css中如果要设置元素的样式，需要通过选择器获取元素。

在js当中如果你要操作元素必须先获取元素对象

如何获取元素：

1、通过id获取元素对象

2、通过标签名获取元素对象

3、通过类名获取元素对象

样式的操作：

设置元素样式，通过js设置的都是行间样式

格式：元素对象.style.css属性=‘值’

注意双拼词，如background-color，要将-去掉，第二个单词首字母大写

元素属性的操作：

getAttribute()

setAttribute()

removeAttribute()

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="box" class="item1"></div>
	<div class="item1"></div>
	<script>
		//1.通过id获取元素对象，返回元素对象：get获取、Element元素、ById
		var oDiv = document.getElementById('box');
		console.log(oDiv, typeof(oDiv));
		//2.通过标签名获取元素对象，返回类数组对象
		var oDivs = document.getElementsByTagName('div');
		console.log(oDivs, typeof(oDivs));
		for(i in oDivs){
			console.log(oDivs[i]);
		}
		//3.通过类名获取元素，返回类数组对象
		var oDivcs = document.getElementsByClassName('item1');
		console.log(oDivcs, typeof(oDivcs));

	//设置元素的样式，通过js设置的都是行间样式
	// 格式：元素对象.style.css属性 = '值';
	// 注意双拼词，如background-color，需要将-去掉，第二个单词首字母大写
	// oDiv.style.width = '200px';
	// oDiv.style.height = '200px';
	// oDiv.style.backgroundColor = 'red';
	// 
	// 通过标签或者类名获取的对象不能直接使用，必须遍历单独设置
	for(var i = 0; i < oDivs.length; i++){
		console.log(oDivs[i]);
		oDivs[i].style.width = "200px";
		oDivs[i].style.height = "200px";
		oDivs[i].style.backgroundColor = "green";
	}
	</script>
</body>
</html>

表单值的操作：value属性

文本值的操作：innerHTML、innerText

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#Div{
			width: 200px;
			height: 200px;
			background: gold;
		}
	</style>
</head>
<body>
	<img src="./img/1.jpg" id="img">
	<div id="Div">
		<h1>就这样被你征服</h1>
	</div>
	<input type="text" value="123" id="inp">
	<script>
		var Img = document.getElementById('img');
		console.log(Img);
		//获取src属性
		console.log(Img.getAttribute('src'));
		//src本身就是img的默认属性，所以可以直接操作
		console.log(Img.src);
		//设置属性
		Img.setAttribute('data', '嘿嘿');
		//Img.setAttribute('src','./img/2.jpg');
		Img.src='./img/2.jpg';
		//删除属性
		Img.removeAttribute('data');


		//表单值的操作 value
		var Inp = document.getElementById('inp');
		console.log(Inp.value);
		Inp.value = '456';

		//文本值的操作
		var oDiv = document.getElementById('Div');
		//获取文本
		//innerHTML 会连标签一起获取
		//innerText 获取纯文本
		console.log(oDiv.innerHTML);
		console.log(oDiv.innerText);

		//设置文本内容
		//innerHTML 会解析标签
		//innerText  不会解析标签
		oDiv.innerHTML = '<h1>切断了所有退路</h1>';
		oDiv.innerText = '<h1>我的心情一落幕</h1>';
	</script>
</body>
</html>

常用的事件：

事件驱动语言

鼠标事件：

鼠标单击事件：onclick

鼠标移入：onmouseover

鼠标移出：onmouseout

鼠标移动：onmousemove

鼠标按下：onmousedown

鼠标抬起：onmouseup

键盘事件：

键盘按下：onkeydown

抬起：onkeyup

表单事件：

获取焦点：onkeydown

失去焦点：onblur

当value值发生改变时触发的事件onchange

提交事件：onsubmit

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#box{
			width: 200px;
			height: 200px;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<form action="" id="form">
		用户名：<input type="text" name="username">
		<select name="sel">
			<option value="0">东莞</option>
			<option value="1">北京</option>
			<option value="2">上海</option>
		</select>
		<button>完事</button>
	</form>
	<script>
		var oDiv = document.getElementById('box');
		//绑定鼠标单击
		var flag = 1;
		oDiv.onclick = function(){
			if(flag == 1){
				//改变背景颜色
				oDiv.style.backgroundColor = 'red';
				flag = 0;
			}else{
				//改变背景颜色
				oDiv.style.backgroundColor='#fff';
				flag = 1;
			}
		}

		//移入事件
		oDiv.onmouseover = function(){
			console.log('鼠标进入');
		}
		//移除事件
		oDiv.onmouseout = function(){
			console.log('鼠标出来');
		}
		// 移动事件
		oDiv.onmouseover = function(){
			console.log('移动');
		}
		//键盘事件
		window.onkeydown = function(){
			console.log('我按下了键盘');
		}
		//键盘抬起事件
		window.onkeyup = function(){
			console.log('抬起来');
		}
		//表单事件
		var Form = document.getElementById('form');
		//获取焦点
		Form.username.onfocus = function(){
			console.log('哈哈哈');
		}
		//失去焦点
		Form.username.onblur = function(){
			console.log('嘿嘿嘿');
		}

		//onchange当value值发生变化时触发
		//对于普通的输入框只有失去焦点时才会触发change事件
		//一般配合下拉选框去使用
		Form.sel.onchange = function(){
			//console.log('pick me');
			//获取当前选中的value值
			//谁触发的事件this就代表那个元素对象
			console.log(this.value);
		}

		//提交事件一般绑定给form元素，当单击提交按钮时触发
		Form.onsubmit = function(){
			alert('别走');
		}

		
	</script>
</body>
</html>