JavaScript

教程网站

JavaScript语言诞生主要是完成页面数据验证。因此它运行在客户端，需要浏览器来解析JavaScript代码。

Js是弱类型（变量类型可变），Java是强类型（定义变量时类型已确定）

特点：

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

JS和html代码的结合方式

第一种

在head标签中，或者在body标签中，使用<script></script>标签来书写JS代码

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS02</title>
    <script type="text/javascript">
        alert("Hello,JS!")
    </script>
</head>

<body>

</body>
</html>

alert是JS语言提供的一个警告框函数。它可以接受任意类型的参数，这个参数就是警告框的提示信息。

效果为：

第二种

使用script标签引入单独的JS代码文件。

首先创建JS代码文件JS01.js,代码如下：

1
alert("这是JS01文件的内容：Hello")

然后在html文件中写入代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS02</title>
    <script type="text/javascript" src="JS01.js">
    </script>
</head>

<body>

</body>
</html>

其中script标签的src属性，专门用来引入js代码，也可以用来引入js文件（可以是相对路径，也可以是绝对路径）

script标签可以用来定义js代码（第一种方法），也可以用来引入js文件（第二种方法）。但是这两个功能不能同时使用，只能二选一。

JS语法

变量

JS的变量类型

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

JS中的特殊的值：

  • undefined 未定义，所有js变量为赋初值的时候，默认都是undefined
  • null 空值
  • NaN 全称Not a Number 非数字，非数值

JS中的变量格式：

1
2
var 变量名;
var 变量名 = 值;

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS03</title>
    <script type="text/javascript">
        var i;
        alert(i)     /*undefined*/
        i = 12;
        //typeof()是jS的一个函数，返回变量的数据类型
        alert(typeof (i));  // number
        i = 'abc';
        alert(typeof (i));  // string
        var a = 12
        var b = 'abc'
        alert(a*b)  //NaN是非数字，非数值
    </script>
</head>

<body>

</body>
</html>

关系(比较)运算

  • == 等于，简单的字面值进行比较
  • === 全等于，除了做字面值比较之外，还会比较两个变量的数据类型
  • 至于>,<,>=,<=,!=，则和Java一样。

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS03</title>
    <script type="text/javascript">
        var a = "12"
        var b = 12
        alert(a == b)   // true（只是字面上的等于）
        alert(a === b)  // false（除了比较字面值，还会比较两个变量的数据类型）
    </script>
</head>

<body>

</body>
</html>

逻辑运算

  • && 且运算
  • || 或运算
  • ！ 取反运算

在JS中，所有的变量都可以作为一个boolean类型的变量去使用。

0,null,undefined,"",(空字符串)，都认为是false

&& 且运算

  • 当表达式全为真时，返回最后一个表达式的值
  • 当表达式中有假时，返回第一个表达式为假的值

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS03</title>
    <script type="text/javascript">
        var a = 0
        var b = 1
        var c = null
        var d = '123'
        alert(d&&b)   // 当表达式全为真时，返回最后一个表达式的值,1
        alert(b&&d)   // 当表达式全为真时，返回最后一个表达式的值,即为123
        alert(c&&b&&a)  // 当表达式中有假时，返回第一个表达式为假的值,即为null
    </script>
</head>

<body>

</body>
</html>

|| 或运算

  • 只要有一个表达式为真。就会返回第一个为真的表达式的值

  • 当表达式全为假时，返回最后一个表达式的值

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS03</title>
    <script type="text/javascript">
        var a = 0
        var b = 1
        var c = null
        var d = '123'
        alert(a||b||c||d)   // 只要有一个表达式为真。就会返回第一个为真的表达式的值,即为1
        alert(a||c)         // 当表达式全为假时，返回最后一个表达式的值,即为null
    </script>
</head>

<body>

</body>
</html>

数组

JS中数组定义格式为：

1
2
var 数组名 = []	// 空数组
var 数组名= [1,'abc',true]	// 定义数组同时赋值元素

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS03</title>
    <script type="text/javascript">
        var arr = []
        alert('数组长度为：'+arr.length)   // 0
        arr[0] = 11
        alert('数组长度为：'+arr.length)   //1
        alert(arr[0])       // 11
        alert(arr[1])   // undefined
        // 数组的遍历
        arr[1] = 'hello'
        arr[2] = 'world'
        for (var i = 0;i < arr.length; i++){
            alert(arr[i])
        }
    </script>
