js js杂记

//1 创建正则表达式两种方式
//1.1 用new
var box = new RegExp(‘Box‘);//第1个参数模式是必须的
alert(box);//[/Box/] 两个反斜杠是正则表达式的字面量表示形成

var box =  new RegExp(‘Box‘,‘gi‘);//第2个模式修饰符参数可选 i:忽略大小写 g:全局匹配 m:多行匹配

//1.2 用字面量的形式
var box = /Box/;
var box = /Box/gi;

//test()
var pattern = new RegExp(‘Box‘);//模式
var str = ‘box‘;//测试字符串
alert(pattern.test(str));//[false] 大小写不一致

var pattern = new RegExp(‘Box‘,‘i‘);//模式
var str = ‘box‘;//测试字符串
alert(pattern.test(str));//[true] 忽略大小写

var pattern = /Box/i;//模式
var str = ‘box‘;//测试字符串
alert(pattern.test(str));//[true] 忽略大小写

alert(/Box/i.test(‘box‘));//[true] 忽略大小写

var pattern = /Box/i;
var str = ‘This is a box!‘;
alert(pattern.test(str));//[true] 字符串中是否包含正则中的Box忽略大小写

//exec()
var pattern = /Box/i;
var str = ‘box‘;
alert(pattern.exec(str));//[box] 返回的是数组,数组有值则返回数组的值,否则返回null
alert(typeof pattern.exec(str));//[object]

var pattern = /Box/i;
var str = ‘sss‘;
alert(pattern.exec(str));//[null]

//使用String对象的4个正则表达式方法
//match()
var pattern = /Box/i;//没有开启全局
var str = ‘This is a Box! That is a Box!‘;
alert(str.match(pattern));//[Box] 返回数组,匹配到第一个字符串Box

var pattern = /Box/ig;//开启全局
var str = ‘This is a Box! That is a Box!‘;
alert(str.match(pattern));//[Box,Box] 返回数组,匹配到所有字符串Box

var pattern = /Box/ig;//g无效
var str = ‘This is a Box! That is a Box!‘;
alert(str.search(pattern));//[10] 返回第一个匹配到的Box位置

var pattern = /xox/ig;//g无效
var str = ‘This is a Box! That is a Box!‘;
alert(str.search(pattern));//[-1] 找不到返回-1

var pattern = /Box/i;//没有开启全局
var str = ‘This is a Box! That is a Box!‘;
alert(str.replace(pattern,‘Pen‘));//[This is a Pen! That is a Box!]

var pattern = /Box/ig;//开启全局
var str = ‘This is a Box! That is a Box!‘;
alert(str.replace(pattern,‘Pen‘));//[This is a Pen! That is a Pen!]

var pattern = /!/ig;//开启全局
var str = ‘This is a Box! That is a Box!‘;
alert(str.split(pattern));//[This is a Pen,That is a Pen,]

//静态属性
var pattern = /google/i;
var str = ‘This is a google!‘;
str.test(pattern);
alert(RegExp.input);//[This is a google!]//$_ :当前被匹配的字符串
alert(RegExp[‘$_‘]);//[This is a google!]//所有的都可以用这种形式的短名
alert(RegExp.$_);//[This is a google!]//这个短名使用是input的特殊用法,其他不可.
alert(RegExp.leftContext);//[This is a] //$` :最后一次匹配前的字符串
alert(RegExp.rightContext);//[!] //$‘ :上次匹配的字符串之后
alert(RegExp.lastMatch);//[google]//$& :最后一个被匹配的字符串
alert(RegExp.lastParen);//var pattern = /(g)oogle/i;--->[g] //$+ :最后一对圆括号,分组
alert(RegExp.multiline);//[false] (是否支持多行) //$* :用于指定是否所有的表达式都用于多行的布尔值

//实例属性
var pattern = /google/;
alert(pattern.global)//false
var pattern = /google/g;
alert(pattern.global)//true

var pattern = /google/;
alert(pattern.ignoreCase)//false
var pattern = /google/i;
alert(pattern.ignoreCase)//true

var pattern = /google/;
alert(pattern.multiline)//false
var pattern = /google/m;
alert(pattern.multiline)//true //ie不支持multiline属性,很多的浏览器也不支持该属性,基本废弃

var pattern = /google/igm;
alert(pattern.source)//google

var pattern = /google/g;//如果没有开启全局,ie和其他浏览器匹配位置可能不一样
var str = ‘google google google‘;
pattern.test(str);
alert(pattern.lastIndex)//6
pattern.test(str);
alert(pattern.lastIndex)//13
pattern.test(str);
alert(pattern.lastIndex)//20

pattern.lastIndex = 100;//设置lastIndex的值

