Js笔记

JavaScript

一、JavaScript简介

1.什么是JavaScript

JavaScript简称JS，由网景公司开发的客户端脚本语言，不需要编译，可以直接运行

Web前端三层：

• 结构层HTML，定义页面的结构
• 样式层CSS，定义页面的样式
• 行为层JavaScript用来实现交互，提升用户的体验

2. JavaScript作用

• 在客户端浏览器上动态的操作页面
• 在客户端浏览器上做数据的校验
• 在客户端上发送异步请求

二、引用方式

1.内联方式

在页面中使用script标签，在script标签中编写js代码

JavaScript标签可以放在页面的任意位置，一般放在head中

    <script>
        js代码
    </script>

2.行内方式

在普通标签中编写js代码，一般需要结合实践的属性，如onclick、onmouseover等

提示：什么是事件属性？----面向对象

eg：对象----外观修饰----CSS实现

​ 行为、事件-----某一时间发生的对象不一样，所引发的反应也不相同多态性

    <!--2.行内方式-->
    <input type="button" value="点我" onclick=alert("我被点,晕了")>
    <!--<a href="" onclick="alert"('超链接被触发')>超链接</a>-->
    <a href="javascript:alert('超链接被触发')">超链接</a>

    <div onmousemove="alert('走开')">把鼠标移上来</div>

3.外部方式

使用单独的.js文件定义，然后页面中使用script标签引入外部脚本文件

    <!--3.外部方式-->
    <script type="text/javascript"          src="js/hello.js"></script>

注意：如果某个script标签用于引入外部文件，则该script标签的标签体中不能再写js代码

三、基本语法

1.变量

变量是用来存储常量的量

常量就是固定值----常数项

js是一门弱类型语言，声明变量时使用var关键字，不需要指定变量的类型

语法：var变量名常量表达式

在ECMAScript 6规范中新增let关键字，也用于声明变量

使用：let声明的变量支持块级作用域，而使用var声明的变量不支持块级作用域

注：在IDEA中配置ES版本settings—language&frameworks—javascrit=—JavaScript language version

变量的命名规则：

• 由字母、数字、下划线、汉字组成
• 由字母、下划线开头
• 不能和系统关键字重命
• 区分大小写

了解：变量名的命名

2.输入和输出

输出：

• alert（）弹出警告框
• console.log（）输出到浏览器的控制台
• document.write()输出到页面

输入：

• prompt（）弹出输入框，获取用户输入的数据

  使用typeof变量判断的类型

  使用Number（变量）将字符串转换为数值

3.转义字符

常用转义符：

• \n换行
• \t缩进
• \"双引号
• \'单引号
• \\斜杠

4.注释

单行注释//

多行注释/*注释内容 */

5.编码规范

代码区分大小写

每个语句以分号结尾

代码缩进

四、核心语法

1. 数据类型

常量：具体值，不变的量–常数项

变量：变化的值，存储常量的量

基础数据类型：

• string字符串
• number数值（NaN表示非数字Not a number，其自身是number类型，表示数值类型
• bollean布尔
• null空类型
• undefined未定义类型

类型转换：

• 转换number

  使用Number（）、parseint（）、parseFloat（）

• 转换为字符串

  拼接空字符串

• 转换为布尔Boolean

  使用Boolean

注意：0、空字符串、null、undefined、NaN会被转换为false，其他的值会被转换为true

2. 算术运算符

算术运算符：+、-、*、/、%求余、**乘方、++、–

比较运算符：>、>=、<、<=、、=、!=

赋值运算符：=、+=、-=、*=、/=、%=

逻辑运算：&&并且、||或者、！非

条件运算符：条件？表达式1：表达式2

3. 选择结构

if…else…、switch

4. 循环结构

while、do…while、for、for…in

break、continue

break：退出整个循环

continue：结束本次循环，返回到条件判断处继续进行下一次执行循环的条件判断

 var str='welcome';//可以将字符串看作是由多个字符组成的集合
        for(var index in str)
        {
            console.log(index);//输出str的索引
            console.log(str[index]);
            
        }

5.数组

5.1 定义方式

语法：

var arr = new Array();
var arr = new Array(值1，值2，...);
var arr = [值1，值2，...];

注意：

