数据类型(基本类型):
- 字符串(String)
- 数字(Number)
- 布尔(Boolean)
- 空(Null)
- 未定义(Undefined)
- Symbol。
引用数据类型(对象类型):
- 对象(Object)
var person={firstname:“John”, lastname:“Doe”, id:5566};
寻址方式: name=person.lastname; name=person[“lastname”];
访问对象方法 methodName : function() {// 代码 } - 数组(Array) [ var arr = new Array(); ]
- 函数(Function)
- 特殊的对象:正则(RegExp)和日期(Date)。
局部/全局变量:
向未声明的 JavaScript 变量分配值
如果您把值赋给尚未声明的变量,该变量将被自动作为 window 的一个属性。
非严格模式下给未声明变量赋值创建的全局变量,是全局对象的可配置属性,可以删除。
String
注意
- var a = “str”;
- var a = new String(“str”);
这两个是不同的,一个是字符串,一个是对象。
平常尽量直接用字符串,不用创建对象,会拖慢速度。而且"str" == new String(“str”)返回false。
属性
属性 | 描述 |
---|
constructor | 返回创建字符串属性的函数 |
length | 返回字符串的长度 |
prototype | 允许您向对象添加属性和方法 |
字符串方法
方法 | 描述 |
---|
charAt() | 返回指定索引位置的字符 |
charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
concat() | 连接两个或多个字符串,返回连接后的字符串 |
fromCharCode() | 将 Unicode 转换为字符串 |
indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
localeCompare() | 用本地特定的顺序来比较两个字符串 |
match() | 找到一个或多个正则表达式的匹配 |
replace() | 替换与正则表达式匹配的子串 |
search() | 检索与正则表达式相匹配的值 |
slice() | 提取字符串的片断,并在新的字符串中返回被提取的部分 |
split() | 把字符串分割为子字符串数组 |
substr() | 从起始索引号提取字符串中指定数目的字符 |
substring() | 提取字符串中两个指定的索引号之间的字符 |
toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射 |
toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射 |
toLowerCase() | 把字符串转换为小写 |
toString() | 返回字符串对象值 |
toUpperCase() | 把字符串转换为大写 |
trim() | 移除字符串首尾空白 |
valueOf() | 返回某个字符串对象的原始值 |
number
属性
属性 | 描述 |
---|
Number.MAX_VALUE | 最大值 |
Number.MIN_VALUE | 最小值 |
Number.NaN | 非数字 |
Number.NEGATIVE_INFINITY | 负无穷,在溢出时返回 |
Number.POSITIVE_INFINITY | 正无穷,在溢出时返回 |
Number.EPSILON | 表示 1 和比最接近 1 且大于 1 的最小 Number 之间的差别 |
Number.MIN_SAFE_INTEGER | 最小安全整数。 |
Number.MAX_SAFE_INTEGER | 最大安全整数。 |
方法
方法 | 描述 |
---|
toExponential() | 返回一个数字的指数形式的字符串,如:1.23e+2 |
num.toFixed(位数) | 返回指定小数位数的表示形式。a=123,b=a.toFixed(2),返回b=123.00 |
num.toPrecision(位数) | 返回一个指定精度的数字。如a=123,b=a.toPrecision(2),3会由于精度限制消失。 |
Data
方法
方法 | 描述 |
---|
getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
getFullYear() | 从 Date 对象以四位数字返回年份。 |
getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
getTimezoneOffset() | 返回本地时间与格林威治标准时间 (GMT) 的分钟差。 |
getUTCDate() | 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。 |
getUTCDay() | 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。 |
getUTCFullYear() | 根据世界时从 Date 对象返回四位数的年份。 |
getUTCHours() | 根据世界时返回 Date 对象的小时 (0 ~ 23)。 |
getUTCMilliseconds() | 根据世界时返回 Date 对象的毫秒(0 ~ 999)。 |
getUTCMinutes() | 根据世界时返回 Date 对象的分钟 (0 ~ 59)。 |
getUTCMonth() | 根据世界时从 Date 对象返回月份 (0 ~ 11)。 |
getUTCSeconds() | 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。 |
getYear() | 已废弃。 请使用 getFullYear() 方法代替。 |
parse() | 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。 |
setDate() | 设置 Date 对象中月的某一天 (1 ~ 31)。 |
setFullYear() | 设置 Date 对象中的年份(四位数字)。 |
setHours() | 设置 Date 对象中的小时 (0 ~ 23)。 |
setMilliseconds() | 设置 Date 对象中的毫秒 (0 ~ 999)。 |
setMinutes() | 设置 Date 对象中的分钟 (0 ~ 59)。 |
setMonth() | 设置 Date 对象中月份 (0 ~ 11)。 |
setSeconds() | 设置 Date 对象中的秒钟 (0 ~ 59)。 |
setTime() | setTime() 方法以毫秒设置 Date 对象。 |
setUTCDate() | 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。 |
setUTCFullYear() | 根据世界时设置 Date 对象中的年份(四位数字)。 |
setUTCHours() | 根据世界时设置 Date 对象中的小时 (0 ~ 23)。 |
setUTCMilliseconds() | 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。 |
setUTCMinutes() | 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。 |
setUTCMonth() | 根据世界时设置 Date 对象中的月份 (0 ~ 11)。 |
setUTCSeconds() | setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。 |
toDateString() | 把 Date 对象的日期部分转换为字符串。 |
toISOString() | 使用 ISO 标准返回字符串的日期格式。 |
toJSON() | 以 JSON 数据格式返回日期字符串。 |
toLocaleDateString() | 根据本地时间格式,把 Date 对象的日期部分转换为字符串。 |
toLocaleTimeString() | 根据本地时间格式,把 Date 对象的时间部分转换为字符串。 |
toLocaleString() | 根据本地时间格式,把 Date 对象转换为字符串。 |
toString() | 把 Date 对象转换为字符串。 |
toTimeString() | 把 Date 对象的时间部分转换为字符串。 |
toUTCString() | 根据世界时,把 Date 对象转换为字符串。 |
UTC() | 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。 |
valueOf() | 返回 Date 对象的原始值。 |
类型
var person = null; // 值为 null(空), 但类型为对象 [用于定义空对象]
var person = undefined; // 值为 undefined, 类型为 undefined [用于清空对象]
null === undefined // false
null == undefined // true
关于typeof:
只适用于值类型,如果对象类型是Array或Date,则都会返回"object"。
所以可以通过constructor进行判断。
function isArray(myArray)
return myArray.constructor.toString().indexOf("Array") > -1;
function isDate(myDate)
return myDate.constructor.toString().indexOf("Date") > -1;
类型转换:
转成字符串
String(x)
x.toString()
toExponential() //把对象的值转换为指数计数法。
toFixed() //把数字转换为字符串,结果的小数点后有指定位数的数字。
toPrecision() //把数字格式化为指定的长度。
js操作
事件
事件名称 | 详解 |
---|
onclick | 点击触发 |
onload & unload | 进入&离开页面触发 |
onchange | 离开该控件触发 |
onmouseover & onmouseout | 鼠标经过&离开该控件触发 |
onmousedown & onmouseup | 鼠标点下&抬起触发 |
onkeydown | 用户按下键盘按键 |
监听器
element.addEventListener(事件,触发后执行的函数,事件传递方式);
事件传递方式:冒泡(内部元素先被触发),捕获(外部元素先被触发)。
element.removeEventListener(事件,要移除的函数);
正则
方法
方法 | 用法 | 描述 |
---|
search | str.search(long_str) | 搜索,返回下标 |
replace | str.replace(long_str) | 替换,返回替换后的字符串 |
test | str.test(long_str) | 搜索,返回bool |
exec | str.exec(long_str) | 搜索,返回匹配的字符串 |
修饰符
修饰符 | 描述 |
---|
i | 大小写不敏感 |
g | 执行全局匹配(而非在找到第一个匹配后停止)。 |
m | 执行多行匹配。 |
正则表达式模式
表达式 | 描述 |
---|
[abc] | 查找方括号之间的任何字符。 |
[0-9] | 查找任何从 0 至 9 的数字。 |
(x|y) | 查找任何以 | 分隔的选项。 |
元字符 | 描述 |
---|
. | 查找单个字符,除了换行和行结束符 |
\w | 查找单词字符 |
\W | 查找非单词字符 |
\d | 查找数字 |
\D | 查找非数字字符 |
\s | 查找空白字符 |
\S | 查找非空白字符 |
\b | 匹配单词边界 |
\B | 匹配非单词边界 |
\0 | 查找 NUL字符 |
\n | 查找换行符 |
\f | 查找换页符 |
\r | 查找回车符 |
\v | 查找垂直制表符 |
\xxx | 查找以八进制数 xxxx 规定的字符 |
\xdd | 查找以十六进制数 dd 规定的字符 |
\uxxxx | 查找以十六进制 xxxx规定的 Unicode 字符 |
量词 | 描述 |
---|
n+ | 匹配任何包含至少一个 n 的字符串。 |
n* | 匹配任何包含零个或多个 n 的字符串。 |
n? | 匹配任何包含零个或一个 n 的字符串。 |
表单
定义表单
<form name="formName">
<input name="inputName">
<input type="submit" value="提交">
</form>
获得表单数据:
var x = document.forms["formName"]["inputName"].value;
约束验证 CSS 伪类选择器
选择器 | 描述 |
---|
:disabled | 选取属性为 “disabled” 属性的 input 元素 |
:invalid | 选取无效的 input 元素 |
:optional | 选择没有"optional"属性的 input 元素 |
:required | 选择有"required"属性的 input 元素 |
:valid | 选取有效值的 input 元素 |
input的方法
type:
属性 | 描述 |
---|
text | 单行文本输入框 |
password | 密码输入框 |
radio | 单选按钮(name相同代表是同一组单选) |
checkbox | 复选按钮(name相同代表是同一组复选) |
button | 普通按钮 |
reset | 重置按钮 |
image | 图像按钮(src中放置图片路径,当按钮被按下,会向服务器发送name) |
hidden | 隐藏域 |
file | 文件域(用于从本地上传文件并提交) |
value属性 | 描述 |
---|
按钮 | 按钮上的文本 |
text,password,hidden | 初始值 |
checkbox,radio,image | 向服务器传递值的key |
其他:
其他属性 | 用法 | 描述 |
---|
alt | alt=“str” | 图像无法显示时的替代文本 |
checked | checked=“checked” | 预先被选定的input元素 |
autocomplete | autocomplete=“off” | 基于之前填过的数据,显示出选项 |
autofocus | autofocus | 自动获得焦点 |
novalidate | | 在提交表单时不验证form或input域 |
约束验证
type:
- url
- tel
- search
- email
- color
- number
- range
- data
- month(年月控件)
- datatime(日期加时间)
属性 | 描述 |
---|
readonly | 只读 |
maxlength | 最大长度,只能用于type=“text"与"password” |
size | 最大长度,type="text"与"password"时单位是字符,其他类型单位是px |
disabled | 规定输入的元素不可用 |
max | 规定输入元素的最大值 |
min | 规定输入元素的最小值 |
pattern | 规定输入元素值的模式 |
required | 规定输入元素字段是必需的 |
type | 规定输入元素的类型 |
JSON
JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。
节点
方法 | 描述 |
---|
document.createElement(节点类型名称) | 创建节点 |
父节点.appendChild(子节点) | 添加节点 |
父节点.removeChild(子节点) | 删除节点 |
父节点.replaceChild(新节点,旧节点) | 删除节点 |
document.getElementById(id名称) | 查找节点 |
document.querySelectorAll(节点类型名称) | 搜索所有节点 |
工具
实际运用
创建节点
var new_node = document.createElement('a');
new_node.className = "class-nameh";
new_node.innerHTML = "其中的文本";
增加节点
在尾部增加节点:
parent_node.appendChild(child_node);
在最前面增加节点:
parent_node.insertBefore(child_node,parent_node.childNodes[0]);