3.6.6、正则高阶

如果我们要检查或者说判断是否以某个字符或者字符序列开头或者结尾就会使用^和$。

^ ：表示开头，注意它在[^字符序列]表达的意思不一样
$ ：表示结尾

需求描述：检查一个字符串中是否以a开头

var str = "abcabca";
var reg = /^a/;
console.log(reg.test(str));

需求描述：检查一个字符串中是否以a结尾

var str = "abcabca";
var reg = /a$/;
console.log(reg.test(str));

那如果我们想要检查一个字符串中是否含有.和\就会使用转义字符

\. ：表示.
\\ ：表示\

注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，如果要使用\则需要使用\\来代替

var reg1 = /\./;
var reg2 = /\\/;
var reg3 = new RegExp("\\.");
var reg4 = new RegExp("\\\\");

除了以上两种特殊的字符，其实还有很多如下所示：

\w ：任意字母、数字、，相当于[A-z0-9]

\W ：除了字母、数字、，相当于[^A-z0-9]

\d ：任意的数字，相当于[0-9]

\D ：除了任意的数字，相当于[^0-9]

\s ：空格

\S ：除了空格

\b ：单词边界

\B ：除了单词边界

这里边我们就演示最后四个，其它的都比较简单，后边的案例也会涉及，这里就不演示了

需求描述：创建一个正则表达式，去除掉字符串中的前后的空格

var str = "  hello child  "
var reg = /^\s*|\s*$/g;
console.log(str);
str = str.replace(reg, "");
console.log(str);

需求描述：创建一个正则表达式，检查一个字符串中是否含有单词child

var str = "hello child"
var reg = /\bchild\b/;
console.log(reg.test(str));

3.6.7、正则案例

3.6.7.1、检查手机号

var phoneStr = "15131494600";
var phoneReg = /^1[3-9][0-9]{9}$/;
console.log(phoneReg.test(phoneStr));

3.6.7.2、检查邮箱号

var emailStr = "abc.def@163.com";
var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
console.log(emailReg.test(emailStr));

第四章 JavaScript DOM

4.1、DOM概述

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被结构化为对象树：

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

JavaScript 能改变页面中的所有 HTML 元素

JavaScript 能改变页面中的所有 HTML 属性

JavaScript 能改变页面中的所有 CSS 样式

JavaScript 能删除已有的 HTML 元素和属性

JavaScript 能添加新的 HTML 元素和属性

JavaScript 能对页面中所有已有的 HTML 事件作出反应

JavaScript 能在页面中创建新的 HTML 事件

换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

4.2、DOM文档节点

4.2.1、节点概述

节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。

比如：html标签、属性、文本、注释、整个文档等都是一个节点。

虽然都是节点，但是实际上它们的具体类型是不同的。

比如：标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。

节点的类型不同，属性和方法也都不尽相同。

节点：Node——构成HTML文档最基本的单元。

常用节点分为四类：

文档节点：整个HTML文档

元素节点：HTML文档中的HTML标签

属性节点：元素的属性

文本节点：HTML标签中的文本内容

4.2.2、节点属性

4.2.3、文档节点

文档节点（Document）代表的是整个HTML文档，网页中的所有节点都是它的子节点。

document对象作为window对象的属性存在的，我们不用获取可以直接使用。

通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。

4.2.4、元素节点

HTML中的各种标签都是元素节点（Element），这也是我们最常用的一个节点。

浏览器会将页面中所有的标签都转换为一个元素节点，我们可以通过document的方法来获取元素节点。

例如：document.getElementById()，根据id属性值获取一个元素节点对象。

4.2.5、属性节点

属性节点（Attribute）表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。可以通过元素节点来获取指定的属性节点。

例如：元素节点.getAttributeNode("属性名")，根据元素节点的属性名获取一个属性节点对象。

注意：我们一般不使用属性节点。

4.2.6、文本节点

文本节点（Text）表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点，它包括可以字面解释的纯文本内容。文本节点一般是作为元素节点的子节点存在的。获取文本节点时，一般先要获取元素节点，在通过元素节点获取文本节点。

例如：元素节点.firstChild;，获取元素节点的第一个子节点，一般为文本节点。