//获取控制
var patter = /g.ogle/;//.任意字符
var patter = /go*gle/;//*0个,1个或者多个o
var patter = /go+gle/;//+1个或者多个o
var patter = /go?gle/;//? 0个或者1个o
var patter = /g.?gle/;//.? 0个或者1个任意字符
var patter = /go{2}gle/;//{2} 2个o
var patter = /go{2,4}gle/;//{2,4} 2~4个o
var patter = /go{2,}gle/;//{2,} 2个o或者2个以上
var patter = /[a-z]oogle/;//[a-z] a-z中的任意一个字符
var patter = /[A-Z]oogle/;//[A-Z] A-Z中的任意一个字符
var patter = /[0-9]oogle/;//[0-9]0-9中的任意一个字符
var patter = /[0-9]*oogle/;//[0-9]* 0-9中的任意一个字符任意次
var patter = /[0-9a-zA-Z]oogle/;//[0-9a-zA-Z]0-9 a-z A-Z中的任意一个字符
var patter = /[^0-9]oogle/;//[^0-9]0-9之外的任意一个字符
var patter = /^[0-9]oogle/;//^[0-9]以0-9中的任意一个字符oogle开头
var patter = /^google$/;//以google开头并且以google结尾 ^首匹配,$尾匹配
var patter = /\woogle/;//\w 匹配数字,字母和_
var patter = /\Woogle/;//\W \w之外
var patter = /\doogle/;//\d 匹配数字
var patter = /\Woogle/;//\D \d之外
var patter = /goo gle/;//直接使用空格匹配
var patter = /goo\sgle/;//\s空格匹配
var patter = /goo\bgle/;//\b表示到达边界
var patter = /google|baidu|bing/;//|表示或选择包含模式
var patter = /google{4,8}/;//e可以重复4到8次
var patter = /(google){4,8}/;//google可以重复4到8次

var pattern = /8(.*)8/;
var str = ‘This is a 8google8‘;
pattern.test(str);
alert(RegExp.$1)//google
document.write(str.replace(pattern,‘<strong>$1</strong>‘))

var pattern = /(.*)\s(.*)/;
var str = ‘baidu google‘;
alert(str.replace(pattern,‘$2 $1‘))//google baidu

var pattern = /[a-z]+/;
var str = ‘abcdef‘;
alert(str.replace(pattern,‘贪婪‘))//贪婪

var pattern = /[a-z]+?/;
var str = ‘abcdef‘;
alert(str.replace(pattern,‘惰性‘))//惰性bcef

var pattern = /[a-z]+?/g;
var str = ‘abcdef‘;
alert(str.replace(pattern,‘惰性‘))//惰性惰性惰性惰性惰性


var pattern = /8(.*)8/;//贪婪
var str = ‘8google8 8google8 8google8‘;
document.write(str.replace(pattern,‘<strong>$1</strong>‘))//<strong>google8 8google8 8google</strong>

var pattern = /8(.*?)8/g;//惰性
var str = ‘8google8 8google8 8google8‘;
document.write(str.replace(pattern,‘<strong>$1</strong>‘))
//<strong>google</strong> 8google8 8google8

var pattern = /8(.*?)8/g;//惰性
var str = ‘8google8 8google8 8google8‘;
document.write(str.replace(pattern,‘<strong>$1</strong>‘))
//<strong>google</strong> <strong>google</strong> <strong>google</strong>

var pattern = /(\d+)([a-z]+)/;
var str = ‘123abc‘;
var arr = pattern.exec(str);
//这个叫做捕获性分组,所有的分组都捕获返回.
//arr[0]:匹配到的所有字符串;arr[1]:第一组匹配的字符串;arr[2]:第二组匹配的字符串

var pattern = /(\d+)(?:[a-z]+)/;
var str = ‘123abc‘;
var arr = pattern.exec(str);
//非捕获性分组,第二组不再返回
//arr[0]:匹配到的所有字符串;arr[1]:第一组匹配的字符串

var pattern = /(a?(b?(c?)))/;
var str = ‘abc‘;
alert(pattern.exec(str));
//嵌套分组,从外往内捕获
//a[0]:整个匹配到的字符串abc
//a[1]:匹配第一个分组(a?(b?(c?)))abc
//a[2]:匹配第二个分组(b?(c?))bc
//a[3]:匹配第三个分组(c?)c

var pattern = /goo(?=gle)/;//前瞻性捕获 goo后面必须是gle才能返回goo
var str = ‘good‘;
alert(pattern.exec(str));

//邮政编码:必须是6位,必须是数字,第一位不能为0
var pattern = /[1-9][0-9]{5}/;
var pattern = /[1-9]\d{5}/;

//压缩包:文件名 字母数字_.zip,gz,rar,7z
var pattern = /^[\w\-]+\.(zip|gz|rar)$/;

//删除空格
var pattern = /\s+/g;
‘11 22 33‘.replace(pattern,‘‘);

//删除首位空格
var pattern = ‘/^\s+/‘;
var str = ‘  google and baidu  ‘;
str = str.replace(pattern,‘‘);
pattern = ‘/\s+$/‘;
str = str.replace(pattern,‘‘);

