JavaScript（Web APIs）

1>选择匹配的第一个元素

        document.querySelector('css选择器')【返回CSS选择器匹配的第一个对象】

2>选择匹配的多个元素

        document.querySelectorAll('css选择器')【返回CSS选择器匹配的对象集合】

3>css选择器补充知识（优先级逐渐升高）

        type选择器：标签名

        class选择器： .类名

        id选择器：#i

obj.innerText=值【只识别文本】

obj.innerHTML=值【会识别标签】

1>通过style属性：obj.style.样式属性=值

2>通过类名(className)

        obj.className=css类名

        【让对象的类指向写好的CSS代码；css类名会覆盖之前的类名，css类名可以有多个】

3>通过classList【避免直接通过类名修改会覆盖之前的类】

        obj.classList.add('类名')【追加类】

        obj.classList.remove('类名')【删除类】

        obj.classList.toggle('类名')【切换类，有则删、无则加】

1>html5推出自定义属性：data-

2>查询标签自定义属性：

        obj.dataset或obj.dataset.属性名【后者的属性名为data-后面的部分】

obj.addEventListener('事件类型',要执行的函数)

【addEventListener可多次绑定一个对象的同一事件，对象发生一个事件会产生多个效果】

1>鼠标事件

        click鼠标点击

        mouseenter鼠标经过

        mouseleave鼠标离开

2>焦点事件（表单获得光标）

        focus获得焦点

        blur失去焦点

3>键盘事件

        Keydqwn键盘按下触发

        Keyup键盘抬起触发

4>文本事件

        input用户输入事件

事件流定义：事件执行过程中的流动路径，分为捕获阶段和冒泡阶段

事件冒泡：一个元素触发事件后，会依次向上调用所有父级元素的同名事件

阻止冒泡：obj.stopPropagation()【阻止上级触发事件；写在监听函数中，obj用e替代】

obj.removeEventListener('事件类型',要执行的函数)【匿名函数无法解绑】

1>等待加载：load等待对象加载完毕

2>元素滚动：scroll滚动

        获取位置：属性scrollLeft和scrollTop表示内容往左(上)滚出去看不到的距离

        获取html对象：document.documentElement【网页滚动，是html对象在滚动】

3>页面尺寸：resize页面尺寸改变

04、元素的尺寸与位置（属性）

client-系列属性（不包含边框）

offset-系列属性（包含边框）（eg. offsetTop上边距）

1>实例化：const date=new Date()

2>常用方法：

        .getFullYear()【年份】

        .getMonth()【0~11】

        .getDate()【一个月中的第几天】

        .getDay()【0~6】

        .getHours/Minutes/seconds()【0~23/59】

3>时间戳：

        定义：1970年1月1日0时0分0秒至今的毫秒数，是一种特殊的计时方式

        获取方式：时间戳=+new Date()【实参传入时间可以获取指定时间戳】

1>DOM节点类型：元素节点（重点）、属性节点、文本节点

2>查找节点

        父节点：子节点.parentNode

        子节点：父节点.children【获得所有元素节点，返回一个伪数组】

        兄弟节点：节点.nextElementSibling、节点.previousElementSibling【下(上)一个兄弟节点】

3>增加节点

        创建节点：document.createElement('标签名')

        追加节点：

                父节点.appendchild(要插入的元素)【追加在父节点的子结点队尾】

                父节点.insertBefore(要插入的元素,在哪个元素前)【追加在指定子结点前面】

        克隆节点：节点.cloneNode(布尔值)【默认为false，代表克隆时不包含后代节点和标签内容】

4>删除节点：父元素.removeChild(要删除的元素)

touch触屏

        -start【手指触摸到一个 DOM 元素时触发】

        -move【手指在一个 DOM 元素上滑动时触发】

        -end【手指从一个 DOM 元素上移开时触发】

03、JS插件

Swiper滑动特效插件

01、location对象的常用属性和方法

location.href【URL地址，对其赋值可跳转页面】

location.search【地址中的参数，?后的部分】

location.hash【地址中的哈希值，#后的部分】

location.reload()【刷新页面，传入参数true表示强制刷新】

02、navigator对象的常见属性

通过userAgent属性检测浏览器的版本与平台

03、history对象的常见方法

.back()

.forward()

.go()【参数为正数表示前进】

00、语法

1>声明：const 变量=/正则表达式/

2>匹配

        变量.test(被检查字符串)【返回布尔值】

        变量.exec(被检查字符串)【返回数组】

01、元字符（特殊字符）

1>边界符【必须用什么开头/结尾】

        ^e【以e开头】

        e$【以e结尾】

2>量词【表示重复次数】

        *【重复次数∈[0,+∞)】

        +【重复次数∈[1,+∞)】

        ?【重复次数∈[0,1]】

        {n}【重复次数=n】

        {n,}【重复次数∈[n,+∞)】

        {n,m}【重复次数∈[n,m]】

3>字符类

        [] 匹配字符集合【匹配括号中任意一个字符即可】

        [a-z]【表示全部小写字母】

        [^a-z]【表示除了小写字母以外的字符】

        预定义:某些常见模式的简写方式【大写表示取反】

                \d：[0-9]

                \w：[A-Za-z0-9_]

                \s：[\t\r\n\v\f]

4>精确匹配

        ^e$【以同一个e开头结尾】

        ^e+量词$【以e开头e结尾，中间不能有别的】