</head>

<body>

</body>
</html>

函数

函数的定义

JS中，函数有两种定义方式

使用function关键字定义函数

格式：

1
2
3
function 函数名(形参列表){
	函数体
}

在JS中如果要定义带有返回值的函数，直接在函数体中return即可。（类似python）

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function fun1() {
            alert("调用无参函数fun1")
        }
        function fun2(a,b) {
            alert("调用有参函数fun2，其中a为："+a+"b为："+b)
        }
        function sum(a,b) {
            var n = a+b
            return n
        }
        // 调用函数
        fun1()
        fun2(12,'hello')
        alert('12+13结果为：'+sum(12,13))
    </script>
</head>
<body>

</body>
</html>
第二种定义方式

格式：

1
2
3
var 函数名 = function(形参列表){
	函数体
}

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var fun1 = function () {
            alert('调用无参函数fun1')
        }
        fun1()
    </script>
</head>
<body>

</body>
</html>

注意：在Java中函数允许重载，但在JS中函数重载会直接覆盖掉上一次的定义。

函数的arguments隐形参数

函数的arguments隐形参数，就是在function中不需要定义，但却可以直接用来获取所有参数的变量，称之为隐形参数。（有点类似于python中的*args，或者说JavaSE中的可变参数）

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function fun(a) {
            alert('参数个数为：'+arguments.length)    // 1
            alert(arguments[0])     // 12
            alert(arguments[1])     // undefined
        }
//        fun(12)   // 1,12,undefined
        fun(11,12)  // 2,11,12
    </script>
</head>
<body>

</body>
</html>

编写一个函数，用于计算所有参数相加并返回结果。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function sum(a) {
            var result = 0
            for (var i=0;i<arguments.length;i++){
                if (typeof (arguments[i]=='number')){   // 判断元素是否为数字类型number
                    result = result + arguments[i]
                }
            }
            return result
        }
        alert('12+13+14+15='+sum(12,13,14,15))
        alert('12+13+14='+sum(12,13,14))
        alert('12+13+14+15+22='+sum(12,13,14,15,22))
    </script>
</head>
<body>

</body>
</html>

自定义对象

Object形式的自定义对象

格式：

1
2
3
4
5
6
7
// 对象的定义
var 变量名 = new Object   // 实例对象（空对象）
变量名.属性名 = 值			// 定义一个属性
变量名.函数名 = function(){}	// 定义一个函数
// 对象的访问
变量名.属性
变量名.函数名()

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS05</title>
    <script type="text/javascript">
        var obj = Object()
        alert(typeof (obj)) // object
        obj.name = "jay"
        obj.age = 38
        obj.toString = function () {
            alert("姓名："+this.name+",年龄："+this.age)
        }

        alert(obj.name) // jay
        obj.toString()
    </script>
</head>
<body>

</body>
</html>

{}形式的自定义对象

格式：

1
2
3
4
5
6
7
8
9
// 对象的定义
var 变量名 = {
	属性名: 值,		// 定义一个属性
	属性名: 值,		// 定义一个属性
	函数名: function(){}	// 定义一个函数
}
// 对象的访问
变量名.属性
变量名.函数名()

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS05</title>
    <script type="text/javascript">
        var obj = {
            name: 'jj',
            age: 28,
            toString: function () { alert("姓名："+this.name+",年龄："+this.age)}
        }
        alert(obj.name)
        obj.toString()
    </script>
</head>
<body>
</body>
</html>

JS中的事件

教程网站

事件是电脑输入设备与页面进行交互的响应。

HTML 事件是发生在 HTML 元素上的“事情”。当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。

常用事件：

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

事件的注册（绑定），就是告诉浏览器，当事件响应后要执行哪些操作代码。

事件的注册分为两种：

  • 静态注册事件：通过html标签的事件属性直接给出事件响应后的代码
  • 动态注册事件：先通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function(){}这种形式给出事件响应后的代码

onload 加载完成事件

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS06</title>
    <script type="text/javascript">
        // onload事件的方法
        function onloadFun() {
            alert('静态注册onload事件的js代码')
        }
        onloadFun()

        // onload事件的动态注册（固定写法）
        window.onload = function () {
            alert('动态注册onload事件')
        }
    </script>
</head>

<body>
</body>
</html>

