javascript学习手册

huazai123 贡献于2017-09-25

作者 ThinkPad  创建于2016-04-10 11:58:00   修改者Administrator  修改于2017-08-30 06:03:00字数22006

文档摘要:
关键词:

基础语法 1.1 JavaScript 中的上溢,下溢, 除零 1.1.1 上溢(Overflow) 当数字运算结果超过了JavaScript所能表示的数字上限时,被称为上溢,用Infinity(正无穷大)和-Infinity(负无穷大)来表示。基于正无穷大和负无穷大的所有数学运算其结果也是正无穷大和负无穷大。 var a = 10 / 0  //返回Infinity var b = -10 / 0 //返回-Infinity 1.1.2 下溢(UnderFlow) 当运算结果无限接近于零或是超出JavaScript所能表示的最小值时,被称为下溢,用零来表示。 var a = Number.MIN_VALUE / 2  //返回0 1.1.3 零除以零 var c = 0 / 0    //返回NaN 1.1.4 isNaN(x) 当x是NaN时返回true, 其他返回false alert(isNaN("blue")); //输出 "true" alert(isNaN("666")); //输出 "false" 1.1.5 isFinite(x) 当x不是NaN,Infinity,-Infinity时返回true 1.2 parserFloat/parserInt 1.2.1 parserFloat 注释:只有字符串中的第一个数字会被返回。 注释:开头和结尾的空格是允许的。 提示:如果字符串的第一个字符不能被转换为数字,那么 parseFloat() 会返回 NaN。 提示:如果只想解析数字的整数部分,请使用 parseInt() 方法。 parseFloat("10") 10 parseFloat("10.00") 10 parseFloat("10.33") 10.33 parseFloat("34 45 66") 34 parseFloat(" 60 ") 60 parseFloat("40 years")) 40 parseFloat("He was 40")) NaN 1.2.2 parseInt(string, radix) radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。 如果省略该参数或其值为 0,则数字将以 10 为基础来解析。如果它以“0x”或“0X”开头,将以 16 为基数。 如果该参数小于 2 或者大于 36,则 parseInt() 将返回 NaN。 说明 当参数 radix 的值为 0,或没有设置该参数时,parseInt() 会根据 string 来判断数字的基数。 举例,如果 string 以 "0x" 开头,parseInt() 会把 string 的其余部分解析为十六进制的整数。如果 string 以 0 开头,那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。如果 string 以 1 ~ 9 的数字开头,parseInt() 将把它解析为十进制的整数。 注释:只有字符串中的第一个数字会被返回。 注释:开头和结尾的空格是允许的。 提示:如果字符串的第一个字符不能被转换为数字,那么 parseFloat() 会返回 NaN。 例子 parseInt("10"); //返回 10 parseInt("19",10); //返回 19 (10+9) parseInt("11",2); //返回 3 (2+1) parseInt("17",8); //返回 15 (8+7) parseInt("1f",16); //返回 31 (16+15) parseInt("010"); //未定:返回 10 或 8 1.3 向上向下取整,四舍五入,随机数 //向上取整3 console.log("Math.ceil(2.3)=" + Math.ceil(2.3)); //向下取整2 console.log("Math.floor(2.3)=" + Math.floor(2.3)); //四舍五入2 console.log("Math.round(2.3)=" + Math.round(2.3)); //随机数返回 console.log("Math.random()=" + Math.ceil(Math.random() * 100)); 1.4 Number 1.4.1 toFixed(num) 方法可把 Number 四舍五入为指定小数位数的数字。 var num = new Number(13.37);num.toFixed(1)=13.4 1.5 Array new Array(); new Array(size); new Array(element0, element1, ..., elementn); //字面量方式创建 var array=[]; var array=[1,2,3]; 1.5.1 数组push、pop直接在数组基础上操作并返回数组新的长度 var array = [];array.push(1);array.push(2);alert(array.pop()); 提供栈结构,先进后出,输出2 直接追加添加数组 var arrays=[1,2,3,4,5]; var arrays1=[]; //直接push结果是[[1,2,3,4,5]] arrays1.push(arrays); //通过apply传入结果是[1,2,3,4,5] arrays1.push.apply(arrays1,arrays); 1.5.2 concat() 连接两个或更多的数组,并返回结果。 参数可以是具体的值,也可以是数组对象。可以是任意多个。例如array.concat(1,2) array.concat(array1,array2…) array.concat(a1,a2,4,5…) 1.5.3 join(separator) 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 例如:array.join(;) 原数组[1,2,3],返回1;2;3 1.5.4 reverse() 颠倒数组中元素的顺序。 1.5.5 shift() 删除并返回数组的第一个元素 如果数组长度为0,shift() 方法将不进行任何操作,返回 undefined 值。 1.5.6 slice(start,end) 从某个已有的数组返回选定的元素 截取start到end下标处的数组并返回,不包括end 如果start为负数,它规定从数组尾部开始算起的位置,-1指最后一个,以此类推 1.5.7 sort() 对数组的元素进行排序 function sortNumber(a, b) { return b - a; } sort(sortNumber) 上述函数将使数组降序排列,如果要升序排列改为return a-b 1.5.8 splice(index,howmany,e1,…,ex) 删除元素,并向数组添加新元素。 index决定从何处对数组进行修改;howmany决定从index起删除多少个元素,为0不删,未传此参数删除包括>=index元素; var array = [0, 1, 2, 3, 4]; array.slice(2, 3, [2, 3, 4]); console.log(array);输出[0, 1, 2, 3, 4]说明参数可以传数组 toSource() 返回该对象的源代码。 只有Gecko核心的浏览器(比如Firefox)支持该方法,也就是说IE、Safari、Chrome、Opera等浏览器均不支持该方法。 toString() 把数组转换为字符串,并返回结果。 讲元素用逗号分隔并返回,为了创建这个字符串会调用数组每一项的toString()方法。 toLocaleString() 把数组转换为本地数组,并返回结果。 一般返回和toString()相同的字符串,不过内部调用的是数组中每个对象的toLacaleString方法 unshift(a1,a2,…,ax) 向数组的开头添加一个或更多元素,并返回新的长度。 注释:unshift()方法无法在Internet Explorer中正确地工作! 提示:要把一个或多个元素添加到数组的尾部,请使用push()方法。 valueOf() 返回数组对象的原始值 该原始值由Array对象派生的所有对象继承。 valueOf()方法通常由JavaScript在后台自动调用,并不显式地出现在代码中。 1.5.9 自定义移除方法 改变原型链,所有声明的数组都会自动拥有remove能力 Array.prototype.remove=function(from,to){ varrest=this.slice((to||from)+1||this.length); this.length=from<0?this.length+from:from; returnthis.push.apply(this,rest); } vararray=[1,2,3,4,5,6]; array.remove(0);//remove 1 2,3,4,5,6 console.log(array); array.remove(-1);//remove last 2,3,4,5 console.log(array); array.remove(0,2);//remove 0-2 5 console.log(array); 给javascript内置的Array添加一个静态方法 Array.remove=function(array,from,to){ varrest=array.slice((to||from)+1||array.length); array.length=from<0?array.length+from:from; returnarray.push.apply(array,rest); } vararray=[1,2,3,4,5,6]; Array.remove(array,0);//remove 1 2,3,4,5,6 console.log(array); Array.remove(array,-1);//remove last 2,3,4,5 console.log(array); Array.remove(array,0,2);//remove 0-2 5 console.log(array); 1.6 异常处理 window.onload = function() { Try块中遇到异常转至catch块处理,如果try、catch块后还有语句则会继续执行。 程序输出: 控制台“抛出异常” 页面显示“捕捉了异常…” try {var a; throw "抛出异常"; console.log(a); } catch(err) { console.log(err); }finally{ } document.writeln("捕捉了异常我还是可以执行"); } 抛异常 throw new Error(“text”); throw “text”; 只要throw都可以被catch(下面程序输出3) 1.7 事件 属性当以下情况发生时,出现此事件 FF N IE onabort 图像加载被中断 1 3 4 onblur 元素失去焦点 1 2 3 onchange 用户改变域的内容 1 2 3 onclick 鼠标点击某个对象 1 2 3 ondblclick 鼠标双击某个对象 1 4 4 onerror 当加载文档或图像时发生某个错误 1 3 4 onfocus 元素获得焦点 1 2 3 onkeydown 某个键盘的键被按下 1 4 3 onkeypress 某个键盘的键被按下或按住 1 4 3 onkeyup 某个键盘的键被松开 1 4 3 onload 某个页面或图像被完成加载 1 2 3 onmousedown 某个鼠标按键被按下 1 4 4 onmousemove 鼠标被移动 1 6 3 onmouseout 鼠标从某元素移开 1 4 4 onmouseover 鼠标被移到某元素之上 1 2 3 onmouseup 某个鼠标按键被松开 1 4 4 onreset 重置按钮被点击 1 3 4 onresize 窗口或框架被调整尺寸 1 4 4 onselect 文本被选定 1 2 3 onsubmit 提交按钮被点击 1 2 3 onunload 用户退出页面 1 2 3 1.8 delete javascript类型 1.9 数据类型: string number boolean undefined null objectfunction 类型判断typeof instanceof(数组的typeof仍然是object) 例子: vararray;//1 console.log(typeofarray);输出undefined(第一行有没有都会输出) vararray=[1,2.3]; console.log(arrayinstanceofArray);输入true 1.9.1 基本类型和引用类型 ECMAScript 有 5 种原始类型(primitive type),即 Undefined、Null、Boolean、Number 和 String。 ECMA-262 定义的类(引用类型)。它们包括: Object Function Array String Boolean Number Date RegExp Error EvalError RangeError ReferenceError SyntaxError TypeError URIError var x=1;var y=x; x=2;//x值会变为2 y的值保持不变 引用类型:对象、数组、函数(引用指向该引用所对应的实际对象) var array=[1,2,3]; var arrayT=array; array.push(4);//arrayT=[1,2,3,4] var array=[1,2,3]; var arrayT=array; arrayT.push(4);//array=[1,2,3,4] 1.9.2 变量的作用域 方法内部被var修饰的变量只能作用于方法局部 function内部定义变量必须用var修饰,否则将相当于声明了一个全局变量 var v1=2; function f1(){ var v1=3; } f1();//v1=2 var v1=2; function f1(){ v1=3; } f1();//v1=3 1.9.3 运算符 中括号运算符 obj[propertyName]获取对象的某个属性值 array[index]获取数组指定位置值 遍历对象 for(var key in obj){ console.log(key+”:”+obj[key]); } 点运算符 obj.propertyName 如果propertyName中出现.的话,访问会出错,建议在不知道对象的内部结构时一定要使用中括号运算符 例如: var obj={“test.name”:”name1”,sex:10}; 1.9.4 相等和等同 ==相等会对两边操作数做转型===等同不会做转型 ==运算符和===运算符用来检测两个值是否相等,它们采用了具有同一特质的两个不同定义。这两个运算符都接受任意类型的运算数,如果两个运算数相等,它们都返回true,否则都返回false,===运算符是等同运算符,它采用严格 的同一特质定义检测两个运算数是否完全相同,亲们注意是完全相同哦。==运算符是相等运算符,它采用比较宽松的同一特质定义比较两个运算数是否相等。 这样概念有个基本认识。 下面说下具体判定两个值是相等情况吧。 ===运算符两个值比较 1,如果两个值类型不同,它们就不相同 2,如果两个值的类型是数字,而且值相同,那么除非中间有一个或者两个都是(NaN)这种情况它们不是等同,否则它们是等同 3,如果两个值是字符串,而且串中同一个位置上的字符完全相同,那么它们就完全等同,如果字符串的长度或者内容不同,那么它们就不是等同的咯 ==运算符两个值比较 1,如果两个值的类型相同,那么就检测它们的等同性。如果两个值完全相同,它们就相等。如果它们不完全相同,它们就不相等了 2,如果两个值的类型不同,它们仍然有可能相等(举几个例子) 1)如果一个值是null,另外一个值是undefined,它们相等 2)如果一个值是数字,另外一个值是字符串,把字符串转换成数字,再用转换后的值比较 3)如果一个值是true,将它转化成1,再进行比较。如果一个值为false,把它转化为0,再进行比较 4)如果一个值是对象,另外一个值是数字或字符串,将对象转换成原始类型的值,再比较。 1.10 对象属性检测 var obj={name: “zhangliang”}; var pro=”name” 1.10.1 in pro in obj true 1.10.2 for in var e=false; for(var k : obj){ if(k==pro){ e=true; break; } } 1.10.3 if if(obj[pro]){return true;} 1.11 typeof 对变量或值调用 typeof 运算符将返回下列值之一: · undefined - 如果变量是 Undefined 类型的 · boolean - 如果变量是 Boolean 类型的 · number - 如果变量是 Number 类型的 · string - 如果变量是 String 类型的 · object - 如果变量是一种引用类型或 Null 类型的 对象 1.1 声明方式 1.1.1 工厂方式 测试代码: var oCar1 = createCar("red", 4, 23); var oCar2 = createCar("blue", 3, 25); oCar1.showColor(); //输出 "red" oCar2.showColor(); //输出 "blue" 方法一:每次调用函数 createCar(),都要创建新函数 showColor(),意味着每个对象都有自己的 showColor() 版本。 function createCar(sColor, iDoors, iMpg) { var oTempCar = new Object; oTempCar.color = sColor; oTempCar.doors = iDoors; oTempCar.mpg = iMpg; oTempCar.showColor = function() { alert(this.color); }; return oTempCar; } 方法二:在函数 createCar() 之前定义了函数 showColor()。在 createCar() 内部,赋予对象一个指向已经存在的 showColor() 函数的指针。从功能上讲,这样解决了重复创建函数对象的问题;但是从语义上讲,该函数不太像是对象的方法。 function showColor() { alert(this.color); } function createCar(sColor, iDoors, iMpg) { var oTempCar = new Object; oTempCar.color = sColor; oTempCar.doors = iDoors; oTempCar.mpg = iMpg; oTempCar.showColor = showColor; return oTempCar; } 1.1.2 构造函数方式 测试代码 var oCar1 = new Car("red", 4, 23); var oCar2 = new Car("blue", 3, 25); 首先在构造函数内没有创建对象,而是使用 this 关键字。使用 new 运算符构造函数时,在执行第一行代码前先创建一个对象,只有用 this 才能访问该对象。然后可以直接赋予 this 属性,默认情况下是构造函数的返回值(不必明确使用 return 运算符)。构造函数会重复生成函数,为每个对象都创建独立的函数版本。 function Car(sColor, iDoors, iMpg) { this.color = sColor; this.doors = iDoors; this.mpg = iMpg; this.showColor = function() { alert(this.color); }; } 解决重复生成函数的问题: 方法一:在外部定义函数,内部引用 方法二:原型方式添加方法 <对象>.prototype.<方法>=function(){}; 1.1.3 混合的构造函数/原型方式 所有的非函数属性都在构造函数中创建,意味着又能够用构造函数的参数赋予属性默认值了。因为只创建 showColor() 函数的一个实例,所以没有内存浪费。 function Car(sColor, iDoors, iMpg) { this.color = sColor; this.doors = iDoors; this.mpg = iMpg; this.drivers = new Array("Mike", "John"); } Car.prototype.showColor = function() { alert(this.color); }; var oCar1 = new Car("red", 4, 23); var oCar2 = new Car("blue", 3, 25); oCar1.drivers.push("Bill"); alert(oCar1.drivers); //输出 "Mike,John,Bill" alert(oCar2.drivers); //输出 "Mike,John" 1.1.4 动态原型方式 采用熟悉的面向对象语言创建方式,如Java function Car(sColor, iDoors, iMpg) { //属性定义 this.color = sColor; this.doors = iDoors; this.mpg = iMpg; this.drivers = new Array("Mike", "John"); //方法定义,只创建一次函数 if (typeof Car._initialized == "undefined") { Car.prototype.showColor = function() { alert(this.color); }; Car._initialized = true; } } 1.1.5 最常用方式 目前使用最广泛的是混合的构造函数/原型方式和动态原型方式。 1.2 原型对象及原型链(继承) functionBase(age){ this.age=age; this.getAge=function(){ returnthis.age; } } functionChild(name){ this.name=name; this.getName=function(){ returnthis.name; } } //将child的原型指向一个新的base对象 Child.prototype=newBase(22); varc1=newChild("zhangliang"); console.log(c1.getAge()); //由于c1从原型链上继承到了getName方法,因此可以访问 console.log(c1.getName()); 输出:22 zhangliang 1.3 this指针 在javascript中,this表示当前上下文,即对调用者的引用。this的值并非由函数如何被声明而确定,而是由函数如何被调用而确定 varjack={name:'jack'}; vartom={name:'tom'}; functionprintName(){ returnthis.name; } console.log(printName.call(jack)); console.log(printName.call(tom)); 输出:jack tom 1.4 使用对象 functionAddress(location){ //当location没有传值,传null,传""时this.location=defaultLocation this.location=location||'defaultLocation'; this.toString=function(){ return"location:"+this.location; } } varaddr=newAddress("ceshi"); console.log(addr.toString()); 输出:location:ceshi 当Address传参为null/””/不传3中情况输出location:defaultLocation 1.5 Object属性及方法 1.5.1 属性: constructor 对创建对象的函数的引用(指针)。对于 Object 对象,该指针指向原始的 Object() 函数。 Prototype 对该对象的对象原型的引用。对于所有的对象,它默认返回 Object 对象的一个实例。 1.5.2 方法: hasOwnProperty(property) 判断对象是否有某个特定的属性。必须用字符串指定该属性。(例如,o.hasOwnProperty("name")) IsPrototypeOf(object) 判断该对象是否为另一个对象的原型。 PropertyIsEnumerable 判断给定的属性是否可以用 for...in 语句进行枚举。 ToString() 返回对象的原始字符串表示。对于 Object 对象,ECMA-262 没有定义这个值,所以不同的 ECMAScript 实现具有不同的值。 ValueOf() 返回最适合该对象的原始值。对于许多对象,该方法返回的值都与 ToString() 的返回值相同。 注释:上面列出的每种属性和方法都会被其他对象覆盖。 1.6 对象的类型 对象的类型名就是构造函数的名称 1.7 如何获得对象的类型 var getFnName = function(fn) { /** * 方式一 */ if (typeof fn !== 'function') return; if (fn.name) { return fn.name; } else { //将fn转换为字符串,fn+'' return /function (.+)\(/.exec(fn + '')[1]; } /** * 简化一:三元运算符 */ if (typeof fn !== 'function') return; return fn.name ? fn.name: /function (.+)\(/.exec(fn + '')[1]; /** * 简化二:逻辑中断 * || 如果第一个表达式是true的话就直接返回第一个表达式的结果 * &&如果第一个表单式是false的话就直接返回第一个表达式的结果 */ if (typeof fn !== 'function') return; return fn.name || /function (.+)\(/.exec(fn + '')[1]; /** * 简化三:简化if */ return typeof fn !== 'function' ? undefined: fn.name || /function (.+)\(/.exec(fn + '')[1]; } } function Person() {} var p = new Person(); console.log(getFnName(p.constructor)); 1.8 继承 1.8.1 组合式继承实现 /** * 组合式继承实现 */ var jQuery = jQuery || {}; jQuery.extend = function(obj) { for (k in obj) { jQuery[k] = obj[k]; } } var obj = { name: 'jquery' }; jQuery.extend(obj); //执行extend方法后jQuery对象就具有了name属性 console.log(jQuery); 1.8.2 原型式继承 第二种方式会直接覆盖原型对象 问题一:如果之前的原型对象没有被引用则会被浏览器引擎清除 问题二:覆盖后的Person实例是Object类型 1.8.3 Object.create IE兼容性解决方法(实现继承) var o1 = { name: 'o' }; var o2 = Object.create(o1); // o2就继承了o1 console.log(o2); // IE8不支持create方法解决方法有下面两个 /* 方法一:判断浏览器是否支持create方法,如果不支持则扩展原生Object 在代码最前方做判断 */ if (!Object.create) { Object.create = function(obj) { function F() {} F.prototype = obj; return new F(); } } /** * 方法二:定义新的create方法,不过每次都要调用新定义的方法去实现继承 */ function create(obj) { function F() {} F.prototype = obj; return new F(); } 1.9 原型链图示 函数 1.1 函数的参数 javascript传递参数时,解释器传递给函数的是一个类似于数组的内部值:arguments,这个内部值在函数对象生成时就被初始化了(声明时没有声明参数,但是在调用时候可以使用arguments来获取传递的参数) 当调用函数时可以传任意多个参数,如果参数个数少于定义的参数个数,缺少的参数将用undefined填充 functionsum(){ varresult=0; for(vari=0,len=arguments.length;i 2) return false; if (a >= r) { r = a; } }); return r; } alert(max(array)); 1.2.3 利用each改变元素样式 var getTag = function(tag) { return document.getElementsByTagName(tag); } var each = function(array, callback) { for (var i = 0; i < array.length; i++) { if (callback.call(array[i], array[i], i) === false) { break; } } } each(getTag("div"),function(a, i) { this.style.background = 'green'; }); each(getTag("p"),function(a, i) { this.style.background = 'green'; }); 1.2.4 each改变优化 var getTag = function(tag, results) { results = results || []; //将数组push到数组中(否则需要遍历要添加的数组,每次进入循环都调用push方法) results.push.apply(results, document.getElementsByTagName(tag)); return results; } var each = function(array, callback) { alert(array.length); for (var i = 0; i < array.length; i++) { if (callback.call(array[i], array[i], i) === false) { break; } } } each(getTag("div", getTag("p")),function(a, i) { this.style.background = 'green'; }); 1.2.5 get统一选择方法 var get = function(selector, context, results) { results = results || []; var getTag = function(tag, results) { results = results || []; //将数组push到数组中(否则需要遍历要添加的数组,每次进入循环都调用push方法) results.push.apply(results, document.getElementsByTagName(tag)); return results; } var getClass = function(className, results) { results = results || []; //将数组push到数组中(否则需要遍历要添加的数组,每次进入循环都调用push方法) results.push.apply(results, document.getElementsByClassName(className)); return results; } var getId = function(id, results) { results = results || []; results.push(document.getElementById(id)); return results; } var rquickExpr = /^(?:#([\w-]+)|\.([\w-]+)|([\w]+)|(\*))$/; var m = rquickExpr.exec(selector); if (m) { if (m[1]) { results = getId(m[1], results); } else if (m[2]) { results = getClass(m[2], results); } else if (m[3]) { results = getTag(m[3], results); } else if (m[4]) { results = getTag(m[4], results); } } return results; } var each = function(array, callback) { for (var i = 0; i < array.length; i++) { if (callback.call(array[i], array[i], i) === false) { break; } } } each(get("#test"), function(a, i) { this.style.background = 'green'; }); 1.2.6 getElementsByClassName能力检测 初级 if (document.getElementsByClassName) { alert("支持getElementsByClassName方法"); } else { //不支持此方法,自定义实现方法 alert("不支持getElementsByClassName方法"); } 中级 能力检测只执行一次,并将检测的结果存入变量中,再次检测时只需要判断变量的值即可 (js代码量大时对提高代码执行效率有很大帮助) var support = {}; //创建自执行函数 support.getElementsByClassName = !!document.getElementsByClassName; var getElementsByClassName = function() { if (support.getElementsByClassName) { return document.getElementsByClassName; } else { //自己实现此方法所具备的功能 } } 高级 如果之前有这样一句 document.getElementsByClassName=123; 在能力检测时返回true,但是并不具备指定的能力(浏览器没有提供该方法,但是用户之前定义了该方法) var support = {}; //创建自执行函数 support.getElementsByClassName = (function() { //判断getElementsByClassName方法是否存在 var isExist = !!document.getElementsByClassName; //如果存在并且是function if (isExist && typeof document.getElementsByClassName == "function") { //测试getElementsByClassName是否能够具备指定的能力 var div = document.createElement('div'), divClass = document.createElement('div'); divClass.className = "testDiv"; div.appendChild(divClass); //如果能够找到则证明可以完成指定功能 return div.getElementsByClassName("testDiv")[0] === divClass; } return false; })(); if (support.getElementsByClassName) { alert("支持getElementsByClassName方法"); } else { alert("不支持getElementsByClassName方法"); } 1.2.7 兼容所有浏览器的getClass方法 var getClass = function(className, results) { results = results || []; if (document.getElementsByClassName) {//能力检测 //将数组push到数组中(否则需要遍历要添加的数组,每次进入循环都调用push方法) results.push.apply(results, document.getElementsByClassName(className)); } else { var temp = document.getElementsByTagName('*'); for (var i = 0; i < temp.length; i++) { //dom标签的class属性可能是 "c c1 c2 c3",所以不能直接用===判断,应该用包含 //包含的两种实现方式1.split //2 两边加空格再indexOf var tC = " " + temp[i].className + " "; var vC = " " + className + " "; if (tC.indexOf(vC) >= 0) { results.push(temp[i]); } }; } return results; } var each = function(array, callback) { for (var i = 0; i < array.length; i++) { if (callback.call(array[i], array[i], i) === false) { break; } } } each(getClass("c1"),function(a, i) { this.style.background = 'green'; }); < div id = "c1 c2 c c3" >

