关于js基础笔记

变量
变量的特点-值是可变的，松散类型，同时定义多个，写入内存，前置访问undefined

var a = 5;
    var b;
    console.log(a, b, c)//5 undefined undefined
    var c = 5;
    console.log(d)//如果没有声明变量，会报错

数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)
如何检测数据类型：typeof instanceof constructor toString(最好的)

常见运算符
复合的赋值运算符-- += %=
数学运算符：+ %
比较运算符：== (隐式转换, 值) === (没有隐式转换，值和类型) 面试
逻辑运算符：& || ！–程序短路!结果一定是布尔值
一元运算符：++ –

显式转换和隐式转换
显示转换：强制转换,Number()/String()/Boolean()…
隐式转换：+ - * / % ++ – == ！…

    var str = '100';
    console.log(typeof str);//string
    console.log(typeof +str);//number

for循环
–常用

var a = [1, 2, 3, 4, 5, 6, 7, 8]
    for (var i = 0; i < a.length; i++) {
        console.log(i)//i是索引，也是下标
        console.log(a[i])//取数组a的值
    }

for…in
for…in是循环遍历索引

 var a = [1, 2, 3, 4, 5, 6, 7, 8]
    for (var b in a) {
        console.log(b)
    }

for…of
for…of是x’h遍历值

var a = [1, 2, 3, 4, 5, 6, 7, 8]
    for (var b of a) {
        console.log(b)
    }

1.for循环中有一个break意思是跳出当前循环，一般用于判断条件
2.for循环-for循环的嵌套
3.循环的概念和意义–循环如果没有结束，不会出结果。

错误类型-debug一辈子的事情
断点调试 - 遍历里面使用断点调试进行代码执行顺序的查看。

函数
创建普通函数，函数表达式(自执行函数，事件处理函数)。
函数的参数和返回值

var fn = function () { }  //函数表达式
        function fn() { }//普通函数，声明式
        !function () { }();//自执行函数,后面的分号不能省略。
        (function () { })()//自执行函数

递归：
函数在执行过程中 嵌套自己
其使用时类似循环 也需要有临界值(函数在什么时候停止)

var i = 1;           //   相当与循环的初始值
    function fn(){
        console.log("我是fn",i);
        if(i>=100){                           //     临界值
            return "哈哈";               //     停止或跳出循环
        }
        i++;                    循环
        fn();
    }

冒泡法

 var b = []             // 定义空数组
    for (var i = 0; i < 10; i++) {          //  循环10次     就是随机取出10个数字
        var a = Math.round(Math.random() * 100)            //   随机100以内的数字
        b[i] = a             //  把随机数字放到b数组
    }
    console.log(b)         //  页面打印

    for (var n = 0; n < 10; n++) {    //   循环10次

        for (var j = 0; j < b.length - 1; j++) {
            if (b[j] > b[j + 1]) {              // 判断第一个数是不是大于第二数
                var xm = b[j]              //   定义一个变量把第一个数放到里面
                b[j] = b[j + 1]          //       在把第二个值赋给第一个
                b[j + 1] = xm             //     然后把定义xm值赋给第二个值              就是把b[ j ]和b[ j+1 ]交换值
            }

        }
    }
    console.log(b)

浏览器窗口的尺寸属性
这两个属性分别是用来获取浏览器窗口的宽度和高度（包含滚动条的）

console.log(window.innerHeight, window.innerWidth)

这两个属性分别是用来获取浏览器可视区的宽高(不包括滚动条)–重要

console.log(document.documentElement.clientWidth, document.documentElement.clientHeight)

浏览器事件
onload事件：页面内容加载完成（DOM结构，图片…）后触发
事件处理函数：将函数给事件。
等页面结构加载完成，执行函数里面的代码
有了这个事件，可以将js代码放在文档任意位置，因为我都是最后执行的。（等页面结构加载完成,包括结构里面的内容）
如果不使用此事件，可以将js代码写在body区域的最下面。
一个页面只能有一个这个事件，多个后面的覆盖前面。

onscroll事件： 拖动浏览器的滚动条触发此事件。
注意事件的触发频率。拖动时会触发多次。

onresize事件：浏览器窗口缩放所触发此事件。

滚动条
滚动条距离（某些浏览器下面做兼容–没有 DOCTYPE声明的时候）
document.documentElement.scrollTop 垂直滚动条，滚动条离顶部的距离
document.documentElement.scrollLeft 左边

定时器
setInterval(函数名称或者函数体，时间)；间隔定时器(反复调用)
clearInterval( 定时器的返回值 ); 停止定时器

setTimeout(函数名称或者函数体，时间); 延时定时器，执行一次
clearTimeout( 定时器的返回值 ); 停止定时器,虽然延迟定时器是一次性的，也有需要关闭的情况

