JavaScript高级

最新推荐文章于 2024-07-12 14:10:05 发布

Li.ve

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量88

点赞数

文章标签： javascript html js java

本文链接：https://blog.csdn.net/weixin_51120880/article/details/120272397

版权

-面向对象:类的定义及使用继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面向对象</title>
</head>
<body>
    
</body>
<script>
   // 定义类以及继承的使用
    class Student{
        //定义构造方法
        constructor(name,age){
            //给成员变量赋值
            this.name = name
            this.age = age
        }

        //定义方法
        teacher(){
            document.write(this.name+this.age+"<br>")
        }
    }

    //创建一个类去继承Student
    class teacher extends Student{
        constructor(name,age,salary){
            //因name ,age是继承父类,所以要调用super方法在父类中完后完成赋值
            //salary是子类特有方法,只需本类中进行赋值
            super(name,age)
            this.salary=salary
        }

        method(){
            document.write(this.name+","+this.age+","+this.salary+"<br>")
        }
    }

    //创建对象
    let tea = new teacher("王维",33,100000)
    tea.teacher();
    tea.method();


    // //---------------------------------------------------字面量类的定义以及使用
    let Student ={
        name : "李白",
        age : 34,
        gender : "男",
        hobby : ["唱","跳","rap"],
        
        teacher:function(){
            document.write("方法执行了")
        }
    };

    document.write(Student.name+"年龄;"+Student.age+"性别;"+Student.gender
    +"喜欢;"+Student.hobby[0]+Student.hobby[1]+Student.hobby[2]+"<br>")

    Student.teacher();
</script>
</html>

内置对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内置对象</title>
</head>
<body>
    
</body>
<script>
    //-----------------------number内置对象
    //parseFloat 将传入的字符串浮点数转化成浮点数
    document.write(Number.parseFloat("3.1415926")+"<br>")
    //parseInt 将传入的字符串整数转成整数,从数字开始读取,直到读不到数字
    document.write(Number.parseInt("200asa")+"<br>")
    //isNaN 判断是否为NAN
    document.write(Number.isNaN(NaN))


    // ---------------------------Math内置对象
    // ceil 向上取整
    document.write(Math.ceil(4.2)+"<br>")
    //floor 向下取整
    document.write(Math.floor(4.2)+"<br>")
    //round 四舍五入最为接近的整数
    document.write(Math.round(4.2)+"<br>")
    document.write(Math.ceil(4.6)+"<br>")
    //随机数,0.0----1.0之间含头不含尾
    document.write(Math.random()+"<br>")
    //幂运算,x方的y次幂
    document.write(Math.pow(3,3)+"<br>")

    //-------------------String内置对象
    //创建对象方式一
    let Str= new String("王者荣耀")
    document.write(Str+"<br>")
    //创建方式二
    let St = "刺激战场"
    document.write(St+"<br>")
    //length 获取字符串长度
    document.write(St.length+"<br>")
    //charAt 根据索引获取索引值
    document.write(St.charAt(1)+"<br>")
    //indexof 获取指定字符串所在的位置,找不到返回-1
    document.write(St.indexOf("战")+"<br>")
    //subString 根据指定索引进行截取,包含头不包含尾
    document.write(St.substring(2,4)+"<br>")
    //splice 根据指定规则切割字符串,结果返回数组
     let s = ["李白",33,"男"]
     let arr= s.splice(",")
     for(let i = 0;i<arr.length;i++){
        document.write(arr[i]+"<br>")
     }
     let s1 = "王者荣耀,猪队友太多"
     document.write(s1.replace("猪队友","***")+"<br>")
</script>
</html>

正则表达式、set、Map、JSON、Array数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正侧表达式</title>
</head>
<body>
    
