[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 ...
随机推荐
- Shiro（二）
1 Shiro的授权 1.1 授权流程 1.2 授权方式 shiro支持三种方式的授权 1.2.1 编程式 通过编写if/else完成授权代码. if(subject.hasRole("ro ...
- python类库32[多进程通信Queue+Pipe+Value+Array]
多进程通信 queue和pipe的区别: pipe用来在两个进程间通信.queue用来在多个进程间实现通信. 此两种方法为所有系统多进程通信的基本方法,几乎所有的语言都支持此两种方法. 1)Queue ...
- typing 模块
目录 typing模块 一.引言 二.typing模块的作用 三.使用typing模块 四.typing常用类型 typing模块 目录 一.引言 二.typing模块的作用 三.使用typing模块 ...
- 【NOIP2016提高A组模拟8.23】函数
题目 分析 观察这个是式子\(\sum_{d|n}f(n)=n\), 发现其实函数\(f()\)就是欧拉函数\(φ()\)(见http://blog.csdn.net/chen1352/article ...
- 【leetcode】Max Area of Island
国庆中秋长假过完,又要开始上班啦.先刷个题目找找工作状态. Given a non-empty 2D array grid of 0's and 1's, an island is a group o ...
- 安装c#服务
https://www.cnblogs.com/zmztya/p/9577440.html 1.以管理员身份运行cmd 2.安装windows服务 cd C:\Windows\Microsoft.NE ...
- caffe 安装
安装caffe 拉取镜像 nvidia/cuda:9.0-cudnn7-devel-centos7 1,换源 安装https://blog.csdn.net/tuomen5867/article/de ...
- CSS水印“点击穿透”
- FJWC2017&FJOI2017一试 游记
day1 早上是以前泉州七中的杨国烨讲课.(据说当时看新闻说是一对双胞胎一起上thu的其中一个)课题是图论/网络流. 下午第一道一开始推出来了一个之和面积有关的式子,然后觉得可以容斥一发,觉得 ...
- Android图片上传（头像裁切+原图原样）
下面简单铺一下代码: (一)头像裁切.上传服务器(代码) 这里上边的按钮是头像的点击事件,弹出底部的头像选择框,下边的按钮跳到下个页面,进行原图上传. ? 1 2 3 4 5 6 7 8 9 10 1 ...