javascript

javascript 浏览器脚本语言
1) 基本数据类型：数字，字符串， 布尔值， null， undefined
2) 复杂数据类型：
数组
var array = new Array();
var array = [1,2,3,4];
访问元素 array[下标]
for(var i = 0; i < array.length; i++) {
array[i]
}
.push(值); .pop();
.unshift(值); .shift();
.splice(下标, 个数);
.sort(); // 对数组进行排序，但会把元素视为字符串类型
.sort( (a,b)=>{ a - b } );

对象
var obj = new Object();
var obj = {name:"值", age:17};
obj.sex = "男";
delete obj.sex;

函数
function 函数名(形参名1, 形参名2, ... 形参名n) {
return
}

函数名(实参1, ... 实参 n)

js中函数没有重载特性，同名函数只能有一个，后定义的会覆盖前面定义的

日期
var date = new Date();
var date = new Date(毫秒值);
.getFullYear();
.getMonth();
..

正则表达式
var reg = /正则表达式/;

[0-9] [a-zA-Z]
? , +, *, {m,n}

reg.test("目标字符串"); // true, false

字符串对象.replace(reg , "替换内容");

3) html网页中使用js
<script>
js代码
</script>
F12 控制台窗口

1.js配合html实现网页编程

DOM API (用js来操作html的一套api)
document 文档 Object 对象 Model 模型
可以把整个html视为一个树状结构，html中的每个标签都是树上的一个节点
document
|- html
|-head
|-meta
|-title
|-style
|-script
|-body
|-p
|-form
|-table
|-ul

1.1 查找元素

document.getElementById(标签id值); // 在设计id时要避免重复，id的取值应当唯一
document.getElementsByTagName(标签名字); // 根据标签的名字查找多个元素
父元素.getElementsByTagName(标签名字); // 查找从属于此父元素的所有与标签名称符合的子标签, 缩小了查找范围

通过选择器语法进行查找
#id， .class值, 元素

document.querySelector("选择器"); // 查找与选择器匹配的标签， 匹配第一个
document.querySelectorAll("选择器"); // 查找与选择器匹配的标签, 匹配所有

1.2 修改

修改内容
.innerText 在赋值时，把字符串当做普通文本处理，如果字符串中包含了html标签，那么这些标签会照原样输出
.innerHTML 在赋值时，把字符串当做html代码处理，会解析html标签再显示
修改属性
.属性名 = "新值";
修改样式
.className="新class" // 对应访问class属性 (推荐使用class属性修改样式)
.style.具体样式名="新值"; // 注意style 优先级较高，会覆盖其它样式

1.3 删除

父元素.removeChild(子元素);

1.4 新增

父元素.appendChild(子元素); // 建立父子元素关系
document.createElement("标签"); // 创建新的标签元素

2. DOM事件

2. 事件类型

鼠标单击事件 onclick
鼠标双击事件 ondblclick
鼠标移入事件 onmouseover
鼠标移出事件 onmouseout
光标移入事件(获得焦点) onfocus
失去焦点事件 onblur
值改变事件 onchange
键盘 onkeydown 按下按键时
onkeypress 按下按键时
onkeyup 松开按键时