• 数组的长度会自动扩展
• 数组中元素的默认值为undefined
• 使用length属性来获取数组的长度

5.2 常用方法

方法	描述
sort（）	排序，默认按字符编码进行升序排列，非string类型会自动转换为string，可自定义比较规则
reverse	反转，将数组元素倒序排列
join	将数组元素使用指定的分割字符串连成字符串，默认通过逗号连接
indexOf（）	返回指定元素在数组中首次出现的位置
slice（begin，end）	截取数组中索引从begin到end之间的元素，左闭右开，如果省略第二个参数，则表示截取到末尾
toString	将数组转换为字符串

5.3 二维数组

二维数组可看认为是一个特殊的一维数组，即一维数组中的每个元素又是一个一维数组

var arr = new Array();//定义一个具有m行个元素的特殊的一维数组
arr[0] = new Array();//第0行有n个元素
arr[1] = new Array();//第1行有n个元素
arr[][]=值；

var arr = [
    [值1，值2，...],
    [值1，值2，...],
    [值1，值2，...],
]

6. 函数

6.1 自定义函数

语法：

function 函数名（参数1，参数2...）
{
    函数体；
}

注意：

• 定义函数时不需要指定参数的类型
• 实参个数和形参的个数可以不同，未指定的实际参数时形参的默认值为undefined
• 不需要指定返回值的类型，如果有返回值，直接使用return语句返回即可
• 如果函数中没有return语句返回值，则默认返回undefined

变量的作用域：

• 局部作用域

  在函数中声明的变量，只能在该函数内访问，函数运行结束变量自动销毁

• 全局作用域

  在函数声明的变量，在任何位置都可以访问

• 块级作用域

  使用let关键字声明的变量，只能在声明它的代码捏访问

6.2 回调函数

不立即执行的函数调用，满足一定条件时执行或者由别的代码调用执行，称为回调函数callback

调用时只写函数名，没有小括号和参数

应用：

• 作为事件绑定的函数

• 作为另一个函数的参数

6.3 匿名函数

没有名字的函数称为匿名函数，一般用于回调

应用场景：

• 用于函数的回调

window,onclick = function(){
            console.log('111');
        }

• 用于一次执行的函数，会自动换行，称为自执行函数

(function (){
                console.log(333);
            })()

6.4 箭头函数

ES6中允许使用箭头=>定义函数，也叫ambda表达式，是以中国特殊匿名函数

五、复合类型

1.String

1.1 定义方式

语法：

var str = 'welcome to js!';//基本数据类型
var str = new String('welcome');//引用数据类型String

使用length属性获取字符串的长度

1.2 常用方法

方法名	说明
charAt（）	返回在指定索引位置的字符，也可以使用索引的方式
indexOf（）	返回某个指定的字符串值在字符串中首次出现的位置
lastindexOf（）	返回某个指定的字符串值在字符串中最后出现的位置
toLowerCase（）	将字符串转换为小写字符
toUpperCase（）	将字符串转换为大写字符
subString（）	提取字符串中两个指定索引之间的字符
replace（）	将指定的字符串替换为新的字符串
split（）	将字符串分隔为字符串数组
trim（）	去除字符串前后两端的空格

2. Date

2.1 定义方式

语法：

var date = new Date();//定义一个日期对象，表示当前时间
var date = new Date(year,month,day,minute,second);//参数为指定的年月日，时分秒
var date = new Date(millseconds);//参数为当前时间与1970-01-01相差的秒数

2.2 常用方法

方法名	说明
getFullyYear()	以四位数字返回年份
getMonth()	返回月份[0,11],0表示1月
getDate()	返回一个月中的某一天（1-31）
getHours()	返回小时[0,23]
getMinutes()	返回分钟[0,59]
getSeconds()	返回秒数[0,59]
getMillseconds()	返回毫秒[0,999]
getDay()	返回一周中的某一天（0-6），0表示周日
getTime()	返回从1970-1-1 0:0:0至今的毫秒数

setXXX方法与getXXX方法类似，用于设置对应的值

3. JSON

3.1 JSON简介

JavaScript object Notation是一种轻量级的数据交换格式，用于表示JavaScript对象的一种 方式
采用与编程语言无关的文本格式，易于阅读和编写，同时也易于解析和生成

