js应用（ DOM编程）（字符串对象、日期对象、数学操作）

最新推荐文章于 2020-11-29 22:11:01 发布

java_esky110

最新推荐文章于 2020-11-29 22:11:01 发布

阅读量335

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/sky274548769/article/details/81567102

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

DOM编程：
什么是DOM： DOM指的是HTML的结构体系，我们HTML实际上可以理解成为一棵树，我们就吧这个树叫DOM模型，DOM编程指的就是利用代码去操作这一棵树上面的节点和元素，

1、获取html元素：
我们的html会被js认为是一个文档(document)对象，js为document提供了很多方法来获取html元素，操作html元素：

   <html>
    <head>

        <script>
            function zhanghao() {
                //获取html元素
                var yuansu = document.getElementById("zhangsan2");
                alert(yuansu);
            }

        </script>



    </head>

    <body>
        <form>
            账号：<input id="zhanghao1" type="text"><br>
            密码：<input id="zhangsan2" type="password"><br>
            <input type="submit" value="登录"><br>
            <button onclick="zhanghao()"> 获取账号 </button>
        </form>


    </body>

</html>

通过程序我们发现，改获取元素的方法调用之后得到的是一个HTMLInputElement对象，那什么是对象。对象是对一个事物的一种抽象。抽象指的就是通过变量来描述一个事物。我们可以通过该对象访问属性，比如htmlinput对象里面的属性：

function zhanghao() {
                //获取html元素
                var yuansu = document.getElementById("zhanghao1");

                yuansu.style.color = "red";
                yuansu.value= "zhangsan";
            }

利用js验证账号密码是否为空：

<html>
    <head>

        <script>

            //我们验证账号是否为空， 密码是否为空，如果为空，弹出请输入账号/密码
            function yanzheng() {

                var zhanghao = document.getElementById("zhanghao1").value;
                var mima = document.getElementById("zhanghao2").value;

                if(zhanghao == '') {
                    alert("请输入 账号！");
                }   
                if(mima == '') {
                    alert("请输入密码!");
                }

            }

        </script>
    </head>

    <body>
        <form>
            账号：<input  id="zhanghao1" type="text" ><br>
            密码：<input id="zhanghao2" type="password"><br>
            <input type="submit" value="登录"><br>
            <input type="reset" value="重置">
            <a onclick="yanzheng()"> 验证账号密码 </a>
        </form>

    </body>

</html>

js字符串操作
获取字符串长度：通过得到属性length

//账号的长度必须是6-18位
                var changdu = zhanghao.length;
                if(6>changdu || changdu > 18) {
                    alert("请输入6-18位的账号！");
                }

字符串常用方法：
//常用字符串方法
                var zhanghao = "abcdefg"
                alert(zhanghao.charAt(0)); //根据下标返回对应的字符
                alert(zhanghao.concat("===","++++","&&&&"));//拼接字符串，和+类似
                alert(zhanghao.indexOf("m"));  //判断是否包含某个字符串

                var word="you are SB";
                alert(word.replace("SB","***"));  //替换字符串

                document.write("X" + "1".sub());    //下标
                document.write("X" + "2".sup());    //上标


                var zhanghao = "zhangsan ni hao ";
                document.write(zhanghao.substr(3,4) + "...");  //截取字符串
                document.write(zhanghao.substring(3,4));

js的获取日期：
//获取当前操作系统的时间
                var xianzai = new Date();
                document.write(xianzai.toLocaleString());

js数学操作：Math

                document.write("<br>");
                document.write(Math.pow(2,3)); 
                document.write("<br>");
                document.write(Math.pow(2,10));
                document.write("<br>");
                document.write(Math.sqrt(2));

                document.write("<br>");
                document.write(Math.random()); //计算随机数

DOM的选择器操作：

ID选择期：
   var zhanghao = document.getElementById("zhanghao1");
如果我们想操作多个元素，那还使用ID选择器就需要一个一个的获取，这样很麻烦，所以就需要一个可以选中多个的功能，
var duoxuankuang = document.getElementsByTagName("input");

注意：通过这个方法拿到的html元素不是一个，是多个，是一个集合，或者说是一个数组，所以我们需要通过下标去访问数组里面的每一个元素
                duoxuankuang[0];
                duoxuankuang[1]
但是我们又不知道到底有多少个，所以这个数组是有长度的，
                duoxuankuang.length;

最终我们访问该数组的所有元素就必须借助for循环：
                var changdu = duoxuankuang.length;
                for(var i=0; i<changdu; i++) {
                    duoxuankuang[i].checked = "true";
                }

htmld代码：
<input type="checkbox" value="登录" onclick="quanxuan()"> 全选<br>
            <input type="checkbox" value="登录"> JAVA<br>
            <input type="checkbox" value="登录"> JAVA<br>
            <input type="checkbox" value="登录"> JAVA<br>
            <input type="checkbox" value="登录"> JAVA<br>
            <input type="checkbox" value="登录"> JAVA<br>
            <input type="checkbox" value="登录"> JAVA<br>
            <input type="checkbox" value="登录"> JAVA<br>

由此我们就利用jsDOM+html实现了多选框的全选

但是我们通过标签获取html元素很有可能会造成数组误读。因为input不只有checkbox，还有其他类型，而我们只希望操作我们的checkbox。所以我们可以向css一样，利用class属性来进行分组。因为ID是唯一标记，而class可以多个标记，同样class拿到的html元素也是一个数组，是多个，

var duoxuankuang = document.getElementsByClassName("kuang");

总结：对于html获取元素来说：
获取一个元素：document.getElementById(“zhanghao1”);
如果是获取多个元素：document.getElementsByClassName(“kuang”);
至于 document.getElementsByTagName(“input”);获取的数据很不灵活，使用的概率相对就低了。

利用js+html实现全选、取消全选、反选功能：


此处注意：赋值必须是boolean的true或者false，而不是字符串的"true"和"false"
<html>
    <head>

        <script>
            function quanxuan() {
                //获取所有input-checkbox标签 
                var kuang = document.getElementsByClassName("kuang");
                for(var i=0; i<kuang.length; i++) {
                    kuang[i].checked = true;
                }   
            }

            function quxiao() {
                //获取所有input-checkbox标签 
                var kuang = document.getElementsByClassName("kuang");
                for(var i=0; i<kuang.length; i++) {
                    kuang[i].checked = false;
                }   
            }

            function fanxuan() {
                var kuang = document.getElementsByClassName("kuang");
                for(var i=0; i<kuang.length; i++) {
                    if(kuang[i].checked == true) {
                        kuang[i].checked = false;
                    }else {
                        kuang[i].checked = true;
                    }
                }   
            }

        </script>
    </head>

    <body>
        <form>
            <a href="javascript:void(0)" onclick="quanxuan()">全选</a>    
            <a href="javascript:void(0)" onclick="quxiao()">取消</a>  
            <a href="javascript:void(0)" onclick="fanxuan()">反选</a> 
            <br>

            <input class="kuang" type="checkbox" value="登录"> JAVA<br>
            <input class="kuang" type="checkbox" value="登录"> JAVA<br>
            <input class="kuang" type="checkbox" value="登录"> JAVA<br>
            <input class="kuang" type="checkbox" value="登录"> JAVA<br>
            <input class="kuang" type="checkbox" value="登录"> JAVA<br>
            <input class="kuang" type="checkbox" value="登录"> JAVA<br>
            <input class="kuang" type="checkbox" value="登录"> JAVA<br>

        </form>

    </body>

</html>