//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;// }// }