[Web 前端] 023 js 的流程控制、循环和元素的获取、操作

时间：2019-08-03 21:23:23 阅读：123 评论：0 收藏：0 [点我收藏+]

标签：strong 重复 code ++ 形式不同的循环语句 document continue

1. Javascript 流程控制

用于“基于不同条件执行不同的动作”的场合

1.1 if 语句

三种形式

// 第一种
if...

// 第二种
if... 
else ...

// 第三种
if...
else if...
else...

支持
- 单分支
- 双分支
- 多分支
注意
- else if 中间必须要有空格
对第二种形式举例

if(1+1=2){
    console.log("true");
}
else{
    console.log("false");
}

1.2 switch 语句

多分支语句，形如

 switch(n){
    case 1:
        ...
        break;
    case 2:
        ...
        break;
    ...
    default:
        ... // 对于 case 1 ~ case n 均不符合时，执行此语句
}

2. Javascript 循环

对于程序中有规律的重复性操作，可以使用到循环语句
break 与 continue 语句使循环中的代码可以被更方便地控制

2.1 for 循环

for(var i=0; i<len; i++){
    ...
}

2.2 while 循环

var i=0;
while(i<8){
    ...
    i++;
}

2.3 for-in 语句

for-in 语句是严格的迭代语句，用于枚举对象的属性

var lst = [1, 2, 3, 4, 5];
for(i in lst){ // 迭代的是数组的下标
   document.write(lst[i] + ' ');
} // 输出：1 2 3 4 5

3. Javascript 元素获取

可以使用内置对象 document 上的 getElementById() 方法来获取页面上设置了 id 属性的元素
获取到的是一个 html 对象
然后将它赋值给一个变量

3.1 错误的写法

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
...
<div id="div1">这是一个 div 元素</div>

出错的原因
- 程序自上而下加载执行
- 上方语句把 javascript 写在元素的上面，javascript 去页面上获取元素 div1 的时候，元素 div1 还没有加载

3.2 正确的写法

3.2.1 第一种写法

将 javascript 放到页面最下边

<body>
    ....
    <div id="div1">这是一个 div 元素</div>
    ....
    <script type="text/javascript">
        var oDiv = document.getElementById('div1');
    </script>
</body>

3.2.2 第二种写法

将 javascript 语句放到 window.onload 触发的函数里面
获取元素的语句会在页面加载完后才执行

<body>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById('div1');
        }
    </script>
    ....
    <div id="div1">这是一个div元素</div>
</body>

4. Javascript 元素操作

4.1 样式操作

形式
- 标签对象.style.css属性名 = "值"; // 改变标签对象的样式
示例
- id.style.color = "red";
注意
- 属性名相当于变量名
- 若 css属性名中含有双拼词（形如 font-size），要把减号去掉并将后面的单词的首字母大写（形如 fontSize），即“小驼峰”

4.2 文本操作

形式
- 标签对象.innerHTML = "内容"；// 在标签对象内放置指定内容
获取一般使用 innerText

4.3 表单中值的操作

形式
- 标签对象.value； // 获取标签对象的 value 值
- 标签对象.value = ”值“；// 设置标签对象的 value 值

[Web 前端] 023 js 的流程控制、循环和元素的获取、操作

标签：strong 重复 code ++ 形式不同的循环语句 document continue

原文地址：https://www.cnblogs.com/yorkyu/p/11296176.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行