[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 ...
随机推荐
- Quartz（一）
1 Quartz介绍 定时任务,无论是互联网公司还是传统的软件行业都是必不可少的,Quartz是好多优秀的定时任务开源框架的基础的. 我们应用最简单和最基础的配置,不需要太多参数,就可以轻松掌握企业中 ...
- java获取访问者真实的IP地址
众所周知java方法request.getremoteaddr()可以获得访问者的IP地址 但是在通过了Apache,Squid等反向代理软件就不能获取到客户端的真实IP地址了.如果使用了反向代理软件 ...
- redis主从+keepalived实现高可用技术
Redis是我们当下比较流行使用的非关系数据库,可支持多样化的数据类型,多线程高并发支持,redis运行在内存拥有更快的读写.因为redis的表现如此出色,如何能保障redis在运行中能够应对宕机故障 ...
- 【NOIP2017提高组模拟12.10】神炎皇
题目 神炎皇乌利亚很喜欢数对,他想找到神奇的数对. 对于一个整数对(a,b),若满足a+b<=n且a+b是ab的因子,则成为神奇的数对.请问这样的数对共有多少呢? 分析 设\(gcd(a,b)= ...
- 【NOIP2016提高A组模拟9.15】Math
题目 分析 因为\((-1)^2=1\), 所以我们只用看\(\sum_{j=1}^md(i·j)\)的值模2的值就可以了. 易证,一个数x,只有当x是完全平方数时,d(x)才为奇数,否则为偶数. 那 ...
- C# 、Java数组申明、初始化区别
一.数组申明 int[] a1 int a2[] C# 支持 不支持 Java 支持 支持 二.数组申明且初始化 int[] a1 = new int[] { 2, 31 } int a1[ ...
- antd不可选择时间
//不能选择今天之前的日期<DatePicker format={this.timeFormat} showTime placeholder="项目结束日期" disable ...
- ubuntu 7z解压
安装方法: sudo apt-get install p7zip 解压文件: 7z x manager.7z -r -o /home/xx 解释如下: x 代表解压缩文件,并且是按原始 ...
- sh_10_体验模块
sh_10_体验模块 import sh_10_分隔线模块 sh_10_分隔线模块.print_line("-", 50) print(sh_10_分隔线模块.name)
- 容器————map
序列容器是管理数据的宝贵工具,但对大多数应用程序而言,序列容器不提供方便的数据访问机制.一种典型的方法是通过名称来寻找地址.如果记录保存在序列容器中,就只能通过搜索得到这些数据.相比而言,map 容器 ...