尊重原创，原文链接

Java Script 基础

一、 JS的简介

JavaScript是一种网页编程技术，经常用于创建动态交互网页 
JavaScript是一种基于对象和事件驱动的解释性脚本语言，类似C语言和Java的语法 
事先不编译；逐行执行；无需进行严格的变量声明；内置大量现成对象，编写少量程序可以完成目标 
不同的浏览器甚至同一浏览器的不同版本对JavaScript的支持程度都不一样

二、 JS的基本语法

0. 有两种JavaScript写法： a. 直接在 html 中嵌入，程序写法: b. 调用独立JavaScript文件：在html中写不能用空标志。 JS脚本文件中不需要脚本开始和结束声明，直接写 function1. 在HTML中大小写是不敏感的，但标准的JavaScript是区分大小写的2. 分号表示语句结束。有换行，分号允许不加(建议加上，以免错误和歧义)程序忽略缩进：提倡加上空格或TAB增强程序可读性3. 标识符：成份是 不以数字开头的字母、数字 和下划线(_)、美元符($)ECMA v3标准保留的JavaScript的关键字：break  case      catch  continue  default     delete  do     else    false   finallyfor    function  if     in        instanceof  new     null   return  switch  thisthrow  true      try    typeof    var         void    while  with4. 变量的声明： var x,y; (变量没类型；未声明的变量也可以用，且是全局的；函数体内声明的变量则是局部的)x=1; y="hello world!";  (变量的类型由所赋的值决定)5. 函数： function 函数名 (参数){ 函数体; return 返回值;}参数没类型或顺序，且可变长；可以使用变量、常量或表达式作为函数调用的参数声明函数时，参数可不明写，调用时用 arguments[number] 接收。参数是值传递的。函数由关键字 function 定义； 函数名的定义规则与标识符一致，大小写是敏感的返回任意类型(不需写返回类型)； 返回值必须使用return//参数数量是可变的,若要限定参数数量,如下做法: (指定参数数量为0)if ( arguments.length !== 0 ) throw Error.parameterCount();caller: 调用此函数的函数。没有被调用则此变量为 nullarguments: 此函数的参数列表。arguments.caller: 调用此函数的参数列表,没有被调用则为 undefinedarguments.callee: 此函数本身的一个引用。在匿名函数里会需要用到。6. 数据类型：基本类型: Number：数字、 String：字符串、 Boolean：布尔特殊类型: Null：空、     Undefined：未定义组合类型: Array：数组、  Object：对象7. Number 数值类型：所有数字都采用64位浮点格式存储，相当于Java和C语言中的double格式能表示的最大值是 ±1.7976931348623157 x 10^308；能表示的最小值是 ±5 x 10^ -32410进制的整数的精确表达的范围是 -9007199254740992 (-2^53) 到 9007199254740992 (2^53)16进制数据前面加上0x，八进制前面加08. String 类型：字符串常量首尾由单引号或双引号括起没有字符，只有字符串(所有字符都按字符串处理)常用转义符： \n换行   \'单引号    \"双引号   \\右斜杆  (字符串中部分特殊字符必须加上右划线\)汉字常使用特殊字符写，如： \u4f60 -->"你"  \u597d -->"好" (可避免乱码)9. Boolean 类型：仅有两个值：true和false，实际运算中true=1,false=0也可以看作on/off、yes/no、1/0对应true/false；主要用于JavaScript的控制语句10.null, undefine 类型：null 在程序中代表变量没有值；或者不是一个对象undefined 代表变量的值尚未指定；或者对象属性根本不存在有趣的比较：null 与空字符串:   不相等, null 代表什么也没有，空字符串则代表一个为空的字符串null 与 false :    不相等, 但是 !null 等于 truenull 与 0     :    不相等，(但是在C++等其它语言中是相等的)null 与 undefined : 相等，但是 null 与 undefined 并不相同11.数据类型转换：JavaScript属于松散类型的程序语言变量在声明的时候并不需要指定数据类型；变量只有在赋值的时候才会确定数据类型表达式中包含不同类型数据则在计算过程中会强制进行类别转换(优先级：布尔-->数字-->字符)数字 + 字符串：数字转换为字符串数字 + 布尔值：true转换为1，false转换为0字符串 + 布尔值：布尔值转换为字符串true或false函数parseInt：强制转换成整数(如果包含字符串，则转换到字符串为止，后面不再理) //如 parseInt("13a2")=13函数parseFloat： 强制转换成浮点数函数eval：将字符串强制转换为表达式并返回结果，亦可将字节或变量转成数值。函数typeof：查询数据当前类型(string / number / boolean / object ) ，未定义则返回“undefined”12.运算符：(同java)算术运算符: 加/字符连接(+)、 减/负号(-)、 乘(*) 、除(/)、 余数(% )； 递增(++)、 递减(--)逻辑运算符: 等于( == )、 不等于( != ) 、 大于( > ) 、 小于( < ) ； 大于等于(>=) 、小于等于(<=)与(&&) 、或(||) 、非(!) ；  恒等(===)、不恒等(!==)位运算符:   左移(<<) 、有符号右移(>>)；无符号右移(>>>)位与(&) 、位或(|)、异或(^) 、NOT (~)赋值运算符: 赋值(=) 、复合赋值(+=  -=  *=  /=  %=  &= )(先运行完右边的，再跟左边的进行赋值运算；如 var i=10;i-=5-3;结果8)13.选择控制语句(同java)if(...){...} else{...}   if 语句允许不使用else子句；允许进行嵌套switch(表达式){case 值1:语句1;break;  case 值2:语句2;break;  default:语句3;}14.循环控制语句(类似java)for (初始化;条件;增量){ 语句1; ... }for-each遍历: for(var key in objs){var element=objs[key];...} // 注意: in 前面的是 key,而不是下标或者集合里面的元素,获取集合里的元素要使用 集合[key]while (条件){ 语句1; ... }do{语句1; ...}while(条件);break, continue   跳出循环；还可配合标签使用15.对象：JavaScript是一种基于对象语言，对象是JavaScript中最重要的元素对象由属性和方法封装而成javaScript包含四种对象:内置对象 Date自定义对象 Cart浏览器对象 windowActiveX对象 ActionXObject16. 异常处理：try{ ... } catch( e ) { ... } finally { ... }try{ throw new Error("Err0"); } catch( e ) { alert(e.description); } finally { ... }try{ throw "Err1"; } catch( e ) { if(e == "Err1") alert("错误！"); }17.选取页面的对象:var obj = document.forms["FormName"].elements["elementName"];var obj = document.forms[x].elements[y]; //x和y 是int类型，表示第几个表单，第几个元素var obj = document.FormName.elementName;var obj = document.all["elementName"];var obj = document.all["elementID"];var obj = document.getElementById("elementID");var obj = document.getElementsByName("elementName"); //返回数组var obj = document.getElementsByTagName("TagName");  //返回数组18. typeof 查看类型:undefined, null, bool, number, string, object, function也就是 typeof 返回的值只能是上面的其中一个(字符串类型)。注意:以上单词都是小写，不要与内置对象 Number, String, Object, Function 等混淆。null: typeof(null) 返回 "object", 但null并非object, 具有 null 值的变量也并非object。未定义的返回"undefined"number: typeof(NaN) 和 typeof(Infinity) 都返回 number; NaN参与任何数值的计算结果都是NaN,且 NaN != NaN, Infinity / Infinity = NaN19.instanceof 判断类型:instanceof 返回一个 boolean 值, 指出对象是否是特定类的一个实例, 实际上就是检测实例是否有继承某类的原型链。对于 Array, null 等特殊对象 typeof 一律返回 object，这正是 typeof 的局限性。instanceof 用于判断一个变量是否某个对象的实例,或者子类,如: var a=new Array();alert(a instanceof Array);会返回 true, 而 alert(a instanceof Object)也会返回 true再如: function test(){};var a=new test();alert(a instanceof test)返回 true, alert(test instanceof Function)返回 true, 但 alert(a instanceof Function)返回 false(不明白什么原因)注意: function 的 arguments, 使用(arguments instanceof Array)返回 false,尽管看起来很像。另外: (window instanceof Object)返回 false, 这里的 instanceof 测试的 Object 是指js中的对象,不是dom模型对象。而 typeof(window) 会得 "object"20.in 用法:通常使用在 for 循环中,作 foreach 用,像 for(var i in obj)...也可以用在类中,判断类里面是否有此 key。但注意不能有效用在数组中。如: var ar = {a:false, b:2}; alert('a' in ar)返回 true;因为 ar['a'] 存在。在数组中使用时,如: var arr=[4,5,6]; alert(2 in arr)会返回 true,因为 arr[2] 存在。而 alert(5 in arr)会返回 false,arr[5] 不存在。if (key in obj) 相当于 if(!!obj[key])。数组中也可以使用 for in,如: var array = ['a', 'b', 'c', 'd'];for(var item in array){alert(array[item]);}值得注意的是,如果对类进行 .prototype.函数 来扩展, for in 时会受到影响,把扩展的内容也循环出来。所以不赞成对 Object 类进行扩展,也不赞成数组使用 for in(因为数组有可能被扩展了)

三、 JS的内置对象

