前端学习js第一篇

js的引用数据类型：

一、数组：

1、创建数组
2、数组的属性
3、数组的方法

二、对象：

1、创建：
字面量法：var obj = {};
2、对象的读写：
读取：

1）点运算符：对象名.属性;
2）[]运算符：对象名[‘属性’];

3、引用：

1）基础数据类型赋值后不再有联系，
2）对象赋值后就绑定到一起，赋值给的是地址，两个变量指向同一个地址：obj1 = obj2;
obj1的值改变，则obj2的值也改变

4、点运算、[]的区别
5、

三、函数：

1、创建（三种方法）：

//(1)function命令法：
        function test1(){
            alert('我是test1');
        }
        test1();
//(2)函数的表达式法（js推荐）：
        var test2 = function(){
            alert('我是test2');
        }
        test2();
//(3)function构造函数式：(前面是参数，后面是语句，都要用引号引起)
        var test3 = new Function("a", "b","c","return a+b+c");
        alert(test3(12, 7, 1));
//函数的执行顺序：优先解析相当于全局变量的function语句式所创建的函数，
//函数名相同时，函数会一直被覆盖，即js没有重载

2、函数和变量的声明提升

（1）变量的声明提升：所有用var关键字声明的变量的声明会被提前到所在作用域最上面，声明提前，但赋值留在原地。
不使用var关键字声明的变量是全局变量，不会被提升。

console.log(a);
var a = 10;
//等价于：
var a;
console.log(a);
a = 10;

（2）函数的声明提升：函数声明提前到所在作用域的最上面

fn();
function fn(){};
//注意：function命令法可以在声明之前调用函数，函数表达式法不可以在声明之前调用函数

3、参数(都是string类型)：形参和实参
arguments模拟函数的重载

4、返回值：
返回到函数调用处
没有返回值的函数，硬要输出，则输出undefined

5、作用域：指函数生效的范围
1）全局作用域：全局变量
2）函数作用域：局部变量
全局变量：在函数外部声明的|在函数内部没有用var关键字声明的（函数执行后才有值）。在任何位置都可以访问
局部变量：只在局部访问
凡是声明在全局作用域中的函数都是window的函数

function test(){
	var a = b = c = 5;
}
//只有a是局部变量，b和c是全局变量

6、闭包
（1）闭包的作用：
返回函数的局部变量；
让局部变量不被垃圾回收机制回收，延长生命周期；
闭包的this对象都是window（因为是window调用的闭包）。
（2）调用闭包函数的不同写法：

function fn1（）{
    var num = 999;
	function fn2(){
		console.log(num);
	} 
	return fun2;
}
var rel = fn1();  // 调用一次函数返回一个函数，再调用相当于上次返回函数的执行
rel();
//  等价于：
fn1()();  // 这句话相当于直接执行函数

5、模拟

<script>
    // 利用js对象的特性去掉重复项：
    // js的特性:对象的属性只能有一个，对象的属性值可以有很多个，给同一个属性赋予属性值，属性值会不断覆盖前一个值
    // 所以利用属性只能有一个的特性去掉重复值
  
    //思路：1、把数组转成一个js对象
    // 2、把数组中的值变成js对象的key
    // 3、把这个对象再还原成数组

    var arr =[2, 1, 2, 10, 2, 3, 5, 5, 1, 10, 13];

    //把数组转成对象：
    // function toObject(arr){

    // }
    var toObject = function(arr){
        var obj = {};
        var j;
        for (var i = 0, j= arr.length; i < j; i++){
            obj[arr[i]] = true;  // 随便给一个值即可
        }
        return obj;
    }

    //把对象转成数组：
    var keys = function(obj){
        var arr = [];
        for(var attr in obj){  //这样遍历遍历的是对象的属性（key）
            if(obj.hasOwnProperty(attr)){
                arr.push(attr);
            }
        }
        return arr;
    }

    //综合起来变成一个函数：
    function unic(newarr){  //传过来任何一个数组
        return keys(toObject(newarr));
    }

    alert(unic(arr));
    alert(arr);
    </script>

