四阶段P188~P（PJavaScript基础语法-dom-bom-js-es6新语法-jQuery- 数据可视化echarts 黑马pink老师前端入门基础视频教程（持续更新）

最新推荐文章于 2023-08-11 10:20:43 发布

崛起的圈圈

最新推荐文章于 2023-08-11 10:20:43 发布

阅读量474

点赞数

分类专栏：前端基础—JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_31645143/article/details/119457084

版权

JavaScript课堂笔记

JavaScript 简单类型与复杂类型
DOM

JavaScript 简单类型与复杂类型

1. 简单类型与复杂类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型string ，number，boolean，undefined，null

引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

<script>
        // 简单数据类型 null  返回的是一个空的对象  object
        var time = null;
        console.log(typeof(time));
        // 如果有个变量我们以后打算存储为对象，暂时没想好放啥，这个时候就给 null
        // 1. 简单数据类型 是存放在栈里面  里面直接开辟一个空间存放的是值
        // 2. 复杂数据类型 首先在栈里面存放地址 十六进制表示   然后这个地址指向 堆 里面的数据
    </script>

 <script>
        // 复杂数据类型传参
        function Person(name) {
   
            this.name = name;
        }

        function f1(x) {
    // x = p
            console.log(x.name);  // 2. 这个输出什么？ 刘德华
            x.name = "张学友";
            console.log(x.name);  // 3. 这个输出什么？ 张学友
        }
        var p = new Person("刘德华");
        console.log(p.name); // 1. 这个输出什么？ 刘德华
        f1(p);
        console.log(p.name); // 4. 这个输出什么？ 张学友
    </script>

2. 堆和栈

堆栈空间分配区别：
1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；简单数据类型存放到栈里面
2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。复杂数据类型存放到堆里面

注意：JavaScript中没有堆栈的概念，通过堆栈的方式，可以让大家更容易理解代码的一些执行方式，便于将来学习其他语言。

3. 简单类型的内存分配

值类型（简单数据类型）： string ，number，boolean，undefined，null

值类型变量的数据直接存放在变量（栈空间）中

4. 复杂类型的内存分配

引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

5. 简单类型传参

函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。

6. 复杂类型传参

函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。

DOM

1. DOM 简介

1.1什么是 DOM

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML 或者XML）的标准编程接口。
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

1.2 DOM 树

在这里插入图片描述

文档：一个页面就是一个文档，DOM 中使用 document 表示
元素：页面中的所有标签都是元素，DOM 中使用 element 表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示
DOM 把以上内容都看做是对象

2. 获取元素

2.1如何获取页面元素

DOM在我们实际开发中主要用来操作元素。我们如何来获取页面中的元素呢?
获取页面中的元素可以使用以下几种方式:

根据 ID 获取
根据标签名获取
通过 HTML5 新增的方法获取
特殊元素获取

2.2根据 ID 获取

使用 getElementById() 方法可以获取带有 ID 的元素对象。

使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="time">2019-9-9</div>
    <script>
        // 1. 因为我们文档页面从上往下加载，所以先得有标签  所以我们script写到标签的下面
        // 2. get 获得 element 元素 by 通过 驼峰命名法
        // 3. 参数 id 是大小写敏感的字符串
        // 4. 返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof(timer));
        // 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>
</html>

2.3根据标签名获取

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。
注意：
1.因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
2.得到元素对象是动态的

还可以获取某个元素（父元素）内部所有指定标签名的子元素
element.getElementsByTagName('标签名');
注意：父元素必须是单个对象（必须指明是哪一个元素对象). 获取的时候不包括父元素自己

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>知否知否，应是等你好久1</li>
        <li>知否知否，应是等你好久2</li>
        <li>知否知否，应是等你好久3</li>
        <li>知否知否，应是等你好久4</li>
        <li>知否知否，应是等你好久5</li>
    </ul>
    <ol id = "ol">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ol>
    <script>
        // 1. 返回的是  获取过来元素对象的集合 以伪数组的形式
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2. 我们想一次打印里面的元素对象我们可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
     
            console.log(lis[i]);
        }
        // 3. 如果页面中只有一个li  返回的还是伪数组的形式
        // 4. 如果页面中没有这个元素 返回的是 空的伪数组 的形式
        // 5. element.getElementsByTagName('标签名');  父元素必须是指定的单个元素
        var ol = document.getElementsByTagName('ol');  // [ol]
        console.log(ol[0].getElementsByTagName('li'));

        var ol1 = document.getElementById('ol');
        console.log(ol1.getElementsByTagName('li'));
    </script>
</body>
</html>

2.4通过 HTML5 新增的方法获取

注意：
querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(’#nav’);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        // 1. getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        // 2. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号  类: .box  id: #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        // 3. querySelectAll() 返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>
</body>
</html>

2.5获取特殊元素（body，html）

获取body元素

获取html元素
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1. 获取 body 元素
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);
        // 2. 获取 html 元素
        // var htmlEle = document.html; 获取HTML改写法错误
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>
</body>
</html>

3. 事件基础

3.1事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。简单理解：触发— 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作

3.2事件三要素

1.事件源（谁）
2.事件类型（什么事件）
3.事件处理程序（做啥）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id = "btn">唐伯虎</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 1. 事件是有三部分组成 事件源  事件类型  事件处理程序  我们也称为事件三要素
        // (1) 事件源  事件被触发的对象   谁  按钮
        var btn = document.getElementById('btn');
        // (2) 事件类型  如何触发  什么类型  比如鼠标点击(onclick)  还是鼠标经过 还是键盘按下
        // (3) 事件处理程序 通过一个函数赋值的方式完成
        btn.onclick = function() {
     
            alert('点秋香');
        }
    </script>
</body>
</html>

案例：点击按钮弹出警示框
页面中有一个按钮，当鼠标点击按钮的时候，弹出“你好”警示框

案例分析
① 获取事件源（按钮）
② 注册事件（绑定事件），使用 onclick
③ 编写事件处理程序，写一个函数弹出 alert 警示框

3.3执行事件的步骤

1.获取事件源
2.注册事件（绑定事件）
3.添加事件处理程序（采取函数赋值形式）

常见的鼠标事件
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>123</div>
    <script>
        // 执行事件步骤
        // 点击 div 控制台输出 我被选中了
        // 1. 获取事件源
        var div = document.querySelector('div');
        // 2. 绑定事件 注册事件
        // div.onclick
        // 3. 添加事件处理程序
        div.onclick = function () {
     
            console.log('我被选中了');
        }
    </script>
</body>
</html>

3.4分析事件三要素

下拉菜单三要素
关闭广告三要素

4. 操作元素

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。注意以下都是属性

4.1改变元素内容

从起始位置到终止位置的内容, 但它去除 html 标签，同时空格和换行也会去掉

<!DOCTYPE html>
<html lang

最低0.47元/天解锁文章

崛起的圈圈

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
四阶段P188~P（PJavaScript基础语法-dom-bom-js-es6新语法-jQuery- 数据可视化echarts 黑马pink老师前端入门基础视频教程（持续更新）

JavaScript课堂笔记JavaScript 简单类型与复杂类型1. 简单类型与复杂类型2. 堆和栈3. 简单类型的内存分配4. 复杂类型的内存分配5. 简单类型传参6. 复杂类型传参JavaScript 简单类型与复杂类型1. 简单类型与复杂类型简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型string ，number，boolean，undefined，null引用类型：复杂数据类型，在存储
复制链接

扫一扫