JavaScript

1995年在网景公司，发明的JavaScript。一开始JavaScript叫做LiveScript，但是由于当时Java这个语言特别火，所以为了傍大牌，就改名为JavaScript。同时期还有其他的网页语言，比如VBScript、JScript等等，但是后来都被JavaScript打败，所以现在的浏览器中，只运行一种脚本语言就是JavaScript。

特点

交互性：信息的动态交互
安全性：不允许直接访问本地硬盘
跨平台性：只要是可以解释JS的浏览器都可以执行，和平台无关

JavaScript和HTML结合的方式

在head或body标签中引入script标签<script type="text/javascript></script>
直接在script标签中的src属性引入对应的js文件<script type="text/javascript" src="name.js"></script>

变量

JavaScript的变量类型

数值类型：number
字符串类型：string
对象类型：object
布尔类型：boolean
函数类型：function

JavaScript里特殊的值：

undefined：未定义，所有js变量未赋初值时，默认都是undefined
null：空值
NAN：全称是Not a number 非数字非数值

JavaScript定义变量的格式

var 变量名;
var 变量名 = 值;

typeof()函数是用来获得变量的数据类型并返回

关系运算

等于：== 简单的做字面值的比较
全等于：=== 除了字面值的比较外，还会比较两个变量的数据类型是否相同

var n = 12;
var m = "12";
alert(n == m);  // true
alert(n === m); // false

逻辑运算

在JavaScript中，所有的变量，都可以做为一个boolean类型的变量去使用
0、null、undefined、""（空串）都认为是false

与运算：&&
1. 当表达式全为真时，返回最后一个表达式的值
2. 当表达式中为假时，返回第一个为假的表达式的值
或运算：||
1. 当表达式全为假时，返回最后一个表达式的值
2. 当表达式为真时，返回第一个为真的表达式的值
取反运算：!

&&和||运算都是短路的。

var a = true;
var b = "";
var c = "geekfx";
var d = undefined;
alert(a && c);      // "geekfx"
alert(a && b && c); // ""
alert(b || a || d); // true
alert(b || d);      // undefined

数组

var arr = [];   // 定义一个空数组
alert(arr.length);  // 0
arr[0] = "geekfx";
alert(arr.length);  // 1
// 通过下标赋值时，最大的下标值会为数组扩容
arr[2] = false;
alert(arr.length);  // 3
alert(arr[1]);      // undefined
// 数组的遍历
for(var i = 0; i < arr.length; i++) {
    alert(arr[i]);
}

函数

定义方式一

function 函数名(形参列表) {
    函数体;
    return 返回值;
}

// 定义无参函数
function fun1() {
    alert("无参函数 fun1() 被调用了");
}
// 调用函数
fun1();
// 定义有参函数
function fun2(a, b) {
    alert("有参函数 fun2(" + a + ", " + b + ") 被调用了");
}
fun2(600, 66);
// 定义有返回值的函数
function fun3(n, m) {
    var sum = n + m;
    // 直接使用 return 语句即可
    return sum;
}
alert(fun3(600, 66));   // 666

定义方式二

var 函数名 = function(形参列表) {
    函数体;
    return 返回值;
}

// 函数的第二种定义方式
// 定义无参函数
var fun1 = function() {
    alert("无参函数 fun1() 被调用了");
}
// 调用函数
fun1();
// 定义有参函数
var fun2 = function(a, b) {
    alert("有参函数 fun2(" + a + ", " + b + ") 被调用了");
}
fun2(600, 66);
// 定义有返回值的函数
var fun3 = function(n, m) {
    var sum = n + m;
    // 直接使用 return 语句即可
    return sum;
}
alert(fun3(600, 66));   // 666

关于函数重载

JS不允许函数重载，若定义重载函数会将上一次定义的函数覆盖

function fun() {
    alert("无参函数 fun() 被调用");
}
function fun(a, b) {
    // “函数重载”无效 将会覆盖上面的函数
    alert("有参函数 fun(" + a + ", " + b + ") 被调用");
}
fun();          // 有参函数 fun(undefined, undefined) 被调用
fun(600, 66);   // 有参函数 fun(600, 66) 被调用

隐形参数arguments

在函数中无需定义，可以直接用来获取所有参数的变量。
类似于Java的可变长参数一样。
操作类似于数组。

