JS学习要点记录
文章目录
- 一、JavaScript语法
- 二、数据类型
- 2.1 基本数据类型
- 1. undefined
- 2. null
- 3. Number
- 4.String
- 5.boolean
- 2.2 复杂数据类型
- 三、运算符
- 3.1 算数运算符
- 3.2 赋值操作符
- 3.3 比较操作符
- 3.4 三元操作符
- 3.5 逻辑操作符
- 四、控制流语句
- 4.1 if
- 4.2 switch
- 4.3 for
- 4.4 while 和do...while
- 4.5 break 和continue
- 五、函数
- 六、内置对象
- 6.1 Array数组
- 6.2 String字符串
- 6.3 Math对象
- 6.4 Date对象
- 七、DOM基础以及事件
- 7.1 定义
- 7.2 获取DOM元素的方法
- 7.3 设置样式
- 7.4 DOM事件
- 7.5 事件绑定
- 7.6 事件处理
- 八、BOM
- 8.1 定义
- 8.2 对象
- 九 、参考语法
一、JavaScript语法
由ECMAScript、DOM、BOM三部分组成
所有的变量、函数、属性都区分大小写
命名规则：
- 由字母、数字、下划线或者美元符号组成
- 不能以数字开头
- 不能使用关键字和保留字
二、数据类型
用typeof()来判断数据类型，但是返回值的类型是String类型
2.1 基本数据类型
1. undefined
声明了没有赋值时
undefined == null 返回结果为true
2. null
表示一个空对象指针，如果声明的变量已知类型最好初始化为null
3. Number
整数和浮点数
- NaN：Not a Number, 表示非数值，也是一种特殊的数值。任何涉及NaN上午操作都会返回NaN；NaN与任何值都不等，包括他本身
- isNaN()：检测是否是“非数值”，返回结果为boolean值。当接受到检测值时，会先尝试转为数值，在检测是否为非数值
var a = 18 var b = "7" var c = "haha" isNaN(a);//false isNaN(b);//false isNaN(c);//true - 转换为数值类型
提取以数字开头的字符串中的数字
| Number() | （强制转换）把一个值强制转换为数值类型 | 可以用于任何数据类型，常转换为NaN |
|---|---|---|
| parseInt()，两个参数，可省略参数“转换进制” | 转换为整数 | 专门用于将字符串转换为数值类型 |
| parseFloat()，两个参数，可省略参数“转换进制” | 转换为浮点数 | 专门用于将字符串转换为数值类型 |
4.String
单引号或者双引号
| 方法 | 功能 | 参数 | 返回值 | 说明 |
|---|---|---|---|---|
| toString() | 将str转换为字符串 | 转换对象 | 字符串 | |
| String() | （强制转换）将str转换为字符串 | 转换对象 | 字符串 | 所有类型都可以转 |
5.boolean
2.2 复杂数据类型
三、运算符
3.1 算数运算符
在算术运算中，除了加法，其余的在运算中都会将字符串先转换为数字再进行运算，但是两个数据相加，如果有一方是字符串那么加号的作用就是将他们进行拼接。
3.2 赋值操作符
简单赋值：=
复合赋值：+=、-=、*=、/=、%=（求余数）
3.3 比较操作符
（比较值是否相等）== 、（比较值和类型是否相等）=== 、！= 、！==
返回值都是boolean值
3.4 三元操作符
条件？执行代码1：执行代码2
3.5 逻辑操作符
&&
1.返回值不一定是boolean值
若第一个操作数隐式类型转换后为true，则返回第二个操作数
若第一个操作数隐式类型转换后为false，则返回第一个操作数
2.有一个操作数是null，则返回null；有一个操作数是NaN，则返回NaN；有一个操作数是undefined，则返回undefined。
console.log(76&&5&&"qw");//都为true，所以返回qw
console.log(" "&&5&&"qw");
||
1.返回值不一定是boolean值
若第一个操作数隐式类型转换后为true，则返回第一个操作数
若第一个操作数隐式类型转换后为false，则返回第二个操作数
2.所有操作数都是null，则返回null；所有操作数都是NaN，则返回NaN；所有操作数都是undefined，则返回undefined。
！
1.返回值一定是boolean值
四、控制流语句
养成画流程图的习惯
4.1 if
if(condition){
}else if{
}else{
}
.....
4.2 switch
switch(expression){
case value:
statement
break;
case value:
statement
break;
...
default:
statement
}
4.3 for
for(...;...;...){
}
4.4 while 和do…while
4.5 break 和continue
break：退出循环
continue：退出本次循环，继续下一次循环
五、函数
ECMAScript中的参数在内部用一个数组来表示，在函数体内通过arguments对象来访问这个数组参数
注：
1、arguments对象只是与数组类似，并不是Array的实例
2、[]语法访问它的每一个元素，从0开始
3、length属性确定传递参数的个数
六、内置对象
6.1 Array数组
每一项的类型可以不同，长度可以自由变化
- 构造函数
var colors = new Array();
var colors2 = new Array(1,2,3,4);
var colors3 = [1,“haha”,3,4];//字面量表示法
- 相关方法
| array.length | 获取array的长度 | 返回值：number | 可用于截断数组，它的值的索引加1var arr=[1,2]; arr[99]=4//arr.length会变为100 |
|---|---|---|---|
| aray.push() | 把它的参数顺序添加进数组array尾部 | 返回值：添加后的数组长度 | |
| aray.unshift() | 把它的参数顺序添加进数组array头部 | 返回值：添加后的数组长度 | |
| aray.pop() | 删除数组array的最后一个元素 | 返回值：被删除的元素 | |
| aray.shift() | 删除数组array的第一个元素 | 返回值：被删除的元素 | |
| aray.join() | 把数组中的所有元素放入字符串 | 返回值：字符串 | 如果不填参数，默认用逗号隔开，可以写为join("")；//无间隔 join("-");//用-隔开 |
| aray.reverse() | 翻转数组 | 返回值：数组 | |
| aray.sort() | 排序数组 | 返回值：数组 | 1.即使数组中的每一项都是数值，sort()方法比较的也是字符串；2.sort()方法可以接收一个比较函数作为参数，不用参数默认为按照字符编码排序，升序降序看后面代码 |
| aray.concat() | 用于连接两个或多个数组 | 返回值：数组 | |
| aray.slice(start,end) | 从已有的数组中返回选定的元素 | 返回值：数组 | start是必需的，表示从何处索引开始选，若为负数，则从数组尾部开始计算；end是可选的，截取到的索引为end-1 |
| aray.splice() | 数组的删除、替换和插入 | 返回值：操作出来的数组，count为0时返回空数组 | 删除：array.splice(index,count);//从index索引开始删除count个元素，count为0不删除。插入：array.splice(index,0,插入的项);//要把count设为0，不然就成了删除。替换：array.splice(index,count,替换的项);//相当于先从index开始删除count个元素，然后在index后添加元素 |
| aray.indexOf(searchvalue , startIndex) | 从数组的开头开始向后查找，只找第一个出现的位置 | 返回值：number，查找项所在的索引，找不到返回-1 | searchvalue为查找的项，必需；startIndex为起点位置的索引，可选。IE9以下的版本不兼容 |
| aray.lastIndexOf(searchvalue , startIndex) | 从数组的开头开始向后查找，只找第一个出现的位置 | 返回值：number，查找项所在的索引，找不到返回-1 | searchvalue为查找的项，必需；startIndex为起点位置的索引，可选。IE9以下的版本不兼容 |
array.sort(function(a,b){return a-b;})//升序
a==b时，返回值为0，两者不交换位置
a>b时，返回值为1，两者交换位置
a6.2 String字符串
- 任意放在双引号或者单引号里的内容均为字符串
- 相关方法
| str.charAt(index) | 返回str中index位置的字符 | 返回值为string，取不到为空字符串 |
|---|---|---|
| str.charCodeAt(index) | 返回str中index位置的字符编码 | 返回值为string，取不到为空字符串 |
| str[index] | 返回str中index位置的字符 | 返回值为string |
| str.indexOf(“of”) | 从左侧开始在str中搜索给定的子字符串of，返回位置 | 返回值为number，没找到返回-1 |
| str.lastIndexOf(“of”) | 从右侧开始在str中搜索给定的子字符串of，返回位置 | 返回值为number，没找到返回-1 |
| str.lastIndexOf(“of”) | 从右侧开始在str中搜索给定的子字符串of，返回位置 | 返回值为number，没找到返回-1 |
| str.slice(start,end) | 截取字符串 | 返回值：字符串 |
| str.substring(start,end) | 截取字符串 | 返回值：字符串 |
| str.substr(start,len) | 截取字符串 | 返回值：字符串 |
| str.split(分隔符) | 把一个字符串分割成字符串数组，放到数组里的是字符串 | 返回值：Array |
| str.replace(substr,replacement) | 字符串替换 | 返回值：String |
| str.toUpperCase() | 把字符串转为大写 | 返回值：String |
| str.toLowerCase() | 把字符串转为小写 | 返回值：String |
6.3 Math对象
- 数学对象
- 相关方法
| Math.max(x,y,z…) | 在x,y,z…中求最大值 | 返回值：number | 只要x,y,z…中有一个非数字，返回值就为NaN |
|---|---|---|---|
| Math.min(x,y,z…) | 在x,y,z…中求最小值 | 返回值：number | 只要x,y,z…中有一个非数字，返回值就为NaN |
| Math.ceil(num) | 对num向上取整 | 返回值：number | num为1，则返回值为2 |
| Math.floor(num) | 返回num的整数部分 | 返回值：number | |
| Math.round(num) | 四舍五入 | 返回值：number | |
| Math.abs(num) | 绝对值 | 返回值：number | |
| Math.random() | 返回0-1之间的随机数，包括0 | 返回值：number | 求n到m之间的随机整数：Math.floor(Math.random()*(m-n+1)+n); |
6.4 Date对象
- 创建日期和时间
构造函数：new Date();//不传参时，返回当前的日期对象
如果想根据特定的日期和时间创建对象，必须传如表示该日期的毫秒数或者是一组逗号隔开的表示年月日时分秒的参数，年月日必须有 - 相关方法
获取
| date.getFullYear() | 返回4位数年份 |
|---|---|
| date.getMonth() | 返回月份，0-11 |
| date.getDate() | 返回月份中的天数 |
| date.getDay() | 返回星期，0-6 |
| date.getHours() | 返回小时，0-24 |
| date.getMinutes() | 返回分钟 |
| date.getSeconds() | 返回秒 |
| date.getTime() | 返回毫秒，从1970-1-1 00:00:00 到现在的毫秒数 |
设置
| date.setFullYear() | 设置4位数年份 |
|---|---|
| date.setMonth() | 设置月份，0-11 |
| date.setDate() | 设置月份中的天数 |
| date.setDay() | 设置星期，0-6 |
| date.setHours() | 设置小时，0-24 |
| date.setMinutes() | 设置分钟 |
| date.setSeconds() | 设置秒 |
| date.setTime() | 设置毫秒，会改变整个日期 |
七、DOM基础以及事件
7.1 定义
DOM（Document Object Model）文档对象模型是HTML、XML文档的编程接口，提供对文档的结构化表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构、样式和内容。
7.2 获取DOM元素的方法
| 方法 | 语法 | 说明 |
|---|---|---|
| 通过ID | getElementById(“x”) | 获取id为x的元素 |
| 通过标签 | getElementsByTagName(“li”) | 获取 |
| 通过name | getElementsByName(“x”) | 获取name属性值为x的所有元素，返回值为数组对象 |
| 通过CSS类 | getElementsByClassName(“x”) | 获取class为x的所有元素，返回值为数组对象 |
7.3 设置样式
| 方法 | 语法 | 说明 |
|---|---|---|
| 设置元素的CSS样式 | ele.style.styleName = value | 设置ele元素的styleName样式值为value。带-的CSS样式名，要写为驼峰形式，例如：background-color要写成backgroundColor |
| 获取/设置ele元素开始和结束标签之间的HTML | 获取：ele.innerHTML；设置：ele.innerHTML=“XXXXX” | 赋值为设置，不赋值为获取。只能对DOM对象使用 |
| 获取/设置ele元素的class属性 | 获取：ele.className；设置：ele.className=“XXXXX” | 赋值为设置，不赋值为获取。只能对DOM对象使用 |
| 获取ele元素的att属性 | ele.getAttribute(“att”) | 只能对DOM对象使用 |
| 设置ele元素的att属性 | ele.setAttribute(“att”,value) | 只能对DOM对象使用 |
| 删除ele元素的att属性 | ele.removeAttribute(“att”) | 只能对DOM对象使用 |
7.4 DOM事件
- 鼠标事件
- 键盘事件
- …
具体事件以及定义参见博客：https://blog.csdn.net/zhumengzj/article/details/79524730
7.5 事件绑定
- HTML事件
语法：
功能：在HTML元素上绑定事件
说明：执行脚本是一个函数的调用
缺点：多元素绑定相同事件时，效率低 - DOM0级事件
注：
7.6 事件处理
- event.stopPropagation()
阻止事件冒泡，默认事件依然会执行 - event.preventDefault()
阻止默认事件执行，但依然会冒泡 - return false
阻止事件冒泡也阻止默认事件
八、BOM
8.1 定义
BOM（browser object model）浏览器对象模型。
8.2 对象
- window
浏览器的一个实例，双重角色，及时通过JS访问浏览器窗口的一个接口，也是ES规定的Global对象。
window.userrname = "marry";//声明了一个全局变量username
window.funname = function(){};//声明了全局方法
相关方法：常省略window
| window.prompt（“text,defaultText”） | 弹出输入框,defaultText"为默认输入文本，text为要在对话框中显示的纯文本 | 返回值：1、点击确定，返回输入内容；2、点击取消，返回null |
|---|---|---|
| window.alert（） | 弹出提示框 | |
| window.confirm（“message”） | 弹出带message的有OK和取消按钮的确认框 | OK返回true，取消返回false |
| window.open(pageURL,name,parameters) | 打开一个新的浏览器窗口或查找一个已命名的窗口 | pageURL：子窗口路径。name：子窗口句柄。parameters ：窗口参数(各参数用逗号分隔) |
| window.close( ) | 关闭浏览器窗口 | |
| window.setTimeout（code,millisec） | 在指定的毫秒数后调用函数或计算表达式 | code：要调用的函数或要执行的JavaScript代码串，millisec：在执行代码前需等待的毫秒数。 |
| window.clearTimeout（id_of_settimeout） | 取消由setTimeout（）方法设置的timeout | id_of_settimeout ：由setTimeout（）返回的ID值，该值标识要取消的延迟执行代码块 |
| window.setInterval(code,millisec) | 每隔指定的时间执行一次代码 | 1、code：要调用的函数或要执行的代码串。2、millisec：周期性执行或调用code之间的时间间隔，以毫秒计 |
| window.clearInterval（id_of_settInterval） | 取消由setInterval（）方法设置的timeout | id_of_setInterval ：由setInterval（）返回的ID值，该值标识要取消的延迟执行代码块 |
- location对象
location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能，它既是window对象的属性，也是document对象的属性。
相关属性：
| location.href | 返回当前加载页面的完整URL | location.href与window.location等价，不设值为查询，设值为设置 |
|---|---|---|
| location.hash | 返回URL中的hash（#号后跟零或多个字符），如果不包含则返回空字符串 | 不设值为查询，设值为设置 |
| location.host | 返回服务器名称和端口号（如果有） | 不设值为查询，设值为设置 |
| location.hostname | 返回不带端口号的服务器名称，如果不包含则返回空字符串 | 不设值为查询，设值为设置 |
| location.pathname | 返回URL中的目录和（或）文件名。 | 不设值为查询，设值为设置 |
| location.port | 返回URL中指定的端口号，如果没有，返回空字符串。 | 不设值为查询，设值为设置 |
| location.protocol | 返回页面使用的协议。 | 不设值为查询，设值为设置 |
| location.search | 返回URL的查询字符串。这个字符串以问号开头。 | 不设值为查询，设值为设置 |
相关方法：
| location.replace(url) | 重新定向URL | 不会在历史记录中生成新纪录，即不能使用后退按钮 |
|---|---|---|
| location.reload() | 重新加载当前显示的页面。 | location.reload()有可能从缓存中加载，location.reload(true)从服务器重新加载 |
- history对象
相关方法：
| history.back() | 回到历史记录的上一步 | 相当于使用了history.go(-1) |
|---|---|---|
| history.forward() | 回到历史记录的下一步 | 相当于使用了history.go(1) |
| history.go(-n) | 回到历史记录的前n步 | |
| history.go(n) | 回到历史记录的后n步 |
- Screen对象
相关属性：
| screen.availWidth | 返回可用的屏幕宽度 | 除Window任务栏之外的内容 |
|---|---|---|
| screen.availHeight | 返回可用的屏幕高度 | 除Window任务栏之外的内容 |
| screen.width | 返回显示器屏幕宽度 | |
| screen.height | 返回显示器屏幕高度 | |
| window.innerWidth | 返回窗口的宽度 | |
| window.innerHeight | 返回窗口的高度 |
- navigator对象
相关属性：
| navigator.userAgent | 返回可用的屏幕宽度 | 除Window任务栏之外的内容 |
|---|
九 、参考语法
| prompt（） | 弹出输入框 | 返回值：1、点击确定，返回输入内容；2、点击取消，返回null |
|---|---|---|
| alert（） | 弹出提示框 | |
| window.confirm（“message”） | 弹出带message的有OK和取消按钮的提示框 | OK返回true，取消返回false |
| console.log（） | 在控制台中输出语句内容 | |
| document.write（） | 在页面中显示运行的内容 | |
| new Date（）.getDay（） | 获取星期 | 返回值：number(0-6) |