onclick 单击事件

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS06</title>
    <script type="text/javascript">
        function onclickFun() {
            alert('静态注册onclick事件')
        }
//      动态注册onclick事件
        window.onload = function () {
            // 1.获取标签内容
            var element = document.getElementById('btn01');
            // 2.通过标签对象.事件名 = function(){}
            element.onclick = function () {
                alert('动态注册onclick事件')
            }
        }
    </script>
</head>

<body>
    <!--静态注册onclick事件-->
    <button onclick="onclickFun()">按钮1</button>
    <!--动态注册onclick事件-->
    <button id="btn01">按钮2</button>
</body>
</html>

其中document是JS语言提供的一个对象(文档)，其中的getElementById方法是通过id获取标签对象。关于document后续会讲到。

onblur 失去焦点事件

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS07</title>
    <script type="text/javascript">
        // 静态注册onblur失去焦点事件
        function onblurFun() {
            // console是控制台对象，是有JS语言提供，专门用来向浏览器的控制台打印输出，用于测试
            // log()是打印方法
            console.log('静态注册onblur事件')
        }
//        动态注册onblur事件
        window.onload = function () {
            // 1.获取标签对象
            var element = document.getElementById('pawd');
            // 2.通过标签名.事件名 = function(){}
            element.onblur = function () {
                console.log('动态注册onblur事件')
            }
        }
    </script>
</head>
<body>
    用户名:<input type="text" onblur="onblurFun()"><br/>
    密码： <input id="pawd" type="password" >
</body>
</html>

onchange 内容发生改变事件

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS08</title>
    <script type="text/javascript">
//        静态onchange事件
        function onchangeFun() {
            alert('英雄选择成功！')
        }
//        动态onchange事件
        window.onload = function () {
            // 1.获取标签对象
            var element = document.getElementById('select01');
            // 2.通过标签名.事件名 = function(){}
            element.onchange = function () {
                alert('爱好选择成功！')
            }
        }

    </script>
</head>

<body>
    请选择你的英雄：
    <select onchange="onchangeFun()">
        <option>jj</option>
        <option>jay</option>
        <option>rick</option>
        <option>hello</option>
    </select>

    请选择你的爱好：    <!--动态onchange事件-->
    <select id="select01">
        <option>js</option>
        <option>java</option>
        <option>python</option>
        <option>c++</option>
    </select>
</body>
</html>

onsubmit 表单提交事件

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS09</title>
    <script type="text/javascript">
        // 静态注册
        function onsubmitFun() {
            alert('静态注册提交')
        }
        // 动态注册
        window.onload = function () {
            // 1.获取标签名
            var element = document.getElementById('form01');
            // 2.通过标签名.事件名 = function(){}
            element.onsubmit = function () {
                // 要验证所有表单项是否合法，只要有一个不合法就要阻止
                alert('动态注册表提交，发现不合法！')
                return false
            }
        }
    </script>
</head>
<body>
    <!--return false可以阻止表单提交-->
    <form action="http://www.baidu.com" method="get" onsubmit="return onsubmitFun()">
        <input type="submit" value="静态注册">
    </form>
    <form action="http://www.baidu.com" method="get" id="form01">
        <input type="submit" value="动态注册">
    </form>

</body>
</html>

DOM模型

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。
一个web页面是一个文档。这个文档可以在浏览器窗口或作为HTML源码显示出来。但上述两个情况中都是同一份文档。文档对象模型（DOM）提供了对同一份文档的另一种表现，存储和操作的方式。 DOM是web页面的完全的面向对象表述，它能够使用如 JavaScript等脚本语言进行修改。

DOM Document Object Model 文档对象模型

就是把文档中的标签、属性、文本转换成对象来管理

教程网站

Document对象

document对象的理解：

  • document管理了所有的html文档内容
  • document是一种树结构文档，有层级关系
  • document把所有的标签都对象化
  • 可以通过document访问所有的标签对象

document对象中的方法

教程网站

  • document.getElementById(elementId) 通过标签id的属性查找标签dom对象，elementId是标签id属性值
  • document.getElementByName(elementName) 通过标签的name属性查找dom对象，elementName标签的name属性值
  • document.getElementByTagName(tagName) 通过标签名查找标签dom对象。tagname是标签名
  • document.createElement(tagName) 通过给定的标签名，创建一个标签对象。tagName是要创建的标签名