3.2 基本用法

语法：{"属性名":属性值,"属性名":属性值,.....}

注意：

• JSON结构是由一系列的键值对所组成的，称为JSON对象
• 属性名必须用双引号括起来

使用：

• 简单的JSON对象
• 复合属性，属性的值为JSON对象
• JSON对象的集合

3.3 JSON转换

• JSON转换为字符串

var person = {    
    "name":"hector",    
    "age":20,    
    "height":180.5
}; 
var str = JSON.stringfy(person);

• 字符串转换为JSON

var user = '{"name":"tom","age":20}';
var obj = JSON.parse(user); 

var users = 		  '[{"id":"9527","username":"admin","password":"123","statu s":1},        {"id":"9528","username":"tom","password":"111","status":1 }]' 
var obj = JSON.parse(users);

4.对象类型

4.1 对象简介

补充：

1.对象：客观存在的并且可以相互区别的事物 eg：一个同学 一本书 页面上的命令按钮 复选框

2.描述一个对象

属性—外观，长相

方法—行为模式

事件—单击，双击

3.对象有三个基本特征:封装、继承和多态

对象类型可以理解为JAVA中的引用数据类型

JavaScript是面向对象的语言，但并不是人们常说的纯粹的面向对象的语言，因为它不支持某些特征

4.2 创建对象

三种方式：

• 使用Object

//新创建的对象没有属性和方法
var 对象名 = new object（）；
//为对象添加属性
对象名.属性名 = 属性值；
//为对象添加方法
对象名.方法名 = function {  
    方法体; 
}; 
//调用属性和方法 
对象名.属性名 或 对象名['属性名'] 
对象名.方法名

• 使用构造函数，模拟类的定义，相当于自定义了一个类型

function 构造函数名（形参1,形参2,....）{//为了区别与普通函数，构造函 数名建义首字母大写    t
    his.属性名=形参1; 
    this.属性名=形参2; 
    this.方法名=function(){    
        方法体；    
    };   
}

• 使用JSON格式定义对象，一般只在JSON对象中定义属性

var JSON对象 ={ 
    属性名:属性值,//属性名和方法名可不用加引号  
    属性名:属性值,  
    ...
};

六、DOM操作

1. DOM简介

Document Object Model文档对象型

浏览器加载HTML文档时，会将HTML文档解析为一个树形结构，称为DOM树

• HTML文档和DOM树是一个一一对应的关系
• DOM树被改变时，与之对应的HTML文档也会随之变化
• 当需要对HTML文档中的内容进行动态改变时，可以使用DOM来进行操作
• DOM提供了一组用来操作的HTML文档的API，即提供了一套属性、方法和事件
• 树上的每个节点都量一个DOM对象，树的顶层为document对象，表示整个文档

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u3lM68G6-1593399299733)(C:\Users\haocaiyun\Desktop\js\images\DOM树.png)]

2. 查询操作

