js高级_面向对象&&内置对象&&BOM&&封装

js高级_面向对象&&内置对象&&BOM&&封装

JavaScript 面向对象

一 类的定义和使用

定义格式:
  class 类名{
      //构造方法
      constructor(){
       变量赋值;  
      }
     方法名(参数列表){
         方法体;
         return 返回值;
     }
  }
使用格式 
    let 对象名 = new 类名(实际变量值);
对象名.方法名();

简单案例

<script>
    //定义Person类
    class Person{
        //构造方法
        constructor(name,age){
            this.name = name;
            this.age = age;
        }

        //show方法
        show(){
            document.write(this.name + "," + this.age + "
");
        }

        //eat方法
        eat(){
            document.write("吃饭...");
        }
    }

    //使用Person类
    let p = new Person("张三",23);
    p.show();
    p.eat();
</script>

二字面量定义类和使用

定义格式:
let 对象名 = {
    变量名:变量值,
    变量名:变量值,
    ...
    
    方法名:function(参数列表) {
        方法体;
        return 返回值;
    }    
}

使用格式
    对象名.变量名
    对象名.方法名();

例如

<script>
    //定义person
    let person = {
        name : "张三",
        age : 23,
        hobby : ["听课","学习"],

        eat : function() {
            document.write("吃饭...");
        }
    };

    //使用person
    document.write(person.name + "," + person.age + "," + person.hobby[0] + "," + person.hobby[1] + "
");
    person.eat();
</script>

三 继承

继承：让类与类产生子父类的关系，子类可以使用父类有权限的成员
 继承关键字：extends
 顶级父类：Object   

例如

<script>
    //定义Person类
    class Person{
        //构造方法
        constructor(name,age){
            this.name = name;
            this.age = age;
        }

        //eat方法
        eat(){
            document.write("吃饭...");
        }
    }

    //定义Worker类继承Person
    class Worker extends Person{
        constructor(name,age,salary){
            super(name,age);
            this.salary = salary;
        }

        show(){
            document.write(this.name + "," + this.age + "," + this.salary + "
");
        }
    }

    //使用Worker
    let w = new Worker("张三",23,10000);
    w.show();
    w.eat();
</script>

JavaScript 内置对象

一 Number

方法名	说明
parseFloat()	将传入的字符串浮点数转为浮点数
parseInt()	将传入的字符串整数转为整数

<script>
    //1. parseFloat()  将传入的字符串浮点数转为浮点数
  document.write(Number.parseFloat("3.15ba45")+"
")
   //后续遇到非数字停止 结果3.15
   //2. parseInt()    将传入的字符串整数转为整数
   document.write(Number.parseInt("20.5a2b3c4")+"
")
   //字符串转换为整数,去掉小数点,遇到非数字停止 结果20
script>

二 Math

方法名	说明
ceil(x)	向上取整
floor(x)	向下取整
round(x)	把数四舍五入为最接近的整数
random()	随机数,返回的是0.0-1.0之间范围(含头不含尾)
pow(x,y)	幂运算 x的y次方

<script>
    //1. ceil(x) 向上取整
    document.write(Math.ceil(4.4) + "
");    // 5
    
    //2. floor(x) 向下取整
    document.write(Math.floor(4.4) + "
");   // 4
    
    //3. round(x) 把数四舍五入为最接近的整数
    document.write(Math.round(4.1) + "
");   // 4
    document.write(Math.round(4.6) + "
");   // 5
    
    //4. random() 随机数,返回的是0.0-1.0之间范围(含头不含尾)
    document.write(Math.random() + "
"); // 随机数
    
    //5. pow(x,y) 幂运算 x的y次方
    document.write(Math.pow(2,3) + "
"); // 8
script>

三 Date

构造方法	说明
Date()	根据当前时间创建对象
Date(value)	根据指定毫秒值创建对象
Date(year,month,[day,hours,minutes,seconds ,milliseconds])	根据指定字段创建对象(月份是0~11)

成员方法

成员方法	说明
getFullYear()	获取年份
getMonth()	获取月份
getDate()	获取天数
getHours()	获取小时
getMinutes()	获取分钟
getSeconds()	获取秒数
getTime()	返回据1970年1月1日至今的毫秒数
toLocaleString()	返回本地日期格式的字符串

<script>
    //构造方法
    //1. Date()  根据当前时间创建对象
    let d1 = new Date();
    document.write(d1 + "
");

    //2. Date(value) 根据指定毫秒值创建对象
    let d2 = new Date(10000);
    document.write(d2 + "
");

    //3. Date(year,month,[day,hours,minutes,seconds,milliseconds]) 根据指定字段创建对象(月份是0~11)
    let d3 = new Date(2222,2,2,20,20,20);
    document.write(d3 + "
");

    //成员方法
    //1. getFullYear() 获取年份
    document.write(d3.getFullYear() + "
");//2222

    //2. getMonth() 获取月份
    document.write(d3.getMonth() + "
");//2

    //3. getDate() 获取天数
    document.write(d3.getDate() + "
");//2

    //4. getHours() 获取小时
    document.write(d3.getHours()+"
");//20

    //5. getMinutes() 获取分钟
    document.write(d3.getMinutes()+"
");//20

    //6. getSeconds() 获取秒数
     document.write(d3.getSeconds()+"
");//20


    //7. toLocaleString() 返回本地日期格式的字符串
    document.write(d3.toLocaleString());//2222/3/2 下午8:20:20
</script>

四 String

构造方法	说明
String(value)	根据指定字符串创建对象
let s = “字符串”	直接赋值

成员方法

成员方法	说明
length属性	获取字符串长度
charAt(index)	获取指定索引处的字符
indexOf(value)	获取指定字符串出现的索引位置,找不到为-1
substring(start,end)	根据指定索引范围截取字符串 (含头不含尾)
split(value)	根据指定规则切割字符串，返回数组
replace(old,new)	使用新字符串替换老字符串

<script>
    //1. 构造方法创建字符串对象
    let s1 = new String("hello");
    document.write(s1 + "
");

    //2. 直接赋值
    let s2 = "hello";
    document.write(s2 + "
");

    //属性
    //1. length   获取字符串的长度
    document.write(s2.length + "
");

    //成员方法
    //1. charAt(index)     获取指定索引处的字符
    document.write(s2.charAt(1) + "
");
       // 用于遍历字符串
          for (let i = 0; i <s1.length; i++) {
              document.write(s1.charAt(i) + "
");  
          }
    //2. indexOf(value)    获取指定字符串出现的索引位置
    document.write(s2.indexOf("l") + "
");

    //3. substring(start,end)   根据指定索引范围截取字符串(含头不含尾)
    document.write(s2.substring(2,4) + "
");

    //4. split(value)   根据指定规则切割字符串，返回数组
    let s3 = "张三,23,男";
    let arr = s3.split(",");
    for(let i = 0; i < arr.length; i++) {
        document.write(arr[i] + "
");
    }

    //5. replace(old,new)   使用新字符串替换老字符串  代替部分敏感词句
    let s4 = "你会不会跳伞啊？让我落地成盒。你妹的。";
    let s5 = s4.replace("你妹的","***");
    document.write(s5 + "
");
    // 全部替换
    let s6 = s4.replace(s4,"*****");
    document.write(s6+"
");
</script>

五 RegExp

构造方法	说明
RegExp(规则)	根据指定规则创建对象
let reg = /^规则$/	直接赋值

成员方法	说明
test(匹配的字符串)	根据指定规则验证字符串是否符合

规则

表达式	说明
[a]	只能是a
[abc]	只能是abc中的某一个
[1]	只能是1
[123]	只能是123中的某一个
[a-z]	可以是a到z中的某一个
[A-Z]	可以是A到Z中的某一个
[0-9]	可以是0到9中的某一个
{5}	只能出现5次
{4,6}	只能出现4到6次

拓展  
[a-z]	这个字符必须是小写字母
[abc]	字符必须是abc
[0-9]	这个字符必须是数字
[a-zA-Z0-9]	这个字符必须是字母或者是数字
[^a-z]	这个字符不是小写字母
[\d]	等同于[0-9]
[\w]	等同于[a-zA-Z_0-9] 字母、数字、下划线
[\D]	等同于[^0-9]
[\W]	等同于[^a-zA-Z0-9_]
.	代表匹配任意字符， 若只是想代表普通数据.  需要使用转义字符来表示\.

X* 	X这个字符可以出现零次或者多次[0-9]*
X? 	X这个字符可以出现零次或者一次[0-9]? 
X+ 	X这个字符可以出现一次或者多次 [0-9]+

X{m} 	X这个字符出现次数正好m次  
X{m, } 	X这个字符出现次数至少m次
X{m, n} X这个字符出现次数至少m次,最多n次  
(X)+ 	()括号代表X所表示的内容作为一组数据出现；()括号后面的+号，代表这组数据可以出现一次或者多次
^X 		^匹配开头
X$ 		$匹配结尾

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

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

六 Array

成员方法	说明
push(元素)	添加元素到数组的末尾
pop()	删除数组末尾的元素
shift()	删除数组最前面的元素
includes(元素)	判断数组是否包含给定的值
reverse()	反转数组中的元素
sort()	对数组元素进行排序

<script>

    let arr = [1,2,3,4,5];

    //1. push(元素)    添加元素到数组的末尾
    arr.push(6);
    document.write(arr + "
");

    //2. pop()         删除数组末尾的元素
    arr.pop();
    document.write(arr + "
");

    //3. shift()       删除数组最前面的元素
    arr.shift();
    document.write(arr + "
");

    //4. includes(元素)  判断数组中是否包含指定的元素
    document.write(arr.includes(2) + "
");

    //5. reverse()      反转数组元素
    arr.reverse();
    document.write(arr + "
");

    //6. sort()         对数组元素排序
    arr.sort();
    document.write(arr + "
");

</script>

七 Set

JavaScript 中的set集合 ,元素唯一,存取顺序一致

构造方法	说明
Set()	创建Set集合对象

成员方法	说明
add(元素)	向集合中添加元素
size属性	获取集合长度
keys()	获取迭代器对象
delete(元素)	删除指定元素

<script>
    // Set()   创建集合对象
    let s = new Set();

    // add(元素)   添加元素
    s.add("a");
    s.add("b");
    s.add("c");
    s.add("c");

    // size属性    获取集合的长度
    document.write(s.size + "
");    // 3

    // keys()      获取迭代器对象
    let st = s.keys();
    for(let i = 0; i < s.size; i++){
        document.write(st.next().value + "
");
    }

    // delete(元素) 删除指定元素
    document.write(s.delete("c") + "
");
    let st2 = s.keys();
    for(let i = 0; i < s.size; i++){
        document.write(st2.next().value + "
");
    }
</script>

八 Map

JavaScript 中的 Map 集合，key 唯一，存取顺序一致

构造方法	说明
Map()	创建Map集合对象

成员方法	说明
set(key,value)	向集合中添加元素
size属性	获取集合长度
get(key)	根据key获取value
entries()	获取迭代器对象 delete(key) 根据key删除键值对
delete(key)	根据key删除键值对

<script>
    // Map()   创建Map集合对象
    let map = new Map();

    // set(key,value)  添加元素
    map.set("张三",23);
    map.set("李四",24);
    map.set("李四",25);

    // size属性     获取集合的长度
    document.write(map.size + "
");

    // get(key)     根据key获取value
    document.write(map.get("李四") + "
");

    // entries()    获取迭代器对象
    let et = map.entries();
    for(let i = 0; i < map.size; i++){
        document.write(et.next().value + "
");
    }

    // delete(key)  根据key删除键值对
    document.write(map.delete("李四") + "
");
    let et2 = map.entries();
    for(let i = 0; i < map.size; i++){
        document.write(et2.next().value + "
");
    }
</script>

九 JSON

json介绍
     JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式
    它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
    简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和生成，并有效的提升网络传输效率
    
拓展...    
    json字符串是一种规范 在不同语言中都对应有实现
    
   没有方法 function
    
    Json | js对象 | java map | java对象
    1.json字符串,kv形式的字符串
        {
           "name":"张三丰",
            "age":18,
             "hobby":["sing","dance"]
        }
    2.js对象 多了方法部分
         {
                 id: 22,
            account: "123456",
            run:function() {
                console.log("run")
	        }
          }
    3.java中的hashmap,也是key - value形式
         {
            "key": "value"
        }
    4.java对象
      class 类名{
            String name = "zhangsan";
            Integer age = 18;
        }

JSON常用方法

成员方法	说明
stringify(对象)	将指定对象转换为json格式字符串
parse(字符串)	将指定json格式字符串解析成对象

<script>
    //定义天气对象
    let weather = {
        city : "北京",
        date : "2088-08-08",
        wendu : "10° ~ 23°",
        shidu : "22%"
    };

    //1.将天气对象转换为JSON格式的字符串
    let str = JSON.stringify(weather);
    document.write(str + "
");

    //2.将JSON格式字符串解析成JS对象
    let weather2 = JSON.parse(str);
    document.write("城市：" + weather2.city + "
");
    document.write("日期：" + weather2.date + "
");
    document.write("温度：" + weather2.wendu + "
");
    document.write("湿度：" + weather2.shidu + "
");
</script>

十 案例 表单提交

表单
<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>

<script>
    //1.为表单绑定提交事件(true提交、false不提交)
    document.getElementById("regist").onsubmit = function() {
        //2.获取填写的用户名和密码
        let username = document.getElementById("username").value;
        let password = document.getElementById("password").value;

        //3.判断用户名是否符合规则  4~16位纯字母
        let reg1 = /^[a-zA-Z]{4,16}$/;
        if(!reg1.test(username)) {
            alert("用户名不符合规则，请输入4到16位的纯字母！");
            return false;
        }

        //4.判断密码是否符合规则  6位纯数字
        let reg2 = /^[\d]{6}$/;
        if(!reg2.test(password)) {
            alert("密码不符合规则，请输入6位纯数字的密码！");
            return false;
        }

        //5.如果所有条件都不满足，则提交表单
        return true;
    }
    
</script>

JavaScript BOM

BOM介绍

BOM(Browser Object Model)：浏览器对象模型。
将浏览器的各个组成部分封装成不同的对象，方便我们进行操作
   Navigator 浏览器对象 
   History 历史记录对象
   Window 窗口对象
   Location 地址栏对象
   Screen 显示器屏幕对象 

一 Window 窗口对象

定时器

唯一标识 setTimeout(功能，毫秒值)：设置一次性定时器。
    
clearTimeout(标识)：取消一次性定时器
    
唯一标识 setInterval(功能，毫秒值)：设置循环定时器
    
clearInterval(标识)：取消循环定时器
    
 加载事件    
    window.onload：在页面加载完毕后触发此事件的功能。
    

 <script> 
     // 一、定时器
       function fun(){
           alert("该起床了！");
       }
   
      //设置一次性定时器
      let d1 = setTimeout("fun()",3000);
      //取消一次性定时器
       clearTimeout(d1);
  
     // 设置循环定时器
      let d2 = setInterval("fun()",3000);
     // 取消循环定时器
      clearInterval(d2);
   
    //  加载事件 等待页面加载完成 才触发onload事件
       window.onload = function(){
           let div = document.getElementById("div");
           alert(div);
       }
   </script>
       //当script 位置变化时 加载事件 等待页面加载完成 才触发onload事件

二 Location 地址栏对象

 href 属性
   就是浏览器的地址栏。我们可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容
     //获取当前的网页地址
     let url = location.href;

<body>
    <p>
        注册成功！<span id="time">5</span>秒之后自动跳转到首页...
    </p>
</body>
<script>
    //1.定义方法。改变秒数，跳转页面
    let num = 5;
    function showTime() {
        num--;

        if(num <= 0) {
            //跳转首页
            location.href = "index.html";
        }

        let span = document.getElementById("time");
        span.innerHTML = num;
    }

    //2.设置循环定时器，每1秒钟执行showTime方法
    setInterval("showTime()",1000);
</script>

三案例 动态广告

<script>
    //1.设置定时器，3秒后显示广告图片
    setTimeout(function(){
        let img = document.getElementById("ad_big");
        img.style.display = "block";
    },3000);

    //2.设置定时器，图片显示3秒后隐藏广告图片
    setTimeout(function(){
        let img = document.getElementById("ad_big");
        img.style.display = "none";
    },6000);
</script>

JavaScript 封装

封装思想

封装：将复杂的操作进行封装隐藏，对外提供更加简单的操作
    
 获取元素的方法
document.getElementById(id值)：根据 id 值获取元素
document.getElementsByName(name值)：根据 name 属性值获取元素们
document.getElementsByTagName(标签名)：根据标签名获取元素们
   我们之前的操作都是基于原生 JavaScript 的，比较繁琐。
JQuery 是一个前端框架技术，针对 JavaScript 进行了一系列的封装，使得操作变得非常简单！ 

案例

my.js

这里将一些方法稍作封装在my.js里,做一个简单的封装
    底层还是调用原生方法
    function getById(id){
    return document.getElementById(id);
}

function getByName(name) {
    return document.getElementsByName(name);
}

function getByTag(tag) {
    return document.getElementsByTagName(tag);
}

function removeself(el){
   let parent = el.parentElement;
    parent.removeChild(el);
}

<body>
    <div id="div1">div1</div>
    <div name="div2">div2</div>
</body>
    //引入my.js
<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 divs = getByName("div2")
        alert(divs.length);
    // let div2 = document.getElementsByTagName("div");
   let div2 = getByTag("div");
    alert(div2.length);
//调用删除自己的方法
    removeself(div1);
</script>