前端的知识点总结--JS篇

最新推荐文章于 2024-08-19 17:04:41 发布

Bailey395

最新推荐文章于 2024-08-19 17:04:41 发布

阅读量545

点赞数 14

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_62432037/article/details/138923491

版权

1.Js的总结<script/>

1.1 三种Api的使用：

api	描述
window.alert(...)	警告框
document.write(...)	在HTML 输出内容
console.log(...)	写入浏览器控制台

1.2 变量

let,const,var(不推荐使用)

1.3 数据类型

数据类型	描述
number	数字（整数、小数、NaN(Not a Number)）
string	字符串，单双引('...')、双引号("...")、反引号(`...`)皆可，正常使用推荐单引号
boolean	布尔。true，false
null	对象为空。 JavaScript 是大小写敏感的，因此 null、Null、NULL是完全不同的
undefined	当声明的变量未初始化时，该变量的默认值是 undefined

1.4 运算符

运算规则	运算符
算术运算符	+ , - , * , / , % , ++ , --
赋值运算符	= , += , -= , *= , /= , %=
比较运算符	> , < , >= , <= , != , == , === 注意 == 会进行类型转换，=== 不会进行类型转换
逻辑运算符	&& , \|\| , !
三元运算符	条件表达式 ? true_value: false_value

上述所罗列的这些运算符中，绝大部分的运算符和Java中的使用方式、含义都是一样的。那这里，我们主要介绍一下 = 、==、=== 的区别：

= 是赋值操作
== 会在比较时，判断左右两边的值是否相等（会自动进行类型转换）
=== 全等，在比较时，判断左右两边的类型和值是否都相等，都相等才为true（不会进行类型转换）

1.5 学习路径

JavaScript中的对象有很多，主要可以分为如下3大类，我们可以打开W3school在线学习文档

1.6 BOM提供的5个对象（学Window对象，Location对象）

对象名称	描述
Window	浏览器窗口对象
Navigator	浏览器对象
Screen	屏幕对象
History	历史记录对象
Location	d地址栏对象

1.6.1 window对象提供了获取其他BOM对象的属性：

属性	描述
history	用于获取history对象
location	用于获取location对象
Navigator	用于获取Navigator对象
Screen	用于获取Screen对象

也就是说我们要使用location对象，只需要通过代码window.location或者简写location即可使用

window也提供了一些常用的方法，如下表格所示：

函数	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
comfirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

setInterval(fn,毫秒值)：定时器，用于周期性的执行某个功能，并且是循环执行。该函数需要传递2个参数：

fn:函数，需要周期性执行的功能代码

毫秒值：间隔时间

注释掉之前的代码，添加代码如下：

//定时器 - setInterval -- 周期性的执行某一个函数
var i = 0;
setInterval(function(){
     i++;
     console.log("定时器执行了"+i+"次");
},2000);

setTimeout(fn,毫秒值) ：定时器，只会在一段时间后执行一次功能。参数和上述setInterval一致

注释掉之前的代码，添加代码如下：

//定时器 - setTimeout -- 延迟指定时间执行一次 
setTimeout(function(){
    alert("JS");
},3000);

浏览器打开，3s后弹框，关闭弹框，发现再也不会弹框了。

1.6.2 Location对象

//设置浏览器地址栏信息
location.href = "https://www.itcast.cn";

1.7 DOM对象

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

1.7.1 DOM对象

DOM对象：浏览器根据HTML标签生成的JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性，就会自动映射到标签身上
DOM的核心思想：将网页的内容当做对象来处理
document对象
- 网页中所有内容都封装在document对象中
- 它提供的属性和方法都是用来访问和操作网页内容的，如：document.write(…)
DOM操作步骤:
- 获取DOM元素对象
- 操作DOM对象的属性或方法 (查阅文档)

1.7.2 获取DOM对象

我们可以通过如下两种方式来获取DOM元素。

根据CSS选择器来获取DOM元素，获取到匹配到的第一个元素：document.querySelector('CSS选择器');
根据CSS选择器来获取DOM元素，获取匹配到的所有元素：document.querySelectorAll('CSS选择器');

注意：获取到的所有元素，会封装到一个NodeList节点集合中，是一个伪数组（有长度、有索引的数组，但是没有push、pop等数组方法）

