search

博客列表 >JS流程控制和函数与dom元素细说

JS流程控制和函数与dom元素细说

G
G原创
2020年11月05日 18:40:08903浏览

流程控制-循环

  1. while() 循环-入口判断型

    入口判断既是从代码开始执行到 while 的时候就开始判断条件是否成立，成立就开始执行代码。

  1.       const arr = [11, 22, 33, 44, 55];
  2.       //   打印数组arr的长度
  3.       console.log(arr.length);
  4.     //   循环变量初始化
  5.       let i = 0;
  6.       while (i < arr.length) {
  7.         //   条件符合输出i在数组中对应的数字
  8.         console.log(arr[i]);
  9.         //   必须加条件，如递增或递减，否则会死循环
  10.         // 递增1   一下三种方法都能达到同一个目的
  11.         // i = i + 1;
  12.         // i += 1;
  13.         // 用完自增
  14.         i++;
  15.       }

  1. do-while() 循环-出口判断型

    出口判断型既是先执行条件成立的代码，到出口在判断条件是否成立，成立就输出或执行特定操作，不成立程序就终止。

    出口判断型，至少执行一次代码.

  1.       const arr = [11, 22, 33, 44, 55];
  2.       let i = 0;
  3.       do {
  4.         console.log(arr[i]);
  5.         i += 1;
  6.       } while (i > arr.length);
  7.     //   最后输出的i由i = 多少决定，但程序至少执行一次
  1. for(循环变量的初始化，循环条件，更新循环条件){….}

    语法：for(循环变量的初始化，循环条件，更新循环条件){….}
    循环变量的初始化==》也就跟第一次赋值给一个变量一样。
    循环条件==》条件成立时继续执行的条件
    更新循环条件==》对循环条件的更新，可以理解为递增或递减等操作。

  1.       const arr = [11, 22, 33, 44, 55];
  2.       for (let i = 0; i < arr.length; i++) {
  3.         // 只输出前三个成员
  4.         if (i < 3) {
  5.           console.log(arr[i]);
  6.           //   如果i>3就跳出循环
  7.           if (i >= 3) break;
  8.           //   continue:条件符合就跳过此次循环，执行下一次循环。
  9.           // 这里我们只要奇数，就跳过所有能被2整除的循环
  10.           if (arr[i] % 2 === 0) continue;
  11.           console.log(arr[i]);
  12.         }
  13.       }

PS:1.continue:是跳过本次条件成立是执行的循环的过程，而执行下一次条件成立的过程，如果下一次条件也成立，那再跳过，循环操作。

  1. for in() 循环

    语法for(键名/属性 in 对象)
    键名可以理解为自己创建的一个新的属性，可以初始化也可以不初始化，哪怕没有这个变量，也可以直接生成。
    for(num in 对象)之前没有创建过 num 这样的一个属性，是一个新属性，当然也可以初始化，如for(let num in 对象)

  1.       const user = {
  2.         name: "GGG",
  3.         email: "12346@666.com",
  4.         price: 888,
  5.       };
  6.     //   也可以for(let num in user)
  7.       for (num in user) {
  8.         console.log(num); //输出属性名
  9.         console.log(num, user[num]); //输出属性名和对应属性值
  10.       }

流程控制 - 遍历

  1. forEach() - 遍历对象

    语法：array.forEach(function (值, 索引, 数组) {});
    只有第一个值是必要的，其他几个都是可选的
    不能自定义遍历

  1.       // 创建一个数组
  2.       const arr = [11, 22, 33, 44, 55];
  3.       arr.forEach(function (item, key, arr) {
  4.         console.log(item, key, arr);
  5.       });

下面是关于所有情况的介绍，function 中的参数均用拼音代理，方便理解


  1. for - of ：ES6 新增的遍历 - 直接取出数组的值

    用法和for - in一致，但是比它简单，因为 for - of 是用来遍历，直接取出数组中的值

  1.       const arr = [11, 22, 33, 44, 55];
  2.       for (num of arr) {
  3.           //num 数组中的某一个成员
  4.         console.log(num);
  5.       }

