//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一致
时间： 2024-11-12 16:18:00