4.3、DOM文档操作

文档对象代表您的网页,，如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。

下面是一些如何使用 document 对象来访问和操作 HTML 的实例。

4.3.1、查找 HTML 元素

4.3.1.1、方法介绍

4.3.1.2、方法演示

需求描述：创建一个按钮，通过id获取按钮节点对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">我是按钮</button>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var btn = document.getElementById("btn");
    console.log(btn);
</script>
</body>
</html>

需求描述：创建一个按钮，通过标签名获取按钮节点对象数组

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button>我是按钮</button>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var btn = document.getElementsByTagName("button");
    console.log(btn);
</script>
</body>
</html>

需求描述：创建一个按钮，通过类名获取按钮节点对象数组

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button class="btn">我是按钮</button>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var btn = document.getElementsByClassName("btn");
    console.log(btn);
</script>
</body>
</html>

需求描述：创建一个按钮，通过CSS选择器选择该按钮

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button class="btn">我是按钮</button>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var btn = document.querySelector(".btn");
    console.log(btn);
</script>
</body>
</html>

需求描述：创建一个无序列表，通过CSS选择器选择该列表的所有li

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul class="list">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var list = document.querySelectorAll(".list li");
    console.log(list);
</script>
</body>
</html>

4.3.2、获取 HTML 的值

4.3.2.1、方法介绍

4.3.2.2、方法演示

需求描述：创建一个按钮，然后获取按钮的文本内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">我是按钮</button>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var btn = document.getElementById("btn");
    console.log(btn.innerText);
</script>
</body>
</html>

需求描述：创建一个div，然后在div中插入一个h1标题，获取div中的html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box">
    <h1>我是Box中的大标题</h1>
</div>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var box = document.getElementById("box");
    console.log(box.innerHTML);
</script>
</body>
</html>

需求描述：创建一个超链接，默认为空，设置href属性为https://www.baidu.com ，使用JavaScript代码读取href属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<a id="a" href="https://www.baidu.com">打开百度，你就知道！</a>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var a = document.getElementById("a");
    console.log(a.href);
</script>
</body>
</html>

需求描述：创建一个超链接，默认为空，设置href属性为https://www.baidu.com ，使用JavaScript代码读取href属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<a id="a" href="https://www.baidu.com">打开百度，你就知道！</a>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var a = document.getElementById("a");
    console.log(a.getAttribute("href"));
</script>
</body>
</html>

需求描述：创建一个正方形div，默认颜色为红色，使用JavaScript代码获取div的宽度

注意：如果CSS的样式名中含有-，这种名称在JS中是不合法的比如background-color，需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的字母大写，我们通过style属性设置的样式都是行内样式，同样的获取也是行内样式，而行内样式有较高的优先级，所以通过JS修改的样式往往会立即显示，但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加!important

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="width: 100px;height: 100px;background: red;" id="box"></div>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var box = document.getElementById("box");
    console.log(box.style.width);
</script>
</body>
</html>

拓展知识1：

通过style属性设置和读取的都是内联样式，无法读取样式表中的样式或者说正在应用的样式，如果想要读取当前正在应用的样式属性我们可以使用元素.currentStyle.样式名来获取元素的当前显示的样式，它可以用来读取当前元素正在显示的样式，如果当前元素没有设置该样式，则获取它的默认值，但是currentStyle只有IE浏览器支持，其它的浏览器都不支持，在其它浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式，这个方法是window的方法，可以直接使用，但是需要两个参数：

第一个参数：要获取样式的元素

第二个参数：可以传递一个伪元素，一般都传null

该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过对象.样式名来读取样式，如果获取的样式没有设置，则会获取到真实的值，而不是默认值，比如：没有设置width，它不会获取到auto，而是一个长度，但是该方法不支持IE8及以下的浏览器。通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性，因此，我们可以写一个适配各个浏览器的读取元素样式的方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*样式表的样式*/
        #box {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
