[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 ...
随机推荐
- 用小程序做一个类似于苹果AssistiveTouch功能
一.首先我先介绍一下,我们要做一个什么样的项目功能 项目功能就是一个音频点击播放,当点击为播放的状态时,一个音频的动图出现,而且是可以跟随着手指的滑动而滑动,而且,在滑动动图的时候,当前下的页面是不可 ...
- UVA-10480-Sabotage(最大流最小割,打印路径)
链接: https://vjudge.net/problem/UVA-10480 题意: The regime of a small but wealthy dictatorship has been ...
- The Preliminary Contest for ICPC Asia Shanghai 2019 L. Digit sum
题目:https://nanti.jisuanke.com/t/41422 思路:预处理 #include<bits/stdc++.h> using namespace std; ][]= ...
- ThoughtWorks.QRCode 生成二维码名片（实现二维码内容换行）
最近在写一个很简单的功能,按照Vcard的格式,生成二维码名片.本来以为分分钟完事的事情,替换数据,直接调用dll去生成二维码. 测试时,发现生成的二维码使用微信扫描得到的名片信息为空,反向解析发现, ...
- luogu 4725 【模板】多项式对数函数（多项式 ln）
$G(x)=ln(A(x))$ $G'(x)=ln'(A(x))A'(x)=\frac{A'(x)}{A(x)}$ 由于求导和积分是互逆的,所以对 $G$ 求积分,即 $G(x)=\int\f ...
- 使用ThreadPoolTaskScheduler动态修改调度时间
用SchedulingConfigurer接口只能统一修改,要分开控制的话有多少个job就要有多少个实现.比较麻烦 配置线程池ThreadPoolTaskScheduler @Configuratio ...
- SWPU2019 伟大的侦探
01editor 选择 EBCDIC编码得到压缩包的密码 这里用到的是福尔摩斯里面的跳舞的小人加密 结果是:iloveholmesandwllm
- 第十周java学习总结
目录 第十周java学习总结 学习内容 代码上传截图 代码链接 第十周java学习总结 学习内容 第12章 Java多线程机制 主要内容 Java中的线程 Thread类与线程的创建 线程的常用方法 ...
- 对AC自动机+DP题的一些汇总与一丝总结 (1)
(1)题意 : 输入n.m.k意思就是给你 m 个模式串,问你构建长度为 n 至少包含 k 个模式串的方案有多少种 分析:(HDU2825) DP[i][j][k] 表示 DP[第几步][哪个节点结尾 ...
- 微信小程序 API 界面（1）
界面 有关屏幕的api 交互: wx.showToast() 显示消息提示框 参数:object object的属性: title:类型 字符串 提示的内容(文本最多7个汉字) icon:类型 字符串 ...