JavaScript
JavaScript
JavaScript与Java的关系
不要误会，可能有许多人会猜测 JavaScript 和 Java 是同一批人出的吧。但实际是两者没有任何关联，实际上是当时 Java 很火，然后 JavaScript 去蹭了波热点。
JavaScript的引入方式
-
在 Script 标签里写
<script> 在这里写你的JS代码 </script> -
引入额外的JS文件
<script src="myscript.js"></script>
声明变量
- avaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
- 声明变量使用 var 变量名; 的格式来进行声明
- ES6新增了let命令，用于声明变量。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。
- 使用 const 来声明常亮
JavaScript数据类型
JavaScript 是弱类型语言 声明变量时不需要特定声明他的数据类型
数值类型（Number）
JavaScript不区分整型和浮点型，就只有一种数字类型。
var a = 12.34;
var b = 20;
将字符串类型数值转为数值类型
parseInt("123") // 返回123
parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。
parseFloat("123.456") // 返回123.456
字符串（String）
var a = "Hello"
var b = "world;
var c = a + b;
常用方法：
| 方法 | 说明 |
|---|---|
| .length | 返回长度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .charAt() | 返回指定位置字符 |
| .concat() | 字符串拼接 |
| .indexOf() | 子序列位置 |
| .substring() | 根据索引获取子序列 |
| .slice() | 切片 |
| .toLowerCase() | 小写 |
| .toUpperCase() | 大写 |
| .split() | 分割 |
布尔值（Boolean）
var a = true;
var b = false;
""(空字符串)、0、null、undefined、NaN都是false
对象（Object）
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
数组
数组对象的作用是：使用单独的变量名来存储一系列的值。
var a = [123, "ABC"];
常用方法：
| 方法 | 说明 |
|---|---|
| .length | 数组的大小 |
| .push() | 尾部追加元素 |
| .pop() | 获取尾部的元素，并删除 |
| .unshift() | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice() | 切片 |
| .reverse() | 反转 |
| .join() | 将数组元素以字符串间隔连接成字符串 |
| .concat() | 数组拼接 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice() | 删除元素，并向数组添加新元素。 |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
运算符
算数运算符
+（加）、-（减）、*（乘）、/（除）、%（取余）、++（自增）、--（自减）
比较运算符
>（大于）、>=（大于等于）、<（小于）、<=（小于等于）、!=（不等于）、==（等于）、===（全等）、!==（不全等）
逻辑运算符
&&（与）、||（或）、!（非）
赋值运算符
=、+=、-=、*=、/=
流程控制
if-else
var a = 10;
if (a > 5){
console.log("yes");
}else {
console.log("no");
}
if-else if-else
var a = 10;
if (a > 5){
console.log("a > 5");
}else if (a < 5){
console.log("a < 5");
}else {
console.log("a = 5");
}
switch
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...") }
for
for (var i=0; i<10; i++) {
console.log(i);
}
while
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
三元运算
var a = 1;
var b = 2;
var c = a > b ? a : b /* a > b成立执行？后的语句，不成立执行：后的语句 */
var a = 10, b = 20;
var x = a > b?a:(b=="20")?a:b;
函数
使用 function 关键字定义
function func(){
函数体
};
// 带参函数
function func1(a, b){ // 调用函数时按照必须参数传递，多余参数舍弃
console.log(a, b);
return [a, b]; // 多个参数使用数组的形式返回
};
// 接收对于的参数
function func2(a, ...b){ // 使用三个点可以用来接收多余的参数
console.log(a, b);
console.log(a, arguments[0]) // 类似于Array并接收所有的参数只能查看有几个元素和使用位置取值
}
// 匿名函数
(function (a, b){
console.log(a, b);
})(1, 2); // 立即执行函数内容
// ES6还可以使用 => 的形式定义函数
var func3 = (a, b) => a + b;
// 等同于
function func3(a, b){
return a+b;
}
内置对象
Date对象
// 方法1：不指定参数
var d1 = new Date();
// 方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
// 方法3：参数为毫秒数
var d3 = new Date(5000);
// 方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
Date对象方法
| 方法 | 描述 |
|---|---|
| getDate | 获取日 |
| getDay | 获取星期几（从0~6代表从周日（0）到周六（6）） |
| getMonth | 获取月份，月份从0开始 |
| getFullYear | 获取年份 |
| getYear | 获取从1900年到现在的年数 |
| getHours | 获取小时 |
| getMinutes | 获取分钟 |
| getSeconds | 获取秒 |
| getMilliseconds | 获取毫秒 |
| getTime | 获取从1970年到现在的毫秒数 |
JSON对象
var str1 = '{"name": "Gredae", "age": 18}';
var obj1 = {"name": "Gredae", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1);
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);
RegExp对象
// 定义正则表达式两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/; // 注意事项，正则表达式中不能有空格
// 正则校验数据
reg1.test('json666')
// 全局匹配
var s1 = 'asdjfa';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('asdjfa');
reg2.test('asdjfa');
reg2.lastIndex;
/*第二个注意事项，全局匹配时有一个lastIndex属性*/
// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test(); // 不传递时默认传递一个undefined
Math对象
abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
| 函数 | 描述 |
|---|---|
| abs() | 绝对值 |
| exp() | 返回e的指数 |
| floor() | 向下取整 |
| log() | 返回自然数的对数 |
| max() | 返回最大值 |
| min() | 返回最小值 |
| pow(x, y) | 返回x的y次幂 |
| random() | 返回0~1的随机数 |
| round() | 四舍五入最接近的数 |
| sqrt() | 平方根 |
| sin() | 正弦值 |
| tan() | 正切值 |
BOM
BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。
windows对象
所有浏览器都支持 window 对象。
- window.innerHeight：浏览器窗口高度
- window.innerWidth：浏览器窗口宽度
- window.open()：打开新窗口
- window.close()：关闭当前窗口
window的子对象
-
navigator
- navigator.appName：Web浏览器全称
- navigator.appVersion：Web浏览器版本
- navigator.userAgent：Web浏览器的信息（一般防爬措施需要验证userAgent信息）
- navigator.platform：操作系统信息（信息不准确）
-
history对象
- history.forward()：前进
- history.back()：后退
-
location对象
- location.href：获取地址栏URL，设定值可以实现跳转功能
- location.reload：重新加载页面
-
弹出框
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
- 警告框：alert(123)
- 确认框：confirm("是否退出？")
- 提示框：prompt("请输入你的名字：")
-
计时器
-
setTimeout()
在一定时间间隔之后来执行代码或者函数
清除使用clearTimeout，需要指定计时器对象
-
setInterval()
在一定时间间隔之后反复来执行代码或者函数
清除使用clearInterval，需要指定计时器对象
-
DOM
DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。
DOM标准规定HTML文档中的每个成分都是一个节点(node)：
- 文档节点(document对象)：代表整个文档
- 元素节点(element 对象)：代表一个元素（标签）
- 文本节点(text对象)：代表元素（标签）中的文本
- 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
- 注释是注释节点(comment对象)
获取节点对象
- getElementById 根据ID获取标签
- getElementsByClassName 根据class属性获取标签对象
- getElementsByTagName 根据标签名称合集
间接获取节点对象
- parentElement 父节点标签元素
- children 所有子标签
- firstElementChild 第一个子标签元素
- lastElementChild 最后一个标签元素
- nextElementSibling 下一个兄弟标签元素
- previousElementSibling 上一个兄弟标签元素
创建节点对象：createElement
var divEle = document.createElement("div");
添加子节点
为节点添加子节点
var imgEle = document.createElement("img");
imgEle.setAttribute("src", "1.jpg"); // 为节点添加属性
var divEle = document.getElementById("div");
divEle.appendChild(imgEle); // 添加为其后代节点
divEle.insertBefore(imgEle, divEle.childNodes[0]) // 在子节点前面添加子节点
删除子节点
为节点删除子节点
var divEle = document.getElementById("div");
divEle.removeChild(divEle.childNodes[2]); // 删除节点下的子节点
替换子节点
为节点替换子节点
var new_text = document.createTextNode("这是新的标签！");
var divEle = document.getElementById("div");
divEle.replaceChild(new_text, divEle.childNodes[2]);
属性节点
-
获取文本节点的值
var divEle = document.getElementById("div"); var Text = divEle.innerText; var Html = divEle.innerHTML; -
设置文本节点的值
var divEle = document.getElementById("div"); divEle.innerText="1"; divEle.innerHTML="<p>2</p>";
属性
var divEle = document.getElementById("div");
divEle.setAttribute("age","18"); // 设置属性
divEle.getAttribute("age"); // 获取属性
divEle.removeAttribute("age"); // 删除属性
取值
适用于以下标签：
-
input
-
select
-
textarea
var lEle = document.getElementById("li");
console.log(lEle.value);
var sEle = document.getElementById("op");
console.log(sEle.value);
var tEle = document.getElementById("text");
console.log(tEle.value);
class操作
className // 获取所有样式类名(字符串)
classList.remove(cls) // 删除指定类 classList.add(cls) 添加类
classList.contains(cls) // 存在返回true，否则返回false
classList.toggle(cls) // 存在就删除，否则添加
样式操作
var pEle = document.getElementById("p");
pEle.style.backgroundColor="red";
事件
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript
| 常用事件 | 描述 |
|---|---|
| onclick() | 当元素被单击触发 |
| ondblclick() | 当元素被双击触发 |
| onfocus() | 当元素获取焦点 |
| onblur() | 当元素失去焦点 |
| onchange() | 当域内容被改变 |
| onload() | 当页面内容加载完毕 |
| onkeydown() | 当键盘按下 |
| onkeyup() | 当键盘松开 |
| onkeypress() | 当键盘按下并松开 |
| onmouserdown() | 当鼠标按下 |
| onmousemove() | 当鼠标被移动 |
| onmouseout() | 当鼠标从元素移开 |
| onmouseover() | 当鼠标移动到元素上 |
| onselect() | 当用户选中文本 |
| onsubmit() | 当表单被提交 |
绑定方式
-
方式一：
<script> function changeColor(his){ his.style.backgroundColor="green"; } </script> <div id="d1" onclick="changeColor(this);">点我</div> -
方式二：
<div id="div">点我</div> <script> var divEle = document.getElementById("div"); divEle.onclick=function () { divEle.innerText="呵呵"; } </script>