<div style="width: 100px;height: 100px;" id="box"></div>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    /*通用的获取元素样式的方法*/
    function getStyle(obj, name) {
        if (window.getComputedStyle) {
            //正常浏览器的方式，具有getComputedStyle()方法
            return getComputedStyle(obj, null)[name];
        } else {
            //IE8的方式，没有getComputedStyle()方法
            return obj.currentStyle[name];
        }
    }
    var box = document.getElementById("box");
    console.log(getStyle(box, "width"));
    console.log(getStyle(box, "height"));
    console.log(getStyle(box, "background-color"));
</script>
</body>
</html>

谷歌浏览器：

火狐浏览器：

IE9-IE11 浏览器：

IE5-IE8 浏览器：

在IE5-IE8 浏览器中，这不是还不一样吗？因此我们建议设置颜色数值一般采用rgb或者rgba，最好不要采用英文单词的这种颜色值，这样最终展示出来的效果就一致了。

拓展知识2：编写一段兼容性代码，用来获取任意标签的文本内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<a href="https://www.baidu.com" id="a">打开百度，你就知道！</a>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var a = document.getElementById("a");
    console.log(getInnerText(a));
    /*获取任意标签的内容*/
    function getInnerText(element) {
        // 判断浏览器是否支持textContent,如果支持，则使用textContent获取内容，否则使用innerText获取内容。
        if(typeof element.textContent == "undefined") {
            return element.innerText;
        } else {
            return element.textContent;
        }
    }
</script>
</body>
</html>

谷歌浏览器：

火狐浏览器：

IE5-IE11浏览器：

4.3.3、改变 HTML 的值

4.3.3.1、方法介绍谷歌浏览器：

火狐浏览器：

IE5-IE11浏览器：

4.3.3、改变 HTM/L 的值

4.3.3.1、方法介绍

4.3.3.2、方法演示

需求描述：创建一个按钮，然后改变按钮的文本内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">我是按钮</button>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var btn = document.getElementById("btn");
    btn.innerText = "我是JavaScript的按钮";
    console.log(btn);
</script>
</body>
</html>

需求描述：创建一个div，然后在div中插入一个h1标题

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box"></div>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var box = document.getElementById("box");
    box.innerHTML = "<h1>我是Box中的大标题</h1>";
    console.log(box);
</script>
</body>
</html>

**需求描述：创建一个超链接，默认为空，使用JavaScript代码设置href属性为https://www.baidu.com **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<a id="a" href="">打开百度，你就知道！</a>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var a = document.getElementById("a");
    a.href="https://www.baidu.com";
    console.log(a);
</script>
</body>
</html>

**需求描述：创建一个超链接，默认为空，使用JavaScript代码设置href属性为https://www.baidu.com **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<a id="a" href="">打开百度，你就知道！</a>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var a = document.getElementById("a");
    a.setAttribute("href", "https://www.baidu.com");
    console.log(a);
</script>
</body>
</html>

需求描述：创建一个正方形div，默认颜色为红色，使用JavaScript代码改变为绿色

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="width: 100px;height: 100px;background: red;" id="box"></div>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var box = document.getElementById("box");
    box.style.background = "green";
    console.log(box);
</script>
</body>
</html>

拓展知识1：

修改节点的内容除了常用的innerHTML和innerText之外，还有insertAdjacentHTML和insertAdjacentText方法，可以在指定的地方插入内容。insertAdjacentText方法与insertAdjacentHTML方法类似，只不过是插入纯文本，参数相同。

语法说明：

object.insertAdjacentHTML(where,html);
object.insertAdjacentText(where,text)

参数说明：

where：

beforeBegin：插入到开始标签的前面

beforeEnd：插入到结束标签的前面

afterBegin：插入到开始标签的后面

afterEnd：插入到结束标签的后面

html：一段html代码

text：一段文本值

注意事项：

这两个方法必须等文档加载好后才能执行，否则会出错。

insertAdjacentText只能插入普通文本，insertAdjacentHTML插入html代码。

使用insertAdjacentHTML方法插入script脚本文件时，必须在script元素上定义defer属性。

使用insertAdjacentHTML方法插入html代码后，页面上的元素集合将发生变化。

insertAdjacentHTML方法不适用于单个的空的元素标签(如img，input等)。

案例演示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="insert">
    <p>你是我的小丫小苹果</p>