PS：在早期的JS中，我们也可以通过如下方法获取DOM元素（了解）。

函数	描述
document.getElementById()	根据id属性值获取，返回单个Element对象
document.getElementsByTagName()	根据标签名称获取，返回Element对象数组
document.getElementsByName()	根据name属性值获取，返回Element对象数组
document.getElementsByClassName()	根据class属性值获取，返回Element对象数组

<!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>JS-对象-DOM</title>
</head>

<body>
    <span id="sid">DOM元素1</span>
    <span class="txt">DOM元素2</span>
    <span class="txt">DOM元素3</span>

    <script>
        //根据CSS选择器获取DOM元素, 获取到匹配的第一个元素
        let s1 = document.querySelector('#sid');
        console.log(s1);
	    
        //根据CSS选择器获取DOM元素, 获取到匹配的所有元素
        let s2 = document.querySelectorAll('.txt');
        s2.forEach(s => console.log(s))
    </script>
</body>

</html>

1.8 JS事件

什么是事件呢？HTML事件是发生在HTML元素上的 “事情”，例如：

按钮被点击
鼠标移到元素上
输入框失去焦点
按下键盘按键
........

而我们可以给这些事件绑定函数，当事件触发时，可以自动的完成对应的功能。这就是事件监听。例如：对于我们所说的百度注册页面，我们给用户名输入框的失去焦点事件绑定函数，当我们用户输入完内容，在标签外点击了鼠标，对于用户名输入框来说，失去焦点，然后执行绑定的函数，函数进行用户名内容的校验等操作。JavaScript事件是js非常重要的一部分，接下来我们进行事件的学习。那么我们对于JavaScript事件需要学习哪些内容呢？我们得知道有哪些常用事件，然后我们得学会如何给事件绑定函数。

所以主要围绕2点来学习：

事件监听
常用事件

1.8.1 事件的监听

事件源.addEventListener('事件类型', 要执行的函数);

在上述的语法中包含三个要素:

事件源: 哪个dom元素触发了事件, 要获取dom元素
事件类型: 用什么方式触发, 比如: 鼠标单击 click, 鼠标经过 mouseover
要执行的函数: 要做什么事

1.8.2 addEventListener 与 on事件区别:

on方式会被覆盖，addEventListener 方式可以绑定多次，拥有更多特性，推荐使用 addEventListener .

1.8.3 常见的事件

1.9 正则表达式

介绍：正则表达式（Regular Expression，也简称为正则），定义了字符串组成的规则。
作用：通常用来验证数据格式、查找替换文本等。
定义：
- 正则表达式字面量（注意不要加引号）
```
const reg1 = /abc/;
```
- 创建正则对象RegExp
```
const reg2 = new RegExp('abc');
```
方法：

test(str)：判断指定字符串是否符合规则，符合返回true；不符合返回false。
语法：
1. 普通字符：大多数的字符仅能描述它们本身，这些字符称作普通字符，比如字母和数字。
2. 特殊字符：是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
3. 量词：表示要匹配的字符或表达式的数量。

符号	含义
^	表示以谁开始
$	表示以谁结束
[]	表示某个范围内的单个字符，如：[0-9]单个数字字符
.	表示任意单个字符，除了换行和行结束符
\w	代表单词字符：字母、数字、下划线（_），相当于[A-Za-z0-9_]
\d	代表数字字符：相当于[0-9]
\s	代表空格（包括换行符、制表符、空格等）

符号	含义
?	零个或一个
*	零个或多个
+	一个或多个（至少一个）
{n}	n个
{m,}	至少m个
{m,n}	至少m个，最多n个

示例：

  <script>
    let str1 = 'hello World';
    let str2 = '二哈很二o';
    let str3 = 'er哈就是很二o';
    let str4 = '二哈就是很二';

    console.log(/\w+/.test(str1)); //true
    console.log(/\w+/.test(str2)); //true
    console.log(/\w+/.test(str3)); //true
    console.log(/\w+/.test(str4)); //false

    const reg1 = /abc/;
    const reg2 = new RegExp('abc');
    console.log(reg1.test('my name is : abc')); //true
    console.log(reg2.test('my name is : abc')); //true
  </script>