var pattern = ‘/^\s+(.+)\s+$/‘;//贪婪模式
var str = ‘  google and baidu  ‘;
alert(‘--‘ + pattern.exec(str)[1] + ‘--‘); //--google and baidu  --
pattern = ‘/^\s+(.+)\s+$/‘;//惰性模式
alert(‘--‘ + pattern.exec(str)[1] + ‘--‘);//--google and baidu--

pattern = ‘/^\s+(.+)\s+$/‘;//惰性模式
alert(‘--‘ + str.replace(pattern,‘$1‘) + ‘--‘);//--google and baidu--

//电子邮件
var pattern = /^([\w\.\-]+)@([\w\-])\.([a-zA-Z]{2,4})$/;

//第十一章 函数类型
//用变量初始化函数
var box = function(num1,num2){
    return num1+num2;
};
alert(box(1,2));

//使用Function的构造函数,不推荐使用
var box = new Funtion(‘num1‘,‘num2‘,‘return num1+num2‘);
alert(box(1,2));

//函数可以传递函数
function box(mySum,num){
    return mySum(num);
}
function sum(num){
    return 10+num;
}
alert(box(sum,10));//20

function box(num){
    if(num==1){
        return 1;
    }else{
        return num * arguments.callee(num-1);//arguments.callee,调用自身
    }
}
//window是一个对象,而且是js里最大的对象,最外围的对象,window表示全局
alert(window);//[object window]
alert(typeof window)//window
alert(this);//[object window]
alert(typeof this)//window

var color = ‘red‘;//color是全局变量,也是window的属性
alert(window.color);//red
alert(this.color);//red

window.color = ‘red‘;//全局变量
alert(this.color);//red

var box = {
    color:‘blue‘;//局部变量
    getColor : function(){
        alert(this.color);//blue
    }
};

function box(name,age){
    return name + age;
}
alert(box.length);//box.length表示函数接收的参数个数

//prototype的apply()
//apply() 和call()可以冒充另一个函数
function sum(name,age){
    return box.apply(this,[name,age]);//this表示window作用域,[]表示传递的参数
    //or
    //return box.apply(this,arguments);//如果参数太多,可以用arguments代替
}
function sum(name,age){
    return box.apply(this,name,age);//call只是和apply传递参数不一样,其他一样
}
//此时调用sum函数,将会完成与调用box一样的功能

var color = "红色";
var box = {
    color = "蓝色"
};
function sayColor(){
    alert(this.color);
}
sayColor.call(window);//红色
sayColor.call(box);//蓝色

alert(box instanceof Array);
if(){},for(){}//{}没有封闭作用域,其中的变量为全局变量,window的变量
var box = new Object();
box = null; //销毁引用,等待垃圾收集器来清理


var box = "lee";//基本类型->基本包装类型 string -> String 可以调用系统内置的方法,但是不能为自己添加属性和方法
var box1 = new String("lee"); //引用类型可以为自己添加属性和方法
alert(box.subString(2));//e 索引从0开始,表示从第2个位置开始截取到末尾的字符
box.name = ‘zhang‘;//不可以
box1.name = ‘zhang‘;//可以

var box = 1000
box.toLocaleString();// 1,000 本地化
box.toFixed(2);//保留两位小数,并转换成字符串,四舍五入
box.toExponential();//以指数形式输出
box.toPrecision(5);//根据传参来决定指数或者点数(5位有效位,可以转换为指数形式)

var box = "Lee"
box.constructor();//返回String的构造函数
box.charAt(0);//L
box.charCodeAt(0);//76,返回的是ascii码
box.concat("is","teacher")//Lee is teacher
box.slice(1,2);//ee 返回12之间的字符串,2可以省略,默认到尾
box.substring(1,2);//ee 返回12之间的字符串 2可以省略,默认到尾
box.substr(1,2);//ee 从第1个开始,选择两个 2可以省略,默认到尾

box.slice(-2);//从右开始向左两位
box.substring(-2);//返回所有字符串
box.substr(-2);//从右开始向左两位 但是ie遇到负值会把字符串全部返回

box.slice(2,-1);//从2到倒数第二位
box.slice(-2,-1);//从倒数第三位到倒数第二位
box.substring(2,-1);//按(0,2)返回.如果第二个参数为负数,直接转为0,并且把较小的数字提前
box.substr(2,-1);//第二个参数为负数,直接转为0,但是不调整位置 按(2,0)返回,什么也没有
box.indexOf(‘‘);//-1 找不到返回-1
box.indexOf(‘L‘);//0 返回L从出事位置开始的位置
box.indexOf(‘L‘,2);//返回从第二个位置开始向后L第一次出现的位置
box.lastIndexOf(‘L‘,2);//从第二个位置向前搜索L的位置

var boxarr = []
var pos = box.indexOf(‘L‘)

