web_12day

<script type="text/javascript">
        
            /*
             * 解析器在调用函数每次都会向函数内部传递进一个隐含的参数,
             *     这个隐含的参数就是this，this指向的是一个对象，
             *     这个对象我们称为函数执行的 上下文对象，
             *     根据函数的调用方式的不同，this会指向不同的对象
             *         1.以函数的形式调用时，this永远都是window
             *         2.以方法的形式调用时，this就是调用方法的那个对象
             */
            
            function fun(){
                //console.log("a = "+a+", b = "+b);
                console.log(this.name);
            }
            
            //fun();
            
            //创建一个对象
            var obj = {
                name:"孙悟空",
                sayName:fun
            };
            
            var obj2 = {
                name:"沙和尚",
                sayName:fun
            };
            
            //console.log(obj.sayName == fun);
            var name = "全局的name属性";
            //obj.sayName();
            //以函数形式调用，this是window
        fun();//全局的name属性
            
            //以方法的形式调用，this是调用方法的对象
            //obj.sayName();//孙悟空
            //obj2.sayName();//沙和尚
            
        </script>
-------------------------------构造函数--------------------------------------
<script type="text/javascript">
            
            /*
             * 创建一个对象
             */
            var obj = {
                    name:"孙悟空",
                    age:18,
                    gender:"男",
                    sayName:function(){
                        alert(this.name);
                    }
            };

            /*
             * 使用工厂方法创建对象
             *     通过该方法可以大批量的创建对象
             */
            function createPerson(name , age ,gender){
                //创建一个新的对象 
                var obj = new Object();
                //向对象中添加属性
                obj.name = name;
                obj.age = age;
                obj.gender = gender;
                obj.sayName = function(){
                    alert(this.name);
                };
                //将新的对象返回
                return obj;
            }
            
            /*
             * 用来创建狗的对象
             */
            function createDog(name , age){
                var obj = new Object();
                obj.name = name;
                obj.age = age;
                obj.sayHello = function(){
                    alert("汪汪~~");
                };
                
                return obj;
            }
            
            var obj2 = createPerson("猪八戒",28,"男");
            var obj3 = createPerson("白骨精",16,"女");
            var obj4 = createPerson("蜘蛛精",18,"女");
            /*
             * 使用工厂方法创建的对象，使用的构造函数都是Object
             *     所以创建的对象都是Object这个类型，
             *     就导致我们无法区分出多种不同类型的对象
             */
            //创建一个狗的对象
            var dog = createDog("旺财",3);
            
            console.log(dog);
            console.log(obj4);
            
            
        </script>
----------------------------------------------------------------------------------
<script type="text/javascript">
        
            /*
             * 创建一个构造函数，专门用来创建Person对象的
             *     构造函数就是一个普通的函数，创建方式和普通函数没有区别,
             *     不同的是构造函数习惯上首字母大写
             * 
             * 构造函数和普通函数的区别就是调用方式的不同
             *     普通函数是直接调用，而构造函数需要使用new关键字来调用
             * 
             * 构造函数的执行流程：
             *     1.立刻创建一个新的对象
             *     2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
             *     3.逐行执行函数中的代码
             *     4.将新建的对象作为返回值返回
             * 
             * 使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。
             *     我们将通过一个构造函数创建的对象，称为是该类的实例
             * 
             * this的情况：
             *     1.当以函数的形式调用时，this是window
             *     2.当以方法的形式调用时，谁调用方法this就是谁
             *     3.当以构造函数的形式调用时，this就是新创建的那个对象
             * 
             */
            function Person(name , age , gender){
                this.name = name;
                this.age = age;
                this.gender = gender;
                this.sayName = function(){
                    alert(this.name);
                };
            }
            
            function Dog(){
                
            }
            
            var per = new Person("孙悟空",18,"男");
            var per2 = new Person("孙悟空",18,"男");
            var per3 = new Person("奔波霸",38,"男");
            
            var dog = new Dog();
            
            /*console.log(per==per);
            console.log(dog);*/
            
            /*
             * 使用instanceof可以检查一个对象是否是一个类的实例
             *     语法：
             *         对象 instanceof 构造函数
             * 如果是，则返回true，否则返回false
             */
            //console.log(per instanceof Person);
            //console.log(dog instanceof Person);
            
            /*
             * 所有的对象都是Object的后代，
             *     所以任何对象和Object左instanceof检查时都会返回true
             */
            //console.log(dog instanceof Object);
            
            
        </script>
