JavaScript基础(DOM编程基础)

Xc_.xC

已于 2022-10-11 21:08:44 修改

阅读量468

点赞数

文章标签： javascript 前端

于 2022-10-11 15:17:37 首次发布

本文链接：https://blog.csdn.net/qq_52215881/article/details/127263391

版权

1,javaScript包括三大块:ECMAScript,DOM,BOM
1，ECMAScript:是ECMA制定的262标准，JavaScript,JScript都遵守这个标准，
ECMAScript是JavaScript的核心语法
2，DOM编程是JavaScript对HTML中的dom节点进行操作，DOM是有规范的，DOM规范是由W3C制定的
Document Object Modek(文档对象模型:对网页当中的节点进行增删改的过程.)HTML文档被当成一棵DOM树来看待。
var domObj=document.getElementById("id");
3 ，BOM编程是对浏览器本身操作，例如：前进,后退,地址栏，关闭窗口，弹窗等。由于浏览器有不同的厂家制造，所以BOM缺少规范，一般是有一个默认的行业规范
Brower Object Model(浏览器对象模型)

2,DOM和BOM的区别和联系:
BOM的顶级对象是：window
DOM的顶级对象是：document
实际上BOM是包括DOM的。

JS获取元素的三种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS获取元素的三种方式</title>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>

    <input type="checkbox" name="aihao" value="1"/>
    <input type="checkbox" name="aihao" value="2"/>
    <input type="checkbox" name="aihao" value="3"/>
    <input type="checkbox" name="aihao" value="4"/>

    <script type="text/javascript">
        //根据id获取一个元素
        var div1 =document.getElementById("div1");
        console.log(div1);

        // 根据name属性获取多个元素,是一个集合
        var aihaos= document.getElementsByName("aihao");
        console.log(aihaos)

        //根据标签的名字获取
        var divs=document.getElementsByTagName("div");
        console.log(divs);
    </script>
</body>
</html>

1，获取文本框的value

<!DOCTYPE html>
<html>
    <head>
        <title>DOM编程-获取文本框的value</title>
    </head>
        <script text="text/javascript">
           
            // window.onload=function(){
            //     //window是可以省略的
            //     var btnElt=window.document.getElementById("btn01");
            //     alert(btnElt);//[object HTMLInputElement]
            //     alert(btnElt.value);//hello
            // }

            window.onload=function dosome(){
                var btnElt=document.getElementById("btn");
                btnElt.onclick=function(){
                    var uesrElt=document.getElementById("username");
                   var s= uesrElt.value;
                   alert(s);
                   //简化
            //    alert(document.getElementById("username").value);

               //可以修改value的值
              // document.getElementById("username").value="zangsan";
                      
                }
            }

            //此处需要注意：一个网页时无法使用两个window.onload的，上面一个会被下面的覆盖
            window.onload=function(){
                document.getElementById("setBtn").onclick=function(){
                    document.getElementById("username2").value=
                    document.getElementById("username1").value;
                }
            }
        </script>


        <input type="text"  id="username"/>
        <input type="button" value="获取文本框的value" id="btn"/>
        
        <input type="button" id="btn01" value="hello"/>

        <hr/>
        <input type="text" id="username1"/>
        <input type="text" id="username2"/>
        <br/>
        <input type="button" value="将第一个文本框中的value赋值到第二个文本框" id="setBtn"/>
       <br/>
        <!-- blur事件，失去焦点事件
            以下代码中的this代表的是当前Inupt节点对象，this.value就是这个节点对象的value属性。
         -->
        <input type="text" onblur="alert(this.value)"/>
    </body>
</html>

2，innerHTML和innerText操作div和span

