简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 实例演示函数参数与返回值、演示模板字面量与模板函数
Blogger Information
Blog 38
fans 0
comment 0
visits 18582
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
实例演示函数参数与返回值、演示模板字面量与模板函数
Blackeye
Original
329 people have browsed it

1
2

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>访问器属性、获取dom元素</title>
  8.   </head>
  9.   <body>
  10.     <ul class="list">
  11.         <li class="item">item1</li>
  12.         <li class="item">item2</li>
  13.         <li class="item">item3</li>
  14.         <li class="item">item4</li>
  15.         <li class="item">item5</li>
  16.     </ul>
  17.     <script>
  18.       // 1. 理解访问器属性原理与应用场景,并实例演示
  20.       //   访问器属性将方法伪装成属性，可对引用设置对象属性进行简化操作
  21.       let classmate = {
  22.         data: {
  23.           id: 1,
  24.           age: 18,
  25.         },
  26.         getInfo() {
  27.           return `编号${this.data.id}的同学,年龄是${this.data.age}岁`;
  28.         },
  29.         setInfo(id, age) {
  30.           this.data.id = id;
  31.           if (age > 200) {
  32.             console.log("请不要输入妖怪");
  33.           } else {
  34.             this.data.age = age;
  35.           }
  36.         },
  37.       };
  38.       console.log(classmate.getInfo());
  39.       classmate.setInfo(666, 999);
  40.       console.log(classmate.getInfo());
  41.       classmate.setInfo(666, 150);
  42.       console.log(classmate.getInfo());
  44.       // 应用访问器属性
  45.       let classmates = {
  46.         data: {
  47.           id: 10086,
  48.           age: 18,
  49.         },
  50.         get info() {
  51.           return `编号${this.data.id}的同学,年龄是${this.data.age}岁`;
  52.         },
  53.         set info(info) {
  54.           this.data.id = info.id;
  55.           if (info.age > 200) {
  56.             console.log("请不要输入妖怪");
  57.           } else {
  58.             this.data.age = info.age;
  59.           }
  60.         },
  61.       };
  62.       console.log(classmates.info);
  63.       classmates.info = {
  64.         id: 10010,
  65.         age: 100,
  66.       };
  67.       console.log(classmates.info);
  69.       // 2. 实例演示获取dom元素的二个重要方法
  70.     //   1.利用queryselect获取元素
  71.     const item = document.querySelectorAll(".item");
  72.     console.log(item);
  73.     for(let i=0;i<item.length;i++){
  74.         item[i].style.color = "blue";
  75.     }
  76.     //   2.直接获取dom唯一元素节点
  77.     const head = document.title;
  78.     console.log(head);
  80.     </script>
  81.   </body>
  82. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！