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. vuex 管理状态

    来分析下vuex的管理状态吧,如果你用过react中的redux的管理树,那我觉得vuex对你来说很容易掌握 如果你还是不太熟悉vuex是什么,那先看下官网https://vuex.vuejs.org ...

  2. 在Tomcat中部署Java Web应用程序几种方式

    在Tomcat中部署Java Web应用程序有两种方式:静态部署和动态部署.在下文中$CATALINA_HOME指的是Tomcat根目录. 一.静态部署      静态部署指的是我们在服务器启动之前部 ...

  3. 源码编译git-go

    2018.8.29 安装指定版本的git 一,安装 编译前准备: 依赖库 yum install curl-devel expat-devel gettext-devel openssl-devel ...

  4. net core 接受post值

    public static string GetPostParams(HttpContext context) { string param = string.Empty; if (context.R ...

  5. TCP连接的11种状态，三次握手四次挥手原因

    1).LISTEN:首先服务端需要打开一个socket进行监听,状态为LISTEN. /* The socket is listening for incoming connections. 侦听来自 ...

  6. Ubuntu18.04修改为阿里云

    对源安装时,要先知道系统的版本,以免安装错的版本 使用命令:lsb_release -c 备份原先的配置文件 cd /etc/apt sudo cp sources.list sources.list ...

  7. docker部署Javaweb项目（jdk+tomcat+mysql）

    步骤一:在主机下载安装docker,参照Centos7上安装docker 步骤二:下载Linux版本的JDK1.6和Tomcat6.0(其他项目若依赖其他版本的运行环境可选择另外版本下载),通过sec ...

  8. 八、SpringBoot生产环境部署

    1.下载安装Tomcat 下载地址:https://tomcat.apache.org/download-90.cgi 如下图所示: 2.入口类继承SpringBootServletInitializ ...

  9. 七、SpringBoot项目集成JSP以及项目不同启动方式及访问路径配置

    1.创建JSP目录 在src/main目录下创建目录webapp/WEB-INF/jsp用于存放jsp页面,如下图: 然后再改文件夹下面我们创建JSP文件: 大家在使用IDEA 的new菜单创建JSP ...

  10. maven 安装jar包命令

    以 spring-context-support-3.1.0.RELEASE.jar 为例,在 @3图中已经给出这个 jar 包的 groupId,artifactId,version信息,手动安装的 ...