js常用的属性与方法

js常用的属性与方法

一、常用属性

01：返回的是某个对象的索引号

lis[i].index = i;
返回的是lis中每一个小li的索引号；
一般得到当前的小li索引号的语法是
this.index

01-1：获取属性

01：dataset.id
获取自定义属性，比如<li data-id="id">
便可以通过dataset.id来获取

02：操作元素

01：element.innerHTML = ?  用于修改元素的内容或者插入内容
element.innerHTML 用于获取元素的内容
eg1:可以用于表格插入列等
tr.innerHTML = '<td>'+ value.id +' </td><td></td> ' ;等
eg2:返回每一个小li的内容
lis[i].innerHTML;:

02：表单的固有属性的修改：value,type,checked,disable等
input.value = ? 用于修改表单的值 
input.value 用于获取表单的值

03：图片的固有属性修改：src,title,id等
img.src = ? 用于修改img的路径

（3）：样式属性操作

01：element.style = ?       修改元素的样式（大小，颜色，位置等） 
注意：dispaly也是在样式这边操作的
eg:点击box盒子，它的背景颜色被修改为蓝色
    let div = document.querySelector('div');
    div.onclick = function () {
        div.style.background = 'blue';
    }
02：添加类，但是会覆盖之前的类名
element.className = ?
eg:点击box盒子，span添加了bg类
    div.onclick = function () {
        span.className = 'bg';
    }

（4）：节点操作

01：获取父节点：node.parentNode
一个父亲包含着一个孩子，两个div
    let son = document.querySelector('.son');
    let father = son.parentNode;  
    console.log(father);  结果：打印出父节点
02：获取子节点：node.children
    let father = document.querySelector('.father');
    let son = father.children;
    console.log(son);  结果：打印出子节点
03：兄弟节点：
node.nextElementSibling 返回的是当前元素的下一个节点
node.previousElementSibling返回的是当前元素的上一个节点

    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
    </div>
    let father = document.querySelector('.father');
    let son2 = document.querySelector('.son2');
    console.log(son2.nextElementSibling);
    console.log(son2.previousElementSibling);
04：创建节点： 
下面创建了两个节点，并且把div这个节点添加在father的最后一个子节点
并且把div2这个节点添加在father的最开始一个子节点
    let div = document.createElement('div');
    let div2 = document.createElement('div');
    father.appendChild(div);
    father.insertBefore(div2, father.children[0]);
    // 删除节点
    通过父节点的方式，来移除子节点
    let son3 = document.querySelector('.son3');
    father.removeChild(son3)   删除了son3这个节点
05: 克隆节点： node.cloneNode（）； 返回的是一个新的克隆节点
    let ul = document.querySelector('ul');
    var clo = ul.children[0].cloneNode(); //克隆了ul的第一个子节点
    ul.appendChild(clo);

二、高级事件梳理

（1）：添加事件和移除点击事件

01：添加事件和移除点击事件
    <button class="btn1">点击</button>
    
    let btn1 = document.querySelector('.btn1');
    let btn2 = document.querySelector('.btn2');
    btn1.addEventListener('click', fn); //给btn1添加点击事件
    function fn() {
        alert('111')
        btn1.removeEventListener('click', fn) = null; //删除了btn1的点击事情
    }

（2）：事件流与冒泡的梳理

01：事件流分为：捕获阶段-当前目标阶段-冒泡阶段
捕获阶段：是网景提出的，是由最上层Document向下查找目标；
冒泡阶段：是IE提出的，是由当前目标阶段向上一层一层查找。
注意：js之中捕获与冒泡只能处于一个阶段之中；而且onblur,onfocus,onmouseenter,onmouseleave没有冒泡事件

02：冒泡事件与阻住冒泡事件
冒泡事件：就是子元素添加了事件，会一层一层向上级查找，于是会触发父级的事件，这也就是冒泡事件了；
阻住冒泡事件： e.stopPropagation();  其中e为事件对象，类似函数中的所设置的形参，添加在事件本身。
阻止默认行为：e.preventDefault(): 来阻止a链接的跳转和提交按钮的提交
注意：e.target 返回的是谁触发了事件本身，this是指的是谁绑定了事件

03：事件委托：就是子元素的事件，不需要一一添加事件，而是委托给父元素添加事件，这样通过冒泡事件来影响每一个子元素的事件。
    ul.addEventListener('click', function (e) {
        console.log(e.target);  结果：ul标签下的点击的小li
        console.log(this);  结果：ul标签
    })

