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。
-
语法:
-
普通字符:大多数的字符仅能描述它们本身,这些字符称作普通字符,比如字母和数字。
-
特殊字符:是一些具有特殊含义的字符,可以极大提高了灵活性和强大的匹配功能。
-
量词:表示要匹配的字符或表达式的数量。
-
符号 | 含义 |
---|---|
^ | 表示以谁开始 |
$ | 表示以谁结束 |
[] | 表示某个范围内的单个字符,如:[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>