search

博客列表 >JS中循环与函数以及常用DOM操作实例演示

JS中循环与函数以及常用DOM操作实例演示

叮叮咚咚丶
叮叮咚咚丶原创
2020年11月09日 03:18:08952浏览

一、循环

循环是只要满足条件就将不断执行重复的语句，循环可以减少代码的冗余性。

1.while()循环

while() 循环入口判断型：先判断条件再执行。

  1.       const arr = [1, 2, 3, 4, 5];
  2.       console.log("数组长度:" + arr.length); //arr.length 返回数组的长度
  3.       let i = 0; //循环变量初始化
  4.       let sum = 0; //求和
  5.       while (i < arr.length) {
  6.         console.log(arr[i]);
  7.         sum = sum + arr[i];
  8.         i++; //等价于 i= i+1  i+=1   循环变量更新
  9.       }
  10.       console.log("和为:" + sum);

2.do-while循环

do-while循环 出口判断下:先执行一次再进行条件的判断，至少执行一次。

  1.       i = 0;
  2.       do {
  3.         console.log(arr[i]);
  4.         i++;
  5.       } while (i < arr.length);

3.for循环

for循环：for（循环变量的初始化；循环条件；循环变量更新）
for循环中可以使用关键字break与continue，可以与if else混合使用。

  1.       for (let i = 0; i < arr.length; i++) {
  2.         // if (i >= 3) break;   //break关键词  达成条件终止循环
  3.         // console.log(arr[i]); //只输出前3个数
  4.         if (arr[i] % 2 === 1) continue; //continue关键词 跳出本次循环继续执行下一次循环  %是取模/取余运算
  5.         console.log(arr[i]); //输出数组里的偶数 2 4
  6.       }

4.for-in循环

for-in循环可以以任意顺序遍历一个对象的除Symbol以外的可枚举属性。
for(键名/属性 in 对象)

  1.       const res = {
  2.         name: "xue",
  3.         age: 18,
  4.         sex: "man",
  5.       }; //创建res对象
  6.       for (let key in res) {    
  7.         console.log(key, ":", res[key]);
  8.       }

5.forEach()

forEach可以用来遍历数组,不能遍历对象
arr.forEach(function(值，索引，数组本身)｛｝)

  1.       arr.forEach(function (ele, key, arr) {
  2.         console.log(ele, key, arr);//ele为当前数组项的值 key是数组的索引
  3.       });//arr为整个数组，也可以使用arr[key]取值，只有第一个参数是必选的

6.for-of()

for-of是es6的新增的，可以用来代替for-in和forEach()
for-of不能遍历自定义对象。
for-of可以略过数组里的键，直接取出数组里的值，运用比较多。

  1.       for (let value of arr) {
  2.         console.log(value);//value指代数组里的某一成员
  3.       }

7.总结（资料）

for … in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。
for … in循环将把name包括在内，但Array的length属性却不包括在内。
for … of循环则完全修复了这些问题，它只循环集合本身的元素。

二、函数

1.函数的声明与调用

声明function fn1(){console.log(fn1.name)}
调用fn1()；

2.函数的参数与传参

传参fn1("xxx")；
默认参数function fn1(x=1){console.log(fn1.name)} 不传参时参数即为设置的默认值。es6之前不支持默认参数
剩余参数，也叫rest参数。...arr将传入的参数组成一个数组。

  1.       function add(...arr) {
  2.         x = 0;
  3.         console.log(arr); //rest参数组成一个数组
  4.         for (v of arr) {
  5.           console.log(v); //for of方法遍历数组
  6.           x = x + v;
  7.         }
  8.         console.log(x);
  9.       }
  10.       add(1, 2, 3, 4); //求和


展开运算符...sprend将数组展开成为一个个独立的单元
通过接口，外部请求或其他来源组成一个数组，使用展开运算符展开它。

  1. ...rest和...spread区别
  2. ...name 用在函数的参数中就是将所有参数打包到一个数组    fn（...name）｛｝
  3. ...name用在函数的调用参数时就是展开    如 sum（...name）    
  4. 当参数不可预测的时候就可以用...name

4.函数的返回值

单值原则：函数默认返回一个值，如果要返回多个值，需要使用引用类型如对象，数组。

5.函数表达式

函数表达式又叫匿名函数用在回调方法中， 一般用于写一些异步回调，在回调函数里面会多次调用他
通常将函数表达式赋给一个变量从而引用它。 let fn1 = function(){}

6.箭头函数

es6新增，可以简化函数表达式。删除function，在参数和大括号之间添加加”=>”,
fn1 = (参数) => console.log("123");
箭头函数与函数表达式的区别：箭头函数没有this。

任何时候都要给参数加上括号
如果函数体就一行代码可以去掉大括号｛｝ ，多行代码不能省略

三、DOM操作

1.获取dom元素

使用标签获取：getElementsByTagName
使用id获取：getElementsById
使用class获取：getElementsByClassName
使用name获取：getElementsByName
使用jQuery选择器获取: querySelector querySelectorAll

