[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 循环

  • 对于程序中有规律的重复性操作,可以使用到循环语句
  • breakcontinue 语句使循环中的代码可以被更方便地控制

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 值

原文地址:https://www.cnblogs.com/yorkyu/p/11296176.html

时间: 2024-08-01 06:00:57

[Web 前端] 023 js 的流程控制、循环和元素的获取、操作的相关文章

Node.js异步流程控制

原文地址:Node.js异步流程控制 原文地址:https://www.cnblogs.com/edward852/p/8580917.html

Web前端开发——JS技术大梳理

什么是JS JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称 为javascript引擎,为浏览器的一部分,广泛用于客户端的脚本语言.JavaScript 是一种具有面向对象能力的.解 释型的程序设计语言.更具体一点,它是基于对象和事件驱动并具有相对安全性的客户端脚本语言. 因为他不需要 在一个语言环境下运行,而只需要支持它的浏览器即可.它的主要目的是,验证发往服务器端的数据.增加 Web互 动.加强用户体验度等. 下面对js从整体的角

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

jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个"真的"重复,表示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的东西,为何不用? 当然了,你如果你能找到更好的替代grunt的其他工

3-3流程控制.循环语句

流程控制: 对PHP程序执行的过程进行控制! PHP有哪些手段对程序执行过程进行控制! 三.循环执行 计算机最擅长的功能之一就是按照规定的条件,重复执行某些操作,这是程序设计中最能发挥计算机特长的程序结构. 1.while语句 while(表达式){ 各种语句.... } 当表达式的值为true,那么就执行下面的语句块, 当语句块执行结束之后,继续返回上面来判断表达式的值是true还是false,如果还是true,那么就继续执行语句块 知道,这个表达式的值为false,那么这个while语句就执

js 异步流程控制之 avQ(avril.queue)

废话前言 写了多年的js,遇到过最蛋疼的事情莫过于callback hell, 相信大家也感同身受. 业界许多大大也为此提出了很多不错的解决方案,我所了解的主要有: 朴灵 event proxy, 简单明了容易上手 老赵的 wind.js, 写起来最舒坦,最能表达程序顺序执行逻辑 Promise,个人感觉为解决一个坑引入另外一个坑,写出来的代码一大坨,代码可读性最差 我这人闲着没事也爱折腾,我也自己造轮子,不为别的只为自己代码写的舒服流畅. 传送门:目前只支持 node.js 环境,以后有时间再

Node.js中流程控制

Node.js中的流程控制可以使用async,在使用之前需要先安装,使用npm安装 npm install async --g 下面主要介绍4种流程控制的方式: 1.串行无关联:async.series(tasks,callback) 多个函数依次执行,之间没有数据交换,其中一个函数出错,后续函数不再执行; 以下是标准写法: async.series({ one: function(callback){ callback(null, 1); }, two: function(callback){

web前端入门到实战:css3循环,模拟拼多多动画效果

模拟拼多多动画效果,最终效果图如下: 我们看一下实现过程. 主框架是vue开发,做成了一个动画组件,因为涉及到多个页面引用,最主要的实现是css3语法实现过程,并且要做到循环播放. 左边出来动画时间是0.5秒,停留3秒往上走,然后动画时间0.5秒,停留3秒后然后消失,消失动画时间0.5秒,总共的时间消耗是7.5秒.可以得到以下计算比例 如果大家对编程,web前端感兴趣,想要学习,打算深入了解这个行业的朋友,可以加下我们的前端学习扣qun : 784783012 ,不论你是学生还是想转行的朋友,我

web前端入门到实战:html块级元素和行级元素的区别和认识

行内.块状元素区别: 1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block. 2.行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的:块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列,若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列. 3.行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(li

web前端之HTML的大框架(body元素与frameset元素)

web前端之HTML的大框架      body元素与frameset元素 对于从事html的人员来说,我们一般熟悉的框架是先声明html ,然后在<html>标签对里包着<head>标签对和<body>标签对,body元素定义文档的主体,包含文档的所有内容(比如文本.超链接.图像.表格和列表等等).而我们想要在页面中显示出来的内容全部写在<body>标签对里. 例如: <!DOCTYPE html> <html> <head&