JS入门 | chagelo

定义一个数组

1
2
3

var arr_1 = [1, 2, 3, 5, 6, 2, 1]
var arr_2 = ['abds',12, undefined, function f() {console.log('hello');}];
console.log(arra_1); //object

注释

单行注释用//，多行注释以/*开始，以*/结尾；

闭包

使用闭包可以从内部函数访问外部函数作用域。

function outer() {
    var i = 10;
    function inner() {
        i++;
        console.log(i);
    }
    return inner;
}
var inner1 = outer();
inner1(); // 11
inner1(); // 12
var inner2 = outer();
inner2(); // 11
inner2(); // 12

匿名函数

可以使用匿名函数创建命名空间，只要把自己的代码写在这个特殊函数内，外部就不能访问，还可以减少全局变量的使用。

var f = function() {console.log('1');};
f(); // 1
// 下面即是定义一个匿名函数，并且立即执行(IIFE，即立即调用的函数表达式)
(function(x, y){
    console.log(x + y);  
})(2, 3);
//下面的写法可以上函数立即执行，还可以将前面加上其他符号
~function(){}();
!function(){}();
+function(){}();
-function(){}();
//···

IIFE

IIFE，即立即调用的函数表达式，仅仅是一个表达式，不能像函数一样，把他赋给一个变量；

for (var i = 0; i < 10; i++) {
    // console.log(i);
    (function(m) {
        console.log(m);
     })(i);
}

什么是DOM

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

W3C DOM 标准被分为 3 个不同的部分：

Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型

HTML DOM是关于如何获取、更改、添加或删除HTML元素的标准。它定义了作为对象的HTML元素，所有HTML元素的属性，访问所有HTML元素的方法，所有HTML元素的事件；

HTML DOM模型被结构化为对象树；通过这个对象，js能够对HTML进行操作；

js能够改变页面中的所有HTML元素
js能改变页面中所有HTML属性
js能改变页面中的所有css样式

等等。。

DOM

DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分，这使得JavaScript操作HTML，不是在操作字符串，而是在操作节点，极大的降低了变成难度。

得到元素

document.getElementById("intro")，查找id="intro"的元素，找到则以对象形式返回该元素，未找到则返回null，id是区别大小写的，IE6、IE7、IE8中是不区分大小写的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello</title>
    </head>
    <body>
        <p id = "box">ppp</p>
        <script>
            var box = document.getElementById("box");
            console.log(box); // <p id = "box">ppp</p>
            box.style.background = 'red';
        </script>
    </body>
</html>

document.getElementsByTagName("p")，这个方法返回的是一个叫做HTMLCollection的东西，类似数组，里面存的是所有p标签，可以通过下标访问具体的某个标签，如果没有p标签，则返回一个空的HTMLCollection；

更改HTML属性

直接通过.来调用指定标签的属性，通过赋值的形式进行更改；另外class这个属性，要换成className，因为class是JavaScript的保留字，还有for要写成htmlFor，rowspan写成rowSpan，colspan写成colSpan;
setAttribute(string s1, string s2)，设置s1的属性值为s2，如果不存在s1属性，就添加一个属性值为s2的s1属性。
getAttribute(string name)，获取name属性的属性值；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello</title>
    </head>
    <body>
        <p id = "box">ppp</p>
        <script>
            var box = document.getElementById("box");
            box.id = "box1";
            box.innerText = "123";
            box.setAttribute("id", "box2");
            console.log(box.getAttribute("id")); // box2
            console.log(box.getAttribute("p")); // 123
            console.log(box.getAttribute("id")); //box2
        </script>
    </body>
</html>

需要注意的是，使用.或使用getAttribute来获取属性值是有区别的，前者是不能获取自定义属性的，后者是可以的，并且.获取的属性的属性值是object的，而getAttribute获取的属性属性值是string类型的。

操作元素样式

比较简单就不说了。

事件监听

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hello</title>
        <style>
            .box{
                width: 200px;
                height: 200px;
                background-color: skyblue;
            }
        </style>
    </head>
    <body>
        <div class="box" id="idbox">div</div>
        <script>
            var box = document.getElementById("idbox");
            console.log(box.click);
            box.onclick = function f() {
                console.log('hi');
            }
        </script>
    </body>
</html>

时间的类型有onclick（单击）、onmouseover（鼠标进入）、onmouseout（鼠标离开）、ondblclick（双击）、onfocus（得到焦点）、onblur（失去焦点）、onmousedown（鼠标按下）、onmouseup（鼠标按键抬起）。

DOM

批量监听

var p_arra = document.getElementsByTagName('p');
for (var i = 0; i < p_arra.length; i++) {
    //IIFE
    (function(m){
        p_arra[m].onclick = function() {
            console.log(m);
        };
    })(i);
}

var p_arra = document.getElementsByTagName('p');
for (var i = 0; i < p_arra.length; i++) {
    // 绑定自定义属性
    p_arra[i].idx = i;
    p_arra[i].onclick = function() {
        console.log(this);
        console.log(this.idx);
    };
}