11种内置对象：Array, Boolean, Date, Math, Number , String
Error, Function, Global , Object, RegExp
在JavaScript中除了null和undefined以外其它的数据类型都被定义成了对象
可以用创建对象的方法定义变量； String、Math、Array、Date、RegExp是JavaScript中常用的对象
内置对象的分类：
数据对象: Number数据对象； String字符串对象； Boolean布尔值对象
组合对象: Array数组对象； Math数学对象； Date日期对象
高级对象: Object自定义对象；Error错误对象；Function函数对象； RegExp正则表达式对象；Global全局对象
自动创建对象:调用字符串的对象属性或方法时自动创建对象，用完就丢弃。 如： var str1=”hello world”;
手工创建对象:采用new创建字符串对象str1，全局有效。 如：var str1= new String(“hello word”);1. String 字符串对象：格式编排:anchor()锚、blink()闪烁、fixed()固定、bold()粗体、italics()斜体、strike()删除线big()字变大、small()字变小、sub()下标、sup()上标；fontcolor(color)字体颜色、fontsize(size)字体大小、link(url)超链接大小写转换:  toLowerCase()返回小写字符串、toUpperCase()返回大写字符串获取指定字符:charAt(index)返回指定位置字符、charCodeAt(index)返回指定位置字符Unicode编码用法：str1.bold();//字体变粗；相当于“<b>str1</b>“   str1.anchor(); //把str1标识为锚子字符串处理:截取:str1.substr(start,length);  //返回从索引位置start开始长为length的子字符串str1.substring(start,end);  //返回start开始end结束的子字符串,不包括最后的一个str1.slice(start,end);      //同substring，但允许使用负数表示从后计算位置,不包括最后的一个替换:str1.replace(findstr,tostr); //返回替换finstr为tostr之后的字符串分割:str1.split(bystr);     //返回由bystr分割成的字符串数组(通常bystr是连接符号，如逗号或横杆)连接:str1.concat(string2);      //返回 str1 与 string2 连接后的字符串查询字符串: indexOf(findstr,index)返回正向的索引位置、lastIndexOf(findstr)返回反向的索引位置match(regexp)返回匹配的字符串、search(regexp)返回找到字符串的首字符索引用法：str1.indexOf(findstr,index);//查找字符串findstr;从index位置开始的索引，省略index则从0开始找;类似下一句str1.lastIndexOf(findstr);  //从后面找起;返回findstr在str1中出现的首字符位置下标，没有找到返回-1str1.match(regexp);   //regexp代表正则表达式或字符串;返回匹配字符串的数组，如果没有匹配则返回nullstr1.search(regexp);  //返回匹配字符串的首字符位置下标;作用同indexOf方法,但可写正则表达式str1.length;          //获取字符串长度；汉字、字母长度均为1；返回大于或等于0的整数
2. Array 数组对象：1) 创建数组：var a = new Array();  a[0] = "元素1"; a[1] = "元素2";var a = new Array(){"元素1", "元素2"};var a = new Array("元素1","元素2");    //一维数组，效果同上var a = new Array();  a[0] = new Array();   //二维数组简略的数组创建方法：var a = ['元素1', '元素2'];  // 效果等同于: var a = new Array("元素1","元素2");2) 删除数组：  delete 数组名;3) 数组操作：arr.length;             //获取数组元素的个数；返回大于或等于0的整数连接数组： (原数组不变)arr.join(bystr);        //把数组的各元素由bystr连接起来作为字符串；与字符串的split功能刚好相反arr.toString();         //返回由逗号(,)连接数组元素组成的字符串document.write(v.toString());document.write(v);  //这两句效果一样arr2 = arr.concat(元素, ...);  //把元素添加到数组尾端后，返回另一数组；在参数里填入另一数组，返回合并数组数组排序： (返回排序后的数组；改变原数组)arr.reverse();          //按原顺序倒着排序arr.sort();             //按字典顺序排序获取子数组： (返回被删/被截取的元素数组)arr.slice(start,end);   //从start下标开始，截取到end；返回被截取的元素数组；不改变原数组//start和end可用负数表倒数(-1代表最后一个元素)；end<start时不截取；忽略end，截取start后的所有元素arr.splice(start,n,value, ...);  //从start下标开始删除n个，再插入value(可理解为替换)；改变原数组//start为负数时表倒数；n<1表不删除；可忽略value(不插入)；可忽略n，表删除后面所有；返回被删元素数组4) 栈：(数组的基础； 改变原数组)arr.pop(); //删最后的一个元素；返回删除的元素arr.push(元素, ...);       //添加元素到最后位置；返回数组长度; 等价于: arr[length] = newValue;arr.unshift(元素, ...);    //添加元素到最前位置(多个参数，则按参数顺序同时插入)；返回数组长度arr.shift();  //删最前的一个元素；返回被删除的元素5) toString 和 valueOf把每一项都调用 toString 方法，然后用半角逗号(,)连接每一项。如: var arr = [1,2,3,4,5]; alert(arr); //output:1,2,3,4,5toLocaleString 方法在这里不做详细说明了，他的效果与 toString 方法类似，只是每项调用 toLocateString 方法。
4. Math 数学对象：都是数学常数：(可直接用)Math.E (自然数)       Math.LN2 (ln2)      Math.LN10 (ln10)          Math.LOG2E (log 2e)Math.LOG10E (log e)   Math.PI (圆周率)    Math.SQRT1_2 (根号1/2)    Math.SQRT2 (根号2)三角函数：Math.sin(x)        计算正弦值； (x在0~2π之间，返回值-1~1)Math.cos(x)        计算余弦值； (x在0~2π之间，返回值-1~1)Math.tan(x)        计算正切值； (x在0~2π之间，返回正切值)反三角函数：Math.asin(x)       计算反正弦值；(x在 -1与1之间，返回0~2π)Math.acos(x)       计算反余弦值；(x在 -1与1之间，返回0~2π)Math.atan(x)       计算反正切值；(x可以为任意值，返回 -π/2 ~π/2)Math.atan2(y,x)    计算从X轴到一个点的角度；(y,x分别为点的纵坐标和横坐标，返回-π ~π)计算函数：Math.sqrt(x)       计算平方根Math.pow(x,y)      计算x^yMath.exp(x)        计算e的指数 e^xMath.log(x)        计算自然对数 (x为大于0的整数)数值比较函数：Math.abs(x)        计算绝对值Math.max(x,y,...)  返回参数中最大的一个Math.min(x,y,...)  返回参数中最小的一个* Math.random()      返回0~1之间的一个随机数  //若要整数时，如0~99的随机数： n=parseInt(Math.random()*100);Math.round(x)      返回舍入为最接近的整数(四舍五入，负数时五舍六入)* Math.floor(x)      返回下舍入整数 (结果不大于x；正数时直接舍去小数，负数时 -1.1==-2 )Math.ceil(x)       返回上舍入整数 (结果大于等于x)5. Date 时间对象：创建日期对象：a.不指定参数时：  var nowd1=new Date();document.write(nowd1.toLocaleString( ));//显示当前时间，如：2008年11月24日 星期一 19时23分21秒//不用"toLocaleString()"则显示： Mon Nov 24 2008 19:23:21 GMT+0800 (CST)b.参数为日期字符串： var nowd2=new Date("2008/3/20 11:12");alert(nowd2.toLocaleString());//显示： 2008年03月20日 星期六 11时12分00秒var nowd3=new Date("08/03/20 11:12");alert(nowd3.toLocaleString( ));//显示： 1920年08月03日 星期六 11时12分00秒    //按 月、日、年 的顺序c.参数为毫秒数：  var nowd3=new Date(5000); alert(nowd3.toLocaleString( ));//显示： 1970年01月01日 星期四 08时00分05秒 //显示本国的时间alert(nowd3.toUTCString()); //显示西方的时间： Thu, 01 Jan 1970 00:00:05 GMTd.参数为年月日小时分钟秒毫秒： var nowd4=new Date(2008,10,24,11,12,0,300);alert(nowd4.toLocaleString( )); //毫秒并不直接显示；月份参数从0~11，所以这里10对应11月份//显示： 2008年11月24日 星期一 11时12分00秒获取和设置日期、时间的方法：getDate()          setDate(day_of_month)       日期 (1~31)getDay()                                       星期 (1~7;  没set方法)getMonth()         setMonth (month)            月份 (0~11; 别忘加1)getFullYear()      setFullYear (year)          完整年份(-271820~275760)getYear()          setYear(year)               年 (范围同上； 1900年计算为0)getHours()         setHours (hour)             小时 (0~23)getMinutes()       setMinutes (minute)         分钟 (0~59)getSeconds()       setSeconds (second)         秒 (0~59)getMilliseconds()  setMillliseconds (ms)       毫秒(0-999)getTime()          setTime (allms)             累计毫秒数(从1970/1/1 00:00:00开始)注意：set方法对任意整数有效，影响上一级的数；如setDate(-1)设为上个月30号。 但对小数没效。日期和时间的转换：getTimezoneOffset()  返回本地时间与GMT的时间差，以分钟为单位(中国为-480；差8小时)toUTCString()        返回国际标准时间字符串(默认)toLocalString()      返回本地格式时间字符串Date.parse(x)        返回累计毫秒数(从1970/1/1 00:00:00到x的本地时间，忽略秒以下的数字)Date.UTC(x)          返回累计毫秒数(从1970/1/1 00:00:00到x的UTC时间) 不明UTC是什么

四、 自定义对象

1. 基本语法：
使用 function 指令定义。其属性用“this.属性名”定义。
如： function ObjectName(yName,yAge) { this.name = yName; this.age = yAge;
}
调用时：
var myObject = new ObjectName(“kk”,80); // ObjectName 里面的函数会被执行
document.write(“name = ” + myObject.name + “age = ” + myObject.age);2. 使用简略语句快速创建对象1) 类正常写法：var car = new Object();car.color = "red";car.wheels = 4;car.hubcaps = "spinning";简略写法：var car = {color: "red",wheels:4,hubcaps:"spinning"}对象 car 就此创建，不过需要特别注意，结束花括号前一定不要加 ";" 否则在 IE 会遇到很大麻烦。2) 数组正常数组是这样写的： var movies = new Array('Transformers','Transformers2','Avatar','Indiana Jones 4');更简洁的写法是： var movies = ['Transformers', 'Transformers2', 'Avatar', 'Indiana Jones 4'];3)关联数组这样一个特别的东西。 你会发现很多代码是这样定义对象的：var car = new Array();car['colour'] = 'red';car['wheels'] = 4;car['hubcaps'] = 'spinning';//遍历的时候for ( var key in car ) { alert(key + " : " + car[key]); }3.匿名函数var myFun = function(args1, args2){ alert('haha'); }变量 myFun 指向一个匿名函数,这相当于创建函数 function myFun(args1, args2){ alert('haha'); }由于 javascript 没有类型,所以变量可以指向任意类型,也可以指向一个函数,对它来说都只是一片内存空间而已匿名函数一般用在只有一次使用的情况下,也是可以传递参数的如: element.onclick = function(){ alert(0); }4.JavaScript原生函数//要找一组数字中的最大数,如下，可以用一个循环var numbers = [3,342,23,22,124];var max = 0;for(var i=0;i<numbers.length;i++){ if(numbers[i] > max){max = numbers[i];} }alert(max);//也可以用排序实现同样的功能：var numbers = [3,342,23,22,124];numbers.sort(function(a,b){return b - a});alert(numbers[0]);//而最简洁的写法是：Math.max(12,123,3,2,433,4); // returns 433//你甚至可以使用Math.max来检测浏览器支持哪个属性：var scrollTop = Math.max( document.documentElement.scrollTop, document.body.scrollTop );5.如果你想给一个元素增加class样式，可能原始的写法是这样的：function addclass(elm,newclass) {var c = elm.className;elm.className = (c === '') ? newclass : c+' '+newclass;}//而更优雅的写法是：function addclass(elm,newclass){var classes = elm.className.split(' ');classes.push(newclass);elm.className = classes.join(' ');}6.对象的继承，一般的做法是复制所有属性，但还有种方法，就是: Function.apply函数的 apply 方法能劫持另外一个对象的方法，继承另外一个对象的属性Function.apply(obj,args) 方法接收两个参数obj：这个对象将代替Function类里this对象args：这个是数组，它将作为参数传给Function（args-->arguments）示范如：function Person(name,age){   // 定义一个类，人类this.name=name;     //名字this.age=age;       //年龄this.sayhello=function(){alert("hello " + this.name);};}function Print(){            // 显示类的属性this.show=function(){var msg=[];for(var key in this){if(typeof(this[key])!="function"){msg.push([key,":",this[key]].join(""));}}alert(msg.join(" "));};}function Student(name,age,grade,school){    //学生类Person.apply(this,arguments); // this 继承 Person,具备了它的所有方法和属性Print.apply(this,arguments); // this 继承 Print,具备了它的所有方法和属性this.grade=grade;                //年级this.school=school;                 //学校}var p1=new Person("jake",10);p1.sayhello();var s1=new Student("tom",13,6,"清华小学");s1.show();s1.sayhello();