函数

  1. 函数的声明
  1. // function声明函数，demo1位函数名称，（）内的参数为函数的参数，{函数语句}
  2. // function 函数名(参数){语句}
  3.       function demo1(name) {
  4.         console.log("此时的函数名为：", demo1.name);
  5.       }
  1. 函数的调用

    了解下函数的参数，函数的参数类似一个变量，可以是一个常量，也可以是一个变量名，因为后续如果那里需要调用的话，可能会进行传参的操作

  • 函数调用模式

    函数调用形式是最常见的形式，也是最好理解的形式。所谓函数形式就是一般声明函数后直接调用即是。
    demo1();即完成了一次函数的调用操作。

  1. // 声明一个函数，并调用
  2. function func() {
  3.     alert("Hello World");
  4. }
  5. func();
  • 方法调用模式

    共有散 3 步：1.创建一个函数，2.将这个函数赋值给一个对象，3.调用

值得注意的是，将函数赋值给对象之后，最后里面的fn.funct变成了方法，而不是函数。

  1. // 1.创建一个函数
  2. function func(){
  3.     alert("我是一个函数！")
  4. }
  5. // 2.将这个函数赋值给其他对象
  6. let fn = {};//也是将函数赋值给对象fn
  7. fn.funct = func;//注意这里没有  `（）`  这里变成了方法
  8. // 3.调用
  9. fn.funct();
  13. // --------------------------------------------------
  14. // 上面代码的简化
  15. function func(){
  16.     alert("我是一个函数！")
  17. }
  18. let fn = {};
  19. fns = func; // 这里变成了方法
  20. func();
  21. fns();

  1. 函数的参数

    通过提前内置一个参数，最后对参数传值调用。

  1.       function demo2(name) {
  2.         console.log("函数内的参数内容是：", name); //调用参数
  3.       }
  4.       //   传参
  5.       demo2("是内容啊！");

  • ...rest

    将剩余参数全部打包到一个数组之中。
    利用函数配合数组遍历实现一个累加器。

  1.       function num(...arrname) {
  2.         //数组名
  3.         // 累加器初始化0;
  4.         let sum = 0;
  5.         for (let v of arrname) {
  6.           sum += v; //实现累加v值
  7.         } //数组名
  8.         console.log("累加结果为:", sum);
  9.       }
  10.       // 给数组传参：
  11.       num(1, 2);
  12.       num(1, 2, 3);
  13.       num(1, 2, 3, 4, 5, 6, 7, 8, 9);

  • ...spread

    展开运算符
    通过接口, 外部请求, 或其它来源,接收到一个数组

  1.       function sum(...data) {
  2.         let res = 0;
  3.         for (let v of data) {
  4.           res += v;
  5.         }
  6.         console.log("resule = ", res);
  7.       }
  8.       let num = [11, 22, 33, 44, 55];
  9.       sum(...num);

输出结果：result = 165

  1. 函数的返回值

    // 单值原则: 函数只能返回一个值

  1.       function demo3() {
  2.         return "HELLO WORLD!";
  3.       }
  4.       console.log(demo3());
  5.       // 输出HELLO WORLD