// 关于隐形参数arguments的使用
function fun(n, m) {
    // 在函数体内通过 arguments 调用传递的所有参数
    alert(arguments[0]);    // n 的值
    alert(arguments[1]);    // m 的值
    alert(arguments[2]);    // undefined
}
fun(6, 9);
// 表面上2个参数，实际上可以传任意多个
function sum(num1, num2) {
    var result = 0;
    for(var i = 0; i < arguments.length; i++) {
        // 防止小朋友搞破坏，传递非数值的参数
        // 使用 typeof() 函数过滤掉非数值的实参
        if(typeof(arguments[i]) == "number"){
            result += arguments[i];
        }
    }
    return result;
}
alert(sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));  // 55

对象

自定义方式一：Object形式

对象的定义
var 对象实例 = new Object();            // 对象实例（空对象）
对象实例.属性名 = 值;                   // 定义一个属性
对象实例.方法 = function(形参列表) {      // 定义一个函数 
    函数体;
    return 返回值;
}
对象的访问
对象实例.属性名;
var 函数返回值 = 对象实例.方法(实参列表);

// 对象的定义
var obj = new Object();
obj.name = "锋行";
obj.age = 18;
obj.info = function() {
    alert("{name = " + this.name + ", age = " + this.age + "}");
    alert("我永远18岁");
}
// 对象的访问
alert(typeof(obj)); // object
obj.info();

自定义方式二：大括号形式

// 对象的定义
var 对象实例 = {
    属性: 值,
    函数名: functino(形参列表) {
                方法体;
                return 返回值;
            }
};
// 对象的访问
对象实例.属性;
对象实例.函数名(实参列表);

// 对象的定义
var obj = {
    name: "锋行",
    age: 18,
    info: function() {
        alert("{name = " + this.name + ", age = " + this.age + "}");
        alert("我永远18岁");
    }
};
// 对象的访问
alert(typeof(obj)); // object
obj.info();

事件

电脑输入设备与页面进行交互的相应，称之为事件。

常用的事件

onload：加载完成事件，常用于做页面js代码初始化操作
onclick：单击事件，常用于按钮响应操作
onblur：失去焦点事件，常用于输入框失去焦点后验证其输入内容是否合法
onchange：内容发生改变事件，常用于下拉列表和输入框内容发生改变后的操作
onsubmit：表单提交事件，常用于表单提交前，验证所有表单项是否合法

事件的注册（绑定）

当事件响应后要执行的操作代码，叫事件注册或事件绑定。

静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码的方式，叫做静态注册。
动态注册事件：先通过js代码得到标签的dom对象，然后通过 dom对象.事件名 = function(){} 赋予事件响应后的代码，叫做动态注册。
基本步骤：
1. 获取标签对象
2. 标签对象.事件名 = fcuntion() {}

onload

静态注册

<script type="text/javascript">
    // 创建一个函数，用于静态注册事件
    function onLoadFun() {
        alert("静态注册 onload 事件...（此处省略1w行代码）");
    }
</script>
<!-- 使用静态注册事件的方式给页面主体绑定加载完成后的事件 -->
<bory onload="onLoadFun();">
    <!-- 网页内容 -->
</bory>

动态注册

window.onload = functino() {
                    alert("动态绑定 onload 事件");
                }

onclick

<script type="text/javascript">
    // 静态注册
    function onClickFun() {
        alert("静态注册 onclick 单击事件");
    }
    // 动态注册
    window.onload = function () {
        /*
            document 是JavaScript语言提供的一个对象 <br/>
            element 元素（就是标签）
            getElementById 通过 id 获取标签对象
         */
        // 1. 获取标签对象
        var element = document.getElementById("btn02");
        alert(element);         // [object HTMLButtonElement]
        alert(typeof(element)); // object
        // 2. 标签名.事件名 = function() {}
        element.onclick = function () {
            alert("动态注册 onclick 单击事件");
        }
    }
</script>
<body>
    <button onclick="onClickFun();" id="btn01">静态注册</button>
    <button id="btn02">动态注册</button>
</body>

onblur

<script type="text/javascript">
    // 静态注册失去焦点事件函数
    function onBlurFun() {
        alert("静态注册 onblur 事件函数");
    }
    window.onload = function () {
        // 动态注册失去焦点事件
        // 1. 获得标签对象
        var element = document.getElementById("pswd");
        // 2. 标签对象.事件名 = function() {}
        element.onblur = function () {
            alert("动态注册 onblur 事件");
        }
    }