<!DOCTYPE html>
<html>
    <head>
        <title>DOM编程-innerHTML和innerText操作div和span</title>
        <!-- 
            innerHTML和innerText属性的区别？
            相同点：都是设置元素内部的内容。
            不同点：
                innerHTML会把后面的“字符串”当做一段HTML代码解释并执行
                innerText，即使后面是一段HTML代码，也只是将其当作普通的字符串来看待
        -->
        <style type="text/css">
            #div1{
                background-color: aquamarine;
                width: 300px;
                height: 300px;
                border: 1px black solid;
                position: absolute;
                top: 100px;
                left: 100px;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript">
            window.onload=function(){
            document.getElementById("btn").onclick=function(){
               var divElt= document.getElementById("div1");
               //使用innerHTML属性来设置元素的内容
               divElt.innerHTML="dddddss";
               //divElt.innerHTML="<font color='red'>this is a</font> ";
              // divElt.innerText="<font color='red'>this is a</font> ";
            }
        }
        </script>


        <input type="button" value="设置div的内容" id="btn">

        <div id="div1"></div>
    </body>
</html>

正则表达式：

1,什么是正则表达式，有什么用？

正则表达式：Regular Expression

正则表达式主要用于字符串格式匹配方面。

2，正则表达式实际上是一门独立的学科，在Java语言中支持，c语言也支持，JavaScript中也支持。

大部分编程语言都支持正则表达式。正则表达式最初使用在医学方面，用来表示神经符号等。目前使用最多的是计算机编程领域，用作字符串格式匹配。包括搜索方面等。

正则表达式修饰符

修饰符可以在全局搜索中不区分大小写:

修饰符描述

i 执行对大小写不敏感的匹配。

g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。

m 执行多行匹配。

正则表达式模式

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

表达式描述

[abc] 匹配查找方括号之间的任何字符。

[0-9] 匹配任何从 0 至 9 的数字。

(x|y) 查找任何以 | 分隔的选项。就是或者的意思

[A-Za-z0-9] 匹配A-Za-z0-9中任意一个字符

[A-Za-z0-9-] 匹配A-Za-z0-9,-,中任意一个字符

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

元字符描述

. 匹配除换行符以外的任意字符

\w 匹配字母/数字/下滑线或汉字

\d 匹配数字。

\s 匹配空白字符。

\b 匹配单词的开始或结束。

\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

^ 匹配字符串的开始

$ 匹配字符串的结束

量词:

量词描述

n+ 匹配任何包含至少一个 n 的字符串。

n* 匹配任何包含零个或多个 n 的字符串。

n? 匹配任何包含零个或一个 n 的字符串。

{n} 重复n次

{n,} 重复n次或更多

{n,m} 重复n到m次

\W 匹配不是字母/数字/下滑线或汉字

\D 匹配不是数字。

\S 匹配不是空白字符。

\B 匹配不是单词的开始或结束的位置。

[^x] 匹配除了x以外的任意字符

[^aeiou] 匹配除了aeiou这几个字母以外的任意字符

正则表达式当中的小括号优先级较高

5，简单的正则表达式

QQ号的正则表达式：^[1-9][0-9]{4,}$

6,其它人编写的正则表达式要看懂

eamil:^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

创建正则表达式对象

7,怎么创建正则表达式对象，怎么调用正则表达式对象的方法

第一种创建方式：

var regExp=/正则表达式/flags;

第二种创建方式：使用内置支持类RegExp

var regExp=new RegExp("正则表达式",flags);

关于flags:（其实就是正则表达式修饰符）

g:全局匹配

i:忽略大小写

m:多行匹配(ES规范之后制定之后才支持m),当前面是正则表达式的时候不能用，只有是字符串才能用

正则表达式对象的text()方法？

true/false=正则表达式对象.text(用户填写的字符串);

返回true:字符串匹配成功

alse:字符串匹配失败

代码示例：

<!DOCTYPE html>
<html>
    <head>
        <title>关于正则表达式</title>
    </head>
    <body>
        <script type="text/javascript">
           
            window.onload=function(){
                //给按钮绑定click
                document.getElementById("btn").onclick=function(){
                    var email=document.getElementById("email").value;
                    var emailRegExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
               
                    var ok=emailRegExp.test(email);
                    if(!ok){
                        document.getElementById("emailError").innerText="邮箱地址不合法";
                    }else{
                        document.getElementById("emailError").innerText="邮箱地址合法";
                    }
                }
                //给文本框绑定focus获得焦点事件
                document.getElementById("email").onfocus=function(){
                    document.getElementById("emailError").innerText="";
                }

                //绑定enter键盘事件
                document.getElementById("email").onkeydown=function(event){

                    if(event.keyCode==13){
                    var email=document.getElementById("email").value;
                    var emailRegExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
               
                    var ok=emailRegExp.test(email);
                    if(!ok){
                        document.getElementById("emailError").innerText="邮箱地址不合法";
                    }else{
                        document.getElementById("emailError").innerText="邮箱地址合法";
                    }
                }
                }
            }

        </script>

        <input type="text" id="email"/>
        <span id="emailError" style="color: red;font-size:12px;"></span>
        <br/>
        <input type="button" value="验证邮箱正则表达式" id="btn"/>
    </body>
