JavaScript学习复习 | 冰冰的小屋

JavaScript

前端

发布日期: 2021-12-02

文章字数: 1.7k

阅读时长: 6 分

阅读次数:

JavaScript

JavaScript（简称JS）和Java没有任何关系。

HTML为骨，CSS为皮，JS为动作合在一起就是浏览器里我们浏览页面所看到的样子。

复习内容如下：

JavaScript，他和Python一样是一门编程语言，而浏览器内置了JavaScript语言的解释器，所以JavaScript代码在浏览器上就可以运行。
DOM，（Document Object Model）是指文档对象模型，通过它，可以操作HTML文档的相关功能，例如：对标签内容进行删除和替换等。
BOM，（Browser Object Model）是指浏览器对象模型，通过他，可以操作浏览器相关的功能，例如：浏览器设置定时器，浏览器定时刷新页面。

JS在开发中的运用

如果代码量比较少，而且是只在当前页面使用的话，最好放在body标签底部，因为浏览器在解析HTML、CSS、JavaScript文件时，是按照从上到下逐步解释并执行，如果JavaScript代码或文件放在head中可能会有因为耗时（网络请求或代码）导致页面显示速度太慢，影响用户感受。

<script>
    /*老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。*/
</script>

如果代码量比较多，需要分离出来为单独的js文件。这样不仅可以被多个引用，避免重复编写。

变量

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。

<script type="text/javascript">
    // 全局变量
    name = '武沛齐';
    function func(){
        // 局部变量
        var age = 18;
        // 全局变量
        gender = "男"
    }
    func();
    console.log(gender); // 男
    console.log(name); // 武沛齐
    console.log(age); // 报错：age是fun的局部变量，外部无法获取。
</script>

常见数据类型

1. 数字（Number）

JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。

// 声明
var page = 111;
var age = Number(18);
var a1 = 1,a2 = 2, a3 = 3;
// 转换
parseInt("1.2");  // 将某值转换成数字，不成功则NaN
parseFloat("1.2");  // 将某值转换成浮点数，不成功则NaN
/*
NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。
*/

扩展：可以用 typeof(“xx”) 查看数据类型。

2. 字符串(String)

// 声明
var name = "wupeiqi";
var name = String("wupeiqi");
var age_str = String(18);

// 常用方法
var name = "wupeiqi";
var value = names[0]                    // 索引
var value = name.length                 // 获取字符串长度
var value = name.trim()                 // 去除空白
var value = name.charAt(index)          // 根据索引获取字符
var value = name.substring(start,end)   // 根据索引获取子序列

3. 布尔类型（Boolean）

布尔类型仅包含真假，与Python不同的是其首字母小写。

var status = true;
var status = false;
/*
在js中进行比较时，需要注意：
    ==       比较值相等
    !=       不等于
    ===      比较值和类型相等
    !===     不等于
    ||        或
    &&        且
*/

4. 数组（Array）

JavaScript中的数组类似于Python中的列表。

// 常见方法
var names = ['武沛齐', '肖峰', '于超']
names[0]                        // 索引
names.push(ele)                 // 尾部追加元素
var ele = names.obj.pop()       // 尾部移除一个元素
names.unshift(ele)              // 头部插入元素
var ele = obj.shift()           // 头部移除一个元素
names.splice(index,0,ele)       // 在指定索引位置插入元素
names.splice(index,1,ele)       // 指定索引位置替换元素
names.splice(index,1)           // 指定位置删除元素
names.slice(start,end)          // 切片
names.reverse()                 // 原数组反转
names.join(sep)                 // 将数组元素连接起来以构建一个字符串
names.concat(val,..)            // 连接数组
names.sort()                    // 对原数组进行排序

5. 字典（对象Object）

JavaScript中其实没有字典类型，字典是通过对象object构造出来的。

// 声明
info = {
    name:'武沛齐',
    "age":18
}
// 常用方法
var val = info['name']      // 获取
info['age'] = 20            // 修改
info['gender'] = 'male'     // 新增
delete info['age']          // 删除

json 序列化

JavaScript提供了json序列化功能，即：将对象和字符串之间进行转换。网络中数据传输本质上是基于字符串进行，如果想要把一个js的对象通过网络发送到某个网站，就需要对对象进行序列化然后发送。

JSON.stringify(object) ，序列化

var info = {name:'alex',age:19,girls:['钢弹','铁锤']}
var infoStr = JSON.stringify(info)
console.log(infoStr) 
# '{"name":"alex","age":19,"girls":["钢弹","铁锤"]}'

JSON.parse(str)，反序列化

var infoStr = '{"name":"alex","age":19,"girls":["钢弹","铁锤"]}'
var info = JSON.parse(infoStr)
console.log(info)

DOM

文档对象模型（Document Object Model，DOM）是一种用于HTML编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。更直白一点讲：DOM相当于是一个模块，提供了关于HTML文档中对标签进行操作的功能，JavaScript结合DOM可以对HTML中的标签进行操作。

1.选择器

直接查找

document.getElementById(arg)             // 根据ID获取一个标签对象
document.getElementsByClassName(arg)     // 根据class属性获取标签对象集合
document.getElementsByName(arg)       // 根据name属性值获取标签对象集合
document.getElementsByTagName(arg)       // 根据标签名获取标签对象集合

间接查找

var tag = document.getElementById(arg);
tag.parentElement           // 找当前标签对象的父标签对象
tag.children                // 找当前标签对象的所有子标签对象
tag.firstElementChild       // 找当前标签对象的第一个子标签对象
tag.lastElementChild        // 找当前标签对象最后一个子标签对象
tag.nextElementtSibling     // 找当前标签对象下一个兄弟标签对象
tag.previousElementSibling  // 找当前标签对象上一个兄弟标签对象