js基础例子dom+原型+oop基础知识记录01

 //oo:概念是计算机中对于现实世界的理解和抽象的方法    //由计算机利用编程技术发展到现在的产物    //面向对象几要素    //对象：由属性和方法组成的集合   //属性：保存数据，存储在对象内存空间中的唯一的地方集合    //方法：在类外，函数叫函数，在类中，函数叫方法，用于完成想要的功能    //成员：属性与方法的统称   //创建方法3种方法    //1:直接量:语法{key:value};    //例1:

    var object1={name:'python',age:25,                sex:'hello',                f1:function () {                    console.log(this.sex);// hello                    console.log(this);//这个this指向当前对象object1                }    };    //调用    object1.f1();    //实例化创建与调用    var obj1=new Object();    obj1.name1='hello';    obj1.age1=24;    obj1.fun1=function () {        console.log(this.age1);//24    };    obj1.fun1();//    for(var a in obj1){//        console.log(a+obj1[a])//    }    // 如果程序叫创建的对象少时，建议使用var obj={}    //通过构造函数创建    function Add(a,b) {        this.a=a;        this.b=b;        this.c=function () {            console.log(this.a+this.b)        }    }    var add=new Add(3,4);    add.c();    //dom的操作:操作结构化文档的一组api(即xml/html)    //核心 dom操作页面中所有结构化文档（增，删，改，查）    //核心dom缺点：繁琐但功能全面    //html dom操作页面简化了流程 ，但无法完成功能    //document所有页面中<最大的老大>    //分以下几大类(根据级别来分，从小到大)    //标签:1> 属性:2>文本:3>document:9;    //dom对象类型    //nodeType:对象    //nodeValue:值    //nodeName:名称    //bom包含document    //原始类型比较使用2个等号    //引用类型比较使用3个等号    //&非短路逻辑  A&B  A为假 ，继续执行B，最终结果为false    //a||b a为真 b不会继续执行    //a|b A为真，继续执行B， 结果为true    //nodeName        //1:元素 标签 ，返回大写        //2:文本     #text        //3:document    #document        //假设判断是否是对应的类型            //if(node.nodeName=='BUTTON')    //nodeValue        //1:元素  null        //2:文本 文本内容    //dom树的关系    //父子关系        /*node            parentNode  每个节点最多可能有一个父节点            childNodes   返回子节点集合            firstChild   第一个子节点            lastChild    最后一个子节点        *        * 兄弟        *   previousSibling   上一个平级兄弟        *   nextSibling        下一个平级兄弟        *   注意：parentNode以外，都会受到空格，换行，制表符        *   干扰        *   解决方式：节点树   jq        *其他方式的dom树获取        * 父子        *    parentElementsNode;        *    children  --ie8        *    firstElementChild        *    lastElementChild        * 兄弟        *   nextElementSibling 下一个兄弟        *   previousElementSibling 上一个兄弟        *   递归调用:对相同数据进行操作时，使用递归函数内调用自身        *对象在内部访问其他方法和属性时，使用this        * 对象在外部访问对象方法与属性时，使用对象名        * 原型：父对象        * 父对象中的方法与属性子对象直接使用        * ，每个函数对象有一个prototype属性，指向对象{原型}        * 子对象都有一个属性__proto__指向对象{原型}        * 优点：节省内存空间        *       一次修改，处处生效，便于维护        *        * 原型链        *   一个对象有一个原型对象(也有一个原型对象)        *   判断一个对象类型        *   typeOf([]);Array        *   typeOf({});Object        *   []空数据-->Array--null        *   {}空对象-->Object--null        *   判断父对象是否在子对象原型链        *   父对象.prototype.isPrototypeOf(子对象),如果是返回true,否则是false        *   每一个对象都有原型，原型对象有一个属性__proto__        *   重载（js不支持）,但可以模拟，通过arguments[index]来进行重载        *   oop特点        *       封装：将属性和方法集中定义在一个对象中        *       继承：父对象中的成员，子对象中可以直接使用        *       多态：在不同情况下表现出不同状态        *        *       dom        *           html属性查找        *               id        *                   document.getELementById('id');//速度快        *               下面3个都返回的是一个数组集合        *               标签        *                   getElementsByTagName(标签)        *                   动态集合（代理），并非实际节点        *               name        *                   getElementsByName(name)        *               class        *                   getElementsByClassName(class)        *        *                css选择器查找        *                   querySelector(css选择器)(查找一个)        *                   querySelectorAll(css选择器)（查找多个）        *        *                   修改元素内容        *                       获取设置元素开始和结束间标签所有代码        *                       innerHTML        *                       删除        *                       innerHTML=''        *                       添加        *                       innerHTML='value'or'html代码'        *                       textContent        *                           功能与innerHTML类似        *                           它只能获取和修改文本内容        *                           低版本ie不支持        *                       innerText(ie浏览器的)        *                       与textContext一样        *                      innerText 火狐支持    textContent ie不支持        *        *                       获取属性值        *                           getAttribute(value)        *                       修改        *                           setAttribute(value,'新值')        *                        简单方式        *                           node.value        *                           node.id        *                        node.attributes[下标/属性名]        *                        或者        *                        node.attributes[下标/属性名]=value        *                        hasAttribute(属性)，如果属性存在返回true,否则false        *                        删除属性        *                           removeAttribute(属性)        *                     自定义属性        *                           例子        *                               <input type='text' id='d1' data-ac1='value'>        *                                   语法 data-attr=value        *                      简洁方式        *                       node.dataset.attr        *        *                       js修改css样式        *                           内联        *                               获取node.style.attr        *                               修改node.style.attr=value        *                               清除node.style.attr=''        *                               清除所有node.style.cssText='';        *                               内联样式使用如下方式        *                                   background-color(css里面的)        *                                   js中需要使用如下        *                                       backgroundColor        *        *                                获取元素最终样式        *                                   var strle=getComputedStyle(node)        *                                       它是计算后的        *                                           style.attr        *                                      ie8 node.currentStyle;        *                                 创建和删除节点        *                                   var node=document.createElement(标签名)        *                                   设置元素属性        *                                   node.id=value        *                                   node.innerHTML=''        *                                   新元素追加到现有节点上        *                                       追加appendChild(node)        *                                       添加insertBefore(node,oldNode)        *                                       替换replaceChilde(node,oldNode)        *                                追加子元素appendChild(node);        *                                添加       insertBefore(node,old)        *                                在新元素添加到旧元素前        *                                替换       replaceChild(node,old)        *                                将新元素替换成旧元素的值        *        *                                文档片段（提升效率）        *                                var d=document.createDocumentFragment()创建        *                                添加 d.appendChild(document.createElement(标签))        *                                一次性添加多个        *                                document.body.appendChild(d)        *                                删除元素        *                                     removeChild(子元素)        *        *        *        *        *        *        * */

    var sum=0;

    for(var i=0;i<101;i++){        if(i%3!=0){            sum+=i        }    }    console.log(sum);    //跳出多重循环    //自定义 标签名,例子//    fu: for(var s=0;s<100;s++){//        for(var b=0;b<100;b++){//            break fu;//        }//    }