JavaScript技术

一、 使用DHtml

DHTML
定义：使用JavaScript和CSS级联样式表操作HTML创造出各种动态视觉效果统称为DHTML
DHTML = CSS + Html + JS
是一种浏览器端的动态网页技术
DHTML对象模型(DOM)
将HTML标记、属性和CSS样式都对象化
可以动态存取HTML文档中的所有元素
可以使用属性name或id来存取或标记对象
改变元素内容或样式后浏览器中显示效果即时更新
DHTML对象模型包括浏览器对象模型和Document对象模型Window对象的常用属性：* document    对象，代表窗口中显示的HTML文档frames      窗口中框架对象的数组* history     对象，代表浏览过窗口的历史记录* location    对象，代表窗口文件地址，修改属性可以调入新的网页* status      (defaultStatus)窗口的状态栏信息closed      窗口是否关闭，关闭时该值为true* name        窗口名称，用于标识该窗口对象opener      对象，是指打开当前窗口的window对象，如果当前窗口被用户打开，则它的值为nullparent      对象，当前窗口是框架页时指的是包含该框架页的上一级框架窗口top         对象，当前窗口是框架页时指的是包含该框架页的最外部的框架窗口self        对象，指当前Window对象window      对象，指当前Window对象，同selfWindow对象的常用方法：
(使用这些方法时，通常不加window也没区别；但在特定情况下必须加，如在内嵌页面用open();)* alert(sMsg);          弹出简单对话框confirm(sMsg);        选择对话框prompt(sMsg, sInit);  弹出输入对话框* close();              关闭窗口open(sURL, sName, sFeatures, bReplace);   打开窗口print();              打印窗口中网页的内容focus();              设置焦点并执行 onfocus 事件的代码。blur();               失去焦点并触发 onblur 事件。moveBy(iX, iY);       将窗口的位置移动指定 x 和 y 偏移值。moveTo(iX, iY);       将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。resizeBy(iX, iY);     更改窗口的当前位置缩放指定的 x 和 y 偏移量。resizeTo(iWidth, iHeight);  将窗口的大小更改为指定的宽度和高度值。scrollBy(iX, iY);     将窗口滚动 x 和 y 偏移量。scrollTo(iX, iY);     将窗口滚动到指定的 x 和 y 偏移量。* setInterval(vCode,iMilliSeconds,sLanguage);    每经过指定毫秒值后执行一段代码。clearInterval(iIntervalID);                    取消 setInterval 方法的事件。* setTimeout(vCode,iMilliSeconds,sLanguage);     经过指定毫秒值后执行一段代码。(一次性)clearTimeout(iTimeoutID);                      取消 setTimeout 方法设置的超时事件。window主要功能：1.窗口的打开和关闭window.open(url,name,config) 打开新窗口；url:打开的超链接，name:窗口的名称，返回新窗口对象config为窗口的配置参数：menubar 菜单条、toolbar 工具条、location 地址栏、directories 链接、status 状态栏、scrollbars 滚动条、resizeable 可调整大小(以上参数值为yes或no，默认yes)；width 窗口宽，以像素为单位；height 窗口高，以像素为单位(参数值为数值)* window.close() 关闭窗口2.对话框简单对话框：alert(str)        提示框，显示str字符串的内容；按[确定]关闭对话框confirm(str)      确认对话框，显示str字符串的内容；按[确定]按钮返回true，[取消]返回falseprompt(str,value) 输入对话框，显示str的内容；按[确定]按钮返回输入值，[取消]关闭，返回null窗口对话框：showModalDialog(url,arguments,config)    IE4或更高版本支持该方法showModelessDialog(url,arguments,config) IE5或更高版本支持该方法参数:url 打开链接，arguments 传入参数名，config 窗口配置参数config 外观配置参数：status、resizable、help 是否显示标题栏中的问号按钮、center 是否在桌面中间dialogWidth 对话框宽、dialogHeight 对话框高、(上一行参数值为yes或no，这两行参数为多少像素)dialogTop 对话框左上角的y坐标、dialogLeft 对话框左上角的x坐标3.状态栏window.status                 状态栏中的字符串信息允许进行设置或读取4.定时器tID1=setInterval(exp,time)    周期性执行exp代码；exp 代码块名，time 周期(毫秒)，返回启动的定时器clearInterval(tID1)           停止周期性的定时器tID2=setTimeout(exp,time)     一次性触发执行代码exp；返回已经启动的定时器clearTimeout(tID2)            停止一次性触发的定时器5.内容滚动window.scroll(x,y)            滚动窗口到指定位置；单位为像素window.scrollTo(x,y)          同scroll方法window.scrollBy(ax,ay)        从当前位置开始，向右滚动ax像素，向下滚动ay像素6.调整窗口大小和位置window.moveTo(x,y)            移动窗口到指定位置；单位为像素window.moveBy(ax,ay)          向右移动ax像素，向下移动ay像素，参数为负数表示反方向移动window.resizeTo(width,height) 调整窗口大小为指定大小window.resizeBy(ax,ay)        放大或缩小窗口；参数为负数表示缩小7.Screen对象                    // 屏幕信息(属于window的子对象；常用于获取屏幕的分辨率和色彩)screen.width                  屏幕分辨率的宽度，例如1024*768分辨率下宽度为1024screen.height                 类似上面，屏幕分辨率的高度screen.availWidth             屏幕中可用的宽  //排除 Windows 任务栏screen.availHeight            屏幕中可用的高  //排除 Windows 任务栏screen.colorDepth             屏幕的色彩数8.History对象                   // 窗口的访问历史信息(属于window的子对象,常用于返回到已经访问过的页面)history.length                历史记录数history.foward()              向下一页history.back()                返回上一页history.Go(0)                 刷新。括号里填"-1"就是返回上一页，填"1"就是下一页；其它数字类推9.Navigator对象     浏览器和OS(系统)的信息 数组10.Location对象     浏览器地址栏的信息  如： location.href="http://www.google.com/";location.assign(href);        前往新地址，在历史记录中，用 Back 和 Forward 按钮可回到之前的地址location.replace(href);       替代当前文文件，在历史记录中也回不到之前的地址location.reload(true);        类似刷新，默认 false// location 各属性的用途location.href                 整个URl字符串(在浏览器中就是完整的地址栏),如: "http://www.test.com:8080/test/view.htm?id=209&dd=5#cmt1323"location.protocol             返回scheme(通信协议)，如: "http:", "https:", "ftp:", "maito:" 等等(后面带有冒号的)location.host                 主机部分(域名+端口号)，端口号是80时不显示，返回值如："www.test.com:8080", "www.test.com"location.port                 端口部分(字符串类型)。如果采用默认的80端口(即使添加了:80)，那么返回值并不是默认的80而是空字符。location.pathname             路径部分(就是文件地址)，如: "/test/view.htm"location.search               查询(参数)部分。如: "?id=209&dd=5"location.hash                 锚点，如: "#cmt1323"应用例子：窗口最大化window.moveTo(0,0); window.resizeTo(screen.availWidth,screen.availHeight);或者： moveTo(0,0); resizeTo(screen.width, screen.height);//采用screen对象的分辨率属性和resizeTo方法来动态确定窗口最大长度和宽度

二、 Dom 元素