</script>
<body>
    用户名：<input type="text" onblur="onBlurFun();"> <br>
    密码：<input type="password" id="pswd"> <br>
</body>

onchange

<script type="text/javascript">
function onchangeFun() {
    alert("女神发生了改变");
}
// 动态注册
window.onload = function () {
    // 1. 获取标签对象
    var slctObj = document.getElementById("slct01");
    // 2. 标签对象.事件名 = funtion() {}
    slctObj.onchange = function () {
        alert("男神发生了改变");
    }
}
</script>
<body>
    <!-- 静态注册 onchange 事件 -->
    <select onchange="onchangeFun();">
        <option value="gril1">女神1</option>
        <option value="gril2">女神2</option>
        <option value="gril3">女神3</option>
        <option value="gril4">女神4</option>
    </select>
    <!-- 动态注册的 onchange 事件 -->
    <select id="slct01">
        <option value="boy1">男神1</option>
        <option value="boy2">男神2</option>
        <option value="boy3">男神3</option>
        <option value="boy4">男神4</option>
    </select>
</body>

onsubmit

<script type="text/javascript">
function onsubmitFun() {
    alert("静态注册表单提交事件");
    // 通常用于验证所有表单项是否合法
    alert("发现表单项不合法");
    // 阻止表单提交
    return false;
}
// 动态注册表单提交事件
window.onload = function () {
    var formObj = document.getElementById("form01");
    formObj.onsubmit = function() {
        alert("动态注册表单提交事件");
        alert("表单项不合法");
        return false;
    }
}
</script>
<body>
    <!-- 静态注册表单提交事件 -->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
        <input type="submit" value="静态注册" name="static">
    </form>
    <!-- 动态注册表单提交事件 -->
    <form action="http://localhost:8080" method="get" id="form01">
        <input type="submit" value="动态注册" name="static">
    </form>
</body>

DOM模型

DOM 全称是 Document Object Model 文档对象模型。
把文档中的标签、属性、文本，转换成对象来管理。

Document对象

Document 对象代表整个 HTML 文档，可用来访问页面中的所有元素
Document是一种树形结构的文档，有层级关系
让所有的标签都对象化
可通过Document对象访问所有的标签对象

模拟对象化，相当于：

class Dom {
    private String id;          // id 属性
    private String tagName;     // 标签名
    private Dom parentNode;     // 父结点
    private List<Dom> children; // 孩子结点
    private String innerHTML;   // 起始标签和结束标签中间的内容
}

常用方法

getElementById()
返回对拥有指定 id 的第一个对象的引用。

<script type="text/javascript">
function buttonOnclickFun() {
    // 要操作一个标签的时，先获取对应标签对象
    var usernameObj = document.getElementById("username");
    // alert(usernameObj); // [object HTMLInputElement] dom 对象
    var usernameText = usernameObj.value;
    // alert(usernameText);    // 文本输入框中的内容
    // 验证输入框内容是否满足某个规则
    // 下面的规则为：由数字、字母、下划线组成的5~12位字符
    var patt = /^\w{5,12}$/;
    var usernameSpanObj = document.getElementById("usernameSpan");
    // 验证字符串是否匹配patt的正则表达式
    if(patt.test(usernameText)) {
        // alert("输入框内容合法");
        // usernameSpanObj.innerHTML = "输入框内容合法";
        usernameSpanObj.innerHTML = "<img src='right.png' width='15' height='15'>";
    } else {
        // alert("输入框内容不合法");
        // usernameSpanObj.innerHTML = "输入框内容不合法";
        usernameSpanObj.innerHTML = "<img src='wrong.png' width='15' height='15'>";
    }
}
</script>
<body>
    用户名：<input type="text" id="username">
    <span id="usernameSpan" style="color: red"></span>
    <br>
    <button onclick="buttonOnclickFun();">验证</button>
</body>

getElementsByName()
返回带有指定名称的对象集合。

