javaScript

最新推荐文章于 2023-06-09 21:13:27 发布

枕风听眠

最新推荐文章于 2023-06-09 21:13:27 发布

阅读量563

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_64787671/article/details/124536255

版权

一.简单数据类型和复杂数据类型

1.简单数据类型：

    **简单类型**（**基本数据类型**、**值类型**）：在存储时变量中存储的是值本身，包括string ，number，boolean，undefined，null

2复杂数据类型：

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

3.堆栈：

3.,1 栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；简单数据类型存放到栈里面

3.2 堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

堆栈空间分配区别：

简单数据类型的存储方式

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

复杂数据类型的存储方式

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

4.简单类型传参：

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

function fn(a) {
    a++;
    console.log(a); 
}
var x = 10;
fn(x);
console.log(x)；

    运行结果如下：10   11

5.复杂数据类型传参：

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

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. 这个输出什么 ?

运行结果如下：

二.作用域

作用域概述：

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

JavaScript（es6前）中的作用域有两种：全局作用域局部作用域（函数作用域）

作用域链：只要是代码都一个作用域中，写在函数内部的局部作用域，未写在任何函数内部即在全局作用域中；如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域；根据在[内部函数可以访问外部函数变量]的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

function f1() {
var num = 123;
function f2() {
console.log( num );
}
f2();
}
var num = 456;
f1();

三.对象：

this对象可以用在函数中，也可以用在方法中，用在方法中则指向这个函数的对象;直接在console输出泽指向的是windoe窗口。this运行在那个对象下，就指向那个对象。

1.什么是对象？

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。对象是由属性和方法组成的。

属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）

2.为什么需要对象

保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。

如果要保存一个人的完整信息呢？

例如，将“张三疯”的个人的信息保存在数组中的方式为：
  var arr = [‘张三疯’, ‘男', 128,154];

3.创建对象的三种方式：

（1）利用字面量创建对象：

    就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法；{ } 里面采取键值对的形式表示

键：相当于属性名
值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

代码如下：
```
var star = {
    name : 'pink',
    age : 18,
    sex : '男',
    sayHi : function(){
        alert('大家好啊~');
    }
};
```
上述代码中 star即是创建的对象。

（2）对象的使用

对象的属性

对象中存储具体数据的 "键值对"中的 "键"称为对象的属性，即对象中存储具体数据的项

对象的方法

对象中存储函数的 "键值对"中的 "键"称为对象的方法，即对象中存储函数的项

访问对象的属性

对象里面的属性调用 : 对象.属性名，这个小点 . 就理解为“ 的 ”
对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号

示例代码如下：
```
console.log(star.name)     // 调用名字属性
console.log(star['name'])  // 调用名字属性
```

调用对象的方法

对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号

示例代码如下：
```
star.sayHi();              // 调用 sayHi 方法,注意，一定不要忘记带后面的括号
```

（3）创建对象方式

第一种：利用 new Object 创建对象

var andy = new Obect();
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
    alert('大家好啊~');
}

注意：

Object() ：第一个字母大写

new Object() ：需要 new 关键字

使用的格式：对象.属性 = 值;

第二种：利用构造函数创建对象

第一：构造函数定义：

构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

第二：构造函数的封装格式：

function 构造函数名(形参1,形参2,形参3) {
     this.属性名1 = 参数1;
     this.属性名2 = 参数2;
     this.属性名3 = 参数3;
     this.方法名 = 函数体;
}

第三：构造函数的调用格式

var obj = new 构造函数名(实参1，实参2，实参3)

以上代码中，obj即接收到构造函数创建出来的对象。

4.遍历对象

for...in 语句用于对数组或者对象的属性进行循环操作。

其语法如下：
for (变量 in 对象名字) {
    // 在此执行代码
}
语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。
for (var k in obj) {
    console.log(k);      // 这里的 k 是属性名
    console.log(obj[k]); // 这里的 obj[k] 是属性值
}

四.js的事件和样式操作

1. APL的概念：

API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。

2 . 什么是DOM:

文档对象模型（Document Object Model，简称DOM），是 [W3C](https://baike.baidu.com/item/W3C) 组织推荐的处理[可扩展标记语言](https://baike.baidu.com/item/%E5%8F%AF%E6%89%A9%E5%B1%95%E7%BD%AE%E6%A0%87%E8%AF%AD%E8%A8%80)（html或者xhtml）的标准[编程接口](https://baike.baidu.com/item/%E7%BC%96%E7%A8%8B%E6%8E%A5%E5%8F%A3)。

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

3 . DOM树

4. 获取元素

我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，再对其进行操作。

5.获取元素的方法

（1）根据ID获取

语法：document.getElementById(id)
作用：根据ID获取元素对象

（2）根据标签名获取元素

语法：document.getElementsByTagName('标签名')
作用：根据标签名获取元素对象

（3）H5新增获取元素方式

（4）获取特殊元素（body, html)

五. 事件基础

1事件三元素：

事件源（谁）：触发事件的元素
事件类型（什么事件）：例如 click 点击事件
事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

2. 常见的鼠标事件

六. 操作元素

1. 改变元素内容（获取或设置）

innerText和innerHTML的区别

获取内容时的区别：

innerText会去除空格和换行，而innerHTML会保留空格和换行
设置内容时的区别：

innerText不会识别html，而innerHTML会识别

2. 常用元素的属性操作

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值

3. 表单元素的属性操作

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值

表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。

4. 样式属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

常用方式

方式：通过操作style属性

元素对象的style属性也是一个对象！

元素对象.style.样式属性 = 值;

七.DOM节点操作

1. 获取属性值

2.设置属性值

3 .移出属性

4. H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中

（1）设置H5自定义属性

比如

（2）获取H5自定义属性

element.dataset.index

八.节点操作

1.节点概述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

2.节点层级

利用 DOM 树可以把节点划分为不同的层级关系，常见的是**父子兄层级关系**。

3.父级节点

node.parentNode可以获取元素的父节点对象

4.子节点

子元素节点parentNode.children

5.创建节点

6.添加节点

父节点.appendChild(child)可以添加子节点

7.删除节点

node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。

九.事件执行机制

1.事件知识

事件注册的两种方法：传统和事件监听

2.常用鼠标事件

3.鼠标事件对象

4.常用的键盘事件

5.定时器

window 对象给我们提供了 2 个非常好用的方法-定时器。

setTimeout() 炸弹定时器

setInterval() 闹钟定时器

停止定时器

offsetleft获取元素距离有定位的父元素的left值；

offsetTop获取元素距离有定位的父元素的top值；

offsetWidth 获取元素在页面实际占据的宽度包含内容 padding + border

offsetHeight获取元素在页面实际占据的高度包含内容 padding + border

mouseenter鼠标进入，子盒子不影响

mouseleave鼠标离开，子盒子不影响

枕风听眠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript

javaScript1.1简单数据类型： **简单类型**（**基本数据类型**、**值类型**）：在存储时变量中存储的是值本身，包括string ，number，boolean，undefined，null1.22复杂数据类型：**复杂数据类型（引用类型）**：在存储时变量中存储的仅仅是地址（引用），通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等；3.堆栈：3.,1 栈（操作系统）：由操作系统自动分配
复制链接

扫一扫