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 的流程控制、循环和元素的获取、操作的更多相关文章

  1. Grunt搭建自动化web前端开发环境--完整流程

    Grunt搭建自动化web前端开发环境-完整流程 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前 ...

  2. Web前端-Vue.js必备框架（一）

    Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  3. Web前端-Vue.js必备框架（五）

    Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...

  4. Web前端-Vue.js必备框架（四）

    Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...

  5. Web前端-Vue.js必备框架（三）

    Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...

  6. Web前端-Vue.js必备框架（二）

    Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...

  7. 【RSA】在 ASP.NET Core中结合web前端JsEncrypt.JS使用公钥加密，.NET Core使用私钥解密；

    有一个需求,前端web使用的是JsEncrypt把后端给的公钥对密码进行加密,然后后端对其进行解密: 使用的类库如下: 后端使用第三方开源类库Bouncy Castle进行RSA的加解密和生成PEM格 ...

  8. python学习第七天流程控制循环while和循环for区别

    流程控制循环是任何编程语言都有一种循环结构,在python while 和break continue 搭配使用,还一种while ....else ......,for循环有序列表和字符串 whil ...

  9. web前端----JavaScript(JS)简单介绍

    JavaScript(JS) 一.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEa ...

随机推荐

  1. python内存相关以及深浅拷贝讲解

    3.9 内存相关 3.9.1 id,查看内存地址 >>> v1 = [11,22,33] >>> v2 = [11,22,33] >>> prin ...

  2. HDU-4185-Oil Skimming（最大匹配）

    链接: https://vjudge.net/problem/HDU-4185 题意: Thanks to a certain "green" resources company, ...

  3. 【NOIP2012模拟10.25】单元格

    题目 在一个R行C列的表格里,我们要选出3个不同的单元格.但要满足如下的两个条件: (1)选中的任意两个单元格都不在同一行. (2)选中的任意两个单元格都不在同一列. 假设我们选中的单元格分别是:A, ...

  4. IntelliJ IDEA 2019.3激活破解教程（亲测有效，可激活至 2089 年）

    IntelliJ IDEA 2019.3激活破解教程(亲测有效,可激活至 2089 年) 所有软件安装位置,作者均在无中文.无空格目录下进行操作的 IntelliJ IDEA 2019.3激活破解教程 ...

  5. CodeForces 1100F Ivan and Burgers

    CodeForces题面 Time limit 3000 ms Memory limit 262144 kB Source Codeforces Round #532 (Div. 2) Tags da ...

  6. sublime的python开发环境搭建

    至少很长一段时间内,我个人用的一直是pycharm,也感觉挺好用的,也没啥大毛病 但是pycharm确实有点笨重,啥功能都有,但是有很多可能这辈子我也不会用到,并且pycharm打开的速度确实不敢恭维 ...

  7. Selenium 多表单(frame/iframe)切换

    frame标签有frameset.frame.iframe三种,frameset跟其他普通标签没有区别,不会影响到正常的定位,而frame与iframe需要切换进去才能定位到其中的元素 比如下面这个网 ...

  8. Codechef SEAARC Sereja and Arcs (分块、组合计数)

    我现在真的什么都不会了呢...... 题目链接: https://www.codechef.com/problems/SEAARC 好吧,这题其实考察的是枚举的功力-- 题目要求的是\(ABAB\)的 ...

  9. Unity PlayerPrefs 存储的位置

    Mac OS 在Mac OS X上PlayerPrefs是存储在~/Library/Preferences文件夹,名为unity.[company name].[product name].plist ...

  10. SVG相关学习(一)SVG基础

    SVG 相关学习 SVG SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG viewBox <svg width="500" heigh ...