//结果上面的p标签背景色被设置为绿色 1.2.8 IE8版本push伪数组错误 解决方法,通过try,catch捕获异常,catch中自定义push方法 var myPush = function(target, appendtarget) { var i = target.length, j = 0; while ((target[i++] = appendtarget[j++])) {} target.length = i - 1; } var a1 = []; var a2 = [1, 2, 3, 4]; try { a1.push.apply(a1, a2); } catch(e) { myPush(a1, a2); } console.log(a1); 技巧 1.1 || && 1.2 能力检测,判断对象是否具有某个方法 dom操作 http://www.w3school.com.cn/jsref/dom_obj_document.asp 1.1 Element 下面的属性和方法可用于所有 HTML 元素上: 属性 / 方法 描述 element.accessKey 设置或返回元素的快捷键。 element.appendChild() 向元素添加新的子节点,作为最后一个子节点。 element.attributes 返回元素属性的 NamedNodeMap。 element.childNodes 返回元素子节点的 NodeList。 element.className 设置或返回元素的 class 属性。 element.clientHeight 返回元素的可见高度。 element.clientWidth 返回元素的可见宽度。 element.cloneNode() 克隆元素。 element.compareDocumentPosition() 比较两个元素的文档位置。 element.contentEditable 设置或返回元素的文本方向。 element.dir 设置或返回元素的文本方向。 element.firstChild 返回元素的首个子。 element.getAttribute() 返回元素节点的指定属性值。 element.getAttributeNode() 返回指定的属性节点。 element.getElementsByTagName() 返回拥有指定标签名的所有子元素的集合。 element.getFeature() 返回实现了指定特性的 API 的某个对象。 element.getUserData() 返回关联元素上键的对象。 element.hasAttribute() 如果元素拥有指定属性,则返回true,否则返回 false。 element.hasAttributes() 如果元素拥有属性,则返回 true,否则返回 false。 element.hasChildNodes() 如果元素拥有子节点,则返回 true,否则 false。 element.id 设置或返回元素的 id。 element.innerHTML 设置或返回元素的内容。 element.insertBefore() 在指定的已有的子节点之前插入新节点。 element.isContentEditable 设置或返回元素的内容。 element.isDefaultNamespace() 如果指定的 namespaceURI 是默认的,则返回 true,否则返回 false。 element.isEqualNode() 检查两个元素是否相等。 element.isSameNode() 检查两个元素是否是相同的节点。 element.isSupported() 如果元素支持指定特性,则返回 true。 element.lang 设置或返回元素的语言代码。 element.lastChild 返回元素的最后一个子元素。 element.namespaceURI 返回元素的 namespace URI。 element.nextSibling 返回位于相同节点树层级的下一个节点。 element.nodeName 返回元素的名称。 element.nodeType 返回元素的节点类型。 element.nodeValue 设置或返回元素值。 element.normalize() 合并元素中相邻的文本节点,并移除空的文本节点。 element.offsetHeight 返回元素的高度。 element.offsetWidth 返回元素的宽度。 element.offsetLeft 返回元素的水平偏移位置。 element.offsetParent 返回元素的偏移容器。 element.offsetTop 返回元素的垂直偏移位置。 element.ownerDocument 返回元素的根元素(文档对象)。 element.parentNode 返回元素的父节点。 element.previousSibling 返回位于相同节点树层级的前一个元素。 element.removeAttribute() 从元素中移除指定属性。 element.removeAttributeNode() 移除指定的属性节点,并返回被移除的节点。 element.removeChild() 从元素中移除子节点。 element.replaceChild() 替换元素中的子节点。 element.scrollHeight 返回元素的整体高度。 element.scrollLeft 返回元素左边缘与视图之间的距离。 element.scrollTop 返回元素上边缘与视图之间的距离。 element.scrollWidth 返回元素的整体宽度。 element.setAttribute() 把指定属性设置或更改为指定值。 element.setAttributeNode() 设置或更改指定属性节点。 element.setIdAttribute() element.setIdAttributeNode() element.setUserData() 把对象关联到元素上的键。 element.style 设置或返回元素的 style 属性。 element.tabIndex 设置或返回元素的 tab 键控制次序。 element.tagName 返回元素的标签名。 element.textContent 设置或返回节点及其后代的文本内容。 element.title 设置或返回元素的 title 属性。 element.toString() 把元素转换为字符串。 nodelist.item() 返回 NodeList 中位于指定下标的节点。 nodelist.length 返回 NodeList 中的节点数。 1.2 document

下载文档到电脑,查找使用更方便

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享文档获得金币 ] 0 人已下载

下载文档