多值返回，就必须要使用:引用类型, 对象,数组

  1.       function demo3() {
  2.         return [
  3.           { id: 1, name: "admin" },
  4.           { id: 2, name: "GGG" },
  5.         ];
  6.       }
  7.       console.log(demo3()[1]);
  8.       // 输出   {id: 2, name: "GGG"}
  1. 函数表达式

    当成匿名函数,用在回调方法
    匿名函数,没有名字,通过把它赋值给一个变量,来引用它

  1.       let demo4 = function demo3() {};
  2.       console.log(typeof demo4);
  1. 箭头函数: es6 才有,简化”函数表达式”

    箭头函数：是函数表达式的简化，也可以理解为是匿名函数的简化操作，它通过=>来说明
    删除了function参数列表()与大括号{}之间添加一个”=>”
    演示语法：demo5 = (name) => {}
    PS：箭头函数不能引用 this
    单行函数可以省略{}但是多行代码,函数体的大括号{}不能省略。
    如果没有参数,也必须加上一对”()”

  1.       // 单行演示
  2.       demo5 = (user) => console.log("单行省略了大括号");
  3.       // 多行演示
  4.       demo6 = (user) => {
  5.         let name = "GGG";
  6.         console.log("welcome:", name);
  7.       };
  8.       // 省略了参数，但是一定要写()的实例
  9.       demo8 = () => console.log("这里省略的是：（）");
  10.       // 传参演示：
  11.       demo7 = (name) => console.log("Welcome:", name);
  12.       demo5("");
  13.       demo6();
  14.       demo7("这是name");
  15.       demo8();

获取 dom 元素并执行操作

dom: document object model,文档对象模型，只要是对象,就可以有属性和方法，使用这种方式取出来的为一个HTMLAllCollection: 类数组也就说说，typeof查看类型之后为HTMLALLCollection >

  • 根据 tag class id标签来获取 dom 元素

    getElementsByTagName来获取元素的标签名，获取到 dom 元素
    getElementsById来获取元素的id名，获取到 dom 元素
    getElementsByClassName来获取元素的类名称，获取到 dom 元素。
    getElementsByName来获取某个元素的 name值，获取到 dom 元素。

接下来一一演示怎么操作:
innerHTML: 返回元素中的内容

