js基础07

最新推荐文章于 2024-07-08 18:01:35 发布

cuishoulong3424

最新推荐文章于 2024-07-08 18:01:35 发布

阅读量104

点赞数

文章标签： javascript html5 es6

本文链接：https://blog.csdn.net/cuishoulong3424/article/details/109784092

版权

文章目录

Math的常用方法

Math.abs()

求绝对值
参数：值

Math.abs(-1);//1

Math.ceil()

向上取整
参数：值
规则，如果为小数的话(正数把小数抹掉，然后+1,负数把小数位抹掉不用管),整数的话不用动

Math.ceil(1.2);//2
Math.ceil(-1.2);//-1

Math.floor()

向下取整
参数：值
规则：把小数抹掉

Math.floor(-1.2);//-1
Math.floor(1.2);//1

Math.round()

四舍五入
参数：值
规则：正数四舍五入，负数的话小数位必须比0.5大一点才行

Math.round(1.5);//1
Math.round(-1.5);//-1
Math.round(-1.51);//-2

Math.sqrt()

开平方

Math.sqrt(9);//3
Math.sqrt(4);//2

Math.pow(n,m)

n的m次幂

Math.pow(3,2);//9
Math.pow(2,2);//4

Math.PI()

圆周率

Math.PI();//3.1415926

Math.max()

最大值
值：可以为多个
如果想给数组计算，我们需要给他展开…ary

var ary=[1,2,3];
Math.max(1,2,5);//5
Math.max(...ary);//5

Math.min()

最小值
值：可以为多个

Math.min(1,2,3);//1

Math.random()

获取0-1之间的随机数，包含0不包含1
没有值
获取m-n之间的随机数，Math.randow()*(m-n)+n

 Math.random()//0.4328550598069496
 Math.random()//0.8329572964722922
 //计算10-20之间的
 Math.random()*(20-10)+10;//16.86379561327906

demo生成4位验证码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 50px;
            display: inline-block;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <input type="text" id="inp">
    <!-- <div id="inp"></div> -->
    <button id="btn">获取</button>
</body>

</html>
<script>
    var inp = document.getElementById('inp');
    // console.log(inp);
    var btn = document.getElementById('btn');
    var str = "qazwsxedcrfvtgbyhnujmikolpQAZWSXEDCRFVTGBYHNUJMIKOLP0123456789";
    function getCode(str) {
        var res = "";
        for (var i = 0; i < 4; i++) {
            var item = Math.round(Math.random() * (str.length - 1));
            //这里要用Math.round，因为是向上取整所以要-1，如果写为floor就时向下取整，就不用-1了
            if (res.indexOf(str[item]) > -1) {
                i--;
                continue;
            }
            res += str[item];
        }
        return res;
        // console.log(res)
        // inp.placeholder=res;
        // inp.value=res;
        // inp.innerText=res;
    }
    inp.value = getCode(str);

    function twoGetCode(str){
        var res="";
        while(res.length<4){
            var item = Math.round(Math.random() * (str.length - 1));
            res += str[item];
        }
        return res;
    }
    btn.onclick = function () {
        // inp.value = getCode(str);
        inp.value = twoGetCode(str);//while 方法

    }


</script>

获取元素的方法

通过ID获取
- var oid=document.getElementById(‘id’);
- 上下文只能为document
通过类名获取
- var oclass=document.getElementsByClassName(‘box’);
- 上下文可以为其他的，如oid
- 是类数组
通过标签名获取
- var oclass=oid.getElementsByTagName(‘div’);
- 是个类数组
- 上下文可以为其他
通过Name属性获取
- var names=document.getElementsByName(‘userName’);
- 因为只有input有name属性，所以一般用来获取input
- 上下文只能为document
通过选择器获取
- document.querySelect("#main>p")
- 获取IDmain下的第一个p标签
- document.querySelectAll("#main>p")
- 获取IDmain下的所有p标签，是类数组
获取屏幕的宽
- document.documentElement.clientWidth||document.body.clientWidth;
获取屏幕的高
- document.documentElement.clientHeight||document.body.clientHeight;

节点类型

文档节点
- nodeType:9
- nodeName:#document
- nodeValue:null
属性节点
- nodeType:2
- nodeName:属性名
- nodeValue:属性值
元素节点 背
- nodeType:1
- nodeName:大写的标签名
- nodeValue:null
注释节点
- nodeType:8
- nodeName:"#comment"
- nodeValue:注释的内容
文本节点
- nodeType:3
- nodeName:"#text"
- nodeValue:文本内容

DOM获取节点方法

parentNode
- 唯一父元素节点
childNodes
- 所有子元素节点
children
- 所有元素子节点(es6-8不兼容)
previousSibling
- 获取上一个兄弟节点
previousElementSibling
- 获取上一个兄弟级元素节点（es6-8不兼容）
nextSibling
- 获取下一个兄弟级节点
nextElementSibling
- 获取下一个兄弟级元素节点
firstChild
- 获取当前元素第一个子节点
firstElementChild
- 获取当前元素第一个元素子节点(ie6-8不兼容)
lastChild
- 获取当前元素最后一个子节点
lastElementChild
- 获取当前元素最后一个元素子节点

封装previousElementSibling

// 封装previousElementSibling
function Mypre(name){
    var myPrevious=name.previousSibling;
    console.log(myPrevious);
    while(myPrevious&&myPrevious.nodeType!==1){
        myPrevious=myPrevious.previousSibling;
    }
    return myPrevious;
}
console.log(Mypre(p2));

封装children

//封装children
    function Mychild(name){
        var Childs=name.childNodes;
        var myChilds=[];
        for(var i=0;i<Childs.length;i++){
        if(Childs[i].nodeType==1){
            myChilds.push(Childs[i]);
        }
    }
    return myChilds;
    }
  
console.log(Mychild(main));

DOM的增删改

增加一个元素节点
- document.createElement(‘标签名’);
增加一个文本节点
- document.createTextNode(“文字内容”);
把元素追加到容器末尾
- 容器.appendChild(元素)
把元素追加在容器开头
- 容器.insertBefore(新元素，老元素) 在容器中把新的元素插入到老的元素前面

    var box=document.createElement('h5');
    var text=document.createTextNode('哈哈');
    var res=box.appendChild(text);
    main.appendChild(res);
    main.insertBefore(newele,oldele);//把newele插入到oldele前面

在容器中删除某个元素
- 容器.removeChild(元素);
克隆括号内没有参数时，只克隆当前元素如果参数写为true会把元素里面的所有后代元素都克隆
- 元素.cloneNode();
给元素添加自定义属性
- 元素.setAttribute(“属性名”,“属性值”);
查看元素自定义属性
- 元素.getAttribute(“属性名”);
删除元素指定自定义属性
- 元素.removeAttribute(“属性名”);

cuishoulong3424

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础07

文章目录Math的常用方法Math.abs()Math.ceil()Math.floor()Math.round()Math.sqrt()Math.pow(n,m)Math.PI()Math.max()Math.min()Math.random()demo生成4位验证码获取元素的方法节点类型封装previousElementSibling封装childrenDOM的增删改Math的常用方法Math.abs()求绝对值参数：值Math.abs(-1);//1Math.ceil()向上取整
复制链接

扫一扫