2023.12.17笔记

//捕获和冒泡

        //可通过事件对象的方式组织捕获和冒泡

        //false：默认---冒泡

        //true：捕获

        //事件委托

        //即通过父项使子项发生反应

        let ul = document.querySelector("ul")

        //事件移除

        btn.removeEventListener("click",函数名)

        //bom

        //bom:浏览器对象模型  核心为window

        //全局作用域的变量和函数会默认的放到window下面

        let a = 11

        //console.dir(window)

        //window.documennt.querySelector("")

        //window常见的事件

        //load加载事件 等待所有的dom加载之后执行

        //DOMContebtLoaded：当dom加载结束后完成（不会等待样式表，图片等）

        //innerWidth：返回当前窗口的宽度

        //js执行的机制

        //js单线程

        //同步：前一段代码执行完毕，下一段代码才能够开始

        //异步：做一件事情的同时去干别的事情

        //js的执行机制：

        //同步任务：放到主线程进行执行，不形成执行线

        //异步任务：放到任务队列中 不同事件 资源加载 定时器

        //异步任务涉及宏任务与微任务（关系到异步任务的顺序）

        //location

        //设置或者获取url  通讯协议：//主机（域名）[端口号]/路径[?参数]#片段

        //location

        //location.href    获取或者设置url

        //location.host

        //location.port

        location.href ="http://www.baidu.com" //此处为跳转到百度页面

       

        //location的方法

        //location.assign("网页名")  //跳转至网页

        //location.replace("网页名")  //替换网页

        //location.reload()   //强制刷新

        //navigator  获取浏览器的相关信息

        //history

        //history.forward()

        history.go(1)   //前进一个页面

        history.go(-1)  //后退一个页面

        //client

        //clientwidth获取元素的宽度  （不包含边框）

        //offsetwidth获取元素的宽度   (包含边框)

        //clientHeight

        //clientTop上边框的宽度

        //clientLeft左边框的宽度

        //注:client只能获取元素，不能进行设置

        //scroll

        //scrollWidth

        //scrollHeight

        //scrollTop

        //div.addEventListener("scroll",function(){     //此为监测的滚动事件

        //    console.log("666")

        //})

       

        //构造函数

        //1.|{}

        //2.Object

        //3.构造函数

        let name1 = {

            uname:"k",

            age:20,

            sing:function(){

                console.log("sing")

            }

        }

        function Person(){

            this.uname = uname

            this.age = age

            this.sing = function(){

                sonsole.log("singgle")

            }

        }

        let obj1 = new Person("q",22)

        console.log(obj1)

        obj1.sing()

        //原型:构造函数通过原型分配的函数能够被所有的实例化对象共享

        //每一个构造函数都存在一个属性叫做prototype，会指向另外一个对象，因此成为原型对象

        //把不变的方法，直接定义在prototype上，让所有的实例化对象共享

        //原型覆盖:constructor会丢失，一定要手动追加

        //实例对象中,存在对象原型__proto__指向构造函数的原型对象

        //原型链

        //构造函数的继承

       

        //this（谁调用，指向谁）

        //1.全局作用域中this，指向window

        //2.函数调用中的this

        //3.对象中的this，默认指向对象本身

        //箭头函数是没有this概念的，父作用域

        //4.构造函数的this指向实例化对象

        //apply(),call(),bind()可改变this的指向

        //5.事件中的this，指向事件源

       

        //正则表达式

        //1.通过构造函数创建

        let reg = new RegExp("格式字符串",[修饰符])  //修饰符非必写

        //2.字面量

        //    /格式字符串/修饰符

        let reg1 = /a/

        //正则格式字符串

        //普通字符

        //特殊字符

        //元字符（一些规定好含义的字符）  :. , \s,\S,\d,\D，\w,\W等

        //   .:匹配非换行符以外的任意字符

        //  \d:匹配数字

        //  \D:匹配数字以外的任意字符

        //  \w:匹配数字，字母，下划线

        //  \W:匹配数字，字母，下划线以外的任意字符

        //限定符

        //* :0~n

        str1.match(/.*/)

        //+ :1~n

        str1.match(/.+/)

        //? :0~1

        //{n} :重复n次

        //{n,} :>=n

        //{m,n} :至少出现m次，至多出现n次

        //便边界符

        //特殊的符号

        let b = "<strong>hello</strong>"

        let reg3 = /<[a-z]+>[a-z]+<\/[a-z]+>/

        console.log(b.match(reg3))

        //[]

        // | (此处为或)

        //i （表示匹配时忽略大小写）

        // g（表示全局匹配）