javascript

引入

1. 在 .html 中, 写在 head 或者 body 中
<script type="text/javascript">
    alert("我的第一个 JavaScript");
</script>
如果有多个 <script>, 会从上到下按顺序执行

2. 外部 js 文件
创建 index.js 文件
在 index.js 文件中添加代码
alert("我的第一个 JavaScript");
在 .html 中, 写在 head 或者 body 中
<script src="./js/index.js" type="text/javascript" charset="utf-8"></script>

注意: 如果 <script> 中有了 src 属性, 标签里面的代码会失效

日志打印, 输出在控制台(F12/Console)(原句输出)
console.log("H<sub>2</sub>O");

向页面中写入内容, 可以识别标签
document.write("H<sub>2</sub>O");

弹出框: 警告框
window.alert("这是一个警告框");
弹出框: 确认框
if(window.confirm("这是一个确认框"))
{
    alert("你点击了确认按钮")
}
else
{
    alert("你点击了取消按钮");
}
弹出框: 输入
var person = prompt("请输入您的姓名", "默认名字");
if (person != null) alert("早上好, " + person);
else alert("你没有输入内容");

数据类型

数据类型 Number String Boolean Undefined Null
Undefined 不存在的变量, 已经定义但是没有赋值的变量也是 Undefined
Null 是空值

//变量的定义
var a = null;

//查看变量数据类型
var a = 1;
console.log(typeof(a));

//字符串转数字
var str = "123";
var num = parseInt(str); //parseFloat
console.log(typeof(num)); //Number

//转字符串
var num = 123;
var str = num.toString();

1 == "1" true 值相等
1 === "1" false 值相等 && 类型相等
&& || !

//数组
var arr = [1,2,3,4,5];
arr[0]
arr.length
var arr = new Array[1,2,3,"str"];
arr.forEach(function(item){ console.log(item); })

//把数字6放在数组末尾
arr.push(6);

//把数字7放在数组头部
arr.unshift(7);

//把数组末尾的数字移除(返回值是移除的数字)
arr.pop();

//把数组头部的数字移除(返回值是移除的数字)
arr.shift();

//以'&'作为连接符, 将数组里的元素进行字符串拼接, 返回值为拼接的字符串
arr.join("&");

//数组倒置排列
arr.reverse();

//将数组中下标2~5的元素(2,3,4,不包括5)截取出来, 返回值是截取出来的新数组
arr.slice(2,5);

//从index(包括)开始,替换之后count个元素,替换后的数字为item1,item2...
//插入元素时, count = 0; 返回值是被删除元素
arr.splise(index,count,item1,item2,...);
//在数组末尾增加元素,返回拼接后的数组(原数组不变)
arr.concat([1,2,3,4]);

//返回元素数字4的下标, 元素未找到则返回-1(从前向后寻找)
arr.indexOf(4);

//返回元素数字4的下标, 元素未找到则返回-1(从后向前寻找)
arr.lastIndexOf(4);

//从小到大排序
arr.sort();

//自定义排序: 如果前面(x)字符串元素的长度 > 后面(y)字符串元素的长度, 则交换, 排序结果: 字符串长度从短到长排列
arr.sort(function(x,y){
    return x.length > y.length; 
})

//截取从 index = 3 开始到字符串结束, 返回截取的字符串
str.substring(3);

String

字符串转数字
var str = "123";
var num = parseInt(str); //parseFloat
console.log(typeof(num)); //Number

字符串替换
stringObject.replace(regexp/substr,replacement)

regexp 字符串中要替换掉的正则表达式
substr 字符串中要替换掉的子字符串

replacement 一个字符串值, 要替换的文本或生成替换文本的函数

retern 返回新字符串

修饰符
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹
方括号用于查找某个范围内的字符：

表达式
[abc]	查找方括号之间的任何字符
[0-9]	查找任何从 0 至 9 的数字
(x|y)	查找任何以 | 分隔的选项

元字符
\d	查找数字
\s	查找空白字符
\b	匹配单词边界
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符

量词
n+	匹配任何包含至少一个 n 的字符串
n*	匹配任何包含零个或多个 n 的字符串
n?	匹配任何包含零个或一个 n 的字符串

替换示范
1. 只把第一个 lmy 替换成 black
var str = "This is lmy, lmy is good, lmy is nice";
var ret = str.replace(/lmy/,"black");

2. 把字符串中所有的 lmy 替换成 black
var str = "This is lmy, lmy is good, lmy is nice";
var ret = str.replace(/lmy/g,"black");



var str = "                  1Z0001 &   _ 9                ";
console.log(str);
str = str.replace(/&/g," ");
str = str.replace(/_/g," ");
str = str.replace(/\s+/g," "); // 多空格变单空格

str = str.replace(/(^\s*)|(\s*$)/g, ""); // 去除首尾空格        
str = str.replace(/(^\s*)/g, ""); // 去除左边空格        
str = str.replace(/(\s*$)/g, ""); // 去除右边空格

