[Web 前端] 023 js 的流程控制循环和元素的获取操作
Posted yorkyu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[Web 前端] 023 js 的流程控制循环和元素的获取操作相关的知识，希望对你有一定的参考价值。
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 53. 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 的流程控制循环和元素的获取操作的主要内容，如果未能解决你的问题，请参考以下文章