</div>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var div = document.getElementById("insert");
    div.insertAdjacentHTML('beforeBegin', '你是我的小丫小苹果');
</script>
</body>
</html>

拓展知识2：编写一段兼容性代码，用来设置任意标签的文本内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<a href="https://www.baidu.com" id="a">打开百度，你就知道！</a>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var a = document.getElementById("a");
    setInnerText(a, "你要打开百度吗？");
    console.log(getInnerText(a));
    /*获取任意标签的内容*/
    function getInnerText(element) {
        // 判断浏览器是否支持textContent,如果支持，则使用textContent获取内容，否则使用innerText获取内容。
        if (typeof element.textContent == "undefined") {
            return element.innerText;
        } else {
            return element.textContent;
        }
    }
    /*设置任意标签的内容*/
    function setInnerText(element, text) {
        // 判断浏览器是否支持textContent,如果支持，则使用textContent设置内容，否则使用innerText设置内容。
        if (typeof element.textContent == "undefined") {
            return element.innerText = text;
        } else {
            return element.textContent = text;
        }
    }
</script>
</body>
</html>

谷歌浏览器：

火狐浏览器：

IE5-IE11浏览器：

4.3.4、修改 HTML 元素

4.3.4.1、方法介绍

4.3.4.2、方法演示

案例演示1：创建一个ul列表，然后在该列表中追加4个li标签

第一种方法：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var ul = document.createElement("ul");
    var li1 = document.createElement("li");
    var text1 = document.createTextNode("列表项1");
    li1.appendChild(text1);
    ul.appendChild(li1);
    var li2 = document.createElement("li");
    var text2 = document.createTextNode("列表项2");
    li2.appendChild(text2);
    ul.appendChild(li2);
    var li3 = document.createElement("li");
    var text3 = document.createTextNode("列表项3");
    li3.appendChild(text3);
    ul.appendChild(li3);
    var li4 = document.createElement("li");
    var text4 = document.createTextNode("列表项4");
    li4.appendChild(text4);
    ul.appendChild(li4);
    document.getElementsByTagName("body")[0].appendChild(ul);
</script>
</body>
</html>

第二种方法：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var ul = document.createElement("ul");
    var li1 = document.createElement("li");
    li1.innerHTML = "列表项1";
    ul.appendChild(li1);
    var li2 = document.createElement("li");
    li2.innerHTML = "列表项2";
    ul.appendChild(li2);
    var li3 = document.createElement("li");
    li3.innerHTML = "列表项3";
    ul.appendChild(li3);
    var li4 = document.createElement("li");
    li4.innerHTML = "列表项4";
    ul.appendChild(li4);
    document.getElementsByTagName("body")[0].appendChild(ul);
</script>
</body>
</html>

第三种方法：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var ul = document.createElement("ul");
    var li1 = "<li>列表项1</li>";
    var li2 = "<li>列表项2</li>";
    var li3 = "<li>列表项3</li>";
    var li4 = "<li>列表项4</li>";
    ul.innerHTML = li1 + li2 + li3 + li4;
    document.getElementsByTagName("body")[0].appendChild(ul);
</script>
</body>
</html>

案例演示2：创建一个ul列表，里边有四个li子元素，删除第一个li，替换最后一个li

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul id="ul">
    <li id="first">列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li id="last">列表项4</li>
</ul>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var ul = document.getElementById("ul");
    var first = document.getElementById("first");
    var last = document.getElementById("last");
    /*删除第一个*/
    ul.removeChild(first);
    /*替换最后一个*/
    var replaceLi = document.createElement("li");
    replaceLi.innerHTML = "列表4的替换";
    ul.replaceChild(replaceLi, last);
</script>
</body>
</html>

案例演示3：创建一个ul列表，里边有四个li子元素，在第一个li前边插入一个id为zero的li

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul id="ul">
    <li id="first">列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var ul = document.getElementById("ul");
    var first = document.getElementById("first");
    var zero = document.createElement("li");
    zero.innerHTML = "列表0的新增";
    ul.insertBefore(zero, first);
</script>
</body>
</html>

拓展知识：

