js学习笔记----Day05轮播图和节点概念

轮播图

• 开关的作用, 使其不能连续点击. 造成offsetX累加使速度变快.

• 原理: 若动画木有放完, 其进行下次点击时控制让其return.

发送验证码

• 备份指针

var that = this;

动态跳转

window.location.href = 'https://www.baidu.com/';

• 方法一: 循环定时器

• 方法二: 延时定时器(使用了递归, 通俗来说就是寄几调用寄几):

//setTimeout() 中再调用setTimeout()
function fn() {
    count--;
    oh2.innerHTML = count +  '秒后跳转';

    //递归限制条件
    if(count <= 0){
        //动态跳转
        window.location.href = 'https://www.baidu.com/';
        //return
    }else{
        //递归
        //setTimeout(fn , 1000);
        //console.log(arguments.callee);
        setTimeout(arguments.callee, 1000);
    }
}

timer = setTimeout(fn, 1000);

• arguments.callee 获取当前的函数名(对象方法)

注意递归的用法: 一定要设置限制条件, 否则会造成死循环

bug问题:

• 解决方案:

1. onclick方法里先清除上一个定时器

2. 开关思想: 进入时判断若正在执行动画让其return. 动画结束时使其关闭

innerHTML 用于修改元素的结构

innerText 用于修改内容.

节点概念

节点概念-树状图.gif

• 子节点: 包含所有的元素节点, 属性节点, 文本节点, 注释节点, nodeType分别是1,2,3,8

• 子元素: 元素节点.

节点操作

节点操作.gif

js操作DOM一览表.png

1. 创建节点

var h1 = document.createElement('h1'); h1.innerHTML = '我是标题';

2. 添加子节点 .appendChild();

3. 删掉子节点 .removeChild();

注意:

• 删除时, 只能由父节点删除, 爷爷节点之类的都不可行

• 若节点找不到, 则返回null

4. 替换子节点 .replaceChild();

5. 插入子节点 .insertBefore(op, h2); //在h2前方插入op

• 若.insertBefore(op, null); 则插入于末尾, 效果同appendChild();

6. 复制节点 .cloneNode();

获取孩子节点

1. 获取元素的所有节点(包含所有的元素节点, 属性节点, 文本节点, 注释节点, nodeType分别是1,2,3,8):

• childNodes();

2. 获取元素的所有子元素(指的是元素节点)

• childrens();

获取兄弟节点

1. 获取当前节点的下一个兄弟元素:

• nextElementSibling();

2. 获取当前节点的下一个兄弟节点:

• nextSibling();

3. 获取当前节点的上一个兄弟元素:

• previousElementSibling();

4. 获取当前节点的上一个兄弟节点:

• previousSibling();

兼容问题:

nextElementSibling 在IE9以上用这个

nextSibling IE9一下用这个

• 兼容写法

var next3 = btn.nextElementSibling || btn.nextSibling;

获取父节点

• parentNode();

    //获取第一个子元素
    console.log(ele.firstElementChild);
   // 或者用
    console.log(ele.firstChild.nextSibling);

    //获取最后一个子节点
    console.log(ele.lastElementChild);    
   //或者用
    console.log(ele.lastChild.previousSibling);

• firstChild();

• firstElementChild();

• lastChild();

• lastElementChild();

通过类名获取标签的封装

• getElementsByClassName(); 只支持IE9以上

• 兼容写法:

    function getEleClassName(dom,className) {
        if (dom.getElementsByClassName){
            // 此方法可以识别   
            return dom.getElementsByClassName(className);
        }else {
            // 方法不能识别 *通配符选择器,可以获取dom下面的所有标签     
            var eles = dom.getElementsByTagName('*');
            // 存放标签    
            var tempArr = [];
            for(var i = 0; i<eles.length; i++){
                if (eles[i].className == className){
                    tempArr.push(eles[i]);            }
            }
            return tempArr;
        }
    }

获取文档元素

1. 获取文档标题title

2. head

3. body

//用的较多, 不用设置id即可拿到body
document.body

4. html

document.documentElement

5. 往文档中写内容

document.write(); 

九宫格排列

九宫格排列原理.png