对象（基础）

最新推荐文章于 2024-10-12 10:41:56 发布

AVIC_501

最新推荐文章于 2024-10-12 10:41:56 发布

阅读量403

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/Li5306/article/details/130731726

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

文章介绍了JavaScript中的对象，包括对象属性值的6种数据类型，对象方法的概念，并通过英雄和技能的比喻帮助理解。文中还提到了DOM操作，如获取和修改元素，以及window对象的弹窗方法。此外，讨论了var和let声明变量的区别，并给出了获取元素的示例。

摘要由CSDN通过智能技术生成

1.0 对象

1.0.1 对象方法

对象属性值的数据类型可以是哪些?

有6种数据类型都可以作为属性值.

当属性值是函数时,我们称之为对象的方法.

let oYm = {
      name: '小陈',
      age: 32,
      isMan: false,
      u: undefined,
      n: null,
      arr: [],
      // log是对象oYm的方法.(属性是function的一种特例.)
      log: alert
    }

    console.log(typeof oYm.name);
    console.log(typeof oYm.age);
    console.log(typeof oYm.isMan);
    console.log(typeof oYm.log); // function

简单DOM操作
1:怎么获取元素
2:怎么修改元素
表达式
1:表达式类型
2:表达式返回值

1.0.2 对象的理解

对象是什么,方法是什么.
对象是英雄,方法是技能.
英雄的名字,
oGL有四个方法。
oGL.Q() => 触发技能.
如何学习某个对象的方法?
就比如玩游戏的时候，学习英雄的技能是一样的
1:得知道技能是干啥用的.
2:自己用几次.熟悉
3:实战.

 <script>

    let oGL = {
      name: '盖伦',

      Q: function(){
        console.log('给我闭嘴')
      },

      W: function(){
        console.log('护盾')
      },

      E: function(){
        console.log('转圈圈')
      },

      R: function(){
        console.log('大宝剑')
      }
    }
    

  </script>

1.0.3 window对象

弹窗方法.
alert('弹窗');
盖伦发动R技能
oGL.R();
window的方法触发时，是可以省略window的。
只有window对象的方法在触发时可以省略window,其他对象的方法不能省略.
window.alert('弹窗');
'弹窗' 就是 alert 方法的参数.
参数 => 技能的目标。

 alert('弹窗');

    console.log(window);

 // var 声明的变量会变成window对象的属性。
    // var personName = '小陈';

    // let, const声明的变量不会变成window的属性.
    let personName = '小陈';

    console.log(window.personName);

var 和 let 的区别:

1:var可以重复声明,let不行

2:var声明的变量会变成window的属性,let不会

3:var声明的变量不能识别块级作用域,let可以

4:var声明的变量有变量提升,let没有

1.0.4 如何获取元素

1：DOM操作.

a：获取。document.getElementById(id值); => 返回要获取的标签

b：修改。

1:样式

元素.style.样式名 = 新的值 => 带-的样式名需要写驼峰 => 修改的是行间样式

window.getComoutedStyle(标签) => 返回一个样式对象

2:内容

元素.innerText = 新的文本内容.

元素.innerHTML = 新的标签内容.

3:属性

元素.属性名 = 新的属性 => class需要写成className

这种方式只能修改固有的属性,自定义无法设置.

元素.setAttribute(属性名, 新的属性值);

元素.getAttribute(属性名);

4:添加事件

元素.on+事件名 = 函数.

 function 函数名() {

            函数内的代码

          }

<body>
  
  <div id='div'>888888</div>

  <script>

    // 获取到了一个标签.这个表示是一个对象.
    // 参数是标签的id值.(不是id选择器)
    const oDiv = document.getElementById('div');

    // console.log(oDiv);

    // 打印标签对象
    // console.dir(oDiv);
    // 打印标签对象的style属性
    // console.dir(oDiv.style);

    // DOM => 通过js控制操作页面的标签 => 基于DOM操作
    // DOM操作:
    //   1:获取元素
    //   2:操作修改元素

  </script>

</body>