动态判断、添加、删除、切换样式，支持IE5-IE11，谷歌浏览器、火狐浏览器等

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .b1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .b2 {
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<button id="btn0">判断b2样式</button>
<button id="btn1">添加b2样式</button>
<button id="btn2">删除b2样式</button>
<button id="btn3">切换b2样式</button>
<br>
<br>
<div id="box" class="b1"></div>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var btn0 = document.getElementById("btn0");
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    var btn3 = document.getElementById("btn3");
    var box = document.getElementById("box");
    btn0.onclick = function () {
        alert(hasClass(box, "b2"));
    };
    btn1.onclick = function () {
        addClass(box, "b2");
    };
    btn2.onclick = function () {
        removeClass(box, "b2");
    };
    btn3.onclick = function () {
        toggleClass(box, "b2");
    };
    /*
     * 判断一个元素中是否含有指定的class属性值
     * 如果有该class，则返回true，没有则返回false
     */
    function hasClass(obj, cn) {
        var reg = new RegExp("\\b" + cn + "\\b");
        return reg.test(obj.className);
    }
    /*
     * 向一个元素中添加指定的class属性值
     * 参数:
     *  obj 要添加class属性的元素
     *  cn 要添加的class值
     */
    function addClass(obj, cn) {
        // 检查obj中是否含有cn
        if (!hasClass(obj, cn)) {
            obj.className += " " + cn;
        }
    }
    /*
     * 删除一个元素中的指定的class属性
     */
    function removeClass(obj, cn) {
        var reg = new RegExp("\\b" + cn + "\\b");
        obj.className = obj.className.replace(reg, "");
    }
    /*
     * toggleClass可以用来切换一个类
     *  如果元素中具有该类，则删除
     *  如果元素中没有该类，则添加
     */
    function toggleClass(obj, cn) {
        // 判断obj中是否含有cn
        if (hasClass(obj, cn)) {
            // 存在，则删除
            removeClass(obj, cn);
        } else {
            // 没有，则添加
            addClass(obj, cn);
        }
    }
</script>
</body>
</html>

重学JavaWeb第三天（五）

3.6.6、正则高阶

3.6.7、正则案例

3.6.7.1、检查手机号

3.6.7.2、检查邮箱号

第四章 JavaScript DOM

4.1、DOM概述

4.2、DOM文档节点

4.2.1、节点概述

4.2.2、节点属性

4.2.3、文档节点

4.2.4、元素节点

4.2.5、属性节点

4.2.6、文本节点

4.3、DOM文档操作

4.3.1、查找 HTML 元素

4.3.1.1、方法介绍

4.3.1.2、方法演示

4.3.2、获取 HTML 的值

4.3.2.1、方法介绍

4.3.2.2、方法演示

4.3.3、改变 HTML 的值

4.3.3.1、方法介绍谷歌浏览器：

4.3.3、改变 HTM/L 的值

4.3.3.1、方法介绍

4.3.3.2、方法演示

4.3.4、修改 HTML 元素

4.3.4.1、方法介绍

4.3.4.2、方法演示

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

重学JavaWeb第三天（五）

3.6.6、正则高阶

3.6.7、正则案例

3.6.7.1、检查手机号

3.6.7.2、检查邮箱号

第四章 JavaScript DOM

4.1、DOM概述

4.2、DOM文档节点

4.2.1、节点概述

4.2.2、节点属性

4.2.3、文档节点

4.2.4、元素节点

4.2.5、属性节点

4.2.6、文本节点

4.3、DOM文档操作

4.3.1、查找 HTML 元素

4.3.1.1、方法介绍

4.3.1.2、方法演示

4.3.2、获取 HTML 的值

4.3.2.1、方法介绍

4.3.2.2、方法演示

4.3.3、改变 HTML 的值

4.3.3.1、方法介绍谷歌浏览器：

4.3.3、改变 HTM/L 的值

4.3.3.1、方法介绍

4.3.3.2、方法演示

4.3.4、修改 HTML 元素

4.3.4.1、方法介绍

4.3.4.2、方法演示

热门文章

最新文章

相关课程

相关电子书

相关实验场景