当前位置: 首页 > article >正文

JS基础部分

引入方式

内部脚本在这里插入图片描述
外部脚本
在这里插入图片描述

变量

使用let声明变量,弱类型,使用const声明常量

在这里插入图片描述
在这里插入图片描述
因为箭头函数中this指针有问题,会默认指向父级对象

DOM

文档对象模型,将标记语言的各个部分封装成对应的对象。js通过dom就能够对html进行操作
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
代码示例:

<body>
    <h1>js文档对象模型DOM</h1>
    <!-- DOM的思路就是万物皆对象,网页中的所有元素都是一个个对象,通过DOM可以对网页中的元素进行操作。 -->
    <!-- DOM的三个主要对象:document、window、element。 -->
    <h1 id = "title1">111</h1>
    <h1 id = "title2">222</h1>
    <h1 id = "title3">333</h1>
    <script>
        // 修改第一个标题中的文本内容
        // 获取到第一个dom对象,调用其方法修改文本内容
        document.querySelector("#title1").innerHTML = "修改后的标题1";
        let h1 = document.querySelectorAll("h1"); // 获取到一个集合
        // 遍历所有h1对象,修改其文本内容
        for(let i = 0; i < h1.length; i++){
            h1[i].innerHTML = "修改后的标题" + (i+1);
        }
        
    </script>
</body>

事件监听

在这里插入图片描述
在这里插入图片描述
代码示例

<body>
    <input type="button" id="btn1" value = "点我一下试试">
    <input type="button" id="btn2" value = "点我">

    <script>
        // 给按钮添加点击事件,新方法,可以多次绑定同一事件
        document.querySelector('#btn1').addEventListener('click', () => {
            console.log('点就点呗');
        });
        document.querySelector('#btn1').addEventListener('click', () => {
            console.log('再点一次试试');
        });
        // 给按钮添加点击事件,老方法,只能绑定一次事件,会覆盖
        document.getElementById('btn2').onclick = function() {
            console.log('老方法,只能绑定一次事件,会覆盖');
        }
        document.getElementById('btn2').onclick = function() {
            console.log('老方法,把前面的覆盖了');
        }
        
    </script>
</body>
    <script>
        // 给上述表格的数据行添加事件监听,实现鼠标进入后变色,使用新语法
        let trs = document.querySelectorAll('p');
        for(let i = 0; i < trs.length; i++) {
            trs[i].addEventListener('mouseenter', function() {
                this.style.backgroundColor = 'yellow';
            });
            trs[i].addEventListener('mouseleave', function() {
                this.style.backgroundColor = 'white';
            });
        }
    </script>

常见事件
在这里插入图片描述
js代码的优化:大量的监听事件代码功能可复用,减小编写数量

致谢:本文参考黑马程序员的视频,本人也看过很多黑马程序员的视频,给我带来非常大的帮助。
https://www.bilibili.com/video/BV1yGydYEE3H/?vd_source=1b8f9bfb1d0891faf1c70d7678ae56db


http://www.kler.cn/a/588549.html

相关文章:

  • DeepSeek在学术写作选择研究方向的2个核心提示词
  • pip install和conda install的区别
  • C# --- LINQ
  • 没有公网服务器的情况下,建立反弹 Shell
  • 网络编程、URI和URL的区别、TCP/IP协议、IP和端口、URLConnection
  • LLM(3): Transformer 架构
  • 数据结构-树(详解)
  • 力扣Hot100——35.搜索插入的位置(二分查找)
  • [C语言]数据在内存中的存储
  • ai数字人系统系统saas源码 一站式开发目录
  • 前端 git规范-不同软件(GitHub、Sourcetree、WebStorm)、命令行合并方式下增加 --no-ff的方法
  • 【Vue】上传PDF功能
  • 鸿蒙路由 HMrouter 配置及使用一
  • Android笔记:Android平台下SVG格式的解析与实践
  • PyTorch使用-张量数值计算
  • 每日Attention学习27——Patch-based Graph Reasoning
  • 【从零开始学习计算机科学】软件工程(六)软件质量
  • Docker基础知识介绍
  • 【Python+HTTP接口】POST请求不同请求头构造
  • 【ASMbits--常用算术运算指令】