10前端核心技术-JavaScript条件和循环结构

目录

JavaScript条件语句

1. if 语句

2. if...else 语句

3. if...else if...else 语句

4. JavaScript switch 语句

JavaScript获取和设置HTML元素

JavaScript常用事件

JavaScript循环语句

1.while 循环

2.do/while 循环

3.for 循环

break 和 continue 语句

---

JavaScript条件语句

在 JavaScript 中，我们可使用以下条件语句：

• if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
• if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
• if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
• switch 语句 - 使用该语句来选择多个代码块之一来执行

1. if 语句

只有当指定条件为 true 时，该语句才会执行代码。

if ( /*条件*/ ) {
	/*当条件为 true 时执行的代码*/
}

2. if...else 语句

可以有两个分支选择性执行的语句。当条件为 true 时执行if的代码，否则执行else中的代码。

if ( /*条件*/ ) {
	/*当条件为 true 时执行的代码*/
}
else{
	/*当条件不为 false 时执行的代码*/
}

3. if...else if...else 语句

对if...else的补充，可以有任意多个分支，其中if分支必须在最前面，else if语句必须在中间，else语句必须在最后面，else语句可以不写。多个分支最多只有一个选项可以被执行。

if ( /*条件1*/ ) {
	/*当条件 1 为 true 时执行的代码*/
}
else if ( /*条件2*/ ) {
	/*当条件 2 为 true 时执行的代码*/
}
...
else{
	/*当条件 1 和 条件 2 都不为 true 时执行的代码*/
}

4. JavaScript switch 语句

switch 语句和if的区别在于：

• switch语句只能判断某个变量是否等于某个值，if语句可以判断任意条件
• switch语句可以有多个分支同时执行，if语句最多只能有一个分支被执行
• switch语句可以使用break语句，if不能使用switch语句

var n=1;
switch(n) {
	case 1: //如果n=1，则执行这里的代码
		alert(‘n=1’); //弹窗提示
		break; //执行到这里就停止，不再执行下面的代码
	case 2: //如果n=2，则执行这里的代码
		alert(‘n=2’); //弹窗提示
		break; //执行到这里就停止，不再执行下面的代码
	default: //如果n不等于1也不等于2，则执行这里的代码
}

JavaScript获取和设置HTML元素

1.通过ID属性获取HTML元素，只能获取第一个

var name = document.getElementById('name')

2.通过CLASS属性获取HTML元素，可以获取多个，用item(n)来获取第n个

var text = document.getElementsByClassName('text'); // 获取所有class=text的元素
var first = text.item(0); // 获取第1个
var first = text.item(1); // 获取第2个

3.通过标签名获取HTML元素，可以获取多个，用item(n)来获取第n个

var button = document.getElementsByTagName('button'); // 获取所有标签名称为button的元素
var button = text.item(0); // 获取第1个
var button = text.item(1); // 获取第2个

4.使用“.value”来设置或者获取HTML输入框元素的值

// 获取输入框的值
var name = document.getElementById('name'); // 获取id=name的输入框
var value = name.value; // 获取输入框的value值
// 或者
var value = document.getElementById('name').value; // 获取id=name的输入框的值

// 设置修改输入框的值
var name = document.getElementById('name'); // 获取id=name的输入框
name.value = "JavaScript修改的内容"; // 将输入框的值修改成"JavaScript修改的内容"
// 或者
document.getElementById('name').value = "JavaScript修改的内容"; // 将输入框的值修改成"JavaScript修改的内容"

5.使用“.innerHTML”来设置或者获取HTML双边元素内部的所有子元素和文字

// 获取双标签元素的内容
var value = document.getElementsByClassName('text').item(0).innerHTML;
// 设置修改双标签元素的内容
document.getElementsByClassName('text').item(0).innerHTML = "<h1>你好</h1>";

6.使用“.innerText”来设置或者获取HTML双边元素内部的所有文字

// 获取双标签元素的内容
var value = document.getElementsByTagName('button').item(0).innerText;
// 设置修改双标签元素的内容
document.getElementsByTagName('button').item(0).innerText = '搜索';

JavaScript常用事件

文档加载事件

window.onload = function(){
    /*里面写代码*/ 
}

元素点击事件

document.getElementById('name').onclick = function(){
    /*里面写代码*/ 
}

元素双击事件

document.getElementById('name').ondblclick = function(){
    /*里面写代码*/ 
}

表单输入元素获取焦点时的事件

document.getElementById('name').onfocus = function(){
    /*里面写代码*/ 
}

表单输入元素失去焦点时的事件

document.getElementById('name').onblur = function(){
    /*里面写代码*/ 
}

JavaScript循环语句

1.while 循环

先判断条件，只要指定条件为 true，循环就可以一直执行代码块。

语法：

while ( /*条件*/ ) {
	/*需要执行的代码*/
}

2.do/while 循环

do/while 循环是 while 循环的变体。无论条件是否成立至少会执行一次。

先执行一次代码，再判断条件，如果条件为真的话，就会重复这个循环。

语法：

do{
	/*需要执行的代码*/
}while ( /*条件*/ );

3.for 循环

for循环常用于已知循环次数的情况。

语法：

for ( 语句1 ; 语句2 ; 语句3 ) {
	/*被执行的代码块*/
}

break 和 continue 语句

break 和 continue 语句都可以控制循环语句的循环次数。

• break 语句用于跳出整个循环。
• continue 用于跳过循环中的某一次。