</html>

去除字符串的前后空白

<!DOCTYPE html>
<html>
    <head>
        <title>去除字符串的前后空白</title>
    </head>
    <body>
        <script type="text/javascript">
            //低版本的IE浏览器不支持字符串的trim()函数，怎么办？
            //可以自己对String类扩展一个全新的trim()函数
            String.prototype.trim=function(){
                //alert("扩展之后的trim")
                //去除当前字符串的前后空白
                //在当前的方法中的this代表队就是当前字符串
               //return this.replace("前空白","").replace("后空白","");
               //return this.replace(/^\s+/,"").replace(/\s+$/,"");
               return this.replace(/^\s+|\s+$/g,"");
            }



            window.onload=function(){
                document.getElementById("btn").onclick=function(){
                    //获取用户名
                    var username=document.getElementById("username").value;
                    //去除前后空白
                    username=username.trim();
                    //测试
                    alert("--->"+username+"<----");
                }
            }
        </script>
        <input type="text" id="username"/>
        <input type="button" value="获取用户名" id="btn"/>
    </body>
</html>

表单验证代码示例：

此处需要注意：在上面以及注册事件的元素，可以使用"元素.事件()",通过JS代码自动调用，

注意:不是事件句柄，要加();

<!DOCTYPE html>
<html>
    <head>
        <title>表单验证</title>
        <style type="text/css">
            span{
                color: red;
                font-size: 12px;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript">
            /*
                1，用户名不能为空
                2，用户名必须在6-14位之间
                3，用户名只能有数字和字母组成
                4，密码和确认密码必须一致，邮箱地址合法
                5，统一失去焦点验证
                6，错误提示信息统一在span标签中提示，并且要求字体12号，红色
                7，文本框再次获得焦点后，清空错误信息，如果文本框中的数据不合法要求清空文本框中的value
                8，最终表单中所有的项均合法方可提交
            */
           window.onload=function(){
                //绑定失去焦点事件：
           var usernameElt= document.getElementById("username");

             //获取usernamespam标签
             var usernameErrorSpan=document.getElementById("usernameError");
            usernameElt.onblur=function(){
                //获取用户名
                var username=document.getElementById("username").value;
                username=username.trim();
              
                //判断是否为空，此处是自动转换成了boolean类型，可以去看一下上一章boolean类型
                if(!username){//if(username.length==0)或者(username==="")
                    //代表username是空字符串
                   // alert("username是空字符串");
                   //继续判断长度
                   usernameErrorSpan.innerText="用户名不能为空";
                }else{
                    //alert("username不是空字符串");
                    //继续判断长度
                    if(username.length<6||username.length>14){
                        usernameErrorSpan.innerText="用户名必须在6-14位之间";
                    }else{
                        //用户名合法
                        //继续判断是否含有特殊符号
                        var regExp=/^[A-Za-z0-9]+$/;
                        var ok=regExp.test(username);
                        if(ok){
                            //用户名最终合法
                        }else{
                            //用户名中含有特殊符号
                            usernameErrorSpan.innerText="用户名只能有数字和字母组成";
                        }
                    }
                }

                    //给username这个文本框注册得到焦点事件
                usernameElt.onfocus=function(){
                // //清空span
                // usernameErrorSpan.innerText="";
                //清空非法的value
                if(usernameErrorSpan.innerText=""){
                    usernameElt.value="";
                } 
                //清空span
                usernameErrorSpan.innerText="";
             }
        }

        //获取密码错误提示的span标签
        var pwdErrorSpan=document.getElementById("userpwdError");
        //获取确认密码框对象
        var userpwd2Elt=document.getElementById("userpwd2");
        userpwd2Elt.onblur=function(){
            //获取密码和确认密码
            var userpwdElt=document.getElementById("userpwd");
            var userpwd=userpwdElt.value;
            var userpwd2=userpwd2Elt.value;
            if(userpwd!=userpwd2){
                    //密码不一致
                pwdErrorSpan.innerText="密码不一致";
            }else{
                    //密码一致
            }
        }
        //绑定focus事件
        userpwd2Elt.onfocus=function(){
            if(pwdErrorSpan.innerText!=""){
                userpwd2Elt.value="";
            }
            pwdErrorSpan.innerText="";
        }

        //获取email的span
        var emailSpan=document.getElementById("emailError");
        //给Email绑定blur事件
        var emailElt=document.getElementById("email");
        emailElt.onblur=function(){
            //获取Email
            var email=emailElt.value;
            //编写Email的正则
            var emailRegExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            var ok2=emailRegExp.test(email);
            if(ok2){
                //合法表达式
            }else{
                //不合法表达式
                emailSpan.innerText="邮箱地址不合法";
            }

        }
        //绑定得到焦点事件
        emailElt.onfocus=function(){
            if(emailSpan.innerText!=""){
                emailElt.value="";
            }
            emailSpan.innerText="";
        }
        //给提交按钮绑定鼠标单击事件
        var submitBtnElt=document.getElementById("submitBtn");
        submitBtnElt.onclick=function(){
            // alert(111);
            //注意：是触发uesrname,userpwd2,email的blur和focus事件，上面注册了的。
            //不需要人工操作，使用JS代码触发事件。
            usernameElt.focus();
            usernameElt.blur();
           // xxx.click();//提交
           userpwd2Elt.focus();
           userpwd2Elt.blur();

           emailElt.focus();
           emailElt.blur();
           //当所有表单项都是合法的时候，提交表单
            if(usernameErrorSpan.innerText==""&&pwdErrorSpan.innerText==""&&emailSpan.innerText==""){
                var userForm=document.getElementById('userForm');
                //使用表单的提交方法
                userForm.submit();
            }else{
                alert("所有的填充必须正确");
            }
        }
    }

        </script>

        <!-- 表单提交一般使用post此处是为了更好的验证 -->
        <form id="userForm" action="http://localhost:8080/jd/save" method="get">
            用户名<input type="text" name="username" id="username"/>
            <span id="usernameError" ></span>
            <br/>
            密码<input type="text" name="password" id="userpwd"/> 
            <br/>
            确认密码<input type="text"  id="userpwd2"/>
            <span id="userpwdError" ></span>
            <br/>
            邮箱<input type="text" name="email" id="email"/>
            <span id="emailError" ></span>
            <br/>
            <!-- <input type="submit" value="注册" id=""/> -->
            <input type="button" value="注册" id="submitBtn"/>
            <input type="reset" value="重置" />
        </form>
    </body>
</html>

复选框的全选和取消全选

<!DOCTYPE html>
<html>
    <head>
        <title>复选框的全选和取消全选</title>
    </head>
    <body>

        <script type="text/javascript">
           /* window.onload=function(){
                var firstCheck=document.getElementById("firstCheck");
                firstCheck.onclick=function(){
                     //获取第一个复选框的选中状态
                     //checked属性返回是否选中的状态/true/false
                //主要此处name有相同的,所以返回的是一个数组。
                  var aihao= document.getElementsByName("aihao");
                     
                  if(firstCheck.checked){
                        //全选
                        for(var i=0;i<aihao.length;i++){
                            aihao[i].checked=true;
                        }
                     } else{
                        //取消全选
                        for(var i=0;i<aihao.length;i++){
                            aihao[i].checked=false;
                        }
                     }
                */

                //简化(第一个复选框选中，后面全部选中)
                window.onload=function(){
                var firstCheck=document.getElementById("firstCheck");
                var aihao= document.getElementsByName("aihao");
                firstCheck.onclick=function(){
                     for(var i=0;i<aihao.length;i++){
                        aihao[i].checked=firstCheck.checked;
                    }
                }


                //(总数量和选中的数量相等的时候，第一个复选框选中)
                //对以上数组进行遍历
                var num=aihao.length;
                for(var i=0;i<aihao.length;i++){
                    //这个for循环只是把click事件注册
                    aihao[i].onclick=function(){
                       //alert(322);
                       var checkbox=0;
                       //alert(checkbox);
                     //总数量和选中的数量相等的时候，第一个复选框选中。
                     for(var i=0;i<aihao.length;i++){
                        if(aihao[i].checked){
                            checkbox++;
                        }
                        //alert(checkbox);//此处还是自己在网页看一下比较容易理解
                      
                      }
                      //简写
                      firstCheck.checked=(num==checkbox);

                    //   if(num==checkbox){
                    //     firstCheck.checked=true;
                    //   }else{
                    //     firstCheck.checked=false;
                    //   }
                    
                    }
           
                }
            }
        </script>
        <input type="checkbox" id="firstCheck"/><br/>
        <input type="checkbox" name="aihao" value="smoke"/>抽烟
        <br/>
        <input type="checkbox"name="aihao" value="drink"/> 喝酒
        <br/>
        <input type="checkbox" name="aihao" value="tt"/> 烫头
     </body>
</html>

获取下拉列表的value

<!DOCTYPE html>
<html>
    <head>
        <title>获取下拉列表的value</title>
    </head>
    <body>
        <!-- 使用change事件 -->
        <!-- <select onchange="alert(this.value)">
            <option value="">请选择省份</option>
            <option value="001">河北省</option>
            <option value="002">河南省</option>
            <option value="003">山东省</option>
            <option value="004">山西省</option>
        </select> -->

        <script type="text/javascript">
            window.onload=function(){
                var provinceList=document.getElementById("provinceList");
                provinceList.onchange=function(){
                    //获取选中项的value
                    alert(provinceList.value);
                }
            }
        </script>
        <select id="provinceList">
            <option value="">请选择省份</option>
            <option value="001">河北省</option>
            <option value="002">河南省</option>
            <option value="003">山东省</option>
            <option value="004">山西省</option>
        </select>
    </body>
</html>

JS内置类：Date （显示网页时钟）

注意：在JS代码块中，不能直接使用<br/>进行换行，

需要使用： document.write("<br/>");进行操作

<!DOCTYPE html>
<html>
    <head>
        <title>显示网页时钟</title>
    </head>
    <body>
        <script type="text/javascript">
            /*
                关于JS中内置的支持类：Date，可以用来获取时间/日期
            */
           //获取系统当前时间
           var nowTime=new Date();
            //输出
            //document.write(nowTime);
            //转换成具有本地语言环境的日期格式。
            nowtime=nowTime.toLocaleString();
            document.write(nowtime);
            //<br/>//在JS中不允许之间出现这个标签
            document.write("<br/>");
            //当以上格式不是自己想要的，可以通过日期获取年月日等信息，自定制日期格式
            var t=new Date();
            var year=t.getFullYear();//返回年信息，以全格式返回
            var month=t.getMonth();//月份0-11
            //var day=t.getDay();//获取的是一周的第几天(0-6)
            var day=t.getDate()//获取日期
            document.write(year+"年"+(month+1)+"月"+day+"日");

            document.write("<br/>");
            document.write("<br/>");

            //重点：怎么获取毫秒数(从1979年1月1日 00:00:00 000到当前系统时间的总毫秒数)
           var t= t.getTime();
           alert(t);//就近原则，会覆盖
            

        </script>

        <script type="text/javascript">
            function displayTime(){
            var time=new Date();
            var time= time.toLocaleString();
            var timeDiv=document.getElementById("timeDiv");
            timeDiv.innerHTML=time;
            //document.write(time);
            }

            //每隔一秒调用displayTime方法
            function start(){
                //从这行代码执行结束开始，则会不间断的，每个1000毫秒调用一次displayTime()函数。
               //全局变量
                v= window.setInterval("displayTime()",1000);
            }
            function stop(){
                window.clearInterval(v);
            }

        </script>
        <input type="button" value="显示系统时间" onclick="start()"/>
        <input type="button" value="系统时间停止" onclick="stop()"/>
        <div id="timeDiv"></div>
    </body>
</html>