前端（十二）—— JavaScript基础操作：if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式

2021-10-14 23:54:52

JavaScript基础操作

一、分支结构

1、if语句

if 基础语法

if (条件表达式) {

    代码块;

}

// 当条件表达式结果为true，会执行代码块；反之不执行

// 条件表达式可以为普通表达式

// 0、undefined、null、""、NaN为假，其他均为真

// 代码块只有一条语句时，{}可以省略

if 复杂语法

// 1.双分支

if (表达式1) {

    代码块1;

} else {

    代码块2;

}

// 2.多分支

if (表达式1) {

} else if (表达式2) {

}

...

else if (表达式2) {

} else {

}

if 嵌套

if (表达式1) {

    if (表达式2) {

    }...

}...

2、switch语句

switch (表达式) {

    case 值1: 代码块1; break;

    case 值2: 代码块2; break;

    default: 代码块3;

}

// 1.表达式可以为 整数表达式 或 字符串表达式

// 2.值可以为 整数 或 字符串

// 3.break可以省略

// 4.default为默认代码块，需要出现在所有case最下方，在所有case均未被匹配时执行

// 5.表达式与值进行的是全等于（===），值与类型都要相等

// 6.多个case可以共用逻辑代码块

switch (表达式) {

    case 值1:

    case 值2:

    case 值3:代码块2; break;

    case 值4:case 值5: case 值6: case 值7:{

			alert('31天');

			break;

		};

    default: 代码块3;

}

// 多个case共用逻辑代码块，两种写法，同行写case | 分行写case，前者后面要用{}

二、循环结构

1、for循环

for (循环变量①; 条件表达式②; 循环变量增量③) {

    代码块④;

}

for (var i = 0 ; i < 10 ; i ++){

    alert('for循环');

}

// 1.循环变量可以在外、在内声明

// 2.执行逻辑 ① ②④③ ... ②④③ ②，入口为①，出口为②，②④③个数为[0, n]

2、while循环

while (条件表达式) {

    代码块;

}

// while 可以解决不明确循环次数，但知道退出循环的条件

3、do...while循环

do {

    代码块;

} while (条件表达式);

4、for...in循环

obj = {"name": "zero", "age": 8}

for (k in obj) {

    console.log(k, obj[k])

}

// 用于遍历对象：遍历的结果为key，通过[]语法访问对应的value

5、for...of循环

iter = ['a', 'b', 'c'];

for (v of iter) {

    console.log(v)

}

// 1.用于遍历可迭代对象：遍历结果为value

// 2.ES6新增，可迭代对象有 字符串、数组、Map、Set、Anguments、NodeList等

6、break，continue关键词

break：结束本层循环
continue：结束本次循环进入下一次循环

三、异常处理

try {

    易错代码块;

} catch (err) {

    异常处理代码块;

} finally {

    必须逻辑代码块;

}

// 1.err为存储错误信息的变量

// 2.finally分支在异常出现与否都会被执行

throw "自定义异常"

// 必要的时候抛出自定义异常，要结合对应的try...catch使用

<script type="text/javascript">

	while (1) {

		var num1 = + prompt("请输入第一个数字:");

		var num2 = + prompt("请输入第二个数字:");

		var res = num1 + num2;

		try {

			if (isNaN(res)) throw "计算有误!";

			alert(res);

			break;

		} catch (err) {

			console.log("异常:" + err);

		} finally {

			console.log('该语句一定会被执行,一次try逻辑执行一次');

		}

	}

</script>

四、函数初级

1、函数的定义

function 函数名 (参数列表) {

    函数体;

}

var 函数名 = function (参数列表) {

    函数体;

}

let 函数名 = (参数列表) => {

    函数体;

}

匿名函数

(function (参数列表) {

    函数体;

})

// 匿名函数定义后无法使用，所以只能自调用

(function (参数列表) {

    函数体;

})(参数列表);

2、函数的调用

函数名(参数列表)