方法和属性	含义
document.getElementById(“id值”)	根据id属性来查询节点，返回匹配的第一个节点
document.getElementsByName(“name属性值”)	根据name属性来查询，返回所有匹配的节点集合
document.getElementsByTagName(“标签名”)	根据标签名来查询，返回所有匹配的节点集合
document.querySelector("选择器)	根据CSS选择器来查询，返回匹配的第一个节点
document.querySelectorAll(“选择器”)	根据CSS选择器来查询，返回所有匹配的节点集合
parentNode属性	查询当前节点的父节点
previousSibling属性	查询当前节点的上一节点
nextSibling属性	查询当前节点的下一节点
firstChild属性	查询当前节点的第一个节点
lastChild属性	查询当前节点的最后一个节点

3.访问操作

3.1 访问属性

即获取/设置DOM对象的属性

DOM对象的属性和HTML标签的属性几乎是一样的，一般情况下DOM对象都会存在一个与对应HTML标签同名的属性

用法：DOM对象.属性

3.2 访问内容

即获取/设置标签中的内容

两种方式：

• 使用innerHTML

  用法：DOM对象.interHTML即内容解析为HTML

• 使用innertText

  用法：DOM对象.interText即将内容作为纯文本

3.3 访问CSS

即获取/设置CSS样式

两种方式：

• 使用style属性

  用法：DOM对象.style样式属性

  如果CSS属性中有短横线-.需要在访问时去掉短横线，然后将其后的单词首字改为大写

• 使用className属性

  用法：DOM对象.className

4.添加操作

方法	含义
document.createElement(“标签名”)	创建一个元素节点，即标签
document.createTextNode(“文本内容”)	创建一个文本节点，即标签中的文本内容
node.appendChild(newNode)	将一个新的节点newNode添加到指定的节点node中子节点的末尾
node.insertBefore(newNode，refNode）	将一个新的节点newNode插入node节点的子节点refNode之前
node.repalaceChild（newNode，refNode）	用一个新的节点newNode替换原有的node节点中的子节点refNode

5.删除操作

方法	含义
node.remove	删除当前节点
node.removeChild（refNode）	删除当前节点中的指定节点

七、事件处理

1.简介

事件：发生在HTML元素上的事情，可以是用户的行为，也可以是浏览器的行为，如

• 用户点击了某个HTML元素
• 用户将鼠标移动到某个HTML元素上
• 用户输入数据时光标离开
• 页面加载完成

事件源：事件触发的源头，即触发事件的元素，如按钮、输入框、超链接等

事件对象：当一个事件发生时，这个事件相关的信息将会保存在一个对象中，称为even对象

事件监听：监听事件的发生，绑定事件函数，当事件被触发后执行该事件函数，即回调函数

2.绑定事件

两种方式：

• 静态绑定，通过标签的绑定属性绑定

• 动态绑定，通过JS代码绑定事件

3.常用事件

3.1 鼠标事件

事件名	描述
onclick	鼠标单击
cnsblclick	鼠标双击
onmouseover	鼠标移动到某元素上
onmouseout	鼠标从某元素上移开
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开
onmousemove	鼠标被移动

3.2 键盘事件

事件名	描述
onkeydown	某个键盘的键被按下去
onkeyup	某个键盘的键被松开
onkeypress	某个键盘的键被按下去且松开

3.3 表单事件

事件名	描述
onfous	元素获得焦点
onblur	元素失去焦点
onchange	域的内容发生改变，一般用于文件选择器和下拉列表
onselect	文本内容被选中
onsubmit	表单提交前触发，回调函数返回true表示允许表单提交，返回false表示阻止表单提交

4.事件操作

4.1 事件冒泡

概念：当一个HTML元素产生事件时，该事件会从当前元素（事件源）开始，往上冒泡直到页面的根元素，所有经历的节点都会收到该事件并执行

特点：先触发子集元素的事件，在触发父级元素的事件

阻止事件冒泡：event.stopPropagation()或event.cancelBubble=true;

4.2 事件默认行为

概念：当一个事件发生时浏览器自己默认做的事情，如：点击链接时会默认跳转，右键点击时会默认弹出菜单

阻止事件的默认行为：event.preventDefault();

5.示例：下拉列表

5.1 select和option对象

Select对象：表示HTML表单中的一个下拉列表

• 属性：

  length：设置或返回下拉列表中选项的数量

  selectedindex： 设置或返回下拉列表中被选中项的索引

  value：返回下拉列表中被选项的值

  option：返回下拉列表中所有的选项，值为Option对象数组（当该数组改变时对应下拉列表的选项也会改变）

• 方法：

  add（）向下拉列表中添加一个选项

• 事件：

  onchange 下拉列表的选项改变时触发

Option对象：表示HTML表单中下拉列表的一个选项

• 属性：

  text：设置或返回在页面中显示的文本值

  value：设置或返回传递给服务器的值

• 构造函数：

  Option（文本值，服务器值） 创建一个选项

5.2 二级菜单联动

实现省市级联的效果

八、BOM操作

1.BOM简介

JavaScript由三部分组成

• ECMAScript核心语法
• DOM文档对象模型
• BOM浏览器对象模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yJGPuES1-1593399299736)(C:\Users\haocaiyun\Desktop\js\images\BOM.png)]

2.window对象

常用属性：

document、location、history等，都是子级对象

常用方法：

