目录
Introduction
注释
// 单行注释 /* 多行注释1 多行注释2 */
代码行以;结束
引入方式
// script 标签内直接书写 // 通过script标签src属性添加 <script src='xxxx.js'></script>
事件：用户操作
onclick='alter(xxx);' onmouserover='div1.style.display=bock' document.getElementById
变量
变量声明
var # 声明全局有效的变量 let # 声明局部有效， ES6新语法
变量命名规范
// 数字 字母 下划线 $ 组成 // 推荐使用驼峰体
声明常量
const
数据类型
- 数值类型
- 字符串
- 对象
- 数组 []
- 自定义对象 {}
- 布尔值
- undefined
- symbol
注：用typeof 查看数据类型
字符串
方法
.length .concat(value,) .trim .trimLeft .substring(from, to) .slice(start, end) .charAt(n) .indexOf(substring, start) .toLowerCase() .toUpperCase() .split()
多行文本
` 多行1 多行2 `
占位符
var name = 'test';
`hello ${name}?`;
数组
var a = ["abc", 123]
方法
.length .unshift(ele) # 头部插入元素 .push(eld) # 尾部插入元素 .concat(val,,..) .pop() .shift() .slice() .splice() # 删除元素，并向数组添加新元素 .reverse() .sort()
forEach
arr1.forEach(function(value, index){
console.log(value, index)
})
splice
arr1.splice(index, howmany, add1, add2, ..)
map
var arr1 = [1, 2, 3]
arr1.map(function(value){
return value + 1
})
遍历元素
for (var i=0; i < arr1.length; i++){
console.log(a[i])
}
运算符
算术运算符
+ - * / % ++ --
比较运算符
> >= <= != == === !== 1 == '1' //弱等于
逻辑运算符
&& || !
赋值运算符
= += -= *= /=
流程控制
if-else if-else
var a = 5;
if (a > 5) {
xxxx;
}else if (a < 5) {
xxxx;
}else {
xxx;
}
switch
switch (a) {
case 0:
xxxx;
break;
case 1:
xxxx;
break;
default:
xxxx;
}
for
for (var i=0; i < 10; i++) {
xxxx;
}
while
while (i < 10) {
xxxx;
i++;
}
三元运算
var x = a > b ? a: b
函数
function f1(a, b) {
xxxx;
return xxx;
}
匿名函数
var sum = function(a, b) {
return a + b;
}
箭头函数
var sum = (num1, num2) => num1 + num2
注：函数中可使用arguments参数，其包括传入的所有参数
注：函数只能返回一个值，如果要返回多个，只能将其放在数组或对象中
函数的全局变量和局部变量
函数内部声明的变量是局部变量，在函数外部声明的变量是全局变量
对象
自定义对象
var a = {'name': 'test', 'age'：18}
var person=new Object();
person.name='xxx'
JSON对象
方法
JSON.parse(str1) JSON.stringify(json_obj)
RegExp对象
reg1 = new RegExp('^[a-z]');
reg2 = /^[a-z]/;
reg2 = /^[a-z]/g; // 全局匹配
Math对象
abs exp floor max log min sqrt
事件
用户的操作
点击，鼠标移入， 鼠标移出
<a href='javascript:alert("a")'> 连接</a>
javascript里改变class属性
obj = getElementById('xx')
obj.className
改变元素属性
obj[name] = value oDiv.style 操作的是行间样式，如果放在css中，则不能取出相应属性 例如：oDiv.background不能修改，果果backgound定义在css中
提取行间事件
为元素添加事件
function abc()
{
}
var oBtn = document.getElemntById('xx')
oBtn.onclick=abc
window.onload
当页面加载完成的时候发生
getElementsByTagName
获取一组元素
全选
window.onload=function () {
var aDiv = document.getElementsByTagName;
}
this
触发当前动作的元素