轻松抽象JavaScript

严欣铷

已于 2023-06-22 16:35:48 修改

阅读量442

点赞数

分类专栏：抽象js 文章标签： javascript 前端 html

于 2023-06-21 23:47:12 首次发布

本文链接：https://blog.csdn.net/c_yanxin_ru/article/details/131317981

版权

抽象js 专栏收录该内容

64 篇文章 0 订阅

订阅专栏

补充：document是一个html对象，可以当成变量使用

document语句

万用公式：主谓宾（在语言里有一种叫谓语后置）

万用公式2.0：主宾谓

document.querySelector().addEventListener()

分成三步，解析

主语：document，代表着html文件

宾语：querySelector()，这个就关键了，括号内的值对应了你设置的CSS选择器，它查找你CSS选择器是有一个限制的，只会找到你文件中第一个CSS选择器，后面的同名是不受影响的

公式（"[ 你的css选择器 ]"）

ps：css最常用选择器：class id

ps:谓语的对象

谓语: addEventListener()，谓语都知道，就是动作，这个代码是添加一个事件，括号里的内容包括基本数据类型和引用数据类型，可以是一个值，可以是一整个函数全看你发挥

事件由两个部分，事件名(是有关键词的)和事件内容

把他们连在一起用主谓宾的形式翻译

html里添加一个事件给querySelector()

主语谓语宾语

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="GBK">
    <title>Document</title>
</head>
<body>
    <input type = "password" name = "password">
    <script>
        document.querySelector("[name = 'password']")
        .addEventListener('keyup',function()
        {
            let length = this.value.length;
            console.log(length);
        });
    </script>
</body>
    
</html>

复制粘贴，自己试

这是最经典的密码数长度

小结

万能公式2.0版本，主宾谓

目前第一个，宾语querySelector()，第一个谓语addEventListener()

前者选择对象，后者提供动作