--------------------------------for.....in语句-------------------------------------------------
            <script type="text/javascript">
            
            var obj = {
                        name:"孙悟空",
                        age:18,
                        gender:"男",
                        address:"花果山"
                     };
                     
            //枚举对象中的属性
            //使用for ... in 语句
            /*
             * 语法：
             *     for(var 变量 in 对象){
             *     
             *  }
             * 
             * for...in语句 对象中有几个属性，循环体就会执行几次
             *     每次执行时，会将对象中的一个属性的名字赋值给变量
             */
            
            for(var n in obj){
                console.log("属性名:"+n);
                
                console.log("属性值:"+obj[n]);
            }            
            
            
        </script>
--------------------------------------原型-----------------------------------------------------
<script type="text/javascript">
            
            /*
             * 创建一个构造函数
             */
            function MyClass(){
                
            }
            
            //向MyClass的原型中添加一个name属性
            MyClass.prototype.name = "我是原型中的名字";
            
            var mc = new MyClass();
            mc.age = 18;
            
            console.log(mc.age);
            
            //使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true
            console.log("age" in mc);
            
            //可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
            //使用该方法只有当对象自身中含有属性时，才会返回true
            //console.log(mc.hasOwnProperty("age"));
            
            console.log(mc.hasOwnProperty("hasOwnProperty"));
            
            /*
             * 原型对象也是对象，所以它也有原型，
             *     当我们使用一个对象的属性或方法时，会现在自身中寻找，
             *         自身中如果有，则直接使用，
             *         如果没有则去原型对象中寻找，如果原型对象中有，则使用，
             *         如果没有则去原型的原型中寻找,直到找到Object对象的原型，
             *         Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined
             */
            
            console.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));
            
            console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));//object:hasOwnProperty
            
            console.log(mc.__proto__.__proto__.__proto__);//null
            console.log(mc.__proto__.__proto__);//object
            
            console.log(mc.hello);//undefined
            
            console.log(mc.__proto__.__proto__.__proto__)//null
            
        </script>
----------------------------------------------------------------------------------------------
<script type="text/javascript">
            
            function Person(name , age , gender){
                this.name = name;
                this.age = age;
                this.gender = gender;
            }
            
            //修改Person原型的toString
            Person.prototype.toString = function(){
                return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
            };
            
            
            //创建一个Person实例
            var per = new Person("孙悟空",18,"男");
            var per2 = new Person("猪八戒",28,"男");
            
            //当我们直接在页面中打印一个对象时，事实上是输出的对象的toString()方法的返回值
            //如果我们希望在输出对象时不输出[object Object]，可以为对象添加一个toString()方法
            //Person[name=孙悟空,age=18,gender=男]
            /*per.toString = function(){
                return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
            };*/
            
            var result = per.toString();
            //console.log("result = " + result);
            //console.log(per.__proto__.__proto__.hasOwnProperty("toString"));
            console.log(per2);
            console.log(per);
            
            
        </script>
----------------------------------数组-------------------------------------------------
    <script type="text/javascript">
            
            /*
             * 内建对象
             * 宿主对象
             * 自定义对象
             * 
             * 数组（Array）
             *     - 数组也是一个对象
             *     - 它和我们普通对象功能类似，也是用来存储一些值的
             *     - 不同的是普通对象是使用字符串作为属性名的，
             *         而数组时使用数字来作为索引操作元素
             *     - 索引：
             *         从0开始的整数就是索引
             *     - 数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据
             */
            
            //创建数组对象
            var arr = new Array();
            
            //使用typeof检查一个数组时，会返回object
            console.log(typeof arr);
            
            /*
             * 向数组中添加元素
             * 语法：数组[索引] = 值
             */
            arr[0] = 10;
            arr[1] = 33;
            arr[2] = 22;
            arr[3] = 44;
            arr[10] = 31;
            //arr[100] = 90;
            
            /*
             * 读取数组中的元素
             * 语法：数组[索引]
             *     如果读取不存在的索引，他不会报错而是返回undefined
             */
            
            console.log(arr[3]);
            console.log(arr);//arr[4]~arr[9]   
            
            /*
             * 获取数组的长度
             * 可以使用length属性来获取数组的长度(元素的个数)
             *     语法：数组.length
             * 
             * 对于连续的数组，使用length可以获取到数组的长度（元素的个数）
             * 对于非连续的数组，使用length会获取到数组的最大的索引+1
             *         尽量不要创建非连续的数组
             */
            /*console.log(arr.length);
            console.log(arr);*/
            
            /*
             * 修改length
             *     如果修改的length大于原长度，则多出部分会空出来
             *  如果修改的length小于原长度，则多出的元素会被删除
             */
            //arr.length = 10;
            
            arr.length = 2;
            
            console.log(arr.length);
            console.log(arr);
            
            arr[4] = 50;
            arr[5] = 60;
            
    /*        
    元素：        1 2 3 4
    index:  0 1 2 3  arr.length=4     arr[arr.lenth]    
            */
            
            //向数组的最后一个位置添加元素
            //语法：数组[数组.length] = 值;
            arr[arr.length] = 70;
            arr[arr.length] = 80;
            arr[arr.length] = 90;
            
            console.log(arr);
            
        </script>