使用标签、class、name与querySlectorAll获取dom元素的返回值都为类数组（HTMLAllCollection），其特征是有一个length属性，有一个从0开始的索引，可以使用索引进行访问。而使用id获取和querySlector的返回值为第一个匹配到的结果。

  1. <!DOCTYPE html>
  2. <html lang="">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>dom操作</title>
  7.   </head>
  8.   <body>
  9.     <div class="main" id="dom" name="div_name"></div>
  10.     <ul id="list">
  11.       <li class="item" name="first">item1</li>
  12.       <li class="item">item2</li>
  13.       <li class="item">item3</li>
  14.       <li class="item hover">item4</li>
  15.     </ul>
  16.     <script>
  17.       let lis = document.getElementsByTagName("li"); //通过标签获取dom元素
  18.       console.log(lis); //返回为类数组
  19.       console.log(lis[2].innerHTML); //使用innerHTML获取元素内容  使用索引获取元素
  20.       console.log(lis.length);
  21.       let div = document.getElementById("dom"); //通过id获取dom元素
  22.       console.log(div);
  23.       let li = document.getElementsByClassName("hover"); //使用clss获取dom元素
  24.       console.log(li[0].innerHTML);
  25.       let div_name = document.getElementsByName("div_name"); //使用name获取dom元素
  26.       console.log(div_name[0]);
  27.       lis = document.querySelector("#dom");
  28.       console.log(lis);
  29.       lis = document.querySelector(".item");
  30.       console.log(lis); //返回第一个匹配的结果
  31.       li = document.querySelectorAll(".item:nth-of-type(-n+3)");
  32.       console.log(li); //获取class为item的前三个元素
  33.       //使用箭头函数封装一个jQuery选择器
  34.       const $ = (selector) => document.querySelectorAll(selector);
  35.       console.log($("li:first-of-type")[0].innerHTML);
  36.     </script>
  37.   </body>
  38. </html>

2.dom遍历及属性

dom遍历包括遍历某个元素的子元素、同级元素及其父元素。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>dom操作</title>
  7.   </head>
  8.   <body>
  9.     <div class="main" id="dom" name="div_name">
  10.       <ul id="list">
  11.         <li class="item" name="first">item1</li>
  12.         <li class="item">item2</li>
  13.         <li class="item">item3</li>
  14.         <li class="item hover">item4</li>
  15.       </ul>
  16.     </div>
  17.     <script>
  18.       let ul = document.querySelector("ul");
  19.       console.log(ul.children); //获取子元素的集合，也是个类数组
  20.       console.log(ul.children.length); //子元素数量
  21.       console.log(ul.childElementCount);
  22.       console.log(ul.children[0].innerHTML); //获取第一个子元素
  23.       console.log(ul.firstElementChild.innerHTML);
  24.       console.log(ul.lastElementChild.innerHTML); //获取最后一个子元素
  25.       console.log(ul.children[2].previousElementSibling.innerHTML); //前一个兄弟元素
  26.       console.log(ul.children[2].nextElementSibling.innerHTML); //后一个兄弟元素
  27.       console.log("----------------");
  28.       //遍历子元素
  29.       console.log(Array.from(ul.children)); //将类数组转化为数组
  30.       Array.from(ul.children).forEach((item) => console.log(item));
  31.       Array.from(ul.children).forEach((item) => (item.style.color = "red")); //将数组转为红色
  32.       console.log("----------------");
  33.       //获取子元素的父元素/节点
  34.       const li = document.querySelector("li");
  35.       console.log(li.parentElement); //li元素的父节点ul
  36.       console.log(li.parentElement.parentNode); //ul的父节点div
  37.     </script>
  38.   </body>
  39. </html>

3.ClassList对象与dataset对象

1.ClassList

classList 属性返回元素的类名，用于在元素中添加，除及切换 CSS 类。
可以使用add()和remove()方法为元素添加或去除css类。
使用toggle()方法自动切换，有则去掉，没有则加上。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>ClassList</title>
  7.     <style>
  8.       .big {
  9.         font-size: 2em;
  10.       }
  11.       .small {
  12.         font-size: 0.5em;
  13.       }
  14.       .yellow {
  15.         background-color: yellow;
  16.       }
  17.       .red {
  18.         background-color: red;
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <p>php1234</p>
  24.     <h3 class="yellow">使用clssList添加、移除和切换元素的css类</h3>
  25.     <script>
  26.       const p = document.querySelector("p");
  27.       const h3 = document.querySelector("h3");
  28.     </script>
  29.   </body>
  30. </html>

(1)add()

p.classList.add("big")

(2)remove

h3.classList.remove("yellow")

(3)toggle

h3.classList.toggle("red") h3.classList.toggle("big")

2.dataset

HTMLElement.dataset属性允许无论是在读取模式和写入模式下访问在HTML或DOM中的元素上设置的所有自定义数据属性(data-)集。
data-为前缀的数据，称为数据属性，可以使用dataset来获取获取时可以省略(data-)。

  1. <!DOCTYPE html>
  2. <html lang="">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>dataset</title>
  7.   </head>
  8.   <body>
  9.     <div id="user" data-id="123" data-user-name="xzh" data-password="xxxxx">
  10.       abc
  11.     </div>
  12.     <script>
  13.       const div = document.querySelector("div");
  14.       console.log(div.dataset.id);
  15.       //将使用连接线命名的多个单词的属性名，转化为“驼峰命名法来获取”
  16.       console.log(div.dataset.userName);
  17.       console.log(div.dataset.password);
  18.     </script>
  19.   </body>
  20. </html>

四、总结

这节课内容相对好理解，就是要记的东西会多点，虽然都是原生的JS代码，但是要扎实从底层做起。加紧敲代码！

上一条：JavaScript es6 根据对象某属性获得其在数组中的索引下一条：js实战案例演示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议