处理 XML 文件的 DOM 元素属性：
.childNodes 返回目前元素所有子元素的数组
.children 返回目前元素所有子元素的数组(这个在IE、火狐上也可以用)
.firstChild 返回目前元素的第一个子元素
.lastChild 返回目前元素的最后一个子元素
.nodeValue 指定表示元素值的读/写属性
.parentNode 返回元素的父节点
.previousSibling 返回紧邻目前元素之前的元素
.nextSibling 返回目前元素的后面的元素
.tagName 返回目前元素的标签名(大写)沿 XML 文件来回移动的 DOM 元素方法：document.getElementById(id)             取得有指定唯一ID属性值文件中的元素document.getElementsByTagName(name)     返回目前元素中有指定标签名的子元素的数组<element>.hasChildNodes()               返回布尔值，表示元素是否有子元素<element>.getAttribute(name)            返回元素的属性值，属性由name指定动态建立内容时所用的 W3C DOM 属性和方法：document.createElement(tagName)         建立由tagName指定的元素。比如以"div"作为参数，则生成一个div元素。document.createTextNode(text)           建立一个包含静态文字的节点。<element>.appendChild(childNode)        将指定节点增加到目前元素的子节点中。例如：select中增加option子节点<element>.getAttribute(name)            取得元素中的name属性的值<element>.setAttribute(name,value)      设定元素中的name属性的值<element>.insertBefore(Node1,Node2)     将节点Node1作为目前元素的子节点插到Node2元素前面。<element>.removeAttribute(name)         从元素中删除属性name<element>.removeChild(childNode)        从元素中删除子元素childNode<element>.replaceChild(newN,oldN)       将节点oldN替换为节点newN<element>.hasChildnodes()               返回布尔值，表示元素是否有子元素注意：文字实际上是父元素的一个子节点，所以可以使用firstChild属性来存取元素的文字节点。有了文字节点后，可以参考文字节点的nodeValue属性来得到文字。读取XML时，须考虑它的空格和换行符也作为子节点。处理 HTML DOM 元素中3个常用的属性: nodeName、 nodeValue 以及 nodeTypenodeName 属性含有某个节点的名称:元素节点的 nodeName 是标签名称(永远是大写的)属性节点的 nodeName 是属性名称文本节点的 nodeName 永远是 #text文档节点的 nodeName 永远是 #documentnodeValue / data对于文本节点，nodeValue 属性包含文本。可增删改对于属性节点，nodeValue 属性包含属性值。nodeValue 属性对于文档节点和元素节点是不可用的。会返回 nulldata同样是文本的内容,这个属性下同样可以增删改。对于文档节点和元素节点不可用,返回 undefinenodeType 属性返回节点的类型。节点类型是：元素类型                  节点类型ELEMENT_NODE                :  1  // 元素ATTRIBUTE_NODE              :  2  // 属性TEXT_NODE                   :  3  // 文本CDATA_SECTION_NODE          :  4ENTITY_REFERENCE_NODE       :  5ENTITY_NODE                 :  6PROCESSING_INSTRUCTION_NODE :  7COMMENT_NODE                :  8  // 注释DOCUMENT_NODE               :  9  // 文档,即 documentDOCUMENT_TYPE_NODE          : 10DOCUMENT_FRAGMENT_NODE      : 11NOTATION_NODE               : 12注： 对于属性节点，可使用 “attr.nodeName”和“attr.nodeValue”来查看或者赋值, 也可以使用“attr.name”和“attr.value”。只是, attr.nodeValue 会返回真实类型,如 bool,number,string,object 等； 而 attr.value 全是 string 类型(null 则返回"null")判断是否 dom 元素，一些特殊节点只有nodeName，没有tagName，比如document的nodeName为“#document”，tagName为空值。

三、跨浏览器

1.浏览器判断：
//如果是火狐等浏览器则为“true”
var isNav = (navigator.appName.indexOf(“Netscape”) != -1);
//如果是IE浏览器则为“true”
var isIE = (navigator.appName.indexOf(“Microsoft”) != -1); // navigator.appName == “Microsoft Internet Explorer”
var isIE = (navigator.appVersion.indexOf(“MSIE”) != -1);
//判断IE6
var isIE6 = (navigator.userAgent && navigator.userAgent.split(“;”)[1].toLowerCase().indexOf(“msie 6.0”)!=”-1”);
//如果是Opera浏览器则为“true”
var isOpera = (navigator.userAgent.indexOf(“Opera”) != -1);
//浏览器运行的平台，是 windows 则返回 true
var isWin = (navigator.appVersion.toLowerCase().indexOf(“win”) != -1);2.event 事件
在 IE4+ 和 Firefox下的 event
function doEventThing(event)
{
//获取不同浏览器的 event
event = event || window.event; // window.event for IE; 参数event for firefox
//获取不同浏览器的键盘输入记录
var currentKey = event.keyCode || event.charCode; // keyCode 目前兼容了
//获取不同浏览器的事件源
var eventSource = event.target || event.srcElement; // srcElement for IE; target for firefox
var target = event.relatedTarget || event.toElement; // 将会去到的元素,像 onmouseout 会触发
//屏蔽Form提交事件
//if ( event.returnValue ) event.returnValue = false; // for IE
//if ( event.preventDefault ) event.preventDefault(); // for firefox
( e.preventDefault ) ? (e.preventDefault()) : (e.returnValue = false);
//添加事件
if ( event.attachEvent ) {
event.attachEvent(‘onclick’, func ); // for IE; 需要加上“on”,如 onmouseover
} else if ( event.addEventListener ) {
event.addEventListener(‘clcik’, func, false); // for firefox; 不需要加上“on”,直接写“click”
}
//改变事件; 但上面的绑定事件方法并不改变原有的onclick事件，而是添加事件
event.onclick = func;
}
//Firefox 下必须手动输入参数,调用时如:firefox 的 click() 事件,由于 firefox 不支持 click() 事件,代替方式：
// 获取需要触发 onclick() 的元素
var element = document.getElementsByTagName(‘a’)[0];
// For IE
if ( document.all ) {
element.click();
// FOR DOM2
} else if ( document.createEvent ) {
var ev = document.createEvent(‘MouseEvents’); //’MouseEvents’ 改成 ‘HTMLEvents’ 的话,firfox2不通过
ev.initEvent(‘click’, false, true);
element.dispatchEvent(ev);
}跨浏览器技巧：
1) IE不能用setAttribute设定class属性。
解决方法1: 同时使用 setAttribute(“class”,”newClassName”) 和 setAttribute(“className”,”newClassName”)
解决方法2: .className = “newClassName”
2) IE中不能使用setAttribute设定style属性。即 .setAttribute(“style”,”fontweight:bold;”) 不相容。
解决方法：使用 .style.cssText = “fontweight:bold;”
3) 使用appendChild将元素直接增加到中，则在IE中这一行并不出现，但其它浏览器却会出现。
解决方法：在
下增加元素，再添加
4) IE不能直接添加按钮处理事件。如：addButton.setAttribute(“onclick”,”addEmployee(‘unid’);”);不适用。
解决方法：addButton.onclick = function() { addEmployee(‘unid’); };//用匿名函数调用addEmployee()函数。
此外,onmouseover,onmouseout 等事件也要使用此方法。
5) firefox 不支持 document.all
解决方法: 用 document.getElementsByTagName(“*”) 替代,可以得到得到所有元素的集合
5.Firefox注册innerText写法
if ( (navigator.appName.indexOf(“Netscape”) != -1) )
{
//注册 Getter
HTMLElement.prototype.defineGetter(“innerText”, function(){
var anyString = “”;
var childS = this.childNodes;
for ( var i=0; i < childS.length; i++ ) {
if ( childS[i].nodeType == 1 )
anyString += childS[i].tagName == “BR” ? ‘\n’ : childS[i].innerText;
else if(childS[i].nodeType == 3 ) {
anyString += childS[i].nodeValue;
}
}
return anyString;
});//注册 SetterHTMLElement.prototype.__defineSetter__("innerText",function ( sText ) { this.textContent = sText; });}
//在非IE浏览器中使用 textContent 代替 innerText6.长度：FireFox长度必须加“px”，IE无所谓
解决方法：统一使用 obj.style.height = imgObj.height + “px”;
7.父控件下的子控件：IE是“children”，FireFox是“childNodes”
8.XmlHttp
在IE中，XmlHttp.send(content)方法的content可以为空，而firefox则不能为空，应该用send(” “)，否则会出现411错误9.event.x 与 event.y 问题
问题： 在IE中，event 对象有x,y属性，FF中没有
解决方法：
在FF中，与 event.x 等效的是 event.pageX ，但event.pageX IE中没有
故采用 event.clientX 代替 event.x ，在IE中也有这个变量
event.clientX 与 event.pageX 有微妙的差别，就是滚动条
要完全一样，可以这样：
mX = event.x ? event.x : event.pageX;10.禁止选取网页内容
问题：FF需要用CSS禁止，IE用JS禁止
解决方法：
IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none;11.各种浏览器的特征及其userAgent。
IE
只有IE支持创建ActiveX控件，因此她有一个其他浏览器没有的东西，就是 window.ActiveXObject 函数。
IE各个版本典型的userAgent如下(其中，版本号是MSIE之后的数字)：
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)Firefox
Firefox中的DOM元素都有一个getBoxObjectFor函数，用来获取该DOM元素的位置和大小(IE对应的中是getBoundingClientRect函数)。这是Firefox独有的，判断它即可知道是当前浏览器是Firefox。
Firefox几个版本的userAgent大致如下(其中，版本号是Firefox之后的数字)：
Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12Opera
Opera提供了专门的浏览器标志，就是 window.opera 属性。
Opera典型的userAgent如下(其中，版本号是Opera之后的数字)：
Opera/9.27 (Windows NT 5.2; U; zh-cn)
Opera/8.0 (Macintosh; PPC Mac OS X; U; en)
Mozilla/5.0 (Macintosh; PPC Mac OS X; U; en) Opera 8.0Safari
Safari浏览器中有一个其他浏览器没有的openDatabase函数，可做为判断Safari的标志。
Safari典型的userAgent如下(其版本号是Version之后的数字)：
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13
Mozilla/5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3Chrome
Chrome有一个 window.MessageEvent 函数，但Firefox也有。不过，好在Chrome并没有Firefox的getBoxObjectFor函数，根据这个条件还是可以准确判断出Chrome浏览器的。
目前，Chrome的userAgent是(其中，版本号在Chrome之后的数字)：
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13下面是判断浏览器的代码：
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject)
Sys.ie = ua.match(/msie ([\d.]+)/i)[1];
else if (document.getBoxObjectFor) // 火狐判断出错
Sys.firefox = ua.match(/firefox\/([\d.]+)/i)[1];
else if (window.opera)
Sys.opera = ua.match(/opera.([\d.]+)/i)[1];
else if (window.MessageEvent)
Sys.chrome = ua.match(/chrome\/([\d.]+)/i)[1];
else if (window.openDatabase)
Sys.safari = ua.match(/version\/([\d.]+)/i)[1];//以下进行测试
if(Sys.ie) alert('IE: '+Sys.ie);if(Sys.firefox) alert('Firefox: '+Sys.firefox);if(Sys.chrome) alert('Chrome: '+Sys.chrome);if(Sys.opera) alert('Opera: '+Sys.opera);if(Sys.safari) alert('Safari: '+Sys.safari);

四、 摘录

