js基础学习--第三周

对象
    概念
        对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性,任何类型的数据都可以
    声明
        字面量直接声明  var obj = {};
        构造函数,使用new关键字创建  var obj = new Object()
    分类
        自定义对象
            有属性和方法
                在对象中保存的值称为属性
                在对象中保存的函数称为方法
            读取对象中的属性 obj.属性名
                如果读取对象中没有的属性名,不会报错,会返回undefined
            obj.属性名 =属性值   属性名存在就修改,  不存在添加
            删除属性    delete obj.属性名
        系统自带对象
            内置对象
                最大对象  global   不可见
                可见的最大对象  window  浏览器窗口
                    全局变量都是其属性
                    函数都是其方法
                document
                    文档对象
            数学对象 Math
                math 和其他的对象不同,他不是一个构造函数,属于一个工具类,不用创建对象,里面封装了数学运算相关的属性和方法
                Math.max()
                    获取多个数中的最大值
                Math.min()
                    获取多个数中的最小值
                Math.ceil
                    向上取整
                Math.floor
                    向下取整
                Math.round()  
                    对一个数进行四舍五入运算
                Math.abs() 
                    可以用来计算一个数的绝对值
                Math.random()  
                    取0-1之间的随机数, 不包含0和1
                Math.pow(x,y)
                    返回x的y次幂
                Math.sqrt()
                    用于对一个数进行开方
                Math.PI
                    表示圆周率π
            date时间对象
                概念
                    js中使用Date对象来表示一个时间,也可获取系统时间
                操作
                    创建时间对象
                        var date=new Date()
                    获取时间 
                        getFullYear()
                            从Date对象以四位数返回年份
                        getMonth()
                            获取当前时间对象的月份
                        getDate()
                            获取当前日期对象是几号
                        getDay()
                            获取当前日期对象是周几
                        getHours()
                            返回Date对象的小时  0~23
                        getMinutes()
                            返回Date对象的分钟  0~59
                        getSeconds()
                            返回Date对象的秒数   0~59
                        getTime()
                            获取当前对象的时间戳
                                时间戳是指从格林威治标准时间的1970年1月1日0时0分0秒到当前日期所花费的毫秒数
                    设置时间
                        setFullYear()
                            设置年
                        setMonth()
                            设置月,0~11,0表示1月,11表示12月,超过11,累加年
                        setDate()
                            设置日,超过当月最大日期,累加月
                        setHours()
                            设置小时,超过24,累加天
                        setMinutes()
                            设置分钟,超过60,累加小时
                        setSeconds()
                            设置秒,超过60,累加分钟
                        setMilliseconds()
                            设置毫秒,超过1000,累加秒
                    时间转化
                        toLocaleString()
                            根据本地时间把Date对象转化为字符串
                        toLocaleTimeString()
                            根据本地时间把Date对象的时间部分转换为字符串
                        toLocaleDateString()
                            根据本地时间把Date对象的日期部分转换为字符串
                获取时间对象
                    var d=new Date()

延时器和计时器
    定时器
        var times = setInterval(函数,时间,参数1,参数2)
            定时器第三个参数以后都是给回调函数使用
        每隔xxs执行一次
        清除
            clearInterval(times)
            定时器的返回值是清除定时器的唯一表识
        定时器累加
            一个定时器没有关闭,又触发一个
    延时器
        var times = setTimeout(函数,时间)
        延时xxs之后执行一次
        清除
            clearInterval(times)
            定时器的返回值是清除定时器的唯一表识
this
    概念
        是js中的关键字,代表当前对象
    作用
        不同的场景下表示不同的对象
    常见
        对象的方法中表示当前对象
        在js中表示window
        函数中是window
        行内绑定的事件函数中指window
        动态绑定的事件函数当前标签
        标签中指向当前标签  <p  οnclick="fn(this)">

BOM
    浏览器对象模型(Browser Object Model)  window对象
        可以将BOM看成是链接JS与浏览器窗口的桥梁
    window    浏览器中最大的对象,BOM核心对象
        属性
            window.innerHeight || document.documentElement.clientHeight
                获取可视区高度
            window.innerWidth  || document.documentElement.clientWidth
                获取可视区宽度
        方法
            open()
                打开一个新的网页
            close()
                关闭当前网页
            scrollBy(x,y)
            scrollTo(x,y)
            控制当前可视窗口的滚动
        history 历史对象
            属性
                length
                    历史记录的条数
                state
                    当前保留的状态值
            方法
                back() 
                    返回上一页,等价于history.go(-1)
                foward()
                    前进下一页,等价于history.go(1)
                go(num)
                    参数为正，前进相应的数目，为负，后退相应的数目，为0，刷新
                pushState()
                    打开一个指定的地址
                replaceState()
                    打开一个新的地址,并且使用replace
        location
            地址栏对象,,用于表示window上当前链接到的URL信息
            常见属性
                hrerf  获取或者设置地址
                hash 获取#后的参数
                search  获取?后的参数
            常见方法
                reload()  刷新页面
                assign()赋值一个新的URL,并且跳转到该URL中
                replace()  打开一个新的URL, 并且跳转   且不会在浏览器中留下之前的记录
        document
            文档对象模型
        事件
            hashchange
                根据url地址不同,跳转到不同页面.地址栏中的hash值,发生改变就会触发.
            onload
                等待html资源加载完成,才执行js
            onscroll
                滚动条事件
                    当页面滚动条滚动时,触发该事件
                获取滚动条高度
                    docuemnt.documentElement.scrollTop
                    document.body.scrollTop
                宽度
                    document.documentElement.scrollLeft
                    document.body.scrollLeft
            onresize
                窗口大小改变时触发
