JavaScript
1. 变量
-
在函数中声明
function fun() {
var a, b, c = 1;
}
function fun() {
var a = b = c = 20;
}
function fun() {
a = 1, b = 1;
}
-
在函数外声明
var a = 1;
-
结构赋值
var [a,b,c] = [1,2,3];
2. 数据类型
2.1 基本类型
基本类型 | 说明 |
---|
Number | 数字类型 |
String | 字符串类型 |
Boolean | true与false |
Null | 空对象赋值,主要是和undefined进行区分 |
Undefined | 变量声明不赋值的情况下,默认值是undefined |
2.2 引用类型
- 引用数据类型:Object
- 在JS中除了基本数据类型以外的都是对象,数据是对象,函数是对象,正则表达式是对象
2.3 类型转换
- 强制类型转换
函数 | 作用 |
---|
Number() | 强制转为Number类型 |
Boolean() | 强制转为Boolean类型 |
2.4 判断数据类型
3. 特殊的关系运算符
【注意】:null == undefined //返回true
4. 数组声明
- var arr = new Array(); //声明一个空数组对象
- var arr = new Array(length) //声明一个指定长度的数组
- var arr = [元素] //声明数组(最常用);
【注意】:js中的数组声明不用指定长度,js的数组长度是不固定的,会随着元素的数量改变而改变。
5. 对象声明
- var 对象名 = new Object();
var obj1 = new Object();
obj1.attr = "obj1";
obj1.fun = function () {
console.log("obj1");
}
- var 对象名 = {};
var obj2 = {
attr: "obj2",
fun: function () {
console.log("obj2");
}
}
- function 类名() {this.属性名=属性值; … }
function Obj3() {
this.attr = "obj3";
this.fun = function () {
console.log("obj3");
}
}
- Object.create()
var obj4 = Object.create({
attr: "obj4",
fun: function () {
console.log("obj4");
}
});
6. 内置对象
6.1 String
函数 | 作用 |
---|
concat() | 连接 |
indeoxOf(str[,start]) | 查找或指定位置开始查询 |
lastIndexOf(str[,start]) | 从最后开始查找或指定位置开始查询 |
charAt(index) | 返回此索引的值 |
replace(str,newStr) | 替换 |
trim() | 清除左右两边的空格 |
split© | 切割 |
toLowerCase() | 转为小写 |
toUpperCase() | 转为大写 |
substring([start][,end]) | 截取start~end |
slice(start[,end]) | 截取,end可为负值(代表从后面开始) |
substr(start[,length]) | 截取,可指定长度 |
6.2 Array
函数 | 作用 |
---|
join(str) | 将数组中的每一个元素都和str连接,最后将所有元素进行组合,变成字符串。 |
pop() | 将数组中最后一个元素删除并且返回 |
push(str) | 向数组末尾添加一个或多个元素,并且返回新长度 |
shift() | 删除并返回数组中的首个元素 |
unshift([items]) | 向数组开头添加一个或多个items元素 |
slice(start[,end]) | 获取start到end的元素 |
splice(start[,end][,items]) | 删除start到end的元素,且添加一个或多个items元素 |
sort() | 正序排序 |
reverse() | 将数组倒序排序 |
6.3 Math
函数 | 作用 |
---|
ceil(num) | 向上取整 |
floor(num) | 向下取整 |
min(num) | 获取最小值 |
max(num) | 获取最大值 |
pow(num,a) | num的a次方 |
random() | 0-1的随机数 |
round(num) | 四舍五入 |
sqrt(num) | 开平方 |
6.4 Date
函数 | 作用 |
---|
getFullYear() | 获取年 |
getMonth() | 获取月(0-11) |
getDate() | 获取日(1-31) |
getDay() | 获取星期几(0-6) |
getTime() | 获取当前时间(1970.1.1开始) |
getHours() | 获取小时(0-23) |
getMinutes() | 获取分钟(0-59) |
getSeconds() | 获取秒数(0-59) |
6.5 Global
函数 | 作用 |
---|
eval() | 将字符串转为可以执行js代码 |
isNaN(“123”) | isNaN判断是否值为NaN,会自动做一次Number()强转 |
parseFloat(str2) | 获取以浮点开头的字符串,返回string类型 |
parseInt(str1) | 获取以整形开头的字符串,返回string类型 |
7. BOM
- 概述:BOM浏览器对象模型,是规范浏览器对js语言的支持(js调用浏览器本身的功能)。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2H6M9yyJ-1601256238921)(images/BOM.jpg)]
7.1 window
- Tips:可不写window前缀,例如:“window.alert()”,可以省略“window”,则“alert()”
window | 作用 |
---|
alert() | 警告框 |
confirm() | 确认框; 返回true/false |
prompt() | 提示框; 返回输入的值 |
window | 作用 |
---|
setTimeout(函数对象,时间) | 指定的时间后执行指定的函数,返回 ID 值 |
setInterval(函数对象,时间) | 每间隔指定的时间执行指定的函数,返回 ID 值 |
clearTimeout(函数对象ID) | 用来停止指定的定时器 |
clearInterval(函数对象ID) | 用来停止指定的间隔器 |
window | 作用 |
---|
window.open() | 打开页面 |
window.opener | 子页面调用父页面的函数 |
window.close() | 关闭页面 |
7.2 history
history | 作用 |
---|
forward() | 页面资源前进,历史记录的前进 |
back() | 页面资源后退,历史记录后退 |
go(index) | 跳转到指定的历史记录资源 |
7.3 location
location | 作用 |
---|
href | 获取URL |
port | 获取端口号 |
reload() | 重新加载页面资源 |
7.4 navigator
navigator | 作用 |
---|
appName | 返回浏览器名称 |
appVersion | 返回浏览器的平台的版本信息 |
cookieEnabled | 返回指明浏览器中是否启用cookie |
platform | 返回运行浏览器的操作系统平台 |
userAgent | 查看浏览器配置属性 |
7.5 screen
screen | 作用 |
---|
availHeight | 返回浏览器显示屏幕的高度 |
availWidth | 返回浏览器显示屏幕的宽度 |
height | 返回显示器屏幕的高度 |
width | 返回显示器屏幕的宽度 |
8. DOM
8.1 Document
- 概述:浏览器对外提供的支持js的用来操作HTML文档的一个对象,此对象封存的HTML文档的所有信息。
函数 | 获取HTML元素对象 |
---|
getElementById() | 通过id |
getElementsByName() | 通过name属性值 |
getElementsByTagName() | 通过标签名 |
getElementsByClassName() | 通过class属性值 |
querySelector() | 通过选择器 |
querySelectorAll() | 通过选择器 |
8.2 Element
- 概述:Element 对象表示 HTML 元素。Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
8.2.1 属性操作
函数 | 作用 |
---|
setAttribute(attriName,value) | 设置属性 |
getAttribute(attriName) | 获取属性 |
style | 设置或返回元素的 style 属性 |
8.2.2 元素内容
函数 | 作用 |
---|
innerHTML | 返回或设置元素的内容 |
innerText | 返回或设置元素的纯文本 |
8.2.3 节点操作
-
节点类型(nodeType)
-
节点名称(nodeName)
-
创建节点
函数 | 作用 |
---|
document.createElement() | 创建元素 |
document.createAttribute() | 创建属性 |
document.createTextNode() | 创建文本节点 |
setAttributeNode() | 设置属性节点 |
-
获取节点
函数 | 作用 |
---|
parentNode | 获取父节点 |
childNodes | 获取子节点 |
nextElementSibling | 获取当前节点的下一个节点 |
previousSibling | 获取同一级别的前一个元素节点 |
-
获取节点(不包括文本节点和注释)
函数 | 作用 |
---|
childElementCount | 返回子元素的个数 |
firstElementChild | 指向第一个子元素 |
lastElementChild | 指向最后一个子元素 |
previousElementSibling | 获取当前节点的上一个节点 |
nextElementSibling | 获取当前节点的下一个节点 |
children | 返回子元素的HTMLCollection集合 |
-
删除节点
-
追加节点
js操作form表单
-
获取form对象
- 通过name属性: var frm=document.name属性; // 特殊的,可以直接用name属性获取form对象
-
方法
- submit(); //提交表单数据
- reset(); //重置表单数据
-
属性
- 表单对象名.action=“新的值” //动态的改变数据的提交路径
- 表单对象名.method=“新的值” //动态的改变提交方式
veChild()|删除子节点|
-
追加节点
js操作form表单
- 获取form对象
- 通过name属性: var frm=document.name属性; // 特殊的,可以直接用name属性获取form对象
- 方法
- submit(); //提交表单数据
- reset(); //重置表单数据
- 属性
- 表单对象名.action=“新的值” //动态的改变数据的提交路径
- 表单对象名.method=“新的值” //动态的改变提交方式
- elements //(只限于form对象)获取form下的所有表单元素对象集合