<script>
        // 模拟java里的map,写一个函数，使Map具有put方法
        function Map(){
            var obj = {}; // 空的对象容器，用于承装键值对

            this.put = function(key, value){
                obj[key] = value; // 把键值对简单的绑定到obj对象上
            }

            this.size = function(){
                var count = 0;
                for(var attr in obj){
                    count ++;
                }
                return count;
            }

            this.get = function(key){
                // 如果value值是0或false时，if条件判断为假，所以一定要严谨   不严谨：if(obj[key])
                if(obj[key] || obj[key] === 0 || obj[key] === false){
                    return obj[key];
                }else{
                    return null;
                }
            }

            this.remove = function(key){
                if(obj[key] || obj[key] === 0 || obj[key] === false){
                    delete obj[key];
                }
            }

            //遍历Map里面的所有元素(eachMap充当map容器的方法)
            this.eachMap = function(fn){
                for(var attr in obj){
                    fn(attr , obj[attr]);  //再把这个值放回去
                }
            }
        }

        // 相当于   var obj = new Object(),然后自己定义object里面的方法
        var m = new Map();
        m.put('01','abc');
        m.put('02',120);
        m.put('03',true);
        m.put('04',new Date());
        alert(m.size());
        // alert(m.remove('01'));
        // alert(m.get('01'));

        //写成这样的是回调函数：
        m.eachMap(function(key, value){
            alert(key + ":" + value);
        })
    </script>

DOM

一、节点：

1、DOM规定HTML中一切都称为节点
1）整个文档称为文档节点
2）所有元素称为元素节点（element node）
3）所有文本称为文本节点（text node）
4）所有属性节点称为属性节点（attribute node）
5）所有的注释称为注释节点

2、所有节点之间都有联系：
1）父节点
2）子节点
3）兄弟节点
注意：属性和元素是兄弟节点

3、document节点：
document节点又可以称为document对象
document节点为HTML文档的根节点
只要浏览器一加载，会自动生成document节点

4、document节点常用的属性：
1）文档的标题：document.title;
2）文档的本地地址：document.laction.href;

二、获取页面元素：

1、通过ID获取：
document.getElementById(‘ID名’);

2、通过标签名获取：
document.getElementsByTagName(‘标签名’);
返回的是数组
需求不一样时，节点可以变：(只有通过标签名获取，才可以改变节点的范围)
node（范围）.getElementsByTagName(‘标签名’);

<ul id="ul">
        <li>无序列表1</li>
        <li>无序列表1</li>
        <li>无序列表1</li>
</ul>
    <ul>
        <li>无序列表2</li>
        <li>无序列表2</li>
        <li>无序列表2</li>
    </ul>
var ul1 = document.getElementById('ul');
//获取ul下的无序列表1：
var list = ul1.getElementsByTagName('li');

3、通过className获取：
document.getElementsByClassName(‘classname’);
返回的是数组

4、通过css选择器选择页面元素：
document.queySelector(‘css选择器的写法（如：.box）’);
获取符合条件的第一个元素
document.querySelectorAll();
获取符合条件的所有元素，返回数组类型

三、创建页面元素：

1、创建元素：
document.createElement('元素名');
// 父节点.appendChild(子节点);

2、创建文本节点：
document.createTextNode('文本');
// 父节点.appendChild(子节点);

3、创建属性：
document.createAttribute('属性名');
// 属性.value='属性值';
// 元素.setAttributeNode(属性名);

4、属性赋值：
属性.value='属性值';
// 元素.setAttributeNode(属性名);

5、作为子节点追加到页面：
父节点.appendChild(子节点);

6、设置属性节点：
(因为属性和元素是兄弟节点的关系，所以不能直接用appendChild，有自己的方法，将自己添加到元素上)
元素.setAttributeNode(属性名);

四、操作页面元素的属性：

1、元素节点方法：操作页面中所有属性

1、获取元素属性：
元素.getAttribute(‘属性名’);
----判断元素是否有该属性
先获取元素，再获取元素的属性
如果有该属性返回属性值，没有返回null

2、设置元素的属性：
元素.setAttribute(‘属性名’,‘属性值’);
先获取元素，再设置元素的属性

3、删除元素的属性：
元素.removeAttribute(‘属性名’);
先获取元素，再删除元素的属性

2、操作style属性：

先获取元素：
1、元素.style.css属性 = ‘属性值’;
注意：
1）当css中属性用-连接，js中换成驼峰命名法
2）当属性为js关键字时，需要在是属性前加css，如：cssFloat
3）css属性值为string类型，单位要加上

2、元素.style.cssText = ‘属性：属性值；属性：属性值；…’;

3、操作className：

先获取元素：
给元素添加class属性：
元素.className = ‘classname’;
给元素设置样式：在css中已经有.classname设置属性了

4、修改页面文本內容：

先获取元素
元素.innerHTML = ‘文本’;