方法名	含义
alert（text）	显示一个带有提示信息和确认按钮的警告框
prompt（text）	显示一个带有提示信息、文本框、确定和取消按钮的输入框，返回值为输入的数据
confirm（text)	显示一个带有提示信息、确定和取消按钮的确认框，确定时返回true，取消时返回false
open（url，name，options）	打开具有指定名称的新窗口，并加载给定url所指定的文档
setTimeout（fn，delay）	设置一次性计时器，在指定毫秒值后执行某个函数
setInterval（fn，delay）	设置周期性计时器，周期性循环执行某个函数
clearTimeout（timer）	清除一次性计时器
clearInerval（timer）	清除周期性计时器

常用事件：

事件名	描述
onload	页面加载完成
onscroll	窗口滚动条滑动时
onclick	鼠标单击

注意：由于window对象是BOM结构的顶层对象，所以在调用window的属性和方法时可以省略window

3.location对象

常用属性

• href设置或返回地址栏中的url

常用方法：

• reload重新加载当前页面

4.history对象

方法名	含义
back（）	后退，加载history列表中的上一个url
forward（）	前进，加载前一个

九、数据校验

1.正则表达式

1.1 简介

正则表达式是一门独立的语言，有自己的语法，用于检测指定字符串是否符合特定规则

正则表达式就是用来定义规则的，称为Regular Expresstion

在JavaScript中提供了RegExpt对象，表示正则表达式

1.2 定义方式

创建正则表达式对象，两种方式：

• 使用字变量

  var reg = /pattern/attribute;

• 使用构造函数

  var reg = new RegExp(pattern,attribute);

说明：

• pattern表示匹配模式，用于指定匹配规则，由元字符、量词、特殊符号组成
• attribute表示匹配特征，取值：i忽略大小写、g全局匹配、m多行匹配

1.3 匹配规则

元字符：具有特殊含义的字符

符号	描述
\s	匹配任意空白字符
\S	任何非空白字符
\d	匹配一个数字字符 ，等价于【0-9】
\D	除了数字之外的任何字符
\w	匹配一个数字、下划线或字母字符
\W	任何非单字字符，等价于匹配非数字、非下划线或非字符字符
-	匹配除换行之外的任意字符

量词：拽定字符出现的次数

符号	描述
{n}	匹配前一项的n次
{n,}	匹配前一项n次，或者多次
{n,m}	匹配前一项至少n次，但不超过m次
*	匹配前一项0次或多次，等价于{0,}
+	匹配前一项1次或多次，等价于{1,}
?	匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}

特殊符号：具有特殊含义的符号

符号	含义
/…/	代表一个模式的开始和结束
^	匹配字符的开始，即表示行的开始
$	匹配字符串的结束，即表示行的结束
[]	表示可匹配列表
()	用于分组
|	表示或者
[^]	在[]中拖字符表示非

注：[\u4E00-\u9FAS]用于匹配中文字符

1.4基本用法

使用正则表达式对象的test方法

语法：

var flag = reg.test(字符串);

判断字符串是否符合正则表达式对象所指定的模式规则，返回true或false

2.表单校验

2.1 目的

• 客户端表单校检的目的
• 保证输入的数据符合要求 减轻服务器的压力

2.2 实现

通过onsubmit事件绑定回调函数，判断表单数据是否符合要求

• 如果不符合要求，则返回false
  |
  | * | 匹配前一项0次或多次，等价于{0,} |
  | + | 匹配前一项1次或多次，等价于{1,} |
  | ? | 匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1} |

特殊符号：具有特殊含义的符号

符号	含义
/…/	代表一个模式的开始和结束
^	匹配字符的开始，即表示行的开始
$	匹配字符串的结束，即表示行的结束
[]	表示可匹配列表
()	用于分组
|	表示或者
[^]	在[]中拖字符表示非

注：[\u4E00-\u9FAS]用于匹配中文字符

1.4基本用法

使用正则表达式对象的test方法

语法：

var flag = reg.test(字符串);

判断字符串是否符合正则表达式对象所指定的模式规则，返回true或false

2.表单校验

2.1 目的

• 客户端表单校检的目的
• 保证输入的数据符合要求 减轻服务器的压力

2.2 实现

通过onsubmit事件绑定回调函数，判断表单数据是否符合要求

• 如果不符合要求，则返回false
• 如果符合要求，则返回true