</body>
<script>

   // 1.验证手机号 
    //规则：第一位1，第二位358，第三到十一位必须是数字。总长度11
    let rey=/^[1][234][0-9]{9}$/;
    document.write(rey.test("12738818983")+"<br>")

    let reg1 = /^1[358][0-9]{9}$/;
    document.write(reg1.test("18688888883") + "<br>");

   // 2.验证用户名
   // 规则：字母、数字、下划线组成。总长度4~16
    let re =/^[a-zA-Z_0-9]{4,16}$/
    document.write(re.test("123")+"<br>")

    -----------------------------------Array数组
    Array类即是数组,自定义数组也是对象,故也可直接调用其发那个法尔
    let arr = [1,2,5,4,3]
    
    //push 添加元素到数组到末尾
    arr.push(8);
    document.write(arr+"<br>")
    //pop删除数组末尾元素
    arr.pop();
    document.write(arr+"<br>")
    //shift 删除数组最前面的元素
    arr.shift();
    document.write(arr+"<br>")
    //includes 判断当前数组是否含有其指定元素
    document.write(arr.includes(2)+"<br>")
    //reverse 反转其数组中元素顺序
    document.write(arr.reverse()+"<br>")
    //sort 对数组元素进行排序
    document.write(arr.sort()+"<br>")


    //----------------------------------------set集合,元素唯一,存取有序
    创建集合
    let s = new Set();
    
    //add向集合中添加元素
    s.add("李白");
    s.add("王维");
    s.add("杜甫");
    s.add("李白");
    
    //size判断集合的长度
    document.write(s.size+"<br>")
    //keys 获取迭代器对象
    let ke = s.keys();
    for(let i=0;i<s.size;i++){
        document.write(ke.next().value+"<br>")
    }

    //delete删除指定元素
   document.write(s.delete("李白")) 



       // --------------------------------------------Map集合,键值对的形式存在,元素唯一,存取有序
        创建对象
        let ma = new Map();

        //set添加元素
        ma.set("百里玄策",12);
        ma.set("赔钱虎",11);
        ma.set("苏烈",12);
        ma.set("苏烈",13);
        //size 判断集合的长度
        document.write(ma.size+"<br>")
        //get 根据键获取值
        document.write(ma.get("苏烈")+"<br>") 
        //entries 获取迭代器对象
        let en = ma.entries();
        for(let i = 0; i<ma.size;i++){
            document.write(en.next().value)+"br"
        }
        //delete根据键删除值
        document.write(ma.delete("赔钱虎")+"<br>")
        


       // --------------------------------JSON,轻量级数据交格式\
        let weather = {
            city:"郑州",
            date:"2021-09-14",
            wendu:"0-10",
            shidu:"20%"
        }

       //stringify 将指定的对象转化成JSON格式
         let St= JSON.stringify(weather)
         document.write(St+"<br>")
        //parse 将指定JSON格式转化成对象
         let wea = JSON.parse(St)
         document.write(wea.city+"<br>")
         document.write(wea.date+"<br>")
         document.write(wea.wendu+"<br>")
         document.write(wea.shidu+"<br>")
</script>
</html>

表单提交、账号,密码验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单校验</title>
    <link rel="stylesheet" href="css/style.css"></link>
</head>
<body>
    <div class="login-form-wrap">
        <h1>欢迎登录</h1>
        <form class="login-form" action="#" id="regist" method="get" autocomplete="off">
            <label>
                <input type="text" id="username" name="username" placeholder="Username..." value="">
            </label>
            <label>
                <input type="password" id="password" name="password" placeholder="Password..." value="">
            </label>
            <input type="submit" value="注册">
        </form>
    </div>
</body>
<script>
    
    //1.添加提交事件
    document.getElementById("regist").onsubmit=function(){
        //2.获取账号和密码
       let username = document.getElementById("username").value;
       let password = document.getElementById("password").value;
       //通过正侧表达式进行判断
       let rey = /^[a-zA-Z]{4,16}$/
       if(!rey.test(username)){
           alert("您的输入账号有误,请重新输入")
           //返回false 当提交事件接收到后fasle 则不提事件
           return false;
       }
       let re = /^[0-9]{6}$/
       if(!re.test(password)){
           alert("您的输入密码有误,请输入6位数字")
           return false;
       }

       //当前面都不符合,则提交事件
       return true;
    }
</script>
</html>

BOM浏览器对象模型----Windows

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Windows</title>
</head>
<body>
    
</body>
<script>
    //定时器的演示
    //定义一个方法
    function method(){
        alert("嗯,就是那个感觉,到底是什么感觉")
    }

    //setTimeout  一次性定时器 ,返回值为唯一标识
   let set =window.setTimeout("method()",3000)
    //clearTimeout 取消一次性定时器
    clearTimeout(set)

    //setInterval 设置循环定时器
   let set1 =setInterval("method()",3000)
    //clearInterval 取消循环定时器
    clearInterval(set1)
</script>
</html>

location地址栏对象

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>location地址栏对象</title>
    <style>
        p {
            text-align: center;
        }
        
        span {
            color: red;
        }
    </style>
</head>

<body>
    <p>
        注册成功！<span id="time">5</span>秒之后自动跳转到首页...
    </p>
</body>
<script>
    //先定义一个变量等于秒数
    let sun = 5;
    //定义一个方法
    function method(){
        //因为加载时从上往下
         sun--;
         if(sun<=0){
             //若条件成立则跳转指定路径
             location.href="s.html";
         }
         //获取span元素对象,若条件不成立,则改变秒数
        let span = document.getElementById("time")
        span.innerHTML=sun
       }
        //设置定时刷新,即每秒钟刷新的方法
        setInterval("method()",1000)
   
</script>
</html>

封装的思想

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>封装</title>
</head>
<body>
    <div id="div1">div1</div>
    <div name="div2">div2</div>
</body>
<script src="my.js"></script>
<script>
    let div1 = getById("div1");
    alert(div1);

    let div1 = document.getElementById("div1");
    alert(div1);

    let divs = document.getElementsByName("div2");
    alert(divs.length);

    let divs2 = document.getElementsByTagName("div");
    alert(divs2.length);
</script>
</html>


2 ,JS文件-------------------------
function getById(id){
    return document.getElementById(id)
}

在这里插入图片描述

Li.ve

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高级

-面向对象:类的定义及使用继承<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