1. 省略对象名称，用 with() 命令。
如：document.write(“…..
”);
document.write(“…..
”);
可省略写为：
with (document) {
write(“…..
”);
write(“…..
”);
} //把相同的 document 省略掉。
省略对象名称，变量。
如： document.myForm.myText.value;
可省略写为： f = document.myForm; f.myText.value;2.页面调试
javascript 加入如下语句，出错时会提示
注意： chrome、opera 和 safari 等浏览器不支持 window.onerror 事件(w3c标准没有此事件),需另外捕获出错信息 /**
* 这是出错调试代码
* 当页面发生错误时，提示错误信息
* @param msg 出错信息
* @param url 出错文件的地址
* @param sLine 发生错误的行
* @return true 让出错时不显示出错图标
*/
window.onerror = function ( msg, url, sLine ) {
var hostUrl = window.location.href;
// 判断网址,测试时可以提示出错信息;正式发布时不提示
if ( hostUrl.indexOf("http://localhost") === 0 || hostUrl.indexOf("http://127.0.0.1") === 0 ||
hostUrl.indexOf("http://192.168.") === 0 || hostUrl.indexOf("file://") === 0 )
{
var errorMsg = "当前页面的脚本发生错误.\n\n";
errorMsg += "错误: " + msg + "\n";
errorMsg += "URL: " + url + "\n";
errorMsg += "行: " + sLine + "\n\n";
errorMsg += "点击“确定”消去此错误，“取消”保留此错误。\n\n";
return window.confirm( errorMsg );
}
// 返回true,会消去 IE下那个恼人的“网页上有错误”的提示
return true;
};
3.把数值变成 奇 \ 偶数(利用位运算)
n = n | 1 ; //一定得到奇数。如果原本是偶数则加一。
n = (n >> 1) <<1; //一定得到偶数。如果原本是奇数则减一。
n = n ^ 1; //奇偶互换。对偶数加一，对奇数减一。4.取出数值的整数部分(取整)。
// 以下第一种方法不受浏览器和版本的影响，后两种受版本影响。
n = ( n > 0 ) ? Math.floor(n) : Math.ceil(n);
n = Number ( (String(n).split(“.”))[0]);
n = parseInt(n,10);
// 下面做法更简便高效,用位运算来做(右移0位,或者两次取反),且非数值型的值会转成0
alert(5>>0); alert(5); // 值为 5
alert(5.55>>0); alert(~~5.55); // 值为 5
alert(-98.4>>0); alert(-98.4); // 值为 -98
alert(‘absd’>>0); alert('absd'); // 值为 0
alert(null>>0); alert(~~null); // 值为 0
alert('34.5'>>0); alert(‘34.5’); // 值为 345.取出数值的小数部分。
须先检查小数点是否存在。但有时会发生运算误差。
n = Math.abs(n); if(n>0) n = n - Math.floor(n); else n = 0;
n = parseInt(n,10) - parseFloat(n);
if((“”+n).indexOf(“.”) > -1) n = Number(“0.”+(String(n).split(“.”))[1]); else n = 0;6.在任意位置插入一行js(单行程序)： 7.设置焦点：
//document.all[“DateID”].onfocus;
document.all[“DateID”].focus();
formName.DataName.focus();8.默认参数：
function show() {
alert( arguments[0] );
}
这个函数会alert出第一个参数，如调用时： show(“haha”)，则alert(“haha”);9.禁止 confirm 與 alert
window.confirm = function(str){return true;};
window.alert = function(str){};10.获取下拉菜单的内容 Text 获取选中的下拉菜单的内容：
var seleElement = document.formName.seleName;
var optionText = seleElement.options[seleElement.selectedIndex].text;11.设置默认值:
edittype = edittype || “text”; //edittype预设为 text
上面一句: 如果 edittype 之前有值,则取之前的值; 之前没有值,则取默认值12.数值的截取:
numObj.toFixed([fractionDigits])
//numObj:必选项。一个 Number 对象。
//fractionDigits:可选项。小数点后的数字位数。其值必须在 0 – 20 之间，包括 0 和 20。 预设为0
toFixed 方法返回一个以定点表示法表示的数字的字符串形式。对数值进行四舍五入截取到指定位数的小数
如: 55.3654.toFixed(2) //返回55.3713.IE上的关闭窗口时不提示
window.opener = null; // 关闭IE6不提示
window.open(“”,”_self”); // 关闭IE7不提示
//关闭窗口
window.close();14.刷新页面的几种方法：
history.go(0);
window.navigate(location);
document.URL = location.href;
document.execCommand(‘Refresh’); //火狐不能用
location.reload();
location = location;
location.assign(location);
location.replace(location);15.页面跳转：
location.href = “yourURL”
window.location = ‘url’
window.location.href = “url”
window.navigate(“top.jsp”);
self.location = ‘top.htm’ //令所在框架页面跳转，大框架不变
top.location = ‘xx.jsp’; //在框架內令整個页面跳转16.页面跳转/刷新 的注意：
需要先执行其他代码，然后再页面跳转或者刷新。因为页面跳转或者刷新后不再执行下面的代码。
如：alert(‘请先登录’); window.location.href = ‘index.jsp’;17.改变标题(即改变标签的内容)
document.title = “title_content”;

五、JavaScript 技巧