-------------------------------输出数组-------------------------------------------------
    <script type="text/javascript">
            
            //创建一个数组
            //var arr = new Array();
            
            //使用字面量来创建数组
            //语法:[]
            //var arr = [];
            
            //console.log(typeof arr);
            
            //使用字面量创建数组时，可以在创建时就指定数组中的元素
            var arr = [1,2,3,4,5,10];
            
            //console.log(arr[3]);
            
            //使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作文构造函数的参数传递
            //元素之间使用,隔开
            var arr2 = new Array(10,20,30);
            //console.log(arr2);
            
            //创建一个数组数组中只有一个元素10
            arr = [10];
            
            //创建一个长度为10的数组
            arr2 = new Array(10);
            
            //console.log(arr2.length);
            //数组中的元素可以是任意的数据类型
            arr = ["hello",1,true,null,undefined];
            
            //也可以是对象
            var obj = {name:"孙悟空"};
            arr[arr.length] = obj;
            arr = [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}];//arr[0]:{name:"孙悟空"}  arr[1]：{name:"沙和尚"}
            
            //也可以是一个函数
            arr = [function(){alert(1)},function(){alert(2)}];//arr[1]:function(){alert(1)}
            
            //console.log(arr);
            //arr[0]();
            
            //数组中也可以放数组，如下这种数组我们称为二维数组
            arr = [[1,2,3],[3,4,5],[5,6,7]];
            console.log(arr[1]);
            //?  输出二维数组中的1？
            
        </script>
---------------------------------------------------------------------------------------------------------------------
    <title></title>
            <script type="text/javascript">
            
            //创建一个数组
            var arr = ["孙悟空","猪八戒","沙和尚"];
            
            /*
             * push()
             *     - 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度  
             *     - 可以将要添加的元素作为方法的参数传递，
             *         这样这些元素将会自动添加到数组的末尾
             *     - 该方法会将数组新的长度作为返回值返回
             */
            
            var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");
            
            
            console.log(arr);
            //console.log("result = "+result);
            
            /*
             * pop()
             *     - 该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
             */
            result = arr.pop(); 
            result = arr.pop(); 
            result = arr.pop();  
            console.log(arr);
            //console.log("result = "+result);
            
            /*
             * unshift()
             *     - 向数组开头添加一个或多个元素，并返回新的数组长度
             *     - 向前边插入元素以后，其他的元素索引会依次调整
             */
            //console.log(arr);
            
            arr.unshift("牛魔王","二郎神");
            
            console.log(arr);
            
            /*
             * shift()
             *     - 可以删除数组的第一个元素，并将被删除的元素作为返回值返回
             */
            result = arr.shift();
            result = arr.shift();
            
            console.log(arr);
            console.log("result = "+result);
            
            
        </script>
----------------------------------------------
<script type="text/javascript">
            
            //创建一个数组
            var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
            
            //所谓的遍历数组，就是将数组中所有的元素都取出来
            /*console.log(arr[0]);
            console.log(arr[1]);
            console.log(arr[2]);
            console.log(arr[3]);*/
            
            for(var i=0 ; i<arr.length ; i++){
                console.log(arr[i]);
            }
            
        </script>
-----------------------------------------全选按钮---------------------------------------------------------
<script type="text/javascript">
    window.οnlοad=function(){
        
    var qx=document.getElementById('bt');
        var dx=document.getElementsByTagName('input');
        qx.οnclick=function(){
            //dx.checked=true;
            console.log(dx.length)
            for(var i=0;i<dx.length;i++){
                dx[i].checked=true;
            }
             
        }                
        
    }        
            
        </script>
    </head>
    <body>
        <p id='bt' >全选</p>
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />  
    </body>
