[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 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 的流程控制、循环和元素的获取、操作的更多相关文章
- Grunt搭建自动化web前端开发环境--完整流程
Grunt搭建自动化web前端开发环境-完整流程 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前 ...
- Web前端-Vue.js必备框架（一）
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- Web前端-Vue.js必备框架（五）
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...
- Web前端-Vue.js必备框架（四）
Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...
- Web前端-Vue.js必备框架（三）
Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...
- Web前端-Vue.js必备框架（二）
Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...
- 【RSA】在 ASP.NET Core中结合web前端JsEncrypt.JS使用公钥加密，.NET Core使用私钥解密；
有一个需求,前端web使用的是JsEncrypt把后端给的公钥对密码进行加密,然后后端对其进行解密: 使用的类库如下: 后端使用第三方开源类库Bouncy Castle进行RSA的加解密和生成PEM格 ...
- python学习第七天流程控制循环while和循环for区别
流程控制循环是任何编程语言都有一种循环结构,在python while 和break continue 搭配使用,还一种while ....else ......,for循环有序列表和字符串 whil ...
- web前端----JavaScript(JS)简单介绍
JavaScript(JS) 一.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEa ...
随机推荐
- ZROI 19.08.03 DP入门
\(n\)个点,要求连一棵树,设点\(i\)的度数为\(d_i\),则其贡献为\(f(d_i)\mod 59393\),其中\(f(x)\)是一个\(k\)次多项式.最大化总贡献.\(n\leq 30 ...
- raster导入postgres Windows命令
cmd命令行 raster2pgsql -s 4326 -I -C -M C:\Users\tt\Downloads\tmean_19_tif\*.tif -F -t 256x256 tmean_19 ...
- postman—随机数和Monitors
postman做重复测试时,随机数就有很大的作用,不用每次都输入 在postman的Params中,输入一个左大括号,会显示三种随机数: 也可以在body中设置 随机数如下: {{$guid}}:添加 ...
- 12.python csv文件写入和读出
import csv headers = ["class", "name", "sex", "height", &quo ...
- sql server 表2字段更新到表1,mysql
UPDATE kingdee_pro_stock set kingdee_pro_stock.org_name=ERP_BASIC_BILLNO_PREFIX.org_name,kingdee_pro ...
- js dom 添加类
var sheng = document.getElementById("sheng"); ; sheng.onclick = function() { if(this.paren ...
- 使用WireMock伪造REST服务
在真正的rest api服务还没有写好之前,为了方便前端测试调用,后端可以写个服务,伪造rest服务(写假数据) 1.官网: http://wiremock.org/ 下载可执行jar:http:// ...
- vscode 代码缩进2格
"editor.detectIndentation":false,
- 解决html5大文件断点续传
一.概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载.在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了.一般断点下载时才用到Range和Content- ...
- [CSP-S模拟测试]:stone（结论+桶+前缀和+差分）
题目描述 $Cab$有两行石子,每个石子上有一个字母,为$'C''A''B'$中的一个.一开始,在每行第一个石子上站着一只$lucky$,$Cab$每次可以选择一个字母,使得所站石子上字母为该字母的$ ...