<script type="text/javascript">
// 全选
function checkAll() {
    // 根据 name 属性查询多个标签的对象集合
    // 这个集合的操作和数组一样
    // 集合中的每个元素都是 dom 对象
    // 集合中标签的顺序就是在 html 定义的顺序
    var hobbies = document.getElementsByName("hobby");
    // alert(hobbies); // [object NodeList]
    // alert(hobbies.length);  // 4
    // 遍历集合
    for(var i = 0; i < hobbies.length; i++) {
        hobbies[i].checked = true;
    }
}
// 全不选
function checkNo() {
    var hobbies = document.getElementsByName("hobby");
    for(var i = 0; i < hobbies.length; i++) {
        hobbies[i].checked = false;
    }
}
// 反选
function checkReverse() {
    var hobbies = document.getElementsByName("hobby");
    for(var i = 0; i < hobbies.length; i++) {
        hobbies[i].checked = !hobbies[i].checked;
    }
}
</script>
<body>
    兴趣爱好： <br>
    <input type="checkbox" name="hobby" value="c">C <br>
    <input type="checkbox" name="hobby" value="py">Python <br>
    <input type="checkbox" name="hobby" value="java">Java <br>
    <input type="checkbox" name="hobby" value="js">JavaScript <br>
    <button onclick="checkAll();">全选</button>
    <button onclick="checkNo();">全不选</button>
    <button onclick="checkReverse();">反选</button>
</body>

getElementsByTagName()
返回带有指定标签名的对象集合。

<script type="text/javascript">
function onclickFun() {
    // 当标签既没有提供 id 也没有提供 name 属性
    // 可以直接按照标签名来获取所有指定标签的集合
    // 集合的操作同数组一样
    // 集合中的元素都是 dom 对象
    // 集合中对象的顺序和 HTML 文档中定义的顺序一致
    var inputs = document.getElementsByTagName("input");
    for(var i = 0; i < inputs.length; i++) {
        inputs[i].checked = true;
    }
}
</script>
<body>
    兴趣爱好： <br>
    <input type="checkbox"> C <br>
    <input type="checkbox"> Python <br>
    <input type="checkbox"> Java <br>
    <button onclick="onclickFun();">全选</button>
</body>

createElement()
可创建元素节点，此方法可返回一个 Element 对象。

// 创建一个标签对象 此时在内存中
var divElement = document.createElement("div");
// 为标签对象设置中间封装数据的内容
// divElement.innerText = "锋哥，我爱你";
// 也可以使用这种方式
// 创建一个文本对象
var textNode = document.createTextNode("锋哥，我爱你");
divElement.appendChild(textNode);

// 此时 div 标签还在内存中
// 将 div 标签添加为 body 的子元素
// document 有一个 body 的属性 直接代表了 body 标签对象
// 给 body 标签添加一个子元素
document.body.appendChild(divElement);

注：以上三个方法，通常要在页面加载完成之后才执行，才能查询到标签对象。

正则表达式对象

RegExp 对象用于规定在文本中检索的内容。
RegExp 是正则表达式的缩写。
正则表达式是描述字符模式的对象。

语法

var patt=new RegExp(pattern,modifiers);
或者更简单的方式:
var patt=/pattern/modifiers;

pattern（模式）描述了表达式的模式
modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配

修饰符

修饰符用于执行区分大小写和全局匹配:

i：执行对大小写不敏感的匹配
g：执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
m：执行多行匹配

方括号

方括号用于查找某个范围内的字符：

[abc] 查找方括号之间的任何字符
[^abc] 查找任何不在方括号之间的字符
[0-9] 查找任何从 0 至 9 的数字
[a-z] 查找任何从小写 a 到小写 z 的字符
[A-Z] 查找任何从大写 A 到大写 Z 的字符
[A-z] 查找任何从大写 A 到小写 z 的字符
[adgk] 查找给定集合内的任何字符
[^adgk] 查找给定集合外的任何字符
(red|blue|green) 查找任何指定的选项

元字符

元字符（Metacharacter）是拥有特殊含义的字符：

. 查找单个字符，除了换行和行结束符
\w 查找单词字符
\W 查找非单词字符
\d 查找数字
\D 查找非数字字符
\s 查找空白字符
\S 查找非空白字符
\b 匹配单词边界
\B 匹配非单词边界
\0 查找 NULL 字符
\n 查找换行符
\f 查找换页符
\r 查找回车符
\t 查找制表符
\v 查找垂直制表符
\xxx 查找以八进制数 xxx 规定的字符
\xdd 查找以十六进制数 dd 规定的字符
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符

量词