语法：变量或方法或对象 = document.getElementsByTagName/Id/ClassName("id/tag/class名称")

  1.     <ul id="list">
  2.       <li class="item" name="first">item1</li>
  3.       <li class="item">item2</li>
  4.       <li class="item">item3</li>
  5.       <li class="item active">item4</li>
  6.       <li class="item">item5</li>
  7.     </ul>
  1.       console.log("--------通过ID--------");
  2.       // 通过ID取值
  3.       let him = document.getElementById("list");
  4.       console.log(him.innerHTML);
  5.       console.log("--------通过标签--------");
  6.       // 通过标签取值
  7.       let lis = document.getElementsByTagName("li");
  8.       console.log(lis);
  9.       console.log(lis[2].innerHTML); //输出为item3
  10.       console.log("--------通过Class--------");
  11.       // 通过class取值
  12.       let sggh = document.getElementsByClassName("item");
  13.       console.log(sggh);
  14.       // 通过name取值
  15.       let nme = document.getElementsByName("first")
  16.       console.log(nme)

  • jQuery: \$(selector)

    selector: 使用选择器来获取(类似于 CSS 选择器，可以使用伪类等)
    语法：和上述方法一致，但是这里不再是使用getElementsBY..的方式来获取 dom 元素，而是使用>querySelector(#id/.class/tag)等方式来获取

  1.       console.log("-------通过ID--------");
  2.       // 通过id取值
  3.       ul = document.querySelector("#list");
  4.       console.log(ul);
  5.       console.log("-------通过Class--------");
  6.       // 通过class来取值
  7.       lis = document.querySelector(".list");
  8.       console.log(list);
  9.       console.log("-------通过Tag--------");
  10.       // 通过标签来取值
  11.       // PS:  querySelector  选择器只会选择符合条件的集合之中的第一个元素
  12.       lisy = document.querySelector("li");
  13.       console.log(lisy);
  14.       // 所以要选择所有的子元素li就需要用到  querySelectorAll  来选择所有的子元素
  15.       lisu = document.querySelectorAll("li");
  16.       console.log(lisu);
  17.       console.log("-------使用伪类选择前三个--------");
  18.       // 使用CSS伪类来选择前三个子元素
  19.       abc = document.querySelectorAll("li:nth-of-type(-n+3)");
  20.       console.log(abc);

遍历元素节点

  1.     <ul>
  2.       <li>item1</li>
  3.       <li>item2</li>
  4.       <li>item3</li>
  5.       <li>item4</li>
  6.       <li>item5</li>
  7.     </ul>

所谓遍历元素节点最常见就是遍历父节点、兄弟节点和子节点，如下图

  1. 遍历子元素
  1.       // 遍历:父元素 兄弟元素 子元素
  2.       const ul = document.querySelector("ul");
  3.       // 1.遍历子元素
  4.       // children:所有子元素组成的合集
  5.       console.log(ul.children);
  6.       // 查看子元素的数量
  7.       console.log("子元素的数量共有：", ul.children.length);
  8.       // childElementCount也是计算共有多少个子元素的方法  要记住了
  9.       console.log("子元素的数量共有：", ul.childElementCount);
  10.       // 获取某个位置的元素
  11.       // 111.可以通过使用children[索引]来实现
  12.       console.log("获取的第三个子元素内容是：", ul.children[2].innerHTML);
  13.       // 获取第一个子元素还可以通过firstElementChild来实现
  14.       console.log("获取到的第一个子元素内容是", ul.firstElementChild.innerHTML);
  15.       // 获取最后一个子元素还可以通过lastElementChild来实现
  16.       console.log("获取到的最后一个子元素内容", ul.lastElementChild.innerHTML);

通过 for of 来实现遍历的话，要将类数组转换为数组

  1. for (let v of ul.children) {
  2.       console.log(v);
  3.       }
  4.   //   将类数组转为真正的数组: Array.from()
  5. console.log(Array.from(ul.children));

  1. 遍历兄弟元素

    遍历兄弟元素之间的话，就需要先拿到一个子元素，然后通过我们拿到的这个子元素来对前一个兄弟元素和后一个兄弟元素遍历获取。

语法：
前一个兄弟元素：previousElementSibling
后一个兄弟元素：nextElementSibling

  1.       // 先拿一个子元素
  2.       const ul = document.querySelector("ul");
  3.       console.log("我是被拿的子元素：", ul.children[2].innerHTML);
  4.       // 拿第三个子元素的上一个子元素的内容item2
  5.       console.log("这是我的哥哥：", ul.children[2].previousElementSibling.innerHTML);
  6.       // 拿下一个子元素
  7.       console.log("这是我的弟弟：", ul.children[2].nextElementSibling.innerHTML);

  1. 遍历父元素

    语法：prentElement或parentNode都可以实现

  1.       const li = document.querySelector("li");
  2.       console.log("这是我的父元素：", li.parentElement);
  3.       console.log(li.parentNode);

classList 对象:操作 class

通过 classList 可以给 html 标签代码（获取到的 dom 元素）增加类或删除类。

  1. const p = document.querySelector("p");
  2. // 给p标签增加blue属性
  3. p.classList = "blue";
  4. p.classList = "red blue"

简化操作：
p.classList.add("要增加的类名)
p.classList.remove("要移除的类名)

自动切换：有这个类就去掉, 没有就加上
p.classList.toggle("类名")

dataset 对象: 处理用户自定义数据属性

data-:为前缀的数据,称为数据属性,使用 dataset 对象来获取,获取时请省略掉”data-“
将使用连接线命名的多个单词的属性名,转换”驼峰命名法”来获取
<div id="user" data-id="110" data-user-name="admin" data-email="admin@qq.com">我的信息</div>

  1.       // 获取id = user的dom属性
  2.       const user = document.querySelector("#user");
  3.       console.log(user.dataset.userName); //忽略  data-
  4.       user.dataset.email = "123456@qq.com";// 重定义data-email的值
  5.       console.log(user.dataset.email);

上一条：JS中字符串和数组的常用操作方法下一条：BFC的作用以及flex布局的容器属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多