（3）：鼠标事件

01：得到鼠标距离可视区的x坐标和y坐标等    e.clientX  /Y
02：得到鼠标距离文档的x坐标或y坐标  e.pageX /Y   重要啊
03：得到鼠标距离电脑屏幕的x坐标或y坐标  e.screenX

（4）：键盘事件

keyup:键盘按下的时候，文字落地的时候，弹起来，常常用来判断输入了那个键盘字符。 与e.keyCode搭配使用，获取键盘输入了那个按键 s为83
keydown:键盘按下的时候触发事件
keypress:键盘按下的时候触发事件，不可以识别功能键，区分大小写

三、特效区的梳理（需要加特效的元素必须加定位）

（1）：PC端特效 ：

01:offset系列
	001：div.offsetWidth  ：返回该div元素的自身宽度（包括自身的padding和边框、宽度，但是不带单位）；
	002：div.offsetLeft  ：返回该div元素的相对带有定位的父元素的左边偏移量，不带单位（若是父级元素都没有定位，就是以body为准）；
eg:获得鼠标在盒子的坐标
    let div = document.querySelector('div');
    div.addEventListener('click', function (e) {
        // 鼠标在盒子的位置：就是鼠标距离文档的位置减去盒子的位置
        let x = e.pageX - div.offsetLeft;
        let y = e.pageY - div.offsetTop;
        console.log(x, y);
    })
02：client系列：

03：srroll系列：
001：ele.offsetTop :返回的是被卷去的顶测距离
002：ele.offsetLeft :返回的是被卷去的左侧距离
eg: 返回顶部的案例
思路：
一：首先侧边栏的定位是绝对定位（position），当滚动到nav的头部的时候，便修改为固定定位。所以需要获得nav被卷起的高度，然后侧边栏的卷起高度 - nav被卷起的高度 设置为侧边栏为固定定位的位置坐标。 
二：注册事件是document，因为是整个页面的滚动，于是获取页面的滚动距离为：(window.pageYOffset）这是y轴的，(window.pageXOffset）这是x轴的。
    // nav被卷起的高度
    let navTop = nav.offsetTop; 
    // 侧边栏，滚动到nav头的时候，修改侧边栏的定位固定的位置
    let sliderBarTop = sliderBar.offsetTop - navTop;
    //滚动到main区域，显示返回顶部
    let mainTop = main.offsetTop;
    document.addEventListener('scroll', function (e) {
        if (window.pageYOffset >= navTop) {
            sliderBar.style.position = 'fixed';
            sliderBar.style.top = sliderBarTop + 'px';
        } else {
            sliderBar.style.position = 'absolute';
            sliderBar.style.top = '200px';
        }
                if (window.pageYOffset >= mainTop) {
            goBack.style.display = 'block';
        } else {
            goBack.style.display = 'none';
        }
    })
        //3,当我们点击了返回顶部的按钮模块，就让窗口滚动到页面的最上方
    goBack.addEventListener('click', function () {
        //里面的x,y是不加px
        // window.scroll(0,0);
        //因为是窗口滚动做动画，把obj改为window
        animate(window, 0);
    })

（1）：三大系列的归纳 ：

01：offset系列：主要为了获取到元素的位置--- 
ele.offsetWidth（返回自身的盒子宽度，带边框，不带单位）
ele.offsetLeft（返回自身带有定位的父元素的左侧距离，一般是body）
ele.offsetTop（返回自身带有定位的父元素的左侧距离，一般是body）
02:client系列：获取元素的大小： ele.clientWidth
03:scroll系列：主要获取到滚动的距离；
ele.scrollTop: 返回的是被卷去的头部；
注意：经常与页面的滚动事件搭配使用：页面滚动获取滚动位置是：获取页面的滚动距离为：(window.pageYOffset）这是y轴的，(window.pageXOffset）。还有一个是便是返回自身盒子的宽度:ele.offsetWidth

（2）：PC端特效之动画 ：（加定位啊啊啊）

01：原理：就是通过定时器的设置，让元素不断的移动。
定时器：setIntrerval（），
还有动画js：   animate(obj, 目标值，callback);
实例：在点击div里面添加动画：  
    let div = document.querySelector('div');
    div.addEventListener('click', function () {
        animate(div, 200);
    })