DOM
    文档对象模型
        Document Object Model
    使javascript有能力操作HTML文档（获取HTML标记元素，添加HTML标记元素，删除HTML标记元素等）
    节点
        节点关系
            根节点：一个HTML文档只有一个根，它就是HTML节点
            子节点：某一个节点的下级节点
            父节点：某一个节点的上级节点。
            兄弟节点：两个子节点同属于一个父节点。
        DOM的选择器(访问节点方法)节点获取
            单个节点对象
                getElementById("id名称")
                    获取网页指定id名字的元素，返回一个对象
                querySelector()
                    返回匹配到的第一个元素
            节点集合
                getElementsByClassName("标签的class属性名称")
                    通过class名获取元素，返回值是数组
                getElementsByName("标签name名称")
                    通过标签的name值获取元素
                getElementsByTagName("标签名称")
                    获取网站指定标签名称的元素
                querySelectorAll()
                    返回一个数组，哪怕只有一个元素
            遍历
                get方式获取的要转化Array.from(),才能遍历

DOM属性的基本操作
    写在元素内的所有东西都是元素的属性
        img的src
        a的href
        class等
        元素的分为两种,一种叫内置属性，一种叫非内置属性
        除class----->className,其它的属性则和html中一致
    内置属性
        innerHTML／innerText
            获取和设置非表单元素的文本值包括标签   
                innerText只能获取文本内容
            不能操作表单元素
            input 没有innerHTML 属性
                表单必须使用value
    非内置属性(自定义属性)
        非内置属性,把一些数据保存到标签上,方便进行下一步操作
        setAttribute(name,value)
            给指定对象设置属性名和属性值
            name指属性名，value指属性值
        getAttribute(name)
            获取指定对象的属性名的属性值
            返回属性值
        removeAttribute(name)
            删除指定对象的属性
            delete 主要删除js对象属性,不会对dom标签产生作用
        自定义数据属性
            数据属性的定义,必须以data-开头,后面才是属性名
            获取data数据属性 节点对象.dataset.属性名
            属性名指的是data-后面部分
    节点公共的属性
        节点之间的关系
            父子关系和兄弟关系
        父节点.firstChild
            获取父节点的第一个子节点  包含空白节点(文本节点) #text
        父节点.firstElementChild
            获取第一个元素节点
        父节点.lastChild
            获取父节点的最后一个子节点  包含空白节点
        父节点.lastElementChild
            获取最后一个元素子节点
        节点.nextSibling
            返回元素节点的的下一个兄弟节点  包含空白节点
        节点.nextElementSibling
            只返回元素节点的下一个兄弟元素节点
        节点.previousSibling
            返回元素节点的上一个兄弟节点  包含空白节点
        节点.previousElementSibling
            只返回元素节点的上一个兄弟元素节点
        节点.childNodes
            返回节点列表  包含空白节点
        节点.children
            只返回标签元素节点
        节点.parentNode
            返回当前节点的父节点
        节点.parentElement
            返回当前节点的父节点
        节点.nodeName
            返回节点对象的名字
    便捷方式获取
        document.anchors  
            获取文档所有带name的a元素
        document.links
            获取所有带href 属性的元素
        document.forms
            获取页面中所有的form元素
        document.images
            获取页面中所有的img节点对象
节点的操作
    节点创建
        元素节点：document.createElement(标签名称)
        文本节点：document.createTextNode(文本内容)
        自定义属性设置：node.setAttribute(名称，值)
    节点追加
        父节点.appendChild(子节点)
            追加到父节点中的最后一个子节点
        父节点.insertBefore(新节点,参考节点)
            将新创建的节点,追加到参考节点之前
    节点删除
        父节点.removeChild(子节点)
            使用父级删除子级节点
        节点.remove()
            自己删除自己  没有返回值
        节点.innerHTML = ''
            清空该节点所有子节点
    节点的克隆
        节点.cloneNode([true])
            不加true 只克隆顶级节点
                加true 克隆里面所有的节点
    节点替换
        父节点.replaceChild(替换的节点, 被替换的子节点)
            使用其他节点替换掉某个子节点

由于疫情影响还没结束,断断续续的学习,让我感觉js的学习的困难,但谁又没有一点倔脾气呢,就不信没有什么是一天两天一遍两遍解决不了的,如果有,那就三天四天n遍n+1遍.

留个赞呗!!!!!!!!!!!!!!