3、函数的参数

个数不需要统一，实参和形参的个数不需要相等

// 当实参个数小于形参的个数，调用函数，没有实参对应的实参，输出undefined

function fn (a, b, c) {

    console.log(a, b, c)  // 100 undefined undefined

}

fn(100)

// 当实参个数多于形参个数，实参的多余部分被丢弃

function fn (a) {

    console.log(a)  // 100

}

fn(100, 200, 300)  // 200,300被丢弃

可以任意位置具有默认值

// 关键字参数可以放在任意位置，有实参则为实参；没有实参，但有默认参数，则用默认参数

function fn (a, b=20, c, d=40) {

    console.log(a, b, c, d)  // 100 200 300 40

}

fn(100, 200, 300)

通过...语法接收多个值

function fn (a, ...b) {

    console.log(a, b)  // 100 [200 300]

}

fn(100, 200, 300)

// ...变量必须出现在参数列表最后

4、返回值

function fn () {

    return 返回值;

}

// 1.可以空return操作，用来结束函数

// 2.返回值可以为任意js类型数据

// 3.函数最多只能拥有一个返回值

五、事件初级

事件需要绑定具体执行函数
事件满足的条件触发绑定的函数
函数完成具体功能

onload：页面加载完毕事件，只附属于window对象
onclick：鼠标点击时间
onmouseover：鼠标悬浮事件
onmouseout：鼠标移开事件
onfocus：表单元素获取焦点
onblur：表单元素失去焦点

<!-- 1.直接将js代码块书写在行间事件中, 不提倡 -->

<div id='div' onclick='div.style.color="red";'></div>

<!-- 2.在行间式时间中调用函数，不提倡 -->

<div id='div' onclick='func()'></div>

<div id='div'></div>

<script>

    window.onload=function(){

        div.style.color='red';

    }

    // 3.为目标时间绑定事件方法，内部可以用this绑定对象本身

    div.onmouseover=function(){

        this.style.color='blue';

    }

</script>

六、JS选择器

1、getElement系列

// 1.通过id名获取唯一满足条件的页面元素

document.getElementById('id名');

// 该方法 只能 由document调用

// 2、通过class名获取所有满足条件的页面元素

document.getElementsByClassName('class名');

// 该方法可以由document及任意页面元素对象调用

// 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组)

// 没有匹配到任何结果返回空HTMLCollection对象 ([])

// 3.通过tag名（标签名）获取所有满足条件的页面元素

document.getElementsByTagName('tag名');

// 该方法可以由document及任意页面元素对象调用

// 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组)

// 没有匹配到任何结果返回空HTMLCollection对象 ([])

<script type="text/javascript">

	// 1.直接可以通过id名,确定页面元素对象(id一定要唯一)

	d.style.color = "cyan";

	// 2.getElement方式

	// document:所有标签都存在于文档中,所有通过document对象就可以找到指定的页面元素对象

	// （1）id，id是唯一的，所以只能获取唯一满足条件的页面元素

    // 注:只有getElementById只能由document调用

	var d1 = document.getElementById('d');

	d1.style.backgroundColor = "pink";

	// （2）class，获取所有满足条件的页面元素

	var d2 = document.getElementsByClassName('dd');

	console.log(d2);  // HTMLCollection 类数组类型

	console.log(d2[0].style);

	d2[0].style.backgroundColor = "cyan";

	d2[1].style.backgroundColor = "blue";

	// （3）tagName，获取所有满足条件的页面元素

	var d3 = document.getElementsByTagName('div');

	d3[1].style.backgroundColor = "#333";

	var body = document.getElementsByTagName('body')[0];

	body.style.backgroundColor = "#eee";

	var d4 = body.getElementsByClassName('dd')[0];

	d4.style.backgroundColor = "orange";

	var d5 = body.getElementsByTagName('div')[1];

	d5.style.backgroundColor = "brown";

</script>

2、querySelect系列

// 1.获取第一个匹配到的页面元素