注意：document对象的三个查询方法，如果有id属性，优先使用getElementById方法来查询；如果没有id属性，优先使用getElementByName方法来查询；如果id属性和name属性都没有，则使用getElementByTagName方法来查询。

以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。(注意下代码执行顺序即可)

getElementById

需求：当用户点击了校验按钮，要获取输出框中的内容，然后验证其是否合法。验证规则是：必须由字母、数字、下划线组成，且长度为5-12位。

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01</title>
    <script type="text/javascript">
        function onclickFun() {
            // 1.我们要操作一个标签的时候，一定要先获取这个标签对象
            var usernameobj = document.getElementById('username');  // 一个dom对象
            var usernameText = usernameobj.value;   // 获取到了输入框中的内容value(用户名)
//            alert(usernameText)
            // 验证字符串是否符合某个规则，需要使用正则表达式
            var patt = /^\w{5,12}$/
//          test()方法用于测试某个字符串是否匹配正则表达式，是返回true；不是返回false
            if (patt.test(usernameText)){
                alert('用户名合法！')
            }else {
                alert('用户名不合法！')
            }
        }
    </script>
</head>

<body>
    用户名：<input type="text" id="username" value="请输入用户名">
<button onclick="onclickFun()">检验</button>

</body>
</html>

其中关于JS的正则表达式在后面有说明，其他说明在注释里。

稍微改进一下，上述代码可以如下修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01</title>
    <script type="text/javascript">
        function onclickFun() {
            // 1.我们要操作一个标签的时候，一定要先获取这个标签对象
            var usernameObj = document.getElementById('username');  // 一个dom对象
            var usernameText = usernameObj.value;   // 获取到了输入框中的内容value(用户名)
//            alert(usernameText)
            // 验证字符串是否符合某个规则，需要使用正则表达式
            var patt = /^\w{5,12}$/
            var spanObj = document.getElementById('usernamespan');
//            alert(spanObj.innerHTML)    // innerHTML 表示起始标签和结束标签中的内容，这个属性可读可写（也可以写入标签，比如说img标签）
//          test()方法用于测试某个字符串是否匹配正则表达式，是返回true；不是返回false
            if (patt.test(usernameText)){
//                alert('用户名合法！')
                spanObj.innerHTML = '用户名合法！'
            }else {
//                alert('用户名不合法！')
                spanObj.innerHTML = '用户名不合法!'
            }
        }
    </script>
</head>

<body>
    用户名：<input type="text" id="username" value="请输入用户名"><br/>
    <button onclick="onclickFun()">校验</button><br/>
    <span style="color: red" id="usernamespan"></span>


</body>
</html>

效果如下：

getElementByName

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document02</title>
    <script type="text/javascript">
        function checkAll() {  // 全选
            var hobbies = document.getElementsByName('hobby');  // object NodeList,返回一个标签对象集合，集合点顺序集为标签在html文件中的顺序
//          checked表示复选框的选中状态，选中为true，不选择为false。checked这个属性可读可写
            for(var i = 0;i<hobbies.length;i++){
                hobbies[i].checked = true
            }
        }
        function checkNone() {  // 全不选
            var hobbies = document.getElementsByName('hobby');  // object NodeList,返回一个标签对象集合，集合点顺序集为标签在html文件中的顺序
//          checked表示复选框的选中状态，选中为true，不选择为false。checked这个属性可读可写
            for(var i = 0;i<hobbies.length;i++){
                hobbies[i].checked = false
            }
        }
        function checkReverse() {   // 反选
            var hobbies = document.getElementsByName('hobby');  // object NodeList,返回一个标签对象集合，集合点顺序集为标签在html文件中的顺序
//          checked表示复选框的选中状态，选中为true，不选择为false。checked这个属性可读可写
            for(var i = 0;i<hobbies.length;i++){
                hobbies[i].checked = !hobbies[i].checked
//                if (hobbies[i].checked){
//                    hobbies[i].checked = false
//                } else {
//                    hobbies[i].checked = true
//                }
            }
        }
    </script>
</head>
<body>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="c++">c++
    <input type="checkbox" name="hobby" value="java">java
    <input type="checkbox" name="hobby" value="python">python
    <br/>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNone()">全不选</button>
    <button onclick="checkReverse()">反选</button>

</body>
</html>

效果如下：

