webapis

首先讲一下h5新增了一个获取元素的方式document.querySelector('#nav');引号里面可以用id可以用类也可以用后代选择，子代选择的方式都可以。返回的是第一个查询到的数据

 document.querySelectorAll('p'); 返回的是一个数组相比前面这里加了一个all表示全选，多选的意思。相比之前会方便很多。disabled可以用来设置按钮被点击后禁用点击。

通过js修改style属性。用的是驼峰命名法，例如   p.style.backgrondColor='red';就是里面的样式背景颜色如果是多个单词组成，后面的首字母需要大写。

className 添加类名，一般js操作都是提前设置好要改的属性，通过class设置类名来修改设置。

讲解一下排他思想，就是我们有一排按钮，只想点击某一个的时候点击的那个变色，其他的不变色，这个时候我们可以用排他思想来完成，点击的时候首先遍历所有按钮，让所有的按钮失去颜色，再给自己点击的按钮添加颜色。

onmouseover鼠标经过事件，onmouseout鼠标离开事件，onclick鼠标点击事件，常用

element.getAttribute('属性')自定义属性。通过绑定标签点出来。属性的值可以通过= 来赋值。

h5新增了一个获取自定义属性的方法。        console.log(div.dataset);，用来获取自定义属性。dataset。可以获取指定的自定义属性里面的名字，也是需要使用驼峰命名法。div.getAttribute('data-list-name'）  div.dataset.listName   设置的时候怎样设置，获取的时候后面的首字母大写。

parentNode 可以得到父节点，  div。parentNode    点出来的。  childNodes   同理这是获取一个子节点获取所有的子节点。nextSibling 下个兄弟节点，

 document.createElement('li');创建元素节点，  appendChild 添加元素节点，在他的子代里面添加， removeChild(child)删除子元素，

   // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容

        // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容

// 1. 传统方式注册事件

        btns[0].onclick = function() {

            alert('hi');

        }

        btns[0].onclick = function() {

                alert('hao a u');

            }

            // 2. 事件侦听注册事件 addEventListener

            // (1) 里面的事件类型是字符串 必定加引号 而且不带on

            // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）

        btns[1].addEventListener('click', function() {

            alert(22);

        })

removeEventListener删除事件。  divs[1].removeEventListener('click', fn);

        // 常见事件对象的属性和方法

        // 1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）

        // 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁

 // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点

        var ul = document.querySelector('ul');

        ul.addEventListener('click', function(e) {

            // alert('知否知否，点我应有弹框在手！');

            // e.target 这个可以得到我们点击的对象

            e.target.style.backgroundColor = 'pink';

        })

事件委托直接设置了ul及其里面的子节点的点击事件，ul设置了，li也设置了，

 // 1. contextmenu 我们可以禁用右键菜单

        document.addEventListener('contextmenu', function(e) {

                e.preventDefault();

            })

            // 2. 禁止选中文字 selectstart

        document.addEventListener('selectstart', function(e) {

            e.preventDefault();

        })

搜索框获得焦点： 使用 js 里面的 focus() 方法

   // 1. setTimeout

        // 语法规范：  window.setTimeout(调用函数, 延时时间);

        // 1. 这个window在调用的时候可以省略

        // 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0

        // 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'

        // 4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)

        // setTimeout(function() {

        //     console.log('时间到了');

        // }, 2000);

clearTimeout(timer); 清楚定时器

 // this 指向问题 一般情况下this的最终指向的是那个调用它的对象

        // 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）    // 2. 方法调用中谁调用this指向谁      // 3. 构造函数中this指向构造函数的实例

 // scroll滚动事件当我们滚动条发生变化会触发的事件

        div.addEventListener('scroll', function() {

            console.log(div.scrollTop);

        })

   // 1. 获取元素

        // 2. 手指触摸DOM元素事件

        var div = document.querySelector('div');

        div.addEventListener('touchstart', function() {

            console.log('我摸了你');

        });

        // 3. 手指在DOM元素身上移动事件

        div.addEventListener('touchmove', function() {

            console.log('我继续摸');

        });

        // 4. 手指离开DOM元素事件

        div.addEventListener('touchend', function() {

            console.log('轻轻的我走了');

    // 1. 添加类名  是在后面追加类名不会覆盖以前的类名 注意前面不需要加.

        div.classList.add('three');

        // 2. 删除类名

        div.classList.remove('one');

        // 3. 切换类

        var btn = document.querySelector('button');

        btn.addEventListener('click', function() {

            document.body.classList.toggle('bg');

        })