一、函数
语法:
#普通函数
function 函数名(参数列表){
函数体
}
#匿名函数
函数变量 = function (参数列表){
函数体
}
局部变量:通过var关键字声明在函数里面的变量
二、字符串
1. 运算
- 加法:做字符串拼接操作(支持字符串和其他数据相加)
- 比较(>, <, >=, <=,==, ===, !=, !==)
2. 长度
- 字符串.length
3. 方法
- 创建对象
对象 = new String(字符串)
语法 | 功能 |
---|---|
对象.big() | 产生一个big标签,内容为字符串的值 |
字符串.charAt(下标) | 获取指定下标对应的字符; 相当于:字符串[下标] |
字符串.charCodeAt(下标) | 获取指定下标对应的字符的unicode编码 |
字符串.concat(数据1,数据2,...) | 将字符串和多个数据依次连接在在一起产生一个新的字符串(相当于+) |
字符串.repeat(数字) | 指定的字符串重复出现指定次数产生一个新的字符串(相当于*) |
字符串1.endsWith(字符串2) | 判断字符串1是否以字符串2结尾 |
字符串1.indexOf(字符串2) | 获取字符串2在字符串1中第一次出现的位置 |
字符串1.lastIndexOf(字符串2) | 获取字符串2在字符串1中最后一次出现的位置 |
字符串.match(正则表达式) | 相当于python中re模块的match; 匹配成功返回(js中正则写在两个//之间) |
字符串1.replace(正则表达式,字符串2) | 将字符串1中第一个满足正则表达式的子串替换成字符串2 |
字符串.slice(开始下标, 结束下标) | 从开始下标获取到结束下标前为止,步长是1 |
字符串1.split(字符串2) | 将字符串1按照字符串2进行切割,返回一个数组 |
三、数组
1. 基本操作
- 加法运算:两个数组相加实质是将数组转换成字符串然后拼接
- 比较运算:==、===判断相等是判断地址是否相等,相等于python中的is
- 数组长度:length属性
2. 增删改查
-
增:
数组.push(元素) —— 在指定的数组的最后添加一个元素 -
删:
①数组.pop() —— 删除最后一个元素
②数组.splice(下标,个数) —— 从指定下标开始删除指定个数的元素 -
查:
①数组[下标] —— 获取下标对应的元素(负数的下标没有意义)
②数组.slice(开始下标,结束下标) —— 返回一个新的数组(下标可为负数,[))
③for in循环
for(index in fruits){
console.log(fruits[index])
}
-
改:
数组[下标] = 新值 —— 修改指定下标对应的值
3. 相关方法
语法 | 功能 |
---|---|
数组.reverse() | 倒序 |
数组.sort() | 元素从小到大排序 |
数组.join(字符串) | 将指定字符串插入数组每个元素之间产生一个新字符串 |
四、对象
注:属性名加不加括号没有区别
1. 增删查改
-
增:
(属性不存在时)
对象.属性 = 值
对象['属性名'] = 值 - 删:
-
查:
对象.属性
对象['属性名'] -
改:
(属性存在时)
对象.属性 = 值
对象['属性名'] = 值
2. 构造方法
语法:
function 类名(参数列表){
对象属性
对象方法
}
说明:
对象属性: this.属性名 = 值
对象方法: this.方法名 = 匿名函数
类名: 首字母大写
3. 创建对象
对象 = new 构造方法()
五、Date
//创建当前时间对象
date1 = new Date()
//年
year = date1.getFullYear()
//月 - 从0开始的
month = date1.getMonth()
//日
day = date1.getDate()
//时
hours = date1.getHours()
//分
min = date1.getMinutes()
//秒
seconds = date1.getSeconds()
//星期
week = date1.getDay()
六、DOM操作
1. 文档对象模型:document object model
- document对象:指的是指向整个网页内容的一个对象
- 节点:Element类型对象,指向的是网页中的标签
2. 创建和添加节点
- 创建节点:
document.createElement(标签名) - 添加节点:
节点1.appendChild(节点2) —— 在节点1的最后添加子标签节点2
节点1.insertBefore(新的节点, 节点2) —— 在节点1中的节点2的前面添加一个新的节点
3. 删除节点
节点.remove() —— 删除指定的节点
节点1.removeChild(节点2) —— 删除节点1中的节点2
4. 获取节点
语法 | 功能 |
---|---|
document.getElementById('id') | 通过id返回节点对象 |
document.getElementsByClassName('class') | 通过class返回节点数组 |
document.getElementsByTagName(标签名) | 通过标签名获取节点 |
document.getElementsByName('name') | 通过name属性值获取节点 |
节点对象.children | 获取指定节点中所有子节点 |
节点对象.firstElementChild | 获取第一个子节点 |
节点对象.lastElementChild | 获取最后一个子节点 |
节点对象.parentElement | 获取父节点 |
5. 替换节点
节点1.replaceChild(新节点, 旧节点) —— 用新节点替换节点1中的旧节点
6. 拷贝/复制节点
节点.cloneNode()
7. 节点属性
-
增
(属性不存在时)
①. 节点.属性 = '新值'
②. 节点.setAttribute('属性名', '新值') -
删
节点.removeAttribute('属性名') -
查
①. 节点.属性
(注:inner相关属性有效
innerHTML —— 标签内容(包含双标签内容中的其他标签和文件)
innerText —— 标签中的文本内容)
②. 节点.getAttributse(属性名) -
改
(属性存在时)
①. 节点.属性 = '新值'
②. 节点.setAttribute('属性名', '新值')
七、BOM操作
1. 浏览器对象模型:browser object model
- js提供了一个全局的对象window, 指向的是浏览器
- js中声明的所有的全局变量其实都是添加给window的属性
2. 基本操作
- 打开新的窗口 —— open
(会返回被打开的窗口对应的对象)
语法 | 功能 |
---|---|
open() | 空白窗口 |
open(url) | 在新窗口打开指定网页 |
open(url,'','width=1,height=1') | 打开新的窗口并且设置窗口的宽度和高度 |
- 移动窗口 —— moveTo
语法:window窗口.moveTo(x,y) - 设置窗口的大小 —— resizeTo
语法:window窗口.resizeTo(w,h) - 获取浏览器宽高
inner是内容的宽度和高度(innerWidth,innerHeight)
outer浏览器的宽度和高度(outerWidth,outerHeight)
3. 弹框
语法 | 显示 | 返回值 |
---|---|---|
alert(提示信息) | 提示信息、确定按钮 | 无 |
confirm(提示信息) | 提示信息、确定和取消按钮 | 确定 ->true;取消 ->false |
prompt(提示信息,输入框中默认值) | 提示信息、输入框、确定和取消按钮 | 确定 ->输入框中的内容;取消 ->null |
八、定时器
1. 开启定时
语法 | 功能 |
---|---|
setInterval(函数,时间) | 每隔指定时间调用一次指定函数;返回是定时器对象 |
setTimeout(函数,时间) | 隔指定时间后调用一次指定函数(函数只会调用一次,相当于定时炸弹) |
注:函数 —— 可以是函数名,也可以是匿名函数
时间 —— 单位是毫秒
2. 停止定时
语法 | 功能 |
---|---|
clearInterval(定时器对象) | 停止指定定时器 |
clearTimeout(定时器对象) | 停止指定定时器 |
九、事件绑定
1. 事件三要素:事件源、事件、事件驱动程序
2. 节点绑定事件
- 语法:节点.addEventListener(事件名, 事件驱动程序)
- 事件名:去掉事件名前面的on
- this是事件源, evt是事件对象
3. 事件冒泡和事件
事件.stopPropagation()
网友评论