n+ 匹配任何包含至少一个 n 的字符串
n* 匹配任何包含零个或多个 n 的字符串
n? 匹配任何包含零个或一个 n 的字符串
n{X} 匹配包含 X 个 n 的序列的字符串
{X,Y} 匹配包含 X 或 Y 个 n 的序列的字符串
n{X,} 匹配包含至少 X 个 n 的序列的字符串
n$ 匹配任何结尾为 n 的字符串
^n 匹配任何开头为 n 的字符串
?=n 匹配任何其后紧接指定字符串 n 的字符串
?!n 匹配任何其后没有紧接指定字符串 n 的字符串

RegExp 对象方法

compile 编译正则表达式
exec 检索字符串中指定的值。返回找到的值，并确定其位置
test 检索字符串中指定的值。返回 true 或 false

支持正则表达式的 String 对象的方法

search 检索与正则表达式相匹配的值
match 找到一个或多个正则表达式的匹配
replace 替换与正则表达式匹配的子串
split 把字符串分割为字符串数组

节点的常用属性和方法

方法：

getElementByTagName()
获取当前节点的指定标签名的孩子结点
appendChild(oChildNode)
为当前结点添加一个子结点，子结点为 oChildNode

属性：

childNodes
获取当前结点的所有子结点
firstChild
获取当前结点的第一个子结点
lastChild
获取当前结点的最后一个子结点
parentNode
获取当前节点的父结点
nextSibling
获取当前节点的下一个节点（同级）
previousSibling
获取当前节点的上一个节点（同级）
className
用于获取或设置标签的 class 属性值
innerHTML
获取或设置起始标签和结束标签的内容
innerText
获取或设置起始标签或结束标签的文本

查询实例

//1.查找#bj节点
document.getElementById("btn01").onclick = function() {
    var bjObj = document.getElementById("bj");
    alert(bjObj.innerHTML);
};
//2.查找所有li节点
var btn02Ele = document.getElementById("btn02");
btn02Ele.onclick = function(){
    var lis = document.getElementsByTagName("li");
    for(var i = 0; i < lis.length; i++) {
        alert(lis[i].innerHTML);
    }
};
//3.查找name=gender的所有节点
var btn03Ele = document.getElementById("btn03");
btn03Ele.onclick = function(){
    var genders = document.getElementsByName("gender");
    for(var i = 0; i < genders.length; i++) {
        alert(genders[i].value);
    }
};
//4.查找#city下所有li节点
var btn04Ele = document.getElementById("btn04");
btn04Ele.onclick = function(){
    var city = document.getElementById("city");
    var lis = city.getElementsByTagName("li");
    for(var i = 0; i < lis.length; i++) {
        alert(lis[i].innerHTML);
    }

};
//5.返回#city的所有子节点
var btn05Ele = document.getElementById("btn05");
btn05Ele.onclick = function(){
    var city = document.getElementById("city");
    var children = city.children;
    for(var i = 0; i < children.length; i++) {
        alert(children[i].innerHTML);
    }
    var sibling = city.nextElementSibling;
};
//6.返回#phone的第一个子节点
var btn06Ele = document.getElementById("btn06");
btn06Ele.onclick = function(){
    var phone = document.getElementById("phone");
    var firstChild = phone.firstChild;
    alert(firstChild.innerHTML);
};
//7.返回#bj的父节点
var btn07Ele = document.getElementById("btn07");
btn07Ele.onclick = function(){
    var bj = document.getElementById("bj");
    var parentNode = bj.parentNode;
    alert(parentNode.innerText);
};
//8.返回#android的前一个兄弟节点
var btn08Ele = document.getElementById("btn08");
btn08Ele.onclick = function(){
    var android = document.getElementById("android");
    var sibling = android.previousSibling;
    alert(sibling.innerHTML);
};
//9.读取#username的value属性值
var btn09Ele = document.getElementById("btn09");
btn09Ele.onclick = function(){
    var usernameObj = document.getElementById("username");
    alert(usernameObj.value);
};
//10.设置#username的value属性值
var btn10Ele = document.getElementById("btn10");
btn10Ele.onclick = function(){
    var username = document.getElementById("username");
    username.value = "锋哥好帅";
};
//11.返回#bj的文本值
var btn11Ele = document.getElementById("btn11");
btn11Ele.onclick = function(){
    var bj = document.getElementById("bj");
    alert(bj.innerText);
};

原文地址：https://www.cnblogs.com/geekfx/p/12773891.html