getElementByTagName

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document03</title>
    <script type="text/javascript">
        function checkAll() {  // 全选
            var hobbies = document.getElementsByTagName('input');  // object NodeList,返回一个标签对象集合，集合点顺序集为标签在html文件中的顺序
//          checked表示复选框的选中状态，选中为true，不选择为false。checked这个属性可读可写
            for(var i = 0;i<hobbies.length;i++){
                hobbies[i].checked = true
            }
        }
        function checkNone() {  // 全不选
            var hobbies = document.getElementsByTagName('input');  // object NodeList,返回一个标签对象集合，集合点顺序集为标签在html文件中的顺序
//          checked表示复选框的选中状态，选中为true，不选择为false。checked这个属性可读可写
            for(var i = 0;i<hobbies.length;i++){
                hobbies[i].checked = false
            }
        }
        function checkReverse() {   // 反选
            var hobbies = document.getElementsByTagName('input');  // object NodeList,返回一个标签对象集合，集合点顺序集为标签在html文件中的顺序
//          checked表示复选框的选中状态，选中为true，不选择为false。checked这个属性可读可写
            for(var i = 0;i<hobbies.length;i++){
                hobbies[i].checked = !hobbies[i].checked
//                if (hobbies[i].checked){
//                    hobbies[i].checked = false
//                } else {
//                    hobbies[i].checked = true
//                }
            }
        }
    </script>
</head>
<body>
兴趣爱好：
<input type="checkbox" value="c++">c++
<input type="checkbox"  value="java">java
<input type="checkbox"  value="python">python
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNone()">全不选</button>
<button onclick="checkReverse()">反选</button>

</body>
</html>

效果如上。

createElement

要使用js代码来创建html标签，并显示在页面上。简单例子如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document04</title>
    <script type="text/javascript">
        window.onload = function () {
            var divObj = document.createElement('div');   // 内存中，<div></div>
            divObj.innerHTML = 'hello,world!<br/>'   // 内存中，<div>hello,world!<br/></div>
            document.body.appendChild(divObj)   // 将<div>hello,world!</div>放到body标签中(注意appendChild方法，添加子元素)

            //文本节点对象
            var textNode = document.createTextNode('文本节点对象');   // textNode为一个文本节点对象
            divObj.appendChild(textNode)    // 添加子元素到body标签，直接为<div>文本节点对象</div>
        }
    </script>
</head>
<body>

</body>
</html>

节点的常用属性和方法

教程网站

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

HTML DOM Tree 实例

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

常用方法：

  • document.getElementById(elementId) 通过标签id的属性查找标签dom对象，elementId是标签id属性值
  • document.getElementByName(elementName) 通过标签的name属性查找dom对象，elementName标签的name属性值
  • document.getElementByTagName(tagName) 通过标签名查找标签dom对象。tagname是标签名
  • document.createElement(tagName) 通过给定的标签名，创建一个标签对象。tagName是要创建的标签名
  • getElementByTagName() 通过具体的元素节点调用
  • appendChild(oChildNode)

常用属性：

  • childNodes 获取当前节点的所有子节点
  • firstChild 获取当前节点的第一个子节点
  • lastChild 获取当前节点的最后一个字节点
  • parentNode 获取当前节点的父节点
  • nextSibling 获取当前节点的下一个节点
  • previousSibling 获取当前节点的上一个节点
  • className 获取标签的class属性值（可读可写）
  • innerHTML 获取起始标签和结束标签中的内容（可读可写）
  • innerText 获取起始标签和结束标签中的文本（可读可写）

节点常用属性和方法更多说明见教程