数组

// 集合末尾添加元素 push
// 集合头部添加元素 unshift
var arr = ["Unity", "C#"]
arr.push("Lua")
arr.unshift("Java")
for(i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

函数

//函数
function Func(a,b) { return a+b; }

//函数作为参数
function myFunc(fun,a,b) { return fun(a,b); }
function mySum(a,b) { return a+b; }
var num = myFunc(mySum, 10, 18);
var onNum = mySum;
var onSub = function(a,b) { return a-b; }
function onCal(function(){}, 1,2);

//即时函数(一次性函数)(直接运行)
(function(a,b){})(1,2)

系统函数

//弹框
alert("我的第一个 JavaScript");

//打印

定时器

<button onclick="start()" >开始计时</button>
<button onclick="stop()" >停止计时</button>
<button onclick="delay()" >三秒等待</button>

var timer;
//间歇调用的方法
function func() { console.log("间隔 1 秒"); }
//开始计时
function start() { timer = setInterval("func()",1000); }
//停止计时
function stop() { clearInterval(timer); }        
//延迟3秒弹出框
function delay() { setTimeout("alert('对不起, 要你久候')", 3000); } 

Document

//向页面中写入内容, 可以识别标签
//绝对不要在文档(DOM)加载完成之后使用 document.write(); 这会覆盖该文档
document.write("H<sub>2</sub>O");

js获取页面元素

获取页面元素时, 要确保页面元素已经在页面中生成
所以代码要书写在 HTML 代码之后

//通过 id 找到 HTML 元素(查找 id="intro" 元素)
var x = document.getElementById("intro");

//通过标签名找到 HTML 元素(查找 id="main" 元素中的所有 <p> 元素)
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

//通过类名找到 HTML 元素(查找 class="intro" 的元素)
var x = document.getElementsByClassName("intro");

//改变 HTML 内容(改变 id="p1" 元素的内容)
document.getElementById("p1").innerHTML = "新文本!";

//改变 HTML 属性(改变 <img> 元素的 src 属性)
document.getElementById("image").src = "landscape.jpg";

//改变 HTML 样式(改变 id="p2" 元素的样式)
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";

创建新的 HTML 元素 (节点) - appendChild()
要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它

Event

设置点击事件(方式1)

<div onclick="alert('弹出框: 你点击了div');">
    点击响应事件
</div>

设置点击事件(方式2)

<div onclick = "myClick()">
    点击响应事件
</div>

function myClick() {
    alert("弹出框: 你点击了DIV");
}

设置点击事件(方式3)

<div>点击响应事件</div>

var div = document.getElementsByTagName("div")[0];
div.onclick = function(){
    alert("你点击了div");
};

设置点击事件(方式4)

document.getElementById("myBtn").addEventListener("click", function(){    
	document.getElementById("demo").innerHTML = "Hello World";
});

界面点击事件

document.onclick = function(){
    alert("你点击了界面");
};

onload 和 onunload 事件会在用户进入或离开页面时被触发

<body onload="checkCookies()">

onchange 输入框内容修改后, 响应事件
onfocus 当输入字段获得焦点时
onmouseover 鼠标移动到元素上面
onmouseout 鼠标移出元素
onmousedown 点击鼠标按钮时
onmouseup 释放鼠标按钮时
onclick 完成鼠标点击时

element.addEventListener(event, function, useCapture);
element.removeEventListener(event, function, useCapture);

event: 事件类型, click mousedown mouseup mouseover mouseout
function: 响应的函数
useCapture: (bool)事件是冒泡还是捕获, 此参数可省略
例如:
element.addEventListener("click", function(){ alert("Hello World!"); });
element.removeEventListener("mousemove", myFunction);
注: 同一个元素中可以添加多个同类型的事件句柄, 事件不会覆盖
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

向 Window 对象添加事件句柄
当用户重置窗口大小时添加事件监听：
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

当传递参数值时, 使用"匿名函数"调用带参数的函数
element.addEventListener("click", function(){ myFunction(p1, p2); });

事件传递有两种方式: 冒泡与捕获(事件触发顺序)
<p> 元素插入到 <div> 元素中:
<div><p></p></div>
用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?
在 冒泡 中, 内部元素的事件会先被触发, 然后再触发外部元素事件, 即: <p> 元素的点击事件先触发, 然后会触发 <div> 元素的点击事件
在 捕获 中, 外部元素的事件会先被触发, 然后再触发内部元素事件, 即: <div> 元素的点击事件先触发, 然后再触发 <p> 元素的点击事件
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型
addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递
document.getElementById("myDiv").addEventListener("click", myFunction, true);

表格

// 获取指定的表格
var table = document.getElementsByTagName("table")[0];
// 获取表格的所有行
var trList = table.getElementsByTagName("tr");
// 获取表格的某一行
var trFirst = trList[0];
// 获取表格的某一行的所有列
var tdList = trFirst.getElementsByTagName("th");
// 获取表格的某一行的某一列
var tdFirst = tdList[0];
// 验证输出
console.log(tdFirst.innerHTML);        

var row = table.rows.length;
var col = table.rows[0].cells.length;

console.log("行数: "+ row);
console.log("列数: "+ col);

console.log(table.rows[0].cells[2].innerHTML); // 0行2列

Json

var t = {
    id: 10,
    name: "Black",
    hp: 100
};

console.log(t);
console.log(JSON.stringify(t));

键值对

// 创建键值对集合
var dataMap = {
    key1:"val1",
    key2:"val2",
    key3:"val3"
};

// 取值
console.log(dataMap["key2"]); //val2
console.log(dataMap.key3); //val3 (key 为数字时不可用)

// 添加/修改: key 不存在则添加, 存在则修改
dataMap["key3"] = "value3";
dataMap.key4 = "value4";

// 删除: !! 运算符将任意类型的值转化为 bool, 存在为 true
if(!!dataMap["key1"]) delete(dataMap["key1"]);

// 遍历
for(var key in dataMap)
    console.log( key + " : " + dataMap[key]);


var dataList = [{},{}];
dataList[0].name = "Black"
dataList[0].sex = "boy";
dataList[0].age = 24;
dataList[1].name = "Anna"
dataList[1].sex = "girl";
dataList[1].age = 19;
console.log(dataList[0].sex);
console.log(dataList[1].name);

一维数组
var list = ["a","b","c","d","e"];
// 推荐
var count = list.length;
for(var i = 0; i < count; i++)
    console.log(i + "=>" + list[i]);
// 其他
for(var i = 0; i < list.length; i++)
    console.log(i + "=>" + list[i]);
// 其他
for(var i in list)
    console.log(i + "=>" + list[i]);
// 其他
var index = 0;
for(var elem of list)
    console.log(index++ + "=>" + elem);

二维数组
var arr = 
[
    [ "apple", "banana", "pear" ],
    [ "monday", "tuesday", "wednesday", "thursday"],
    [ "one", "two", "three", "four"]
];

// 获取与设置
console.log(arr[0][2]); // pear
arr[0][2]="梨";
console.log(arr[0][2]); // 梨

// 遍历
for(var i = 0; i < arr.length; i++)
    for(var j = 0; j < arr[i].length; j++)
        console.log(arr[i][j]);

// 声明与赋值
var arr = new Array();
arr[0] = new Array();
arr[1] = new Array();
arr[0][0] = "00";
arr[0][1] = "01";
arr[0][2] = "02";
arr[0][3] = "03";
arr[1][0] = "10";
arr[1][1] = "11";
arr[1][2] = "12";

sessionStorage

// sessionStorage - 针对一个 session 的数据存储(关闭窗口, 存储的数据清空)
sessionStorage.setItem("key","val");
console.log(sessionStorage.getItem("key"));
sessionStorage.removeItem("key");
console.log(sessionStorage.getItem("key"));
sessionStorage.setItem("key","xxx");
console.log(sessionStorage.getItem("key"));
sessionStorage.clear();
console.log(sessionStorage.getItem("key"));

// localStorage - 没有时间限制的数据存储
localStorage.setItem("key","val");
console.log(localStorage.getItem("key"));
localStorage.removeItem("key");
console.log(localStorage.getItem("key"));
localStorage.setItem("key","xxx");
console.log(localStorage.getItem("key"));
localStorage.clear();
console.log(localStorage.getItem("key"));

获取网址信息

console.log("window.location.host = " + window.location.host)
console.log("window.location.hostname = " + window.location.hostname)
console.log("window.location.port = " + window.location.port)
console.log("window.location.href = " + window.location.href)
console.log("window.location.protocol = " + window.location.protocol)
console.log("window.location.pathname = " + window.location.pathname)
console.log("window.location.search = " + window.location.search)
console.log("window.location.hash = " + window.location.hash)

window.location.host = 192.168.2.234:8080
window.location.hostname = 192.168.2.234
window.location.port = 8080
window.location.href = http://192.168.2.234:8080/tsg/h5/
window.location.protocol = http:
window.location.pathname = /tsg/h5/
window.location.search = 
window.location.hash = 

Ajax

$.ajax({
    type: "GET",
    dataType: 'json',
    url: "http://localhost:8080/login",
    // headers: {
    //     "AccessToken": "",
    //     "TimeStamp": ""
    // },
    data: {
        "username": appVue.username,
        "password": appVue.password
    },
    success: function (result) {
        console.log(result);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        console.log("请求对象 XMLHttpRequest.status: " + XMLHttpRequest.status);
        console.log("请求对象 XMLHttpRequest.readyState: " + XMLHttpRequest.readyState);
        console.log("错误类型 textStatus: " + textStatus);
        console.log("异常对象 errorThrown: " + errorThrown);
    }
});