1.获取表单的内容2. IE3.0 和 NN2.0(Netscape Navigator)上能同时运作的程序为照顾不同的浏览器和版本，只好多作几次判断。看程序中的几个 if 实现的是同一功能就明白。<html><head><title>写能同时在IE和NN上运行的程序</title><script language="JavaScript"><!--x = 0;function moveLayer() {x = x + 2;if(document.all) {document.all["myLay"].style.left = x;} //IE4以上版本可用，IE4之前和NN上都没有 allif(document.layers) {document.layers["myLay"].left = x;} //仅NN4上运行，NN4外没有layers对象/* 下面这句仅NN6以后版本可用。因为document.getElementById()在IE5.x上有，所以需 " !document.all "  */if(!document.all && document.getElementById) {document.getElementById("myLay").style.left = x;}}// --></script></head><body bgcolor = "white" onLoad="setInterval('moveLayer()',1000)"><div id="myLay" style="position:absolute;left:0px"> <img src="btn1.gif"></div></body></html>3. 读取 Behavior 文档 (任意标签都可触发 onclick 事件) (IE5.0以上可用)//在 html 文件上写：<html><head><title>读取 Behavior 文件</title><style type="text/css"><!--div { behavior:url(a.htc); }--></style><script language="JavaScript"><!--function testA() { alert("haha"); }  //<a>标签的 onclick事件function check() {    //获取 id 和 class 名称alert("id = "+document.all["myObj"].id+"; className="+document.all["myObj"].className);}// --></script></head><body bgcolor = "white"><center><div>点击文字</div><br/><br/><a href="JavaScript:testA()">sample</a><br/><br/><br/><input id="myObj" class="mz" type=button value="test" onclick="check()" /></center></body></html>//在此 html 文件的同一目录下的 a.htc 文件里写：<script language="JavaScript"><!--attachEvent("onclick",msg);function msg() { alert("oh!");}// --></script>4.定时器，每隔一段时间进行处理(IE3.0以上，NN2.0以上可用)<html><head><title>定时器</title><script language="JavaScript"><!--var timerId;var n = 0;function timerUpdate(){window.document.myForm.result.value = n++ ;//这是个一次性触发的方法，这里以反复调用来实现周期性触发timerId = setTimeout("timerUpdate()",100); //第一个参数是要执行的函数,也可以直接写匿名函数而不用字符串}function timerStart() {//防止连续多次点击，导致计数器速度迭加document.getElementById("StartCount").onclick = "";setTimeout("timerUpdate()",1);}function timerEnd() {clearTimeout(timerId);//这两句的效果一样。//clearInterval(timerId);//还原 "StartTime"按钮 的点击能力document.getElementById("StartCount").onclick = timerStart;}// --></script></head><body><form name="myForm"><input type="text" name="result"/><br/><br/></form><input type="button" id="StartCount" value="StartTime" onclick="timerStart()"/><input type="button" value="EndTime" onclick="timerEnd()"/></body></html>5.根据 javaScript 的开闭状态来显示网页(适用IE3.0和NN2.0以上版本)以 <meta> 配合  location.href 来实现。下面的 <meta> 里的content的5表示当javascript关闭时，5秒后跳转到closeJavaScript.html 页面。location.href="openJavaScript.html";  表示当javascript可用时，跳转到 openJavaScript.html 页面。在 html 里加入"<noscript>您使用的浏览器不支持或者禁止了Javascript</noscript>"则在本页面提示。<meta http-equiv="refresh" content="5; url=closeJavaScript.html"><script language="JavaScript"><!--location.href="openJavaScript.html";// --></script>7.淡入/淡出效果(背景色适用IE3.0和NN2.0以上版本，文字色适用IE4以上版本)<body bgcolor="black" onLoad="newCount('bgColor'); fade('0123456789ABCDEF')"><script language="JavaScript">var count = 0 ;var obj = null ;function fade(str){c = str.charAt(count++);if (obj=='bgColor') {document.bgColor = "#"+c+c+c+c+c+c+c+c;} //改变背景颜色，颜色码8位if (obj=='word') {document.all["strId"].style.color = "#"+c+c+"0000";} //改变文字颜色，颜色码6位if(count < str.length) setTimeout("fade('"+str+"')",250);}function newCount(object){ count = 0 ;  obj = object ; }</script><input type="button" value="toWhite" onclick="newCount('bgColor'); fade('0123456789ABCDEF')"/><input type="button" value="toBlack" onclick="newCount('bgColor'); fade('fedcba9876543210')"/><br/><br/><span id="strId" onMouseover="newCount('word'); fade('fedcba9876543210')">点击淡入淡出的文字</span></body>8.窗口的振动效果(适用IE4.0和NN4.0以上版本)<script language="JavaScript">//指定窗口的错位。x = new Array( 10,  3, -6,  8, -10, -7,  5, -3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);y = new Array(-12,  6, -3, 10, -9,  -2,  8,  2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);count = 0;function purupuruWin() {if(x[count] != 0) moveBy(x[count], y[count]); //窗口的振动count++;if(count >= x.length )count = 0;setTimeout("purupuruWin()",100);}</script><input type="button" name="" value="StartPuru" onclick="purupuruWin()">9.检查电子邮件地址是否正确(适用IE4.0和NN3.0以上版本)<script language="JavaScript">function checkMailAddr(dstText){var data = dstText.match(/^\S+@\S+\.\S+$/); //检查是否邮件的表达式if(!data || !dstText ) alert('电子邮件地址不正确！'); else  alert('电子邮件地址正确！');}</script><form>电子邮件：<input type="text" name="address" /><input type="button" value="check" onclick="checkMailAddr(this.form.address.value)"/></form>10. cookie 的使用。显示访问次数。(适用IE3.0和NN2.0以上版本)<script language="JavaScript">if ( !navigator.cookieEnabled ) alert("can not use cookie");//在 cookie 中存储访问次数。function setCount(n){var theDay = 30;var setDay = new Date();setDay.setTime(setDay.getTime()+(theDay*1000*60*60*24));document.cookie = "count=" + n + ";expires=" + setDay.toGMTString();}function getCount() {var theName = "count=";var theCookie = document.cookie + ";" ;var start = theCookie.indexOf(theName);  //没有cookie时返回“-1”if (start != -1) {  //这是对第2次以后的访问的处理var end  = theCookie.indexOf(";",start);var count = eval(unescape(theCookie.substring(start+theName.length,end)));document.write("这是第 "+count+" 次访问本页面");setCount(count+1);} else {   //这是对第1次访问的处理document.write("这是第1次访问本页面");setCount(2);}}getCount();</script>11.简单的预防二次提交 (适用IE3.0和NN3.0以上版本)<script language="JavaScript">var flag = false;function send() {if (flag) { alert("提交完毕！"); return false; }flag = true ;   return true;}function send2(form) {if ( !flag ){ form.submit(); }}</script><form name="myForm" method="post" action="send.html" enctype="text/plain" onSubmit="return send()"><input type="submit" value="提交" /><!-- onclick里的函数要用双引号括起来，form表单的名称不能加引号，字符则须用单引号括起来--><input type="button" value="按钮" onclick="send2(myform);" ></form>12.解决中文乱码问题。用以下三个方法进行转码就行了：escape('你好')                == %u4F60%u597D           //转成 Unicode 编码encodeURI('你好/p')           == %E4%BD%A0%E5%A5%BD/p   //转换为UTF-8；URL需要传递中文时使用encodeURIComponent('你好/p')  == %E4%BD%A0%E5%A5%BD%2Fp三种方法都能对字符进行过滤。后两者是将字符串转换为UTF-8的方式。escape() 不会编码的字符有69个: *  +  -  .  /  @  _  0-9  a-z  A-Z所有空格、标点符号以及任何其它非 ASCII 字符都用 %xx 编码替换其中 xx 表示该字符的16进制数。例如，空格返回为“%20”。(字符值大于 255 的字符以 %uxxxx 格式存储。)注意：escape 方法不能用来对“统一资源标识符”(URI) 进行编码。unescape() 从用 escape() 编码的 String 对象中返回已解码的字符串。同样不能用于 URIencodeURI()返回编码为有效的 URI 字符串。不会编码的字符有82个: ! # $ & ' ( ) * + , - . / : ; = ? @ _ ~ 0-9 a-z A-Z此方法返回一个已编码的 URI。将编码结果传递给 decodeURI()，则返回初始的字符串。decodeURI() 不对下列字符进行编码： : / ; ?encodeURIComponent() 返回编码为 URI 的有效组件的字符串。不会编码的字符有71个: ! ' ( ) * - . _ ~ 0-9 a-z A-Z注意，它会编译“/”，所以不能包含路径，否则无效。decodeURIComponent() 将编码结果解码回初始字符串。//把任意编码转成 java 的 ascii 编码(Unicode  native2ascii )//注意：html的ascii码是“%”开头的，但java的却是“\”开头，所以这里替换了function change1( str ) {var tem = "";for( var j = 0; j < str.length; j=j+1 ) {if ( escape(str.charAt(j)).length >= 6) {tem += escape(str.charAt(j)).replace("%", "\\");} else { tem += str.charAt(j); }}return tem;}// ascii2nactive  解码function change2( str ) {for( var j = str.length/3; j > 0; j=j-1 ) {str = str.replace("\\", "%");}return unescape(str);}12.1 <a> (A标签) 传参时的中文乱码解决方案利用js的escape函数,转码即可<script language="javascript" type="text/javascript">/*** 打开小视窗* @param url 需要打开视窗的网址* @param name 视窗名称* @param param 视窗显示的参数*/function openWin(url, name, param){var newurl,arrurl;if ( typeof(url) === "undefined" || url === "" ){return ;}else{//没有参数时if ( url.indexOf("?") == -1 ){newurl = url;}//分解参数,并逐个转码else{newurl = url.substring(0,url.indexOf("?")+1);arrurl = url.substring(url.indexOf("?")+1).split("&");for ( var i =0; i<arrurl.length; i++ ){newurl += arrurl[i].split("=")[0] + "=" + escape(arrurl[i].split("=")[1]) + "&";}newurl = newurl.substring(0,newurl.length-1);}}window.open(newurl, name, param);}</script>//使用如下 (下面第二句会更好,测试火狐时第一句会延迟或者没反应)<a href="#" onclick="openWin('test.html','test','width=300,height=400');">Links</a><a href="javascript:openWin('test.html','test','width=300,height=400');">Links</a>A标签的 href="#" 时，IE浏览器会跳转到页面顶部, 解决方法是把“<A href="#">”改写成“<A href="javascript:void(0);">”或者“<A href="javascript:;">”A标签的 onclick 事件，如果返回 false, 可以阻止页面跳转,如: <A href="/index.html" onclick="alert(8);return false;">test</a>注意：使用A标签的 href="javascript:xxx代码" 时，里面的js代码不能使用 this, event 对象, 因为这相当于浏览器地址栏, this 不代表 A 标签。如果需要使用 this 或者 event 来获取此A标签,建议改用 onclick 事件。另外 A 标签里面的 onclick 事件返回 false,则不会跳转(即 href 的内容不会触发, href 里面的js也不会执行)。13.正则表达式：产生正则表达式的方式1. var re = new RegExp("pattern",["flags"]); // 这种方式比较好pattern :正则表达式字符串 // 注意这是字符串,里面的反斜杠("\")需要连写两个来表示一个,因为会转义,如 new RegExp("\\d") 匹配一个数字flags: // flags 可以多个一起使用, 如 new RegExp("\\w", 'gm')g global (全文查找出现的所有 pattern)i ignoreCase (忽略大小写)m multiLine (多行查找)2. 使用 正斜杠("/") 括起来var re = /pattern/flagspattern 和 flags 的含义跟 new RegExp 的一样。只不过,这里的 pattern 不是字符串,不会转义,所以里面的反斜杠("\")不需要连写两个。如 /\d/ 表示匹配一个数字这两种方式产生的正则表达式都是一样的，如 new RegExp("(f+)d+(s+)") 也可以写成： /(f+)d+(s+)/正则表达式的常用函数：re.exec(字符串); // 返回匹配数组(下标0是整个匹配到的字符串,下标1是第1个捕获组,下标2是第2个捕获组...),没有匹配时返回 nullre.test(字符串); // 返回 true, 或者 false,表示是否匹配另外,字符串也有可运用正则表达式的：字符串.replace(正则表达式, 要替换的字符串); // 要替换的字符串里面,也可以使用 $1, $2 作为捕获组字符串.match(正则表达式); // 同 re.exec,返回匹配数组,无法匹配则返回null,[0]是匹配的整个字符串,[1]是匹配的第一个捕获组,[2]是第二个捕获组...RegExp 的属性$1, ..., $9  捕获组,$1是匹配的第一个捕获组(即第一个用小括号括起来的内容),$2是第二个捕获组... 如：if ( new RegExp("(f+)d+(s+)").test("ddfffdddsss") ) {alert(RegExp.$1 + ", " + RegExp.$2); // 提示出： fff, sss}$_, input  返回输入的内容如: /^1((3\d)|(5[036789])|(8[89]))\d{8}$/.exec("13595044124"); alert(RegExp.$_); alert(RegExp.input); // 提示出: 13595044124常用的正则表达式 元字符\          转义符.          匹配除换行符以外的任意字符|          或符号\w         匹配字母或数字或下划线 (大写的通常是小写的反义)\W         匹配任意不是字母,数字,下划线的字符\s         匹配任意的空白符\S         匹配任意不是空白符的字符\d         匹配数字\D         匹配任意非数字的字符\b         匹配单词的开始或结束\B         匹配不是单词开头或结束的位置^          匹配字符串的开始$          匹配字符串的结束[^x]       匹配除了x以外的任意字符[^aeiou]   匹配除了aeiou这几个字母以外的任意字符\数字      表示捕获组,要求与第几个捕获组相同常用的限定符*          重复零次或多次+          重复一次或多次?          重复零次或一次{n}        重复n次{n,}       重复n次或更多次{n,m}      重复n到m次常用正则表达式/^[-]?\d+([.]?\d*)$/                  //数字/^[-]?\d+$/                           //整数/^[0-9a-zA-Z]{5,16}$/                 //用户名(区分大小写，5-16位)/^[\u4e00-\u9fa5]+$/                  //中文/^(\w){6,20}$/;                       //校验密码：只能输入6-20个字母、数字、下划线//电话号码(手機號碼):像(010)88886666，022-22334455，029 1234-5678，010 3523922轉259，3523922。04-36018188/23051418 等/^([(（]?0\d{1,6}[）) -]?)?(\d{5,30}|((\d{4}[ -]){1,7}\d{1,4}))([ -#(（轉转]?\d{1,6}[）)]?)?$/;/^#?([a-f0-9]{6}|[a-f0-9]{3})$/       //十六进制值/^([a-zA-Z\d_\.-]+)@([a-zA-Z\d]+\.)+[a-zA-Z\d]{2,6}$/                     //电子邮箱/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/          //URL//下句是 IP 地址: 1.0.0.1 到 255.255.255.255,每段不能用“0”打头/^([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.(([\d]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))$//^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/           //HTML 标签"str".replace(/(^\s*)|(\s*$)/g, ""); // 去除前后空格//校验登录名：只能输入5-20个以字母开头、可带数字、“_”、“.”的字符串function isRegisterUserName(s) {var patrn = /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;return !!(patrn.exec(s));    //返回匹配数组,没有匹配时返回null;所以非两次以返回boolean值}//防止SQL注入，返回true表示通过验证，返回false表示验证不通过function IsValid( oField ) {re= /select|update|delete|exec|count|'|"|=|;|>|<|%/i;$sMsg = "请您不要在参数中输入特殊字符和SQL关键字！";if ( re.test(oField.value) ) {alert( $sMsg );return false;}return true;}// 日期检查function strDateTime(str){var r = str.match(/^(\d{1,4})(-|\/)?(\d{1,2})\2(\d{1,2})$/); // 注意里面的“\2”，表示要求与第2个捕获组“(-|\/)?”的值相同if ( r == null ) return false;var d = new Date(r[1], r[3]-1, r[4]);return (d.getFullYear()==r[1] && (d.getMonth()+1)==r[3] && d.getDate()==r[4]);}14.修改表单内容<html><head><title>修改表单内容</title><script language="JavaScript" type="text/javascript" >/*** 编辑按钮* @param form  页面提交的<form>的name* @param dataId  要编辑的行的 id* @param number  要编辑的列的数量*/var isedit = false;function edit ( form, dataId, number ){if ( isedit ){ alert("请编辑完再编辑下一笔！");return;}isedit = true;//获取需编辑的对象(<tr>卷标对象)var data = document.getElementById("data_"+dataId);//获取需编辑的各子对象(<td>卷标对象)。注意：各<td>间别换行，换行符也算子元素。var dataNodes = data.childNodes;//写进去的内容。这将是数组对象var dataInput;//循环修改须编辑的列的内容for ( var i=number-1; i >= 1; i=i-1 ) {var editname = "edit_" + i;dataInput = "<input type='text' name='" + editname + "' id='" + editname + "' ";dataInput += " size='10' maxlength='15' value='" + dataNodes[i].innerHTML + "' \/>"dataNodes[i].innerHTML = dataInput;}// 第一栏是学号等 ID字段，不许修改。但提交时需在提交窗体里找到它。dataInput = "<input type='hidden' name='edit_0' value='";dataInput += dataNodes[0].innerHTML + "' \/>" + dataNodes[0].innerHTML;dataNodes[0].innerHTML = dataInput;//性别栏，下拉菜单dataInput = "<select name='edit_2'>"//dataNodes[2].innerHTML.indexOf("男") 如果相同则传回"0"，不同传回"-1"if(dataNodes[2].innerHTML.indexOf("男") === 0){dataInput += "<option value='m' selected>男<\/option>";dataInput += "<option value='f' >女<\/option><\/select>";} else {dataInput += "<option value='m' >男<\/option>";dataInput += "<option value='f' selected>女<\/option><\/select>";}dataNodes[2].innerHTML = dataInput;//按钮栏dataInput = "<input type='button' value='确认' onclick=\"updateValue(";dataInput += form.name + ", " + number + ", 'edit_' );\"\/>";dataNodes[ (dataNodes.length -2) ].innerHTML = dataInput;dataNodes[ (dataNodes.length -1) ].innerHTML = "";  //编辑时不给删除form.SQLmethod.value = "modify"; //表单提交信息，与这里无关form.submitId.value = dataId;    //表单提交信息，与这里无关}/*** 编辑后确认，提交* @param form  页面提交的<form>的name* @param number 要编辑的列的数量* @param str name属性的开始字段*/function updateValue ( form , number , str ) {var editname;//循环处理，主要是 alert() 提醒客户端必须填写某些内容for ( var i=1; i < number; i=i+1 ) {editname = str + i;if( document.all[editname].value.length === 0) {document.all[editname].focus();alert("请填写各栏目内容！");return ;}}form.submit();}</script></head><body><form name="pageForm" action="" ><table border="1"><TR><TH>学号</TH><TH>姓名</TH><TH>性别</TH><TH style="BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid"></TH><TH style="BORDER-BOTTOM: #000000 1px solid"></TH></TR><tr id='data_1' ><td>101</td><td>stu1</td><td>男</td><td><INPUT type='button' value='编辑' onclick="edit(pageForm,1,2 ); " ></td><td><INPUT type='button' value='删除' onclick="del(pageForm,1, 'del');" ></td></tr><tr id='data_2' ><td>102</td><td>stu2</td><td>女</td><td><INPUT type='button' value='编辑' onclick="edit(pageForm,'2',2 ); " ></td><td><INPUT type='button' value='删除' onclick="del(pageForm,2, 'del');" ></td></tr></table></form></body></html>15.可变长参数 的 动态函数：函数是一个对象，一个Function对象(函数参数列表及函数主体事实上只是Function对象的构造函数的参数而已)函数参数是可变的，比如定义函数时的参数列表有3个参数，调用时可以传2个参数，或者5个参数arguments.length 是实际参数的个数(被传递参数的个数)方法名.length    期望参数的个数(定义函数时的参数列表的参数个数)动态函数：var square = new Function("x", "y", "var sum;sum=x*x+y*y;return sum;");alert(square(2,3)); //值为13动态函数的作用：函数体是由一个字符串构成的，故函数体可动态生成。16.页面刷新的方法：history.go(0);location.reload();location=location;location.assign(location);document.execCommand('Refresh');window.navigate(location);location.replace(location);document.URL=location.href;自动刷新的方法：1) <head> 里使用标签：<meta http-equiv="refresh" content="20"> //其中20指每隔20秒刷新一次页面2) 使用javascript：<script language="JavaScript">function myrefresh() {window.location.reload();}setTimeout('myrefresh()',1000); //指定1秒刷新一次</script>页面自动跳转：<meta http-equiv="refresh" content="20;url=http://www.wyxg.com"> //20秒后跳转到url指定的页面刷新框架的js://刷新包含该框架的页面用parent.location.reload();//子窗口刷新父窗口self.opener.location.reload();  ( 或 <a href="javascript:opener.location.reload()">刷新</a> )//刷新另一个框架的页面用parent.otherFrameID.location.reload();关闭或者打开窗口时刷新，在<body>中用 onload 或 onUnload 即可。<body onload="opener.location.reload()">   //打开窗口时刷新<body onUnload="opener.location.reload()"> //关闭窗口时刷新window.opener.document.location.reload(); // ?17.用 javascript 处理 JSON：JSON 是 javascript 的一个子集，所以，在javascript 中使用JSON是非常简单的。JSON的规则很简单： 对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。1) 创建 JSON 对象，如下创建了只包含一个成员 "bindings" 的一个对象，bindings 则包含了一个由3个对象组成的数组。var myJSONObject = {"bindings": [{"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},{"ircEvent": "PRIUUCG", "method": "deleteURI", "regex": "^delete.*"},{"ircEvent": "PRIIPKD", "method": "randomURI", "regex": "^random.*"}]};2) 获取对象： 在javascript 中， 成员可以通过“点号”来获取。如： myJSONObject.bindings[0].method  // 结果： newURIalert(myJSONObject.bindings[1].method); //alert信息: deleteURI3) 通过eval() 函数可以将JSON字符串转化为对象。如： var myJSONtext = '{"ircEvent": "PRIUUCG", "method": "deleteURI", "regex": "^delete.*"}';var myObject = eval('(' + myJSONtext + ')');alert(myObject.ircEvent); //alert信息: PRIUUCG如： var myObject2 = eval('({ircEvent: "PRIUUCG", method: "delete"})'); //名称也可以不用引號括起來alert(myObject2.ircEvent); //alert信息: PRIUUCG4) 基于安全的考虑的 JSON 解析器。eval 函数非常快，但是它可以编译任何 javascirpt 代码，这样的话就可能产生安全的问题。eval 的使用是基于传入的代码参数是可靠的假设的，有一些情况下，可能客户端是不可信任的。一个 JSON 解析器将只接受 JSON 文本。所以是更安全的。如： var myObject = JSON.parse(myJSONtext, filter);可选的 filter 参数将遍历每一个 value key 值对， 并进行相关的处理。如： myData = JSON.parse(text, function (key, value) {return key.indexOf('date') >= 0 ? new Date(value) : value;});18.匿名函数与 Module 模式JavaScript 的任何变量，函数或是对象，除非是在某个函数内部定义，否则，就是全局的。意味着同一网页的别的代码可以访问并改写这个变量(ECMA 的 JavaScript 5 已经改变了这一状况 - 译者)使用匿名函数，你可以绕过这一问题。比如，你有这样一段代码，很显然，变量 name, age, status 将成为全局变量:var name = 'Chris';var age = 18;function createMenber() {// ...}function getMenber() {// ...}为了避免这一问题，你可以使用匿名函数:var myApp = function() {var name = 'Chris';var age = 18;// 如果在函数里面再定义函数,建议如下写法,如果写“function createMenber(){...}”则IE7会报错var createMenber = function() {// ...}var getMenber = function() {// ...}}();如果这个函数不会被再次调用，可以连这个函数的名称也省了，更直接写为:(function() {var name = 'Chris';var age = 18;var createMenber = function() {// ...}var getMenber = function() {// ...}}) ();如果要访问其中的对象或函数，可以:var myApp = function() {var name = 'Chris';var age = 18;return {createMenber: function() {// ...}getMenber: function () {// ...}}} ();// myApp.createMenber() 和 myApp.getMenber() 可以使用所谓 Module 模式或单例模式(Singleton)，假如你想在别的地方调用里面的方法，可以在匿名函数中返回这些方法，甚至用简称返回：var myApp = function() {var name = 'Chris';var age = 18;var createMenber = function () {// ...}var getMenber = function () {// ...}return {create:createMenber,get:getMenber}} ();// myApp.create() 和 myApp.get() 可以使用19.事件委托事件是JavaScript非常重要的一部分。我们想给一个列表中的链接绑定点击事件，一般的做法是写一个循环，给每个链接对象绑定事件，HTML代码如下：<h2>Great Web resources</h2><ul id="resources"><li><a href="http://opera.com/wsc">Opera Web Standards Curriculum</a></li><li><a href="http://sitepoint.com">Sitepoint</a></li><li><a href="http://alistapart.com">A List Apart</a></li><li><a href="http://yuiblog.com">YUI Blog</a></li><li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li><li><a href="http://oddlyspecific.com">Oddly specific</a></li></ul>脚本如下：// Classic event handling example(function(){//回调函数var handler = function (e){e = e || window.event;//获取事件源var x = e.target || e.srcElement; // Get the link that was clickedalert('Event delegation:' + x);//屏蔽Form提交事件if ( e.returnValue ) e.returnValue = false; //for IEif ( e.preventDefault ) e.preventDefault(); //for Firefox};var resources = document.getElementById('resources');var links = resources.getElementsByTagName('a'); // Dom 对象下获取子对象var all = links.length;// Attach a listener to each linkfor(var i=0;i<all;i++){if ( resources.attachEvent ) {resources.attachEvent('onclick',handler);}else if ( resources.addEventListener ) {resources.addEventListener('click',handler,false);}};})();更合理的写法是只给列表的父对象绑定事件，代码如下：(function(){var handler = function (e) {e = e || window.event;var x = e.target || e.srcElement;// get the link thaif ( x.nodeName.toLowerCase() === 'a' ) {alert('Event delegation:' + x);//屏蔽Form提交事件( e.preventDefault ) ? (e.preventDefault()) : (e.returnValue = false);}};var resources = document.getElementById('resources');resources.onclick = handler; //也可以像上面用 addEventListener 和 attachEvent 添加 onclick 事件})();20.window.open() 子窗口控制// 窗口参数,控制位置和大小、显示等var param = 'top='+(screen.height-pHeight)/2+',left='+(screen.width-pWidth)/2+',width='+ pWidth +',height=' + pHeight + ',resizable=yes,scrollbars=yes,location=no, status=no';// 参数解释:height=100 窗口高度； // 这里 pHeight 需要先设定参数值width=400 窗口宽度；  // 这里 pWidth  需要先设定参数值top=0 窗口距离屏幕上方的象素值； //top=(screen.height-pHeight)/2 和 left=(screen.width-pWidth)/2 让窗口居中显示left=0 窗口距离屏幕左侧的象素值；toolbar=no 是否显示工具栏，yes为显示；menubar，scrollbars 表示菜单栏和滚动栏。resizable=no 是否允许改变窗口大小，yes为允许；location=no 是否显示地址栏，yes为允许；status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；// 子窗口网址var url = "test.html";var pName = "windowsName" // 子窗口的名称: 如果子窗口名称相同,会覆盖旧的窗口// 打开窗口,返回子窗口对象var win = window.open(url,pName,param);// 父窗口控制子窗口的对象win.window.document.getElementById("productName").innerHTML = "<%=prod.Name%>";// 父窗口调用子窗口的函数win.testFun();// 子窗口控制父窗口window.opener.window.document.getElementById("bnt").value = "重新查看";// 子窗口调用父窗口的函数window.opener.testfun();注意:父窗口刚打开子窗口时马上对它进行赋值或者调用其函数等操作可能会失败,因为子窗口未完全加载需要这样做时,最好在子窗口写加载的js,再调用父窗口; 以免操作失败。21.URL编程javascript允许直接在URL地址栏写程序，这令js做的验证全部都是不安全，必须后台在验证一次。如，在一个页面的地址栏输入：“javascript:alert(55);”，那页面即可执行 alert 函数，同理也可执行任意的js函数。利用这点，<A>标签的地址也可以编程，如：“<A href='javascript:alert(5);testFun();'></A>”22.页面的script结束符问题如下写法，html页面不会alert,反而会在页面上显示“');”的内容<script>alert('</script>');</script>因为浏览器把alert的字符串中的“</script>”解析成结束符了，需要“\”转换一下，如下写成能正常：<script>alert('<\/script>');</script>23.z-index(zIndex)涂层使用在css里面用 z-index, 而javascript里面用 zIndex, 如：<div id='fl' style="Z-INDEX: 9999999;">...</div><script>var element = document.getElementById('fl');element.style.zIndex = 9;</script>z-index(zIndex) 默认为0,(其实打印的时候为空),涂层的数值越大越往上，也就是显示时覆盖涂层低的。注意：IE6上，层级会影响涂层，按先后出现的顺序来绝定层的堆叠顺序，不同层级的元素需要设置祖先元素(上溯到同层级为止)的z-index才生效。24. iframe 的操作1) 获得 iframe 的 window 对象。存在跨域访问限制。chrome:  iframeElement. contentWindowfirefox: iframeElement.contentWindowie6: iframeElement.contentWindowfunction getIframeWindow(element){return  element.contentWindow;//return  element.contentWindow || element.contentDocument.parentWindow;}2) 获得 iframe 的 document 对象。存在跨域访问限制。chrome:  iframeElement.contentDocumentfirefox: iframeElement.contentDocumentie:  iframeElement.contentWindow.document // ie没有 iframeElement.contentDocument 属性。var getIframeDocument = function(element) {return  element.contentDocument || element.contentWindow.document;};3) iframe 中获得父页面的 window 对象。存在跨域访问限制。父页面：window.parent顶层页面：window.top适用于所有浏览器4) iframe的 onload 事件非ie浏览器都提供了 onload 事件。例如下面代码在ie中是不会有弹出框的。var ifr = document.createElement('iframe');ifr.src = 'http://www.b.com/index.html';ifr.onload = function() {alert('loaded');};document.body.appendChild(ifr);但是ie却又似乎提供了onload事件，下面两种方法都会触发onload//方法一：<iframe onload="alert('loaded');" src="http://www.b.com/index.html"></iframe>//只有ie才支持为createElement传递这样的参数var ifr = document.createElement('<iframe onload="alert(\'loaded\');" src="http://www.b.com/index.html"></iframe>');document.body.appendChild(ifr);由于iframe元素包含于父级页面中，因此以上方法均不存在跨域问题。实际上IE提供了 onload 事件，但必须使用attachEvent进行绑定。所以最好的 onload事件写法如下：var ifr = document.createElement('iframe');ifr.src = 'http://b.a.com/b.html';var loaded_fun = function(){ alert('loaded'); }; // 要执行的 onload 事件if (ifr.attachEvent) {ifr.attachEvent('onload', loaded_fun );} else {ifr.onload = loaded_fun;}document.body.appendChild(ifr);5) frameswindow.frames 可以取到页面中的帧( iframe, frame 等)，需要注意的是取到的是 window 对象，而不是 HTMLElement 。var ifr1 = document.getElementById('ifr1');var ifr1win = window.frames[0];ifr1win.frameElement === ifr1;   // trueifr1win === ifr1;    // false25. 反射在JavaScript中能利用 for in 语句实现反射,如：// 下面这段语句遍历obj对象的所有属性和方法for (var p in obj) {if (typeof(obj[p]=="function") {obj[p](); // 执行函数,也还可以传参数} else {alert(obj[p]);}}obj.函数名(参数列表); // 这样执行函数，可以使用下面的反射形式来代替obj["函数名"](参数列表);26. 过滤数组的重复值/*** 返回没有重复值的新数组,原数组不改变* @return 返回过滤重复值后的新数组** @example*  var arr = ['a', 'b', 'c', 'd', 'c', null];*  var arr2 = arr.unique(); // arr2 为: ['a', 'b', 'd', 'c', null]*/Array.prototype.unique = function() {var result = [];// 注意学习此算法for (var i=0,l=this.length; i<l; i++) {for (var j=i+1; j<l; j++) {if (this[i] === this[j]) j = ++i;}result.push(this[i]);}return result;};

JavaScript/Js 大全相关推荐

  1. 谁也别拦我！今天我要曝光JavaScript 资源大全中文版！

    JavaScript 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 ...

  2. JavaScript资源大全中文版（Awesome最新版--转载自张果老师博客）

    JavaScript资源大全中文版(Awesome最新版) 目录 前端MVC 框架和库 包管理器 加载器 打包工具 测试框架 框架 断言 覆盖率 运行器 QA 工具 基于 Node 的 CMS 框架 ...

  3. JavaScript面试大全

    JavaScript面试大全 1.求y和z的值是多少? var x = 1; var y = 0; var z = 0; function add(n){n=n+1;} y = add(x); fun ...

  4. JavaScript单词大全及部分常用代码

    JavaScript单词大全及部分常用代码 0~9var i=0; //声明变量let i=0; //声明变量,块级作用域const PI=3.14; //声明常量console.log(str) / ...

  5. JavaScript 资源大全中文版

    JavaScript 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 ...

  6. 前端工程师必须收藏的 JavaScript 资源大全

    我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 JS 资源列表,内容包括:包管理器.加 ...

  7. 四十四种Javascript技巧大全

    四十四种Javascript技巧大全 1.第一个给变量分配值时不要忘了var关键字. 分配值给未定义的变量将是该变量自动成为全局变量,应该避免全局变量. 2.使用 === 而不是 == 使用 == ( ...

  8. JavaScript(js)/上

    JavaScript(js) ECMA-----定义的基础语法 DOM------document  object  model BOM------Browser  object  model Jav ...

  9. ie6 javascript js 缺少标识符总结(转载)

    转载http://blog.csdn.net/qingyundys/article/details/6218280 ie6 javascript js 缺少标识符总结 1. ie6下,javascri ...

最新文章

  1. JS 对象机制深剖——new 运算符
  2. 四元数相关总结-未完
  3. Docker教程-深度学习环境配置
  4. 《JavaScript权威指南》学习笔记 第二天 下好一盘大棋
  5. 云计算架构师分享：容器云在金融企业的落地方案 | 周末送资料(原题：某保险公司容器云PaaS平台建设实践经验分享)
  6. Android签名机制：生成keystore、签名、查看签名信息
  7. Android SDK4.0（api14）安装
  8. 关于AD9各种布线总结（很详细）
  9. 企业权限管理系统如何配置？深度解析永洪BI权限管理系统
  10. 激活Windows系统的方式
  11. J - Crashing Robots
  12. java flv转mp3_Java调用ffmpeg转换视频格式为flv的示例详解
  13. python知识点智能问答_【每日一荐】智能问答API
  14. 建模师能干到多少岁？
  15. 光场相机预处理 TFTOOLBOX
  16. JSX语法学习（三）
  17. 蚊子看了想咬人，人类看了都说好
  18. 20亿老子不卖了！阿里与网易考拉谈崩
  19. 颈椎 肩膀痛 胸部酸痛 生活中治疗调整----健康
  20. 卡尔曼滤波原理和Matlab以及python代码实现

热门文章

  1. whistle-安卓手机配置代理
  2. 小米oj 找到第 N 个数字 II
  3. 做淘宝页面前的基础准备
  4. 绕过限制低价购买和增删低价购买逻辑漏洞
  5. 大学c语言程序设计听不懂,C语言听不懂？那你还不点进来看看？
  6. 国内技术管理人员批阅google的“春运交通图”项目
  7. 9.opengl-对qt中的QMatrix4x4进行矩阵实践
  8. 时间序列基础操作：使用python与eviews对AR与ARMA模型进行定阶与预报
  9. html转换成pdf工具-wkhtmltopdf、Python生成PDF(pdfkit库)
  10. [Linux 配置数据库] Linux配置Mysql 数据库