DOM查询练习：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05</title>
    <link rel="stylesheet" type="text/css" href="style/css.css">
    <script type="text/javascript">
        window.onload = function () {
            // 1.查找#beijing节点
            document.getElementById('btn01').onclick = function () {
                var bjObj = document.getElementById("beiJing");
                alert(bjObj.innerHTML)
            }

            // 2.查找所有的li节点
            var btn02Obj = document.getElementById('btn02');
            btn02Obj.onclick = function () {
                var li_list = document.getElementsByTagName('li');
                alert(li_list.length)
            }

            // 3.查找name=gender的所有节点
            var btn03Obj = document.getElementById('btn03');
            btn03Obj.onclick = function () {
                var gender_list = document.getElementsByName('gender');
                alert(gender_list.length)
            }

            // 4.返回#city下所有li节点
            var btn04Obj = document.getElementById('btn04');
            btn04Obj.onclick = function () {
                var city_li_list = document.getElementById('city').getElementsByTagName('li');  // 先获取city节点，再获取city节点下的li节点
                alert(city_li_list.length)
            }

            // 5.返回#city的所有子节点
            var btn05Obj = document.getElementById('btn05');
            btn05Obj.onclick = function () {
                alert(document.getElementById('city').childNodes.length)    // 获取id为city的节点，然后再通过city获取子节点
            }

            // 6.返回#phone的第一个子节点内容
            var btn06Obj = document.getElementById('btn06');
            btn06Obj.onclick = function () {
                alert(document.getElementById('phone').firstElementChild.innerHTML)
            }

            // 7.返回#beiJing的父节点内容
            var btn07Obj = document.getElementById('btn07');
            btn07Obj.onclick = function () {
                alert(document.getElementById('beiJing').parentNode.innerHTML)
            }

            // 8.返回#android的前一个兄弟节点内容
            var btn08Obj = document.getElementById('btn08');
            btn08Obj.onclick = function () {
                alert(document.getElementById('android').previousSibling.innerHTML)
            }

            // 9.返回#username的value属性值
            var btn09Obj = document.getElementById('btn09');
            btn09Obj.onclick = function () {
                alert(document.getElementById('username').value)
            }

            // 10.重置#username的value属性值
            var btn10Obj = document.getElementById('btn10');
            btn10Obj.onclick  =function () {
                document.getElementById('username').value = ''
            }

            // 11.返回#beiJing的文本值
            var btn11Obj = document.getElementById('btn11');
            btn11Obj.onclick = function () {
                alert(document.getElementById('beiJing').innerText)
            }
        }
    </script>
</head>
<body>
    <div id="total">
        <div class="inner">
            <p>请选择城市</p>
            <ul id="city">
                <li id="beiJing">北京</li>
                <li>深圳</li>
                <li>杭州</li>
                <li>上海</li>
            </ul>
            <br/>
            <br/>
            <p>请选择游戏</p>
            <ul id="game">
                <li id="war3">魔兽争霸</li>
                <li>星际争霸</li>
                <li>反恐精英</li>
                <li>欢乐斗地主</li>
            </ul>
            <br/>
            <br/>
            <p>请选择操作系统</p>
            <ul id="phone">
                <li>IOS</li>
                <li id="android">Android</li>
                <li>Windows Phone</li>
            </ul>
        </div>
        <br/>
        <br/>

        <div class="inner">
            性别:
            <input type="radio" name="gender" value="male">男      <!--radio是单选按钮-->
            <input type="radio" name="gender" value="famale">女
            <br/>
            <br/>
            姓名：
            <input type="text" name="name" id="username" value="请输入姓名">
        </div>
    </div>

    <div id="buttonList">
        <div><button id="btn01">查找#beiJing节点</button> </div>
        <div><button id="btn02">查找所有的li节点</button> </div>
        <div><button id="btn03">查找name=gender的所有节点</button> </div>
        <div><button id="btn04">返回#city下所有li节点</button> </div>
        <div><button id="btn05">返回#city的所有子节点</button> </div>
        <div><button id="btn06">返回#phone的第一个子节点内容</button> </div>
        <div><button id="btn07">返回#beiJing的父节点内容</button> </div>
        <div><button id="btn08">返回#android的前一个兄弟节点内容</button> </div>
        <div><button id="btn09">返回#username的value属性值</button> </div>
        <div><button id="btn10">重置#username的value属性值</button> </div>
        <div><button id="btn11">返回#beiJing的文本值</button> </div>
    </div>
</body>
</html>

css文件内容就不写了，效果如下：

正则表达式

正则表达式是构成搜索模式（search pattern）的字符序列。当搜索文本中的数据时，可使用搜索模式来描述您搜索的内容。
正则表达式可以是单字符，或者更复杂的模式。正则表达式可用于执行所有类型的文本搜索和文本替换操作。

格式：

1
2
3
4
// 语法
/pattern/modifiers;
// 实例
var patt = /hello/i;

其中，/hello/i 是一个正则表达式。hello是模式（pattern）（在搜索中使用），i 是修饰符（把搜索修改为大小写不敏感）。

修饰符：

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

日后需要用到的话有更详细的教程