document.querySelector('css语法选择器');

// 该方法可以由document及任意页面对象调用

// 2.获取所有匹配到的页面元素

document.querySelectorAll('css语法选择器');

// 该方法可以由document及任意页面对象调用

// 返回值为NodeList (一个类数组结果的对象，使用方式同数组)

// 没有匹配到任何结果返回空NodeList对象 ([])

<script type="text/javascript">

	// document.querySelector('css语法选择器')找满足条件的第一个

	// 可以被document调用,也可以被普通对象调用

	var e1 = document.querySelector('#e1'); // id为e1的标签,唯一一个

	e1.style.backgroundColor = "#f7f";

	var e2 = document.querySelector('body .ee'); // body标签下的class为ee的 第一个标签

	e2.style.backgroundColor = "#ff6700";

	var e3 = document.querySelector('body .ee:nth-of-type(5)');

	console.log(e3)

	e3.style.backgroundColor = "#ff6700";

	// document.querySelectorAll('css语法选择器')找满足条件的所有

	var es = document.querySelectorAll('.ee');

	console.log(es); // NodeList,类数组结果的对象

	es[1].style.backgroundColor = "tomato";

</script>

3、id名

可以通过id名直接获取对应的页面元素对象，但是不建议使用

七、JS操作页面内容

innerText：普通标签内容（自身文本与所有子标签文本）
innerHTML：包含标签在内的内容（自身文本及子标签的所有）
value：表单标签的内容
outerHTML：包含自身标签在内的内容（自身标签及往下的所有）

<body>

	<div class="sup">

		sup的文本

		<div class="sub">sub的文本</div>

	</div>

	<form action="">

		<input class="input" type="text" />

		<button class="btn" type="button">获取</button>

	</form>

</body>

<script type="text/javascript">

	// 通过js获取页面需要操作的元素对象

	var sup = document.querySelector('.sup');

	var sub = sup.querySelector('.sub');

	// 获取

 	// 自身及所有子级的文本

	console.log(">>>>>" + sup.innerText);  // sup的文本 \n sub的文本

	console.log(">>>>>" + sub.innerText);  // sub的文本

	// 自身文本及所有子级的所有(包含标签的所有信息:标签名,id名,class名,样式,事件,文本...)

	console.log(">>>>>" + sup.innerHTML);  // <div class="sub">sub的文本</div>

	console.log(">>>>>" + sub.innerHTML);  // sub的文本

	// 赋值

	sub.innerText = "<b>修改的sub文本</b>";

	sub.innerHTML = "<b style='color: red'>修改的sub文本</b>";

	// Text不解析标签语法,原样作为文本赋值给目标对象

	// HTML可以解析标签语法

	console.log(sub.innerHTML);  // <b style='color: red'>修改的sub文本</b>

	console.log(sub.outerHTML);  // <div class="sub"><b style='color: red'>修改的sub文本</b></div>

	var btn = document.querySelector('.btn');

	var ipt = document.querySelector('.input');

	btn.onclick = function () {

		// 获取表单元素的文本值

		// 获取文本

		var v = ipt.value;

		console.log(v);

		// 清空文本

		ipt.value = "";  // 赋值空文本

	}

</script>

八、JS操作页面样式

读写 style属性样式，只能获取行间式的样式

div.style.backgroundColor = 'red';

// 1.操作的为行间式

// 2.可读可写

// 3.具体属性名采用小驼峰命名法

只读计算后样式

// eg: 背景颜色

// 推荐

getComputedStyle(页面元素对象, 伪类).getPropertyValue('background-color');

// 不推荐

getComputedStyle(页面元素对象, 伪类).backgroundColor;

// IE9以下

页面元素对象.currentStyle.getAttribute('background-color');

页面元素对象.currentStyle.backgroundColor;

// 1.页面元素对象由JS选择器获取

// 2.伪类没有的情况下用null填充

// 3.计算后样式为只读

