由于工作需要，需要扎实的js基础，再回头系统巩固一下js知识。以前学过，仅停留在浅层阶段，这次将实战下去。学习过程中，内容会不定期更新。

JavaScript

JavaScript

NaN 非数字
null
undefined

什么是闭包：

子函数可以使用父函数的变量

命名规范

json

数组

添加元素 push() 从尾部添加 unshif()从头部添加
删除 pop从尾部弹出， shif从头部弹出
splice 先删除后插入
concat 连接数组
join 分隔符
sort 排序（比较数组）

arr1.splice(起点， 长度)
arr1.concat(arr2)
arr1.join('--')
arr3.sort()
arr4.sort(function(n1, n2){
    return n1-n2;
})

定时器

开启定时器

setInterval 间隔型
setTimeout 延时型

停止定时器

clearInterval
clearTimeout

数码时钟

效果思路

获取系统时间

Date对象
getHours、getMinutes、getSeconds

延时提示框

任务

原来的方法
- 移入显示、移除隐藏
移除延时隐藏
- 移入下面的Div后，还是隐藏了
简化代码
- 合并两个相同的mouseover和mouseout事件

无缝滚动

物体运动的基础
- 让div移动起来
- offsetLeft的作用左偏移
- 定时器让物体连续移动

DOM

标签 css

元素 js

节点 DOM

一颗倒插树结构

window.onload = function(){
    var oUl = document.getElementById('ul')
}

空白文本是文本几点

子节点

chindNode 子节点，会把空白文本也算作一个节点
nodeType 节点的类型 nodeType == 3 —>文本节点
- nodeType == 1 元素节点
children 子元素节点，仅算元素第一层

父节点

parentNode
offsetParent 获取元素在页面上的实际位置

css定位，元素没有设置absolute left top bottom right 设置无效，相对父级设置relative的元素进行绝对定位

DOM节点2

首尾节点有兼容性问题高版本用后面的方式
- firstChild、firstElementChild
- lastChild、lastElementChild
兄弟节点，有兼容性问题
- nextSibling、nextElementSibling
- previousSibling、previousElementSibling

操作元素的方法

元素.style.display = ‘none’
元素.style[‘display’] = ‘none’
DOM方式

let txt = document.getElementById('txt1')
let btn = document.getElementById('btn1')

btn.onclick = function(){
    //1
    txt.value = '设置值'
    //2
    txt['value'] = '设置值'
    //3 setAttriabute('name', 'value')
    txt.setAttriabute('value', '设置值')
}

DOM方式操作元素属性
- 获取：getAttribute(名称)
- 设置：setAttribute(名称，值)
- 删除：removeAttribute(名称)

DOM元素灵活查找

用className选择元素
- 选出所有元素
- 通过className条件筛选
封装成函数

function getByClass(oParent, sClass){
    let result = []
    let ele = oParent.getElementByTayName('*')

    for (let i = 0; i < ele.length; i++) {
        if(ele[i].className == sClass){
            result.push(ele[i])
        }
    }
    return result
}

21事件基础

event对象和事件冒泡

什么是event对象

用来获取事件的详细信息：鼠标位置、键盘按键

例子

clientX
document.childNodes[0].tagName

获取event对象（兼容写法）

var oEvent = ev || event

事件流

事件冒泡

取消冒泡：oEvent.cancleBubble=true

鼠标事件

clientX

clientY

键盘事件

document.onkeydown = function(ev){
    let oEvent = ev || event
    alert(oEvent.keyCode)
}

例子：

键盘控制div移动
ctrlKey、shiftKey、altKey

例子：按ctrl+enter提交留言

window.onload=function(){
    let oText1=document.getElementById('txt1')
    let oText2=document.getElementByid('txt2')
    //let oBtn=document.getElementById('btn1')

   // oBtn.onclick=function(){
      //  oTxt2.value += oTxt1.value + '\n'
       // oTxt1.value = ''
    //}

    oTxt1.onkeydown = function(ev) {
        let oEvent = ev || event
        if(oEvent.keyCode == 13 && oEvent.ctrlKey) {
            oTxt2.value += oTxt2.value + '\n'
            oTxt1.value = ''
        }
    }
}

javascript基础继续学习