DOM元素获取
querySelector()：获取一个， 通过选择器获取元素，如果获取多个只返回第一个。
querySelectorAll()：获取多个， 通过选择器获取元素，可同时获取多个元素，类数组。

getElementsByClassName()： 获取相同类名的节点列表（IE8及以下不支持），返回类数组

getElementById()： 获取特定 ID 元素的节点–最优

getAttribute()获取特定元素节点属性的值，某些低版本浏览器不支持
setAttribute()设置特定元素节点属性的值，某些低版本浏览器不支持
removeAttribute()移除特定元素节点属性，某些低版本浏览器不支持

DOM属性-文本
innerHTML：读写元素节点里的内容，从节点的起始位置到终止位置的全部内容,包括内部的元素。

outerHTML：读写元素节点里的内容，除了包含innerHTML的全部内容外, 还包含元素节点本身。

innerText：读写某个元素节点的文本内容

DOM获取节点
childNodes：获取某一个节点下所有的子一级节点,包含空白节点(文本节点)，类数组。

children ：获取某一节点下所有的子一级 元素节点，不包含空白节点，类数组。

parentNode：获取某一个节点的 父节点

---

firstChild：获取某一节点下子一级的第一个节点,包含空白节点

firstElementChild：获取某一节点下子一级 第一个元素节点，不包含空白节点

nextSibling：获取某一个节点的下一个兄弟节点, 包含空白节点

nextElementSibling：获取某一个节点的 下一个元素节点, 不包含空白节点

attributes：获取某一个元素节点的所有属性节点

节点属性
节点：元素节点，属性节点，文本节点…

    每一个节点又包含三个属性。
    nodeType：获取节点的节点类型，用数字表示  1元素   2属性   3文本
    nodeName：获取节点的节点名称
    nodeValue： 获取节点的值

节点操作
创建元素-createElement(‘创建的标签名’)追加元素-appenChild()

insertBefore(新的节点, 存在的节点) 在box内，把新的节点节点插入到存在的节点的前面

removeChild(node) 删除box内部的子节点

cloneNode() 克隆obj节点，可以传一个布尔值为参数，如果参数为true，连同obj子元素一起克隆。

replaceChild(新添加的节点, 被替换的节点) 替换子节点

获取元素的非行间样式
getComputedStyle 和 currentStyle
这两个方法的作用是一样的，只不过一个在 非 IE 浏览器，一个在 IE 浏览器
兼容写法：

function getStyle(obj, attr) {//obj:元素对象，attr:css属性名
            if (window.getComputedStyle) {//条件用属性做，不存在就是undefined,标准
                return window.getComputedStyle(obj)[attr];
            } else {//非标准
                return obj.currentStyle[attr];//100px
            }
        }
        console.log(getStyle(oBox, 'position'))

获取盒模型宽高
offsetWidth 和 offsetHeight 盒模块的宽高。没有单位。

事件类型

onkeydown 键盘的如何健都可以触发这个事件 (要加e)
***********keyCode 输出按键对应得数字编码。
***********which属性，获取按键对应得数字同时获取鼠标按键对应得值，新的属性，老版本的ie浏览器不支持。

***********表单
onfocus 当页面或者元素获得焦点时在 window 及相关元素上面触发。

onblur 当页面或元素失去焦点时在 window 及相关元素上触发。

onchange： 当文本框(input 或 textarea)内容改变且失去焦点后触发。

onsubmit： 当用户点击提交按钮在元素上触发。

---

onmousemove 鼠标在文档移动触发 （要加e）

onmousedown 鼠标点击
***********button属性：获取鼠标的键码–低版本浏览器有兼容问题。
***********which属性，获取按键对应得数字同时获取鼠标按键对应得值，新的属性，老版本的ie浏览器不支持。

onmouseover 鼠标移入事件

onmouseout 鼠标移出事件

鼠标按下(onmousedown)

鼠标松开(onmouseup)

获取鼠标坐标的属性

clientX clientY 原点位置，窗口可视区域左上角为原点

pageX pageY 原点位置，整个页面的左上角（带滚动高度）

screenX screenY 原点位置，整个屏幕的左上角

offsetX offsetY 获取当前操作的盒子离盒子左上角的距离

document.onclick = function (e) {
    var e = e || window.event
    console.log(e.clientX,e.clientY)
}

事件流
netscape-网景-事件捕获(从最不具体的元素到最具体的元素)
microsoft-微软-事件冒泡(从具体的元素到最不具体的元素)

事件冒泡
冒泡是一直存在的，如果你看不到，只是代表父级你没有添加对应得输出。
冒泡必须是事件类型相同。不相同直接跳过，继续上面存在的冒泡。

e.stopPropagation() 停止事件冒泡 最好的方法 标准
e.cancelBubble = true;//了解的 非标准

以上是我个人笔记，不是js全部