2021-06-08

2023-10-04 09:58:58

目录

一、JS DOM操作

getElementById方法

innerHTML 属性

HTML DOM Document 对象

 查找HTML元素

二、JS 正则表达式

语法

使用字符串方法

正则表达式模式

正则表达式修饰符

三、练习

 

一、JS DOM操作

通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。
HTML DOM 属性是您能够设置或改变的 HTML 元素的值。

getElementById方法

 访问 HTML 元素最常用的方法是使用元素的 id。
在上面的例子中，getElementById 方法使用 id="demo" 来查找元素。

innerHTML 属性

 获取元素内容最简单的方法是使用 innerHTML 属性。
innerHTML 属性可用于获取或替换 HTML 元素的内容。
innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。

HTML DOM Document 对象

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

（1）查找HTML元素

document.getElementById(id)     通过元素 id 来查找元素
document.getElementsByTagName(name)     通过标签名来查找元素
document.getElementsByClassName(name)     通过类名来查找元素

（2）改变HTML元素

element.innerHTML = new html content     改变元素的 inner HTML
element.attribute = new value     改变 HTML 元素的属性值
element.setAttribute(attribute, value)     改变 HTML 元素的属性值
element.style.property = new style     改变 HTML 元素的样式

（3）添加和删除元素

document.createElement(element)     创建 HTML 元素
document.removeChild(element)     删除 HTML 元素
document.appendChild(element)     添加 HTML 元素
document.replaceChild(element)     替换 HTML 元素
document.write(text)     写入 HTML 输出流

（4）添加事件处理程序

document.getElementById(id).onclick = function(){code}     向 onclick 事件添加事件处理程序

 查找HTML元素

 通过 id 查找 HTML 元素
DOM 中查找 HTML 元素最简单的方法是，使用元素的 id。var myElement = document.getElementById("intro");

通过类名查找 HTML 元素
如果需要找到拥有相同类名的所有 HTML 元素，请使用 getElementsByClassName()

二、JS 正则表达式

语法

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

/pattern/modifiers;

使用字符串方法

replace() 方法返回模式被替换处修改后的字符串。 

 search() 方法使用表达式来搜索匹配，然后返回匹配的位置

正则表达式模式

 1、括号用于查找一定范围的字符串

[abc]     查找方括号之间的任何字符。     试一试
[0-9]     查找任何从 0 至 9 的数字。     试一试
(x|y)     查找由 | 分隔的任何选项。 

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

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

3、Quantifiers 定义量词 

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

正则表达式修饰符

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

三、练习

练习一：页面加载完成后，将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色

练习二：使用正则表达式，让页面中这段字符串 “我爱你哈哈爱你” 中的”爱“字全变为红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关卡14</title>
</head>
<body>
    <button onclick="lesson1()">练习一</button>
    <ul>
        <li class="l1">li+1</li>
        <li class="l1">li+2</li>
        <li class="l1">li+3</li>
        <li class="l1">li+4</li>
        <li class="l1">li+5</li>
    </ul>

    <button onclick="lesson2()">练习二</button>
    <p id="ai">我爱你哈哈爱你</p>

    
</body>
<script>
    function lesson1(){
          var list=document.getElementsByClassName("l1");
          for(i=0;i<5;i++)
          {
              if(i%2==0)
              list[i].style.backgroundColor="green";
              else
              list[i].style.backgroundColor="red";
          }
    }

    function lesson2(){
          var str=document.getElementById("ai").innerHTML;
          var newstr=str.replace(/爱/g,爱=>"<span style='color:red'>"+爱+"</span>");
          document.getElementById("ai").innerHTML=newstr;
    }
</script>
</html>

 效果：

2021-06-08

练习三：通过Dom操作及正则表单式完成关卡五中《阿里巴巴》注册页面表单验证
要求：电子邮箱必须为xxx@xx.com格式；
会员登录名为11位手机号格式；
密码为必须为六位数字；
验证码须为五位字母。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阿里巴巴注册</title>
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
    <center>
    <div class="box">
        <div>
            <img src="images/图片3.png">
        </div>

        <div>
           <form action="success.html" method="post">
               <table border="0">
                   <tr class="center">
                       <td class="direction">电子邮箱：</td>
                       <td><input id="email" type="email" name="email" placeholder="xx@xx.com"></td>
                   </tr>
                   <tr>
                       <td class="direction">会员名登录：</td>
                       <td><input id="username" type="text" name="username" placeholder="11位的手机号格式"></td>
                   </tr>
                   <tr>
                       <td class="direction">密码：</td>
                       <td><input id="password" type="password" name="password" placeholder="输入六位数字"></td>
                    </tr>
                    <tr>
                        <td class="direction">再次输入密码：</td>
                        <td><input type="password" name="password-again" placeholder="输入六位数字"></td>
                    </tr>
                   <tr>
                        <td class="direction">会员身份：</td>
                        <td>
                            <input type="radio" name="radio-id" value="consumer" id="a06045" checked>买家
                            <input type="radio" name="radio-id" value="sale" id="a06046">卖家
                            <input type="radio" name="radio-id" value="both" id="a06047">两者都是
                        </td>
                   </tr>
                   <tr>
                        <td class="direction">验证码：</td>
                        <td>
                            <table>
                                <tr>
                                    <td><input id="yzm" type="text" placeholder="输入五位字母"></td>
                                    <td><img src="images/图片4.png"></td>
                                    <td><a href="#">看不清？换一张</a></td>
                                </tr>
                              </table>
                        </td>
                   </tr>
                   <tr>
                       <td><button type="button" onclick="login()">练习三：登录</button></td>
                        <td><img src="images/图片1.png"></td>
                   </tr>
                   <tr>
                    <td>&nbsp;</td>
                    <td>
                        <div>
                            <iframe src="text.html" frameborder="1" id="text" width="400px" height="100px"></iframe>
                        </div>
                   </td>
                   </tr>
               </table>
           </form>
        </div>

        <div>
            <img src="images/图片2.png">
        </div>
    </div>
</center>
</body>

<script>
    function login(){
        //name是input输入框对象,value属性获取输入框的值
        var email=document.getElementById("email").value;
        var username=document.getElementById("username").value;
        var password=document.getElementById("password").value;
        var yzm=document.getElementById("yzm").value;
         if( !(/^(\w|\d)+@\w+\.com$/.test(email))){
             alert("邮箱输入不合法")
             return;
         }
         if( !( /^\d{11}$/.test(username))){
             alert("用户名输入不合法")
             return;
         }
         if( !( /^\d{6}$/.test(password))){
             alert("密码输入不合法")
             return;
         }
         if(!(/^[A-Za-z]{5}$/.test(yzm))){
             alert("验证码输入不合法")
             return;
         }
         if(username=="12345678910" && password=="123456"){
               alert("登录成功")
                location.href="success.html";//强制跳转页面
           }
    }
</script>

</html>

效果：

2021-06-08

部分参考自：https://www.w3school.com.cn/js/index.asp

上一篇：ubuntu安装nodejs


下一篇：Don't lose our faith! ---Remember Steve Jobs Forever