JS基础
JS基础
命名
关键字&保留字
-
关键字
void for switch try typeof delete return do default catch instanceof if var while break throw in else new case finally -
保留字
abstract boolean byte char class const debugger double enum export extends final float goto implements import int interface long native package private protected public short static super synchronized throws transient volatile
操作符
比较操作符
>、<、>=、<=、==、!=
逻辑运算符
&&、||、!
优先级
算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号
变量
数组
定义
var myArr=new Array(3);
var myArr=new Array(1,2,3);
var myArr=[1,2,3];
方法
| 方法 | 描述 | 方法 | 描述 |
|---|---|---|---|
| concat() | 连接两个以上的数组 | join(分隔符) | 以分隔符拼接数组所有对象为字符串 |
| pop() | 删除并返回数组的最后一个元素 | push() | 向数组末尾添加一个或多个元素，返回新的长度 |
| reverse() | 颠倒数组所有元素顺序 | shift() | 删除并返回数组的第一个元素 |
| slice(start,end) | 从数组返回选定的元素 | sort(排序函数---返回值为true/false) | 排序数组元素 |
| splice() | 删除元素，并添加新元素 | toSource() | 返回源代码 |
| toString() | 数组转换为字符串 | toLocateString() | 数组转换为本地数组 |
| unshift() | 向数组开头添加一个或多个元素，返回新的长度 | valueOf() | 数组对象原始值 |
二维数组的定义
// 方法一
var myarr=new Array(); //先声明一维
for(var i=0;i<2;i++){ //一维长度为2
myarr[i]=new Array(); //再声明二维
for(var j=0;j<3;j++){ //二维长度为3
myarr[i][j]=i+j; // 赋值，每个数组元素的值为i+j
}
}
//方法二
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]];
//方法三
//赋值
日期
定义
var udate=new Date();
var d = new Date(2012, 10, 1); //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日
方法
| 方法 | 描述 |
|---|---|
| get/setDate() | 返回/设置日期 |
| get/setFullYear() | 返回/设置年份，四位数 |
| get/setYear() | 返回/设置年份 |
| get/setMonth() | 返回/设置月份，索引数字(0-11) |
| get/setHours() | 返回/设置小时，24小时制 |
| get/setMinutes() | 返回/设置分钟数 |
| get/setSeconds() | 返回/设置秒钟数 |
| get/setTime() | 返回/设置时间(毫秒单位) |
| getDay() | 返回星期数,(0-6)=> ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"] |
字符串
下标可以为负，代表从字符串末尾开始算
- toLowerCase()/toUpperCase() 小写/大写
- charAt(下标) 获取某个位置的字符
- indexOf(子字符串, 开始下标) 获取从开始下标查找到的子字符串位置，否则返回 -1
- split(分隔字符, 分隔次数) 以分隔字符分隔，返回不超过分隔次数的数组
- substring(开始下标，结束下标) 获取开始下标和 (结束下标 - 1) 之间的字符串
- substr(开始下标，子字符串长度)
Math
特殊值
| 对象 | 描述 |
|---|---|
| E | 算数常量e，自然对数的底数(≈2.718) |
| LN2 | 2的自然对数(≈0.693) |
| LN10 | 2的自然对数(≈2.302) |
| LOG2E | 以2为底的e的对数(≈1.442) |
| LOG10E | 以10为底的e的对数(≈0.434) |
| PI | 圆周率(≈3.14159) |
| SQRT1_2 | 2的平方根的倒数(≈0.707) |
| SQRT2 | 2的平方根(≈2.414) |
常用方法
| 方法 | 描述 | 方法 | 描述 |
|---|---|---|---|
| abs(x) | 绝对值 | acos(x) | 反余弦值 |
| asin(x) | 反正弦值 | atan(x) | 反正切值 |
| atan2(y,x) | 由x轴到点(x,y)的角度(弧度单位) | ceil(x) | 向上取整 |
| cos(x) | 余弦值 | exp(x) | e的指数 |
| floor(x) | 向下取整 | log(x) | 底为e的x的自然底数 |
| max(x,y) | 最大值 | min(x,y) | 最小值 |
| pow(x,y) | x的y次幂 | random() | 0~1的随机数 |
| round(x) | 四舍五入 | sin(x) | |
| sqrt(x) | 平方根 | tan(x) | |
| toSource() | valueOf() | Math对象的原始值 |
事件函数
| 方法 | 属性 | 方法 | 属性 |
|---|---|---|---|
| alert() | 消息+确认按钮的警告框 | prompt() | 可输入的对话框 |
| confirm() | 消息+确认按钮+取消按钮的对话框 | open() | 打开新窗口/查找已打开的窗口 |
| close() | 关闭窗口 | print() | 打印当前窗口内容 |
| focus() | 将键盘焦点给予一个窗口 | blur() | 将键盘焦点从顶层窗口移开 |
| moveBy() | 相对窗口的当前坐标移动指定的距离 | moveTo() | 将窗口左上角移动到指定坐标 |
| resizeBy() | 按照指定像素调整窗口大小 | resizeTo() | 将窗口大小调整到指定宽高 |
| scrollBy() | 按照指定像素滚动内容 | scrollTo() | 滚动到指定坐标 |
| setInterval() | 每隔一段时间执行代码 | setTimeout() | 延迟一段时间后执行代码 |
| clearInterval() | 清除 setInsterval | clearTimeOut() | 清除 setTimeout |
-
setInterval()
setInterval(函数，时间(毫秒))
setInterval(函数名，时间)/setInterval("函数名()"，时间) -
setTimeout()
setTimeout(函数，时间(毫秒))
历史
window.history.XXX
- length 浏览器历史列表的URL数量
- back() 加载历史列表的前一个URL = go(-1)
- forward() 加载历史列表的下一个URL = go(1)
- go(数字) 前往历史列表的某一个URL，数字代表URL的相对位置序号
location
窗体URL并解析
示例说明：http:www.bd.com:88/list.html?couid=9&chid=1#meda189
- location.href
- http - location.protocol
- www.bd.com:88 - location.host = location.hostname + location.port
- list.html - location.pathname
- couid=9&chid=1 - location.search
- meda189 - location.hash
方法
- assign() 加载新的文档
- reload() 重新加载当前文档
- replace() 用新的文档替换当前文档
navigator
浏览器信息与操作系统
-
appCodeName 浏览器代码名的字符串
-
appName 浏览器名称
-
appVersion 浏览器平台和版本信息
-
platform 操作系统平台
-
userAgent 由客户机发往服务器的 user-agent 头信息
示例：
chrome - Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36
firefox - Mozilla/5.0 (Windows NT 10.0; WOW64; rv:24.0) Gecko/20100101 Firefox/24.0
IE 8 - Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/4.0; SLCC2; .NET CLR 2.5.3027; .NET CLR 2.8.4; .NET CLR 3.0.1; .NET4.0C)
screen
用户屏幕信息 window.screen.XXX
- availHeight - 窗口可以使用的屏幕高度（像素）
- availWidth - 窗口可以使用的屏幕宽度（像素）
- colorDepth - 用户浏览器表示的颜色位数，通常为32位（每像素的位数）
- pixelDepth - 用户浏览器表示的颜色位数，通常为32位（每像素的位数）（IE不支持）
- height - 屏幕高度（像素）
- width - 屏幕宽度（像素）
DOM
基础
DOM中包含元素节点(html body……)、内容节点(开始标签与结束标签之间的内容)、属性节点(a的href……)。
节点属性：
-
nodeName（给定节点的名字-字符串）
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 是属性的名称
- 文本节点的 nodeName 永远是 #text
- 文档节点的 nodeName 永远是 #document
-
nodeType（给定节点的类型-数值）
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9 -
nodeValue（给定节点的当前值）
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本自身
- 属性节点的 nodeValue 是属性的值
遍历节点树：childNodes（给定节点的子节点数组）、firstChild（第一个子节点）、lastChild（最后一个子节点）、parentNode（给定节点的父节点）、nextSibling（给定节点的下一个节点）、previousSibling（给定节点的上一个节点）
DOM操作：
- createElement(element) 创建新的元素节点
- createTextNode() 创建包含给定文本的新文本节点
- appendChild() 指定节点的子节点列表最后添加给定节点为新的子节点
- insertBefore() 给定节点插入到指定节点之前
- removeChild() 从给定节点中删除一个子节点
- replaceChild() 给定节点的一个子节点替换为另一个节点
常用方法
- getElementById("") 通过ID值获取一个节点
- getElementsByName("") 通过name值获取一组节点
- getElementsByTagName("") 通过标签name获取一组节点
- getAttribute(属性名) 获取节点的属性值
- setAttribute(属性名,属性值) 设置元素的属性值
浏览器相关属性
可视尺寸
浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:
• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度
在不同浏览器都实用的 JavaScript 方案：
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;
网页尺寸
-
scrollHeight和scrollWidth，获取网页内容高度和宽度。
scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。
浏览器兼容性
var w=document.documentElement.scrollWidth || document.body.scrollWidth; var h=document.documentElement.scrollHeight || document.body.scrollHeight;注意:区分大小写
scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。
-
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
offsetHeight = clientHeight + 滚动条 + 边框。
浏览器兼容性
var w= document.documentElement.offsetWidth || document.body.offsetWidth; var h= document.documentElement.offsetHeight || document.body.offsetHeight;
滚动尺寸
-
scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 。
-
scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 。
-
offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。
-
offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。
-
offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。