var box = "Mr.Lee";
box.toLowerCase();//小写
box.toUpperCase();//大写
box.toLocaleLowerCase();//本地化小写
box.toLocaleUpperCase();//本地化大写
box.match("L");//找到L返回L,找不到返回null
box.search("L");//找到L的位置 4
box.replace("L","Q");//替换
box.split("\.");//用"."分割成数组
String.fromCharCode(76);//输出ascii码对应的字符
box.localeCompare("lee");//比较大小,相等返回0,大于返回1,小于返回-1
box.link("http://www.baidu.com");//链接网址
box.bold();//加粗

var box = "//lee李";
encodeURI(box);//对中文编码
encodeURIComponent(box);//对特殊字符(//)和中文编码
decodeURI(box);//对中文解码
decodeURIComponent(box);//对特殊字符(//)和中文解码
eval("var box = 100");//把字符串解析为js代码

Math.E;
Math.PI;
Math.min(1,2,3,4,5,6);
Math.max(1,2,3,4,5,6);
Math.ceil(25.1);//26向上入
Math.floor(25.9);//25向下舍
Math.round(25.5);//26四舍五入
Math.round(25.4);//25四舍五入
Math.random();//0到1之间的随机数,不包含0和1

第十五章 面向对象与原型
1.创建对象
var box = new Object();
2.添加实例属性
box.name = "Lee";
box.age = 28;
3.添加实例方法
box.run = function(){
    return this.name + this.age + "run()...";
};

工厂模式创建对象:存在对象识别问题
function creatObject(name,age){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.run = function(){
        return this.name + this.age + "run()...";
    };//or[this.run = new Function("return this.run + this.age + ‘run()...‘");]
    return obj;
}
var  myBox1 = createObject("Lee",28);
var  myBox2 = createObject("Lee",28);

构造函数创建对象:解决对象识别问题
function Box(name,age){
    this.name = name;
    this.age = age;
    this.run = function(){
        return this.name + this.age + "run()...";
    };
}
var  myBox1 = new Box("Lee",28);
var  myBox2 = new Box("Lee",28);

对象冒充
var o = new Object();
Box.call(o,"Lee",28);//o冒充Box,具备Box的属性和功能
o.run();//所以o可以调用Box的run方法

把构造函数中的方法通过全局函数来实现引用地址相等,但是破坏了封装性,不推荐
function Box(name,age){
    this.name = name;
    this.age = age;
    this.run = run;
}
function run(){
        return this.name + this.age + "run()...";
}
var  myBox1 = new Box("Lee",28);
var  myBox2 = new Box("Lee",28);
alert(myBox1.run == myBox2.run); //true;

原型属性和原型方法共享
function Box(){}
1.添加原型属性
Box.prototype.name = "Lee";
Box.prototype.age = 28;
2.添加原型方法
Box.prototype.run = function(){
    return this.name + this.age + ‘run()...‘;
};
var  myBox1 = new Box("Lee",28);
var  myBox2 = new Box("Lee",28);
myBox1.__proto__ :指向原型对象的指针
Box.prototype
myBox1.constructor:构造属性,可以获取到构造函数

判定一个对象实例是不是指向了原型对象
Box.prototype.isPrototypeOf(myBox1);//true

删除实例属性
delete myBox1.name;
删除原型属性
delete Box.prototype.name;
覆盖
Box.prototype.name = "KK";
判断实例属性中是否存在指定属性
myBox1.hasOwnProperty("name");
实例属性或者原型属性中是否存在指定属性
alert("name" in myBox1);

使用字面量的方式创建原型对象
function Box(){}
Box.prototype = {
    name : "Lee",
    age : 10,
    fun : function(){
        return this.name + this.age;
    }
};
var myBox = new Box();
字面量创建原型对象使用constructor属性指向Object,构造函数创建原型对象使用constructor属性指向Box.
因为Box.prototype={};这种写法其实是创建了一个新对象.

alert(myBox1.constructor);//function Box(){...}
alert(myBox.constructor);//function Object(){...}

function Box(){}
Box.prototype = {
    constructor : Box,
    name : "Lee",
    age : 10,
    fun : function(){
        return this.name + this.age;
    }
};
var myBox = new Box();
alert(myBox.constructor == Box);//true

Box.prototype = {...}重写会切断实例与原来原型的关系.

数组排序
var box = [5,3,4,2,1];
box.sort();
box.push(6);
alert(box);//1,2,3,4,5,6

查看sort是否是Array原型对象里的方法
alert(Array.prototype.sort);

String.prototype.addString = function(){
    return this + ",被添加了!";
}
var box = "Lee";
alert(box.addString());//"Lee,被添加了!"