// 4.该方式依旧可以获取行间式样式 (获取逻辑最后的样式)

注意：

1. js操作的就是行间式

2. 行间式优先级高于任何css选择器，一旦行间式修改了样式，那么不管外联式还是内联式都无法修改样式

3. 行间式优先级低于 !important 。如果内联式或外联式有!important，会使用important的样式

4. ele.style.样式只能获取行间式样式，如果没有行间式，那么 ele.style.样式 就无法获取样式

5. getComputedStyle(页面元素对象, 伪类).getPropertyValue('background-color')。计算后样式，不仅可以获取行间式，还可以获取内联式和外联式的样式

6. 颜色在计算后的样式中全部为 rgb(a,b,c) 的形式

<head>

	<meta charset="UTF-8">

	<title>js操作页面样式</title>

	<style type="text/css">

		div#div.div {

			width: 200px;

			height: 200px;

			background-color: red;

		}

	</style>

</head>

<body>

	<div id="div" class="div"></div>

	<button class="btn">切换</button>

</body>

<script type="text/javascript">

	var div = document.querySelector('.div');

	// 需求:切换背景颜色 红 <=> 黄

	// 1.获取原来的颜色

	// 2.判断颜色

	// 3.修改颜色

	// 获取计算后样式

	// getComputedStyle参数: 页面对象 伪类

	// getPropertyValue参数: css语法的样式字符串

	// var bgColor = getComputedStyle(div, null).getPropertyValue('background-color');

	var bgColor = getComputedStyle(div, null).backgroundColor;

	console.log(bgColor);  // rgb(255, 0, 0)

	var btn = document.querySelector('.btn');

	// 点击一下

	btn.onclick = function () {

		// 获取当前颜色一次，只读不能改

		bgColor = getComputedStyle(div, null).backgroundColor;

		console.log(bgColor);

		// 判断并修改

		if (bgColor == 'rgb(255, 0, 0)') {

			div.style.backgroundColor = 'orange';

		} else {

			div.style.backgroundColor = 'red';

		}

	}

</script>

</html>

结合 css 操作样式

页面元素对象.className = "";  // 清除类名

页面元素对象.className = "类名";  // 设置类名

页面元素对象.className += " 类名";  // 添加类名

<head>

	<meta charset="UTF-8">

	<title>js操作类名</title>

	<style type="text/css">

		.div {

			width: 200px;

			height: 200px;

			background-color: red;

			display: none;

		}

		.show {

			width: 200px;

			height: 200px;

			background-color: red;

			display: block;

		}

		.hidden {

			display: none;

		}

		.border {

			border: 1px solid black;

		}

	</style>

</head>

<body>

	<button class="btn1">显示</button>

	<button class="btn2">加边框</button>

	<button class="btn3">改颜色</button>

	<button class="btn4">加文本</button>

	<button class="btn5">隐藏</button>

	<div class="div"></div>

</body>

<script type="text/javascript">

	var div = document.querySelector('.div');

	var b1 = document.querySelector('.btn1');

	var b5 = document.querySelector('.btn5');

	var b2 = document.querySelector('.btn2');

	var b4 = document.querySelector('.btn4');

	b1.onclick = function () {

		div.className = 'show';

	}

	b5.onclick = function () {

		div.className = 'hidden';

	}

	b2.onclick = function () {

		div.className += ' border';

	}

	b4.onclick = function () {

		div.innerText += "文本";

	}

</script>

码农公寓

JavaScript基础操作

一、分支结构

1、if语句

2、switch语句

二、循环结构

1、for循环

2、while循环

3、do...while循环

4、for...in循环

5、for...of循环

6、break，continue关键词

三、异常处理

四、函数初级

1、函数的定义

2、函数的调用

3、函数的参数

4、返回值

五、事件初级

六、JS选择器

1、getElement系列

2、querySelect系列

3、id名

七、JS操作页面内容

八、JS操作页面样式

注意：

相关文章