--------------------------------------------------------------------------------------
<script type="text/javascript">
            
            function Person(name , age , gender){
                this.name = name;
                this.age = age;
            }
            
            //修改Person原型的toString
            Person.prototype.toString = function(){
                return "Person[name="+this.name+",age="+this.age+"]";
            };
            
            //创建一个Person对象
            var per = new Person("孙悟空",18);
            var per2 = new Person("猪八戒",28);
            var per3 = new Person("红孩儿",8);
            var per4 = new Person("蜘蛛精",16);
            var per5 = new Person("二郎神",38);
            
            /*
             * 将这些person对象放入到一个数组中
             */
            var perArr = [per,per2,per3,per4,per5];
            
            /*
             * 创建一个函数，可以将perArr中的满18岁的Person提取出来，
             *     然后封装到一个新的数组中并返回
             * arr
             *     形参，要提取信息的数组
             */
            function getAdult(arr){
                //创建一个新的数组
                var newArr = [];
                
                //遍历arr，获取arr中Person对象
                for(var i=0 ; i<arr.length ; i++){
                    var p = arr[i];
                    //判断Person对象的age是否大于等于18
                    if(p.age >= 18){
                        //如果大于等于18，则将这个对象添加到newArr中
                        //将对象放入到新数组中
                        newArr.push(p);
                    }
                }
                //将新的数组返回
                return newArr;
                
            }
            
            var result = getAdult(perArr);
            
            console.log(result);
            
            
        </script>
----------------------------------回调函数------------------------------------------------------------
<script type="text/javascript">
            
            /*
             * 一般我们都是使用for循环去遍历数组，
             *     JS中还为我们提供了一个方法，用来遍历数组
             * forEach()
             *         - 这个方法只支持IE8以上的浏览器
             *             IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach
             *             还是使用for循环来遍历
             */
            
            //创建一个数组
            var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
              
            /*
             * forEach()方法需要一个函数作为参数
             *     - 像这种函数，由我们创建但是不由我们调用的，我们称为回调函数
             *     - 数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素
             *         以实参的形式传递进来，我们可以来定义形参，来读取这些内容
             *     - 浏览器会在回调函数中传递三个参数：
             *         第一个参数，就是当前正在遍历的元素
             *         第二个参数，就是当前正在遍历的元素的索引
             *         第三个参数，就是正在遍历的数组
             *         
             */
            arr.forEach(function(value , index , obj){
                console.log(index+":"+value+obj);
            });
            
            
        </script>
--------------------------------------------------------------------------
<script type="text/javascript">
            
            var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
            
            /*
             * slice()  [)
             *     - 可以用来从数组提取指定元素
             *     - 该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
             *     - 参数：
             *         1.截取开始的位置的索引,包含开始索引[
             *         2.截取结束的位置的索引,不包含结束索引)
             *             - 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
             *         - 索引可以传递一个负值，如果传递一个负值，则从后往前计算
             *             -1 倒数第一个
             *             -2 倒数第二个
             */
            
            var result = arr.slice(1,4);
            
            result = arr.slice(2);
            
            result = arr.slice(1,-2);//猪八戒","沙和尚
            
            console.log("看这里："+result);
            
            /*
             * splice()
             *     - 可以用于删除数组中的指定元素
             *     - 使用splice()会影响到原数组，会将指定元素从原数组中删除
             *         并将被删除的元素作为返回值返回
             *     - 参数：
             *         第一个，表示开始位置的索引
             *         第二个，表示删除的数量
             *         第三个及以后。。
             *             可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边
             *     
             */
            
            arr = ["0孙悟空","1猪八戒","2沙和尚","3唐僧","4白骨精"];
            //var result = arr.splice(1,2,"牛魔王","铁扇公主","红孩儿");//从下标为1的位置开始删除2个元素 并且在下标为1的位置添加三个"牛魔王","铁扇公主","红孩儿"元素
            //var result = arr.splice(1,2);作用是删除从下标为1的地方开始删2个元素
            
            console.log(arr);
            //console.log(result); 
            
            
        </script>
----------------------------------------------------------------------------------------------------------------
<script type="text/javascript">
            
            //创建一个数组
            var arr = [1,2,3,2,2,1,3,4,2,5];        
            
            //去除数组中重复的数字
            //获取数组中的每一个元素
            for(var i=0 ; i<arr.length ; i++){
                //console.log(arr[i]);
                /*获取当前元素后的所有元素*/
                for(var j=i+1 ; j<arr.length ; j++){
                    //console.log("---->"+arr[j]);
                    //判断两个元素的值是否相等
                    if(arr[i] == arr[j]){
                        //如果相等则证明出现了重复的元素，则删除j对应的元素
                        arr.splice(j,1);
                        //当删除了当前j所在的元素以后，后边的元素会自动补位
                        //此时将不会在比较这个元素吧，我需要在比较一次j所在位置的元素
                        //使j自减
                        j--;
                    }
                }
            }
            
            console.log(arr);
            
            
        </script>
--------------------------------------------------------------------------------------------