javascript笔记和代码
JavaScript
一、JavaScript简介
1.什么是javascript
javascript简称js，由网景公司开发的客户端脚本语言，不需要编译，可以直接运行
web前端三层：
- 结构层 HTML,定义页面的结构
- 样式层 CSS，定义页面的样式
- 行为层 JavaScript，实现交互，进而提升用户的体验
2.JavaScript作用
- 在客户端浏览器上动态的操作页面
- 在客户端浏览器上做数据的校验
- 在客户端上发送异步请求
二、引用方式
1.内联方式
在页面中使用script标签，在script标签中编写js代码
script可以放在页面的任意位置，一般放在头部
<script>
alert("hello javascript");
</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 onmouseover="alert('走开')">把鼠标移上来</div>
3.外部方式
使用单独的.js文件定义，然后在页面中使用script标签引入外部脚本文件
<script type="text/javascript" src="js/hello.js"</script>
注意：如果某个scirpt标签用于引入外部文件，则该script标签的标签体中不能再写js代码
三、基本语法
1.变量
变量是用来存储常量的量
常量就是固定值—常数项
js是一门弱类型的语言，声明变量时使用var关键字，不需要指定变量的类型
语法： var 变量名=常量或者表达式;
在ECMAscript 6规范当中新增let关键字，可以声明变量
使用let来声明的变量支持块级作用域，而使用var来声明的变量不支持块级作用域
注：在IDEA中配置ES版本：settings—>language&frameworks—> javascript language version
变量的命名规则：
1）由字母、数字、下划线、汉字组成
2）由字母、下划线开头
3）不能和系统关键字重名
4）区分大小写
2.输入和输出
输出：
- alert()弹出警告框
- console.log()输出到浏览器的控制台
- doucement.write()输出到页面
输入：
-
prompt()弹出一个输入框，获取用户输入的信息或者数据
使用typeof 变量 判断变量的类型
使用Number(变量)，将字符串转换为数值
3.转义字符
常用转义符：
- \n 换行
- \t 缩进
- " 双引号
- ’ 单引号
- \ \ 斜杠
4.注释
单行 //
多行 /* */
5.编码规范
代码是区分大小写
每个语句以分号结尾
代码注意缩进
四、核心语法
1.数据类型
常量：具体值，不变的量 —常数项
变量：变化的值，存储常量的值
基础数据类型：
- string字符串
- number数值（返回NaN表示非数字 not a number，其自身是number，表示数值的不正常状态）
- boolean布尔
- null空
- undefined 未定义类型
类型转换：
-
转换number
使用Number()、parseInt()、parsefloat()
-
转换为字符串
拼接一个空字符串
-
转换为Boolean
使用Boolean()
注意： 0、空字符串、null、undefined、NaN都会被转换为false,其它值会被转换为ture
2.运算符
算术运算符： + - * / % ** ++ –
关系运算符： > < >= <= == === !=
赋值运算符： = += -= *= /= %=
逻辑运算符： && || !
条件运算符: 条件？表达式1：表达式2
3.选择结构
if else switch
4.循环结构
while do while for
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...],
...
]
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中允许使用箭头 =>定义函数，称为箭头函数，也叫lambda表达式，是一种特殊的匿名函数
var c = (x,y) => {
var sum = x+y;
return sum;
};
五、符合类型
1.string
1.1定义方式
语法：
var str = 'welcome to JS!'; //基本数据类型
var str = new String('welcome'); //引用数据类型
使用length属性获取字符串的长度
1.2常用方法
| 方法名 | 说明 |
|---|---|
| charAt() | 返回在指定索引位置的字符，也可以使用[索引]的方式 |
| indexOf() | 返回某个指定的字符串在字符串当中首次出现的位置 |
| lastindexOf() | 返回某个指定的字符串在字符串当中最后出现的位置 |
| toLowerCase() | 将字符串转换为小写 |
| toUpperCase() | 将字符串转换为大写 |
| subString() | 提取字符串中两个指定索引号之间的字符串，左闭右开 |
| repalce() | 将指定的字符串替换成新字符串 |
| solit() | 把指定的字符串分割为字符串数组 |
| trim() | 去除字符串前后空格 |
2.Date
2.1定义方式
语法：
var date = new Date(); //定义一个日期对象，表示当前时间
var date = new Date(year,month,day,hour,minute,second);//参数为指定的年月日时分秒
var date = new Date(millsSecond)； //参数为当前时间与1970-1-1相差的毫秒数
2.2常用方法
| 方法名 | 说明 |
|---|---|
| getFullYear | 以四位数字返回年份 |
| getMonth() | 返回月份[0，11]，0表示1月 |
| getDate() | 返回一个月中的某一天(1-31) |
| getHours() | 返回小时[0,23] |
| getMinutes() | 返回分钟[0,59] |
| getSeconds() | 返回秒数[0，59] |
| getmilliseconds() | 返回毫秒[0,999] |
| getDay() | 返回一周中的某一天[0,6] 0表示周日 |
| getTime() | 返回从1970-1-1 0：0：0至今的毫秒数 |
setXxx方法与getXxx方法一样
3.JSON
3.1JSON简介
javascript object notation 是一种轻量级的数据交换格式，用于表示javascript对象的一种方式
采用与编程语言无关的文本格式，易与阅读和编写，同时也易于解析和生成
3.2基本用法
语法：{"属性名":"属性值","属性名":"属性值",...}
注意：
- json结构是由一系列的键值对所组成的，称为JSON对象
- 属性名必须用双引号括起来
使用：
- 简单的JSON对象
- 复合属性，属性的值为JSON对象
- JSON对象的集合
3.3JSON转换
-
JSON转换为字符串
var person = { "name":"xiaoleng", "age":20, "height":170 }; 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","status":1}, { "id":"9528","username":"tom","password":"111","status":1}]' var obj = JSON.parse(users);
4.对象类型
4.1对象简介
1.对象：客观存在的并且可以相互区别的事物
2.描述一个对象
属性：外观，长相
方法：行为模式
事件：单击，双击
3.对象有三个基本特征：封装、继承和多态
对象类型可以理解为java中的引用数据类型
JavaScript是面向对象的语言，但并不是人们常说的纯粹的面向对象的语言，因为他不支持某些特征
4.2创建对象
三种方式：
-
使用Object
//新创建的对象，没有属性，没有方法 var 对象名 = new Object(); //为对象添加属性 对象.属性名=属性值； //为对象添加方法 对象名.方法名=function{ 方法体； }; //调用属性和方法 对象名.属性名 或 对象名['属性名']; 对象名.方法名 -
使用构造方法，模拟类的定义，相当于自定义一个类型
function 构造函数名(形参1，形参2){ //为了区分普通函数，构造函数名建议首字母大写 this.属性名=形参1； this.属性名=形参2; this.方法名 = function(){ 方法体; }; }; -
使用JSON格式定义对象，一般只在JSON对象中定义属性
var JSON对象={ 属性名：属性值， //属性名可以不用加引号 };
六、DOM操作
1.简介
Document Object Model 文档对象型
浏览器加载html文档时，会将html文档解析为一个树形结构，称为DOM树
- HTML文档和DOM数是一一对应的关系
- 当DOM树被改变时，与之对应的HTML文档也会随之变化
- 当需要对html文档中的内容进行动态改变时，可以使用dom进行操作
- DOM提供一组用来操作html的API，即提供了一套属性、方法和事件
- 树上的每一个节点都是一个DOM对象，树的顶层称为Document对象，表示整个文档
2.查询操作
即获取DOM对象
| 方法和属性 | 含义 |
|---|---|
| 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 -
使用interText
用法：
DOM对象.interText即内容转换为纯文本
3.3访问css
即获取/设置CSS样式
两种方式：
-
使用style属性
用法：
DOM对象.style.样式属性 -
使用className属性
用法：
DOM对象.ClassName
4.添加操作
| 方法 | 含义 |
|---|---|
| document.createElement(“标签名”) | 创建一个元素节点，即标签 |
| document.createTextNode(“文本内容”) | 创建一个文本节点，即标签中的文本内容 |
| node.appendChild(newNode) | 将一个新的节点newNode添加到指定的节点node中子节点的末尾 |
| node.insertBefore(newNode,refNode) | 将一个新的节点newNode添加到node节点中子节点refNode之前 |
| node.replaceChild(newNode,refNode) | 将一个新的节点newNode添加到node节点中的子节点refNode |
5.删除操作
| 方法 | 含义 |
|---|---|
| node.remove() | 删除当前节点 |
| node.removeChild(refNode) | 删除当前节点中指定的节点 |
七、事件处理
1.简介
事件：发生在html元素上的事情，可以是用户的行为，也可以是浏览器的行为，如：
- 用户点击了某个html元素
- 用户将鼠标移动到某个html元素
- 用户输入数据时，光标离开
- 页面加载完成
事件源：事件触发的源头，即触发事件的元素，如：按钮、输入框、超链接
事件对象:当一个事件发生时，这个事件相关的一些信息将会保存在一个对象中，称为event对象
事件监听：监听事件的发生，绑定一个事件函数，当事件被触发后执行该事件的函数，即回调函数
2.绑定事件
两种方式：
-
静态绑定：通过标签的事件属性来绑定
-
动态绑定：通过JS代码绑定事件
<input type="button" value="按钮" id="btn"> <script> var btn=document.getElementById("btn"); btn.onclick=function(){ console.log("动态绑定"); }; </script>
3.常用事件
3.1鼠标事件
| 事件名 | 描述 |
|---|---|
| onclick | 单击 |
| ondblclick | 双击 |
| onmouseover | 鼠标移动到某个元素上 |
| onmouseout | 鼠标从某元素上移开 |
| onmousedown | 鼠标按钮被按下 |
| onmouseup | 鼠标按键被松开 |
| onmousemove | 鼠标被移动 |
3.2键盘事件
| 事件名 | 描述 |
|---|---|
| onkeydown | 某个键盘的键被按下 |
| onkeyup | 某个键盘的键被松开 |
| onkeypress | 某个键盘的键被按下去且松开 |
3.3表单事件
| 事件名 | 描述 |
|---|---|
| onfocus | 元素获得焦点 |
| onblur | 元素失去焦点 |
| onchange | 域的内容发生改变，一般用于文件选择器和下拉列表 |
| onselect | 文本内容被选中 |
| onsubmit | 表单提交前触发，回调函数返回true表示允许表单提交，false表示阻止表单提交 |
4.事件操作
4.1 事件冒泡
概念：当一个html元素产生事件时，该事件会从当前事件（事件源）开始，往上冒泡直到页面的根元素，所有经过的节点都会收到该事件并执行
特点：先触发子集元素的事件，再触发父级元素的事件
阻止事件的冒泡：event.stopPropagation()或event.cancelBubble=true;
4.2事件默认行为
概念：当一个事件发生时浏览器自己会默认做的事，如：点击链接会默认跳转，右键单击会默认弹出菜单
阻止事件的默认行为：event.preventDefault()
5.示例：下拉列表
5.1Select和Option对象
Select对象：表示html表单中的一个下拉列表
-
属性：
length：设置或者返回下拉列表中选项的数量
selectedindex：设置或者返回下拉列表被选中项的索引
options：返回下拉列表中所有的选项，值为option对象数组（当该数组改变时对应下拉列表的选项也会跟着改变）
value：返回下拉列表被选中的值
-
方法：
add():向下拉列表中添加一个选项
-
事件：
onchange：下拉列表的选项改变时触发
Option对象：表示html表单中下拉列表中的一个选项
-
属性：
text：设置或者返回页面中显示的文本值
value：设置或返回传递给服务器的值
-
构造函数：
Option(文本值,提交给服务器的值)：创建一个选项
5.2二级菜单联动
实现省市级联的效果
八、BOM操作
1.BOM简介
javascript由三部分组成：
- ECMAScript核心语法–js简称ECMAScript，ES
- DOM文档对象模型
- BOM浏览器对象模型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aVMxJWeP-1592552404011)(D:\学习\不删除的照片\BOM.avi.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) | 清除一次性计时器 |
| cleraInterval(timer) | 清除周期性计时器 |
常用事件：
| 事件名 | 描述 |
|---|---|
| onload | 页面加载完成 |
| onscroll | 窗口的滚动条滑动 |
| onclick | 单击 |
注意：由于window对象是BOM结构的顶层对象，所以在调用window的属性和方法时可以省略
3.location对象
常用属性：
- href 设置或返回地址栏中的url
常用方法：
- reload 重新加载当前页面
4.history对象
常用方法：
| 方法名 | 含义 |
|---|---|
| back() | 后退，加载history列表中的上一个url |
| forward() | 前进，加载history列表中的下一个url |
###代码
01
Title
第一个javascript程序
超链接
把鼠标移上来
02
Title
03
Title
04
Title
05
Title
06
Title
07
Title
08
Title
09
Title
10
Title
11
Title
12
Title
13
Title
14
Title
15
Title
16
Title
17
Title
18
Title
19
HTML DOM
word
爱好: 吃饭
睡觉
玩
word!
word3!
- tom
- jack
- alice
- mike
20
Title
dianwo
用户名：
性别： 男
女
hello world!
21
Title
22
Title
- tom
- jack
- mike
23
Title
爱好： 吃饭
睡觉
打豆豆
24
Title
全选
姓名
年龄
性别
电话
操作
tom
20
male
110
jack
22
male
119
alice
20
female
120
25
Title
26
Title
百度
27
Title
学历:
28
Title
省份:
城市:
29
Title
hello world
30
Title
31
Title
链接：https://pan.baidu.com/s/1wwqhfTKxTeW58YW5taPHBQ
提取码：r5h3