组合构造函数和原型模式
function Box(name,age){//保持独立的用构造函数
    this.name = name;
    this.age = age;
    this.family = [‘哥哥‘,‘姐姐‘];
}
Box.prototype = {//保持共享的用原型
    constructor : Box,
    run : function(0{
        return this.name + this.age;
    }
}

动态原型模式,把原型封装到构造函数里
function Box(name,age){//保持独立的用构造函数
    this.name = name;
    this.age = age;
    this.family = [‘哥哥‘,‘姐姐‘];
    //原型初始化只有第一次才执行.
    if(typeof this.run != ‘function‘){
        Box.prototype.run = function(){
            return this.name + this.age;
        };
    }
}

寄生构造函数 = 工厂模式 + 构造函数
function Box(name,age){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.run = function(){
        return this.name + this.age;
    };
    return obj;
}
var box = new Box("Lee",28);

稳妥构造函数
function Box(name,age){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.run = function(){
        return this.name + this.age;
    };
    return obj;
}
var box1 = Box("Lee",28);//不能使用new

//继承
function Box(){
    this.name = "Lee";
}
function Desk(){
    this.age = 100;
}
//通过原型链继承,超类型实例化后的对象实例,赋值给与类型的原型属性
//new Box()会将Box构造里的信息和原型里的信息都交给Desk
//Desk得到了Box的构造和原型里的信息
Desk.prototype = new Box();

function Box(){
    this.name = "Lee";//L1
}
Box.prototype.name = "Jack";
function Desk(){
    this.age = 100;
}
Desk.prototype = new Box();
var desk = new Desk();
alert(desk.name);//Lee就近原则,如果L1(实例属性)没有,打印出Jack()原型属性

使用对象冒充,只能继承构造里的实例属性,不能继承原型属性
function Box(name,age){
    this.name = name;
    this.age = age;
    this.family = [‘哥哥‘,‘姐姐‘,‘妹妹‘];//引用类型在构造里不会被共享
    
}
Box.prototype.run = function(0{
    return this.name + this.age;
}
function Desk(name,age){
    Box.call(this,name,age)
}
var desk = new Desk(‘Lee‘,28);
//添加原型链继承
Desk.prototype = new Box();//出错后添加

alert(desk.name);
alert(desk.family);
alert(desk.run());//出错,因为继承不到原型里的方法,故加上原型链继承,称为组合继承

//原型式继承
//临时中转函数
function obj(o){//o表示将要传递进入的一个对象
    function F(){}//F构造是一个临时新建的对象,用来存储传递过来的对象
    F.prototype = o;//将o对象实例赋值给F构造的原型对象
    return new F();//最后返回这个得到传递过来对象的对象实例
}

var box = {
    name : "Lee",
    age : 100,
    family : [‘哥哥‘,‘姐姐‘,‘妹妹‘]//共享
};
//myBox就等于new F()
var myBox = obj(box)

寄生式继承 = 原型式 + 工厂模式,目的是为了封装函数继承的过程
//临时中转函数
function obj(o){//o表示将要传递进入的一个对象
    function F(){}//F构造是一个临时新建的对象,用来存储传递过来的对象
    F.prototype = o;//将o对象实例赋值给F构造的原型对象
    return new F();//最后返回这个得到传递过来对象的对象实例
}
//寄生函数
function create(o){
    var f = obj(o);
    f.run = function(){
        return this.name;
    };
    return f;
}

var box = {
    name : "Lee",
    age : 100,
    family : [‘哥哥‘,‘姐姐‘,‘妹妹‘]//共享
};
var myBox = create(box);

寄生组合函数
//临时中转函数
function obj(box,desk){//o表示将要传递进入的一个对象
    function F(){}//F构造是一个临时新建的对象,用来存储传递过来的对象
    F.prototype = o;//将o对象实例赋值给F构造的原型对象
    return new F();//最后返回这个得到传递过来对象的对象实例
}
//寄生函数
function create(o){
    var f = obj(box.prototype);
    f.constructor = desk;//调整构造指针
    desk.prototype = f;
}
function Box(name,age){
    this.name = name;
    this.age = age;
}
Box.prototype.run = function(){
    return this.name + this.age;
}
function Desk(name,age){
    Box.call(this,name,age);//对象冒充
}

通过寄生组合继承来实现继承
create(Box,Desk);

第十六章 匿名函数和闭包
把匿名函数赋值给变量
var box = funtion (){
    return "Lee";
};
alert(box());
通过自我执行来执行匿名函数(匿名函数)();
(function(){alert("Lee");})();
var box = (function(){return "Lee";})();
alert(box);

匿名函数自我传参
(function(age){alert(age);})(100);

普通函数里添加匿名函数
function box(){
    return function(){//闭包
        return 10;
    }
}
alert(box()());//10

通过闭包返回局部变量
function box(0{
    var age = 100;
    return function(){
        return age;
    };    
}

使用匿名函数实现局部变量驻留内存中从而累加
function box(){
    var age = 100;
    return function(){
        age++;
        return age;
    }
}
var b = box();
alert(b());//101
alert(b());//102
alert(b());//103
b = null;

关于闭包的this对象
var this.name = window;
var box = {
    this.name : "box",
    getThis : function(){
        //var that = this;
        return function(){//闭包函数
            return this.name;
            //return that.name;
        }
    }
}
alert(box.getThis()());//[window]闭包的this指向window
alert(box.getThis().call(box));//对象冒充 [box]

使用块级作用域(私有作用域)
function box(){
    (function(){
        for(var i = 0; i < 5; i++){//包含自我执行的匿名函数,就可以实现私有作用域
            
        }
    })();
}

function Box(){
    var age = 100;//私有变量
    function run(){//私有函数
        return "运行中";
    }
    this.publicFun = function(){//对外可见的公有接口
        return age + run();
    };
}

var box = new Box();
alert(box.publicFun());

(function(){
    var user = ‘‘;//私有变量
    Box = function(value){
        user = value;
    };//全局,构造函数
    
    Box.prototype.getUser = function(){//方法共享,user变成了静态属性
        return user;
    }
})();

DOM

if(confirm("请选择!")){//有确定和取消两个按钮
    alert("刚刚你选择的是确定按钮");
}else{
    alert("刚刚你选择的是取消按钮");
}
//输入提示框
var box = prompt("请输入一个数字",0);//第一个参数是说明文字,第二个参数是默认值,返回结果是输入的内容
if(box != null){
    alert("你刚刚输入的内容是" + box);
}else{
    alert("你刚刚什么也没有输入!");
}
pint();
find();
defaultStatus = "Lee";//状态栏默认值
status = "Lee";//状态栏设置值

open(...)
第一个参数:导航到的url
第二个参数:窗口的名称或者目标,命名可以给新窗口设置一个名称,相同名称的URL在同一个窗口打开
            目标:_blank:新建一个窗口
                _parent:在本窗口加载
第三个参数:特定的字符串,表示各种窗口的配置功能
            width,height,top,left
            location:显示地址栏
            status,toolbar:工具条
            
var box = open()返回子窗口的window
box.alert();子窗口弹出的

window.opener.document.write("子窗口控制该语句,在父窗口输出")

screenLeft//火狐不认识该属性-->screenX(ie不支持该属性)
screenTop//火狐不认识该属性--->screenY(ie不支持该属性)
如果跨浏览器可以进行判定
var leftX = typeof window.screenLeft == ‘number‘ ? window.screenLeft : window.screenX;
var topY = typeof window.screenTop == ‘number‘ ? window.screenTop : window.screenY;

innerWidth//ie不支持该属性
innerHeight//ie不支持该属性
outerWidth//ie不支持该属性
outerHeigth//ie不支持该属性
document.documentElement.clientWidth//ie支持该属性
document.documentElement.clientHeight//ie支持该属性
跨浏览器获取可视范围的页面窗口
var width = window.innerWidth;
var heigth = window.innerHeigth;
if(typeof width != ‘number‘){
    if(document.compatMode == ‘CSS1Compat‘){//biaozhun
        width = document.documentElement.clientWidth
        heigth = document.documentElement.clientHeight
    }else{
        width = document.body.clientWidth;
        heigth = document.body.clientHeigth;
    }
}

moveTo(100,100);//把窗口移动到坐标100,100位置 3.x火狐支持,新版不支持
moveBy(10,10);//10,10的移动ie原版支持,谷歌新版不支持
resizeTo(200,200);//调整窗口大小为200,200
resizeBy(-10,-10);//按10,10逐步减小窗口

间歇调用和超时调用
setTimeout("alert(‘Lee‘)",2000);
//第一个参数是需要执行的代码.可以是字符串,因为它有解析功能.第二个参数是间隔时间,单位为毫秒

function box(){
    alert(‘Lee‘);
}
setTimeout(box,2000);//box不需要()
以上都不推荐,第一种容易出错,不容易扩展;第二种封装行不好,代码分离.推荐以下写法
setTimeout(function(){
    alert("Lee");
},2000)

var box = setTimeout(function(){//返回值是超时调用的ID
    alert("Lee");
},2000)//[2]

clearTimeout(box);//取消超时调用

var box = setInterval(function(){//间歇调用
    
},1000)
clearInterval(box);//取消间歇调用

window.location
window.document.location

location.hash = ‘#66‘//会跳转到新的包含#66的URL，
location.port = 8888; //会跳转到端口为8888的
location.search = ‘?id=5‘; //如果设置search会不停地跳转,死循环
location.href = "http://www.baidu.com";跳转到百度
location.assign("http://www.baidu.com");跳转到百度
location.reload(true);重新加载
location.replace("http://www.baidu.com");不产生历史记录的跳转到百度

history.length 历史记录条数
history.back();前一条历史记录
history.forward();后一条历史记录
history.go(num);按num寻找前面或者后面的历史记录

navigator.appName 完整的浏览器名称,但是不精确
navigator.userAgent 用户代理字符串
navigator.platform 浏览器所在系统

插件检测
for(var i =0; i < navigator.plugins.length; i++){
    document.write(‘插件名‘ + navigator.plugins[i].name);
    document.write(‘文件名‘ + navigator.plugins[i].filename);
    document.write(‘描  述‘ + navigator.plugins[i].description);
}

检测非ie浏览器插件是否存在
function hasPlugin(name){
    var name = name.toLowerCase();
    for(var i = 0; i < navigator.plugins.length; i++){
        if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
            return true;
        }
    }
    return false;
}

检测ie浏览器的控件
function hasIEPlugin(name){
    try{
        new ActiveXObject(name)//name必须是控件的唯一标识ID
        return true;
    }catch(e){
        return false;
    }
}

跨浏览器检测flash是否存在
function hasFlash(){
    //检测非ie浏览器
    var result = hasPlugin("Flash");
    if(!result){
        result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");//Flash的唯一标识符ID
    }
}

mime类型
遍历非IE下所有mime类型信息
for(var i = 0; i< navigator.mimeTypes.length; i++){
    if(navigator.mimeTypes[i].enabledPlugin != null){
        document.write("<dl>");
        document.write("<dd>类型名称:"+navigator.mimeTypes[i].type+"</dd>");
        document.write("<dd>类型引用:"+navigator.mimeTypes[i].enabledPlugin.name+"</dd>");
        document.write("<dd>类型描述:"+navigator.mimeTypes[i].description+"</dd>");
        document.write("<dd>类型后缀:"+navigator.mimeTypes[i].suffixes+"</dd>");
        document.write("</dl>");
    }
}

能力检测
怪癖检测(bug检测)
var box = {
    toString : function(){},//其他浏览器能够答应出toString方法,但是IE不能,因为此toString和原型里的toString方法重名，所以不打印
    myToString : function(){}
};
for(var o in box){
    alert(o);//ie只打印出myToString
}
用户代理检测
var client = function () {                    //创建一个对象
    
    //引擎
    var engine = {
        ie : false,                                    //这个属性用于确定是否是IE引擎
        gecko : false,
        webkit : false,
        khtml : false,
        opera : false,
        
        //引擎的版本
        ver : 0
    };
    
    //浏览器
    var browser = {
        ie : false,
        firefox : false,
        chrome : false,
        safari : false,
        opera : false,
        
        //浏览器的版本号
        ver : 0,
        //浏览器通用名称
        name : ‘‘
    };
    
    //系统
    var system = {
        win : false,
        mac : false,
        x11 : false,
        
        //系统名称
        sysname : ‘‘
    };
    
    
    
    //核心检测程序区
    var ua = navigator.userAgent;
    var p = navigator.platform;
    
    if (p.indexOf(‘Win‘) == 0) {
        system.win = true;                        //用于确定是windows系统
        system.sysname = ‘Windows‘;
    } else if (p.indexOf(‘Mac‘) == 0) {
        system.mac = true;                        //用于确定是Mac系统
        system.sysname = ‘Macintosh‘;
    } else if (p == ‘X11‘ || p.indexOf(‘Linux‘) == 0) {
        system.x11 = true;                        //用于确定是Mac系统
        system.sysname = ‘Linux‘;
    }
    
    
    if (window.opera) {
        engine.opera = browser.opera = true;                //表示确定opera引擎
        engine.ver = browser.ver = window.opera.version();
        browser.name = ‘Opera‘;
    } else if (/AppleWebKit\/(\S+)/.test(ua)) {
        engine.webkit = true;                //表示确定webkit引擎
        engine.ver = RegExp[‘$1‘];
        if (/Chrome\/(\S+)/.test(ua)) {
            browser.chrome = true;
            browser.ver = RegExp[‘$1‘];
            browser.name = ‘Chrome‘;
        } else {
            browser.safari = true;
            if (/Version\/(\S+)/.test(ua)) browser.ver = RegExp[‘$1‘];
            browser.name = ‘Safari‘;
        }
    } else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {
        engine.gecko = true;                //表示确定gecko引擎
        engine.ver = RegExp[‘$1‘];
        if (/Firefox\/(\S+)/.test(ua)) {
            browser.firefox = true;
            browser.ver = RegExp[‘$1‘];
            browser.name = ‘Firefox‘;
        }
    } else if (/MSIE ([^;]+)/.test(ua)) {
        engine.ie = browser.ie = true;                        //表示确定ie引擎
        engine.ver = browser.ver = RegExp[‘$1‘];
        browser.name = ‘Internet Explorer‘;
    }
    
    return {                                        //返回一个对象，可以同时返回引擎，浏览器和系统的对象
        engine : engine,                        //前一个engine是属性，后一个engine是对象值
        browser : browser,
        system : system
    }
    
}();                                                    //自我执行，并赋值

alert(client.system.sysname + ‘|‘ +client.browser.name + client.browser.ver);

window.onload = function(){
    var box = doument.getElementById("box")
    box.tagName;标签名
    box.innerHTML;获取标签的文本,包含HTML标签
    box.innerHTML = "";    赋值
    box.style.color;获取style属性中的color值
    box.className;class为保留字,所以用className代替class
    自定义属性直接获取非ie浏览器不支持
    
    var li = document.getElementsByTagName("li");参数是一个标签名
    li.length;返回一个数组集合,获取长度
    li[0];
    li.item(0);
    li.item(0).innerHTML
    var all = document.getElementsByTagName("*");获取所有的标签
    火狐浏览器的firebug打开后,会自动生成一个div,所以获取的标签会多一个
    ie浏览器多一个节点,是把<!..>文档声明也算进去了
    
    var box = document.getElementsByName("test");
    box.getAttribute(‘style‘);非ie返回style的字符串,ie返回对象
    box.getAttribute(‘class‘);非ie可以获取到,ie需要用className获取
    box.getAttribute("onclick");ie7及以下会返回函数式,非ie返回字符串
    通过这中方法可以获取自定义的属性
    
    box.setAttribute("style","color:red")ie7及以下,style和onclick没有效果,避免使用
    box.removeAttribute("style")ie7以上才具有
    
    box.nodeName; 获取元素节点的标签名,和tagName等价
    box.nodeType; 获取元素节点的类型值 1元素 2属性 3文本
    box.nodeValue; 获取文本节点的文本内容,没有返回null
    
    box.childNodes //NodeList集合,返回当前节点的所有子节点
    box.firstChild.nodeValue;//获取第一个子节点
    box.lastChild.nodeValue;//获取最后一个子节点
    box.ownerDocument;//返回文档对象,也就是根节点
    
    box.parentNode;//父节点
    box.previousSibling;//前一个兄弟节点
    box.nextSibling;//后一个兄弟节点
    box.attributes;//集合数组,保存这个元素节点的属性列表 从后向前罗列属性
    box.attributes[0];
    box.attributes[‘id‘];
    
    document.write("测试");
    var p = document.createElement("p");//创建一个p节点
    box.appendChild(p);//添加到box的子节点列表的最后
    var text = document.createTextNode("测试");
    p.appendChild(text);//把文本添加到p节点里
    
    box.parentNode.insertBefore(p,box);//在box前面添加一个节点p
    var span = document.createElement(‘span‘);
    box.parentNode.replaceChild(p,span);//把p标签替换成span标签
    
    var clone = box.firstChild.cloneNode(true);//true克隆标签和其内容 ,false 只克隆标签
    box.appendChild(clone);
    box.removeChild(box.firstChild)
}

dom进阶
Node类型
window.onload = function(){
    alert(Node);//ie不支持,可以添加一个全局的Node对象 window.Node={ELEMENT_NODE:1,TEXT_NODE:3};
    xxx.nodeType == Node.ELEMENT_NODE;//(Node.ELEMENT_NODE:1)
    xxx.nodeType == Node.TEXT_NODE;//(Node.TEXT_NODE:3)
}

Document类型
document.title :标题
document.URL :URL路径
document.domain :域名,服务器端
document.referrer :上一个URL,服务器端

Text类型
box.normalize();//合并同一级别的文本节点
box.childNodes[0].splitText(3);//把前三个字符分离出来成一个新的节点
box.childNodes[0].deleteData(0,3);//把前三个字符删除
box.childNodes[0].insertData(0,‘Hello‘);//在第一个字符前面插入hello
box.childNodes[0].replaceData(0,2,‘miss‘);//把第0个到2个替换成miss
box.childNodes[0].substringData(0,2);//获取第0个到2个

document.compatMode:浏览器模式分为标准模式(CSS1Compat)和怪异模式(BackCompat)
if(document.compatMode == CSS1Compat){
    alert(document.documentElement.clientWidth);
}else{
    alert(document.body.clientWidth);
}

document.getElementById(‘box‘).scrollIntoView();//每次刷新,都让box处于可见范围内

box.children.length;该children会忽略空白节点

box = document.getElementById(‘box‘);
p = box.firstChild;
box.contains(p);//判定box是不是p的父节点
//火狐旧版本不支持 创建了自己的方法 box.compareDocumentPosition(p);

function contains(refNode,otherNode){
    if( typeof refNode.contains != ‘undefined‘){
        return refNode.contains(otherNode);
    }else if(typeof refNode.compareDocumentPosition == ‘function‘){
        return refNode.compareDocumentPosition(otherNode)>16;
    }
}

box.innerText;//获取文本并过滤掉html,火狐不支持(box.textContent);赋值不解析,html标签原样输出
box.innerHTML;//获取文本不过滤HTML,赋值html标签会被解析.
box.outerText;//和innerText一致
box.outerHTML;//和innerHTML一致