文章目录
数据类型
原始数据类型(基本数据类型):
- number:数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
- string:字符串。 字符串 “abc” “a” ‘abc’
- boolean: true和false
- null:一个对象为空的占位符
- undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined
基本对象
- Function:函数(方法)对象
function 方法名称(形式参数列表){
方法体
}
var 方法名 = function(形式参数列表){
方法体
}
特点:
1. 方法定义是,形参的类型不用写,返回值类型也不写。
2. 方法是一个对象,如果定义名称相同的方法,会覆盖
3. 在JS中,方法的调用只与方法的名称有关,和参数列表无关
4. 在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数
- Array:数组对象
- 创建:
1. var arr = new Array(元素列表);
2. var arr = new Array(默认长度);
3. var arr = [元素列表]; - 方法
join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
splice(起始位置,删除个数) 数组的删除操作
forEach() 数组的循环遍历
map() 映射
reduce() 汇总
- 创建:
- Boolean
- Date:日期对象
1. 创建:var date = new Date();
2. 方法:
toLocaleString():
返回当前date对象对应的时间本地字符串格式
getTime():
获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差 - Math:数学对象
1. 创建:Math对象不用创建,直接使用。 Math.方法名();
2. 方法:
random():
返回 0 ~ 1 之间的随机数。 含0不含1
ceil(x):
对数进行上舍入。
floor(x):
对数进行下舍入。
round(x):
把数四舍五入为最接近的整数。
3. 属性:PI
圆周率 - Number
- String
- RegExp:正则表达式对象
- 正则表达式:定义字符串的组成规则。
- 单个字符:[] => 如: [a] [ab] [a-zA-Z0-9_]
特殊符号代表特殊含义的单个字符:
\d:单个数字字符 [0-9]
\w:单个单词字符[a-zA-Z0-9_] - 量词符号:
?:表示出现0次或1次
*:表示出现0次或多次
+:出现1次或多次
{m,n}:表示 m<= 数量 <= n
* m如果缺省: {,n}:最多n次
* n如果缺省:{m,} 最少m次 - 开始结束符号
* ^:开始
* $:结束
- 单个字符:[] => 如: [a] [ab] [a-zA-Z0-9_]
- 正则对象:
1. 创建:var reg = new RegExp("正则表达式");
||||var reg = /正则表达式/;
2. 方法test(参数):
验证指定的字符串是否符合正则定义的规范
- 正则表达式:定义字符串的组成规则。
- Global
1. 特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。 方法名();
2. 方法:
encodeURI():
url编码
decodeURI():
url解码
encodeURIComponent():
url编码,编码的字符更多
decodeURIComponent():
url解码
parseInt():
将字符串转为数字
* 逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number
isNaN():判断一个值是否是NaN
* NaN六亲不认,连自己都不认。NaN参与的==比较全部问false
eval(): JavaScript 字符串,并把它作为脚本代码来执行。
3. URL编码 :xxxx= %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
BOM:
Browser Object Model 浏览器对象模型,将浏览器各个组成部分封装成对象
Window窗口对象,不需要创建可直接使用,window.使用,也可以省略
1.与弹出窗口有关的方法
alert():警告框
confirm():带有确认和取消按钮的对话框(防止误操作)
点确定返回true,点取消返回false
prompt():显示可提示用户输入的对话框 返回用户输入的值
2.与打开、关闭有关的方法
open(地址):打开一个新的浏览器窗口,可以传入地址参数,没有则打开空白页,返回值为新窗口的window对象
close():关闭对象的浏览器窗口
3.与定时器有关的方法
setTimeOut(js代码或者方法对象,毫秒值) 在指定的毫秒后调用函数或者计算表达式,返回定时器对象
clearTimeOut(定时器对象) 取消由 setTimeOut设置的timeout
setInterval(js代码或者方法对象,毫秒值) 按照指定的周期(以毫秒记)来调用函数或者计算表达式,返回定时器对象
clearInterval(定时器对象) 取消由 setInterval设置的timeout
4.属性:
1.获取其他BOM对象
history
Navigator
Location
Screen
2.获取DOM对象
Document
Navigator浏览器对象
Screen显示器屏幕对象
History历史记录对象:当前窗口所访问的历史记录
属性:length 当前窗口历史列表中的url数量
方法:
back() 加载列表中前一个url
forward() 加载列表中下一个url
go(参数) 加载列表中的一个url,正数表前进,负数表后退
Location地址栏对象
方法:reload() 刷新
属性:href() 设置或者返回完整的URL,可实现页面跳转的功能
3. 属性:
1. 获取其他BOM对象:
history
location
Navigator
Screen:
2. 获取DOM对象
document
4. 特点
Window对象不需要创建可以直接使用 window使用。 window.方法名();
window引用可以省略。 方法名();
5. History:历史记录对象
1. 创建(获取):
1. window.history
2. history
2. 方法:
back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go(参数) 加载 history 列表中的某个具体页面。
参数:
正数:前进几个历史记录
负数:后退几个历史记录
3. 属性:
length 返回当前窗口历史列表中的 URL 数量。
DOM:
Document Object Model 文档对象模型,将标记语言文档的各个组成部分封装为对象,可以使用这些对象对文档进行CRUD动态操作
W3C DOM被分为3个不同的部分:
1. 核心 DOM-针对任何结构化文档的标准模型
Document文档对象
创建:在HTML DOM中用window对象获取,也可直接获取
方法
- 获取Element对象:
getElementById():
获取某一id的元素对象(id一般唯一)getElementsByTagName():
根据元素名称来获取元素对象们,返回值是一个数组getElementsByClassName():
根据class名称来获取元素对象们,返回值是一个数组getElementsByName():
根据Name属性名称来获取元素对象们,返回值是一个数组
- 创建其他DOM对象
createAttribute(name):
createComment()
createElement()
创建一个table标签createTextNode()
Element元素对象:通过document来获取和创建
方法
removeAttribute():
删除属性setAttribute():
设置属性
Attribute属性对象
Text文本对象
Comment注释对象
Node节点对象
其他5个的父对象 所有DOM对象都可以被认为是一个节点
方法
appendChild():
向节点的子节点列表的结尾添加新的子节点removeChild():
删除(并返回)当前节点的指定子节点replaceChild():
用新节点替换一个子节点
属性parentNode
返回节点的父节点
2. XML DOM-针对xml文档的标准模型
3. HTML DOM-针对HTML文档的标准模型
- innerHTML 获取与设置标签中的内容,可用+= =…
- 使用html元素对象的属性
- 控制元素的样式
- 使用元素的style属性
- 提前定义一个类的样式,通过元素的classname属性来设置其class属性
事件监听机制:
- 概念:某些组件被执行了某些操作后,触发某些代码的执行。
- 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
- 事件源:组件。如: 按钮 文本输入框…
- 监听器:代码。
- 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。
- 常见的事件:
-
点击事件:
- onclick:单击事件
- ondblclick:双击事件
-
焦点事件
- onblur:失去焦点
- onfocus:元素获得焦点。
-
加载事件:
- onload:一张页面或一幅图像完成加载。
-
鼠标事件:
- onmousedown 鼠标按钮被按下。
- onmouseup 鼠标按键被松开。
- onmousemove 鼠标被移动。
- onmouseover 鼠标移到某元素之上。
- onmouseout 鼠标从某元素移开。
-
键盘事件:
- onkeydown 某个键盘按键被按下。
- onkeyup 某个键盘按键被松开。
- onkeypress 某个键盘按键被按下并松开。
-
选择和改变
- onchange 域的内容被改变。
- onselect 文本被选中。
-
表单事件:
- onsubmit 确认按钮被点击。
- onreset 重置按钮被点击。
-