标签：
Created at 2016-09-24 Updated at 2016-10-02 CategoryFront-End TagJavascript
转载请声明出处博客原文
随手翻阅以前的学习笔记，顺便整理一下放在这里，方便自己复习，也希望你有也有帮助吧
HTMLJavaScript 操作 DOM 的本质是=获取+触发+改变
目的：就是用来操作内存中的 DOM 节点
DOM 节点的属性javascript 语法组织逻辑代码操作DOMBOM(window) 它包含了 DOMDOM(document)script 脚本推荐放在最下边好处：防止因网络问题，页面加载时间长，出现空白；即便网络问题，浏览器也把 DOM 加载渲染完成，等待从服务端下载完 js 脚本，出现效果css 不放在最下面原因通俗地讲：好比先穿好衣服在出去，浏览器先把 css样式准备好，在加载结构层，使得页面有样子；如果放在下面，因为页面是从上往下加载，没有 css ，就剩下裸露的标签，很难看，使得用户体验不好javascript 就是来操作这些对象
C 语言中叫法）Java ）var b = document.body 含义：把 body 这个对象在内存中的地址放到b变量里面，变量 b （ b 是内存地址的别名）本身也存在内存中，以后的操作是针对 body 这个地址a-zA-Z )数字( 0-9 )下划线( _ )以及美元符号( $ )
1、 javascript 介绍
2、基于对象的内存管理
javascript 就是来操作这些对象
window 作用域script 标签中定义的变量，默认就在 window 的作用域之下window 这个对象里面写代码typeof 、 instanceof 、 constructor 、 prototype 方法比较
如何判断 js 中的类型呢，先举几个例子：
vara ="iamstring.";
varb =222;
varc= [1,2,3];
vard =newDate();
vare =function(){alert(111);};
varf =function(){this.name="22";};
typeofalert(typeofa) ------------> string alert(typeofb) ------------> number alert(typeofc) ------------> object alert(typeofd) ------------> object alert(typeofe) ------------>function alert(typeof f) ------------>function
typeof 返回的类型都是字符串形式，需注意，例如：alert(typeofa =="string") ------------->true
alert(typeofa ==String) --------------->false
typeof 可以判断 function 的类型；在判断除 Object 类型的对象时比较方便。instanceofalert(c instanceofArray) --------------->true alert(d instanceofDate) alert(f instanceofFunction) ------------>true alert(f instanceoffunction) ------------>false
instanceof 后面一定要是对象类型，并且大小写不能错，该方法适合一些条件选择或分支。constructor 判断 ： constructoralert(c.constructor === Array) ---------->true alert(d.constructor === Date) ----------->true alert(e.constructor === Function) ------->true
注意： constructor 在类继承时会出错
例子：
functionA(){};
functionB(){};
A.prototype = newB();//A继承自B
varaObj =newA();
alert(aobj.constructor === B) -----------> true;
alert(aobj.constructor === A) -----------> false;
instanceof 方法不会出现该问题，对象直接继承和间接继承的都会报 true ：alert(aobj instanceofB) ---------------->true; alert(aobj instanceofB) ---------------->true;
construtor 的问题通常是让对象的 constructor 手动指向自己：aobj.constructor = A; //将自己的类赋值给对象的constructor属性
alert(aobj.constructor === A) -----------> true;
alert(aobj.constructor === B) -----------> false;//基类不会报true了;
prototypealert(Object.prototype.toString.call(a) === ‘[objectString]’) ------->true;
alert(Object.prototype.toString.call(b) === ‘[objectNumber]’) ------->true;
alert(Object.prototype.toString.call(c) === ‘[objectArray]’) ------->true;
alert(Object.prototype.toString.call(d) === ‘[objectDate]’) ------->true;
alert(Object.prototype.toString.call(e) === ‘[objectFunction]’) ------->true;
alert(Object.prototype.toString.call(f) === ‘[objectFunction]’) ------->true;
typeof 判断就可以了，遇到预知 Object 类型的情况可以选用 instanceof 或 constructor 方法Symbol ）number ）：整数和小数（比如1和3.14）string ）：字符组成的文本（比如”Hello World”）boolean ）：true（真）和false（假）两个特定值undefined ：表示 未定义 或不存在，即此处目前没有任何值null ：表示空缺，即此处应该有一个值，但目前为空object ）：各种值组成的集合primitive type ）的值，即它们是最基本的数据类型，不能再细分了。而将对象称为合成类型（ complex type ）的值，因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器。至于 undefined 和 null ，一般将它们看成两个特殊值DOM 对象toString() 转换为字符串，在JavaScript中所有数据类型都可以转换为 string类型varn1 =12;
varn2 =true;
vara = [1,2,3];
varo = {};
functionf(){}
n1.toString(); //"12"
n2.toString(); //"true"
a.toString(); //"1,2,3"
o.toString(); //"[object Object]"
f.toString(); //"function f(){}"
parseInt() 解析出一个 string 或者 number 类型的整数部分，如果没有可以转换的部分，则返回 NaN （ not a number ）
varn1 ="12";
varn2 ="23hello";
varn3 ="hello";
parseInt(n1);//12
parseInt(n2);//23
parseInt(n3);//NaN
parseFloat() 解析出一个 string 的浮点数部分，如果没有可以转换的部分，则返回 NaN （ not a number ）varn1 ="1.2.3";
varn2 ="1.2hello"
varn3 ="hello"
parseFloat(n1);//1.2
parseFloat(n2);//1.2
parseFloat(n3);//NaN
Boolean(value) - 把给定的值转换成 Boolean 型Boolean(123);//true
Boolean("");//false
Boolean([]);//true
Boolean({});//true
Boolean(null);//false
Boolean(undefined);//false
Number(value) -把给定的值转换成数字（可以是整数或浮点数）Number("123");//123
Number("123h");//NaN
Number(true);//1
Number(false);//0
Number(undefined);//NaN
Number(null);//0
Number([]);//0
Number({});//NaN
String(value) - 把给定的值转换成字符串
String(123);//"123"
String([1,2]);//"1,2"
String(undefined)//"undefined"
String(null)//"null"
String({})//"[object Object]"
console.log(12+"12") ; //1212true 转换为 1 ， false 转换为 0 console.log(12+true) ; //13console.log("hello"+true) ; // hellotrueconsole.log(true+true) ; //2undefined 表示一种未知状态，声明了但没有初始化的变量，变量的值时一个未知状态。访问不存在的属性或对象 window.xxx ）方法没有明确返回值时，返回值是一个 undefined. 当对未声明的变量应用 typeof 运算符时，显示为 undefined 。null 表示尚未存在的对象, null 是一个有特殊意义的值。可以为变量赋值为 null ，此时变量的值为“已知状态”(不是 undefined )，即 null 。（用来初始化变量，清除变量内容，释放内存）undefined==null//结果为true,但含义不同。
undefined===null//false,两者类型不一致，前者为“undefined”，后者为“object”
var 定义 和函数定义 functionvar function 定义外的 其他都是执行 如：赋值 函数调用var b = function(){}== 运算的规则：(隐式转换)JS 中的值有两种类型：原始类型( Primitive )、对象类型( Object )。
原始类型包括： Undefined 、 Null 、 Boolean 、 Number 和 String 等五种。
Undefined 类型和 Null 类型的都只有一个值，即 undefined 和 null ； Boolean 类型有两个值： true 和 false ； Number 类型的值有很多很多； String 类型的值理论上有无数个。
所有对象都有 valueOf() 和 toString() 方法，它们继承自 Object ，当然也可能被子类重写
undefined == null ，结果是 true 。且它俩与所有其他值比较的结果都是 false 。
String == Boolean ，需要两个操作数同时转为 Number 。
String/Boolean == Number ，需要 String/Boolean 转为 Number 。
Object == Primitive ，需要 Object 转为 Primitive (具体通过 valueOf 和 toString 方法)
1、 window 作用域
script 标签中定义的变量，默认就在 window 的作用域之下window 这个对象里面写代码2、数据类型
number :数字string :字符类型，必须用引号引起来boolean :布尔类型 true falsenull :变量引用了一块堆中一个空的空间object :引用对象类型（存在于堆里面）array :数组类型function :函数数据类型对象数据类型： object , array , function
3、 javascript 脚本执行顺序
var function算术运算符( + , - , * , / , % , ++ , -- )
null 的话，那么在运算中就会自动变成 0% 运算符 如： 4%5 取模 模是 4 7%5 取模 模是 7-5=2字符串和数字相加的情况：
null : null 看做 0undefined ：结果是 NAN （ not is number ）赋值运算符( = , -= , += , *= , /= , %= )
比较运算符( == , === , != , > , < , >= , <= )
== 和 != 在比较之前首先让双方的值做隐士类型转换， === 不转换逻辑运算符( || , && , ! )
|| 在js中和PHP中是不一样的 js中返回逻辑或的左边或右边的一个结果 PHP返回 || 或出来以后的结果即： true falsejs 里返回不是布尔值|| 短路运算 第一个条件为真 后面不执行&& 把表达式最后一个值返回（注意这里）表达式1?表达式2:表达式3 )三元运算符表达式1?表达式2:表达式3 表达式1为真 返回表达式2 否则返回表达式3非 ：undefinednullfalse0var age = prompt("温馨提示：","请输入您的年龄")||0undefined null fasle 0 表示非的逻辑 那么 ||就会过滤，取右边的值 01、运算符
+ , - , * , / , % , ++ , -- )+ 号左边和右边有一边是字符串类型的数据的话，这个时候就变成字符串拼接var str = "你好"+123; //你好123var count = 2;var str1 = "你叫了我第"-count+"次"; //你叫了我第2次null 的话，那么在运算中就会自动变成02、赋值运算符 *( = , -= , += ,` = , /= , %=`)
3、 比较运算符( ==,===,!=,>,<,>=,<= )
== 和 != 在比较之前首先让双方的值做隐士类型转换， === 不转换||,&&,! )1>2?3:4 )console.log 调试程序alertifjavascript 中 if 语句优化写法if(foo) bar();elsebaz(); ==> foo?bar():baz();
if(!foo) bar();elsebaz(); ==> foo?baz():bar();
if(foo)returnbar();elsereturnbaz(); ==>returnfoo?bar():baz();
and(&&) 和 or(||) 运算符if(foo) bar(); ==> foo&&bar();
if(!foo) bar(); ==> foo||bar();
if...elseif...else if...elseN 段逻辑代码的时候，只能用条件结构console.log 调试程序if if...else if...else if...else
N 段逻辑代码的时候，只能用条件结构switchswitch case break default 条件 判断 退出 默认
case ，那么它下面的所有的 case 都会执行包括 defaultbreak 的意思跳出当前结构forcontinue 的意思结束本次循环进入下次循环continue 结束本次循环，继续下一次循环 当前这次循环不做 直接做下面的break 结束后面的循环不做了1、 switch
switch case break default 条件 判断 退出 默认
case ，那么它下面的所有的 case 都会执行包括 defaultbreak 的意思跳出当前结构2、 for
continue 的意思结束本次循环进入下次循环while/do...while 没有谁好谁坏 只有适应场景不同do..while 用户体验高 有风险 扫雷游戏也是先体验 在问是否退出 提高体验while 用户体验不高数字的 比较 ==<> ， for 循环优先.非数值相关的 比较循环， while 优先闭包 ）var function 在从上往下执行var 在执行//alert(x);//9:执行弹出x,结果x没定义,错误.
alert(i);//9:执行弹出i,然而i之前已经定义,只不过没地址,因此是undefiend
vari =10;//1:var i; 10:把常量池中10的地址赋给栈中的i
varj ="你好";//2:var j; 11:把常量池中 你好 的地址复给栈中的j
vark = z =null;//3:var k,z; 12:把堆中null的地址赋值给z和k
varm =function(){//4:var m; 5:function匿名函数 13:把匿名函数在堆中的地址赋给栈中的m
alert(2);
}
varb =document.body;//6:var b; 14:把堆中document.body对象的地址赋给栈中的b
varf =true;//7:var f; 15:把常量池中true的地址赋给栈中的变量f
functionm(){//8:function m;
alert(1);
}
functionm(){
c = 50;//在局部变量中找不到定义的c 沿着作用域链找到了全局变量的c
alert(‘哈哈哈‘);
//var c;
}
varc =150;// 函数m()还未执行到 还没被销毁 此时全局c的值c=50
m();
varc =20;//到这里一步 m()已经执行完了 函数已经销毁了 这里的c还是20
alert(c);//20
functionm(){
c = 50;//在局部变量中找不到定义的c 沿着作用域链找到了全局变量的c
alert(‘哈哈哈‘);
functioninner(){
c = 30;
alert(‘嘻嘻‘);
}
inner();//c在函数内部找不到定义 所以沿着作用域链找到了全局的c
}
varc =20;//到这里一步 m()还没执行 函数没被销毁 这里的c是30
m();
alert(c);//30
function 构造器prototype 原型foreach
switch2. while/do...while
==<> ， for 循环优先.while 优先3. function 函数
new 关键字代表的是新开辟一块内存空间没有被引用的内存空间，会在适当的时候被销毁
两句代码含义等同
var person = new Object() ;var person = {};访问对象的属性除了用 对象引用 .属性 key 以外，还可以使用对象引用 [属性key]
prototype 属性，这个属性指向函数的原型对象。constructor （构造函数）属性，这个属性包含一个指向 prototype 属性所在函数的指针（就是指向新创建的函数）。ECMA-262 第5版管这个指针叫 [[Prototype]]。脚本中没有标准的方式访问 [[Prototype]] ，但 Firefox 、 Safari 和 Chrome 在每个对象上都支持一个属性 __proto__ ；而在其他实现中，这个属性对脚本是完全不可见的。不过，要明确的真正重要的一点就是，这个连接存在于实例和构造函数的原型对象之间，而不是存在于实例和构造函数之间functionPerson(name, age){
this.name = name;
this.age = age;
this.say =function(){
console.log(this.name);
};
}
functioncreatePerson(P){
// 创建一个新对象
varo =newObject();
// 获取传递给Person函数的参数
varargs =Array.prototype.slice.call(arguments,1);
// 新对象的__proto__属性指向Person的原型对象
o.__proto__ = P.prototype;
// Person的原型对象的constructor指向Person
P.prototype.constructor = P;
// 把Person构造函数的作用域赋给新对象
// 给这个新对象添加属性（name,age,say）
P.apply(o, args);
// 返回这个新对象
returno;
}
varp = createPerson(Person,‘wang‘,35);
function 构造器
new 开辟内存空间，把这块空间的地址返回，这块空间就有可能长期的被引用prototype 原型
new（创建） 出来的对象具有相同的属性和行为prototype 本质就是一个对象foreachthis 指代当前创建的这块内存 this.name=name 指代当前内存中的这个 name 属性 接收外界传过来的值继承varperson =newObject();
person.name = “lancer”;
person.age = 24;
person.job = “UI”;
person.sayName = function(){
alert(this.name);
}
person.sayName();
functioncreatePerson(name,age,job){
varo =newObject();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(o.name);
}
returno;
}
varperson1 = createPerson(“lancer”,24,”UI”);
person1.sayName();
functionPerson(name,age,job){
this.name = name;
this.age = age;
this.job =job;
this.sayName =function(){
alert(this.name)
}
}
varperson1 = createPerson(“lancer”,24,”UI”);
person1.sayName();
functionPerson(){
}
Person.prototype.name =”lancer”;
Person.prototype.age =24;
Person.prototype.job = “UI”;
Person.prototype.sayName = function(){
alert(this.name)
}
varperson1 =newPerson();
person1.sayName();
varperson2 =newPerson();
person2.name =”lara”
person2.sayName();
functionPerson(){
}
Person.prototype = {
name: “lancer”,
age:24,
job: “UI”,
sayName:function(){
alert(this.name)
}
};
varperson1 =newPerson();
person1.sayName();
functionPerson(name,age,job){
this.name = name;
this.age = age;
this.job =job;
}
Person.prototype = {
constructor:Person,
sayName:function(){
alert(this.name)
}
};
varperson1 =newPerson(“lancer”,”24″,”UI”);
person1.sayName();
functionPerson(name,age,job){
this.name = name;
this.age = age;
this.job =job;
}
if(typeofthis.sayName !=”function”){
Person.prototype = {
constructor:Person,
sayName:function(){
alert(this.name)
}
};
}
varperson1 =newPerson(“lancer”,”24″,”UI”);
person1.sayName();
varPerson =function(name,age,job){
varO =newObject();
O.sayName = function(){
alert(name);
};
returnO
}
varperson1 = Person(“lancer”,24,”UI”);
person1.sayName();
undefined
new 关键字代表的是新开辟一块内存空间var person = new Object();var person = {};key 以外，还可以使用对象引用 [属性key]function 构造器
new 开辟内存空间，把这块空间的地址返回，这块空间就有可能长期的被引用prototype 原型
new （创建）出来的对象具有相同的属性和行为prototype 本质就是一个对象foreachthisprototype 是原型，是一块所有对应构造器创建的对象都共享的内存空间prototype 公共空间的Object 构造器的，因此只要 Object 的原型里有的功能，所有的对象都有//多个对象的构造 以及 多个对象之间如何建立联系
functionStudent(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
functionBingqilin(name){
this.name = name;
}
functionGame(name){
this.name = name;
}
functionHour(time){
this.time = time;
}
Student.prototype = {
eat:function(b){
alert(this.name+"喜欢吃"+b.name);
},
mess:function(){
alert(this.name+"的信息："+this.age+‘,‘+this.sex);
},
sleep:function(h){
alert(this.name+"每天睡,"+h.time+‘小时‘);
},
work:function(h){
alert(this.name+"每天工作,"+h.time+‘小时‘);
},
like:function(g){
alert(this.name+"喜欢打,"+g.name);
}
}
vars =newStudent("小明",22,"男");
varb =newBingqilin("黑色的冰淇淋");
s.eat(b);//小明喜欢吃黑色的冰淇淋
varg =newGame("英雄联盟");
s.like(g);//把对象的地址发送给like的参数即可访问构造函数Game的name属性
varh =newHour(10);
s.sleep(h);
s.work(h);
prototype 是原型，是一块所有对应构造器创建的对象都共享的内存空间prototype 公共空间的Object 构造器的，因此只要 Object 的原型里有的功能，所有的对象都有3：创建对象并且建立关系（操作对象）
面向对象例子
//小头爸爸牵着大头儿子的手去吃饭，吃完饭之后，
//小头爸爸背着大头儿子回家，回家后儿子学习，老爸工作，工作学习完后
//儿子看动画片
//围裙妈妈带儿子睡觉
//张三和张四
//分析对象 小头爸爸 大头儿子 饭 以及功能
//设计构造器（类）
//创建对象以及他们之间的关联
functionPerson(name,age){
this.name = name;
this.age = age;
}
functionRice(name){
this.name = name;
}
//Person.prototype.getHand = function(){//这样子写也可以 但还是用默认生成的那块空的内存对象 往里面添加属性 方法
//不浪费内存
//}
//在prototype中定义的每个对象都有这些功能
Person.prototype = {//这样子写 抛弃了默认生成的那块空的内存对象 重新创建了一块新的内存对象 记住：原型的本质是对象
//多个功能写在一起
getHand:function(person){//牵手
alert(this.name+"在牵着"+person.name+"的手....");
},
eat:function(rice){
alert(this.name+"在吃"+rice.name);
},
//需求 18岁以上才能背人
/* //写法一 不推荐 这个满足18岁的功能是自己强加的 不是客户需求的
carry:function(person){//这里设计不合理 让老爸有这个功能 儿子没有这个功能
if(this.age>=18){
alert(this.name+‘背着‘+person.name);
}else{
alert(this.name+",还未满18岁，背不起");
}
},*/
backhome:function(){
alert(this.name+"回家");
},
study:function(){
alert(this.name+"正在学习");
},
watchTV:function(jm){
alert(this.name+"正在看"+jm+‘...‘);
}
};
varp1 =newPerson("老爸",20);
varp2 =newPerson("儿子",15);
//p1.getHand(p2);
//p1.eat(new Rice("蛋炒饭"));
//p2.eat(new Rice("猪脚饭"));
//p1.carry(p2);//老爸背儿子
//p2.carry(p1);//让儿子背老爸 输出结果：儿子,还未满18岁，背不起
//p1.backhome();
//写法二 不推荐 100对关系 代码写很多遍
/*
//让老爸单独有背的这个功能 儿子没有这个功能
p1.carry = function(person){
alert(this.name+‘背着‘+person.name);
}
p1.carry(p2);
*/
//-------通过继承解决这个 让老爸单独有背的这个功能 儿子没有这个功能 可以应对多功能 多需求
//功能函数
Object.prototype.extends =function(func,actions){//让所有的子孙 构造器都有这个功能
for(varpropinfunc.prototype){//传进一个func构造器 迭代构造器中的功能 把构造器中的功能全都映射过来 复制一份
this.prototype[prop] = func.prototype[prop];//迭代原型中的所有的功能到 当前里面去
}
for(varpropinactions){
this.prototype[prop] = actions[prop];
}
};
functionFather(name){
this.name = name;
}
Father.extends(Person,{
carry:function(person){
alert(this.name+‘背着‘+person.name);
},
work:function(){
alert(this.name+"正在工作");
}
});
//扩展
//设计程序有个原则：不修改只增加
functionChildren(name){
this.name = name;
}
Children.extends(Person);
functionMother(name){
this.name = name;
}
Mother.extends(Person,{
scoop:function(person){
//判断必须是children的对象才能执行这个功能
//if(){
alert(this.name+"唱着摇篮曲哄"+person.name+"睡觉");
//}
}
});
/*
Father.prototype.carry= function(person){//创建这个原型的想法是：原来Person有的功能 我都需要有 并在这些基础上加一个功能 carry
//如何建立Father基础Person的功能？写一个继承的小工具来操作
alert(this.name+‘背着‘+person.name);
};
Father.prototype.work = function(){
alert(this.name+"正在工作");
}
*/
varp1 =newFather("老爸");
varp2 =newChildren("儿子");
p1.carry(p2);//只有老爸有carry这个功能
//p2.carry(p1);//error 儿子没有carry这个功能
p2.study();//儿子在学习
p1.work();//老爸在工作
p1.watchTV(‘看足球‘);
p2.watchTV(‘蜡笔小新‘);
varp3 =newMother(‘围裙妈妈‘);
p3.scoop(p2);
prototype 对象中把它的功能都 copy 到另一个 prototype 对象func.call（obj） ：调用 func 的时候，以 obj 这个对象的作用域去调用call(obj,arg1,arg2,arg3) ; call 第一个参数传对象，可以是 null 。参数以逗号分开进行传值，参数可以是任何类型。 apply(obj,[arg1,arg2,arg3]) ; apply 第一个参数传对象，参数可以是数组或者arguments 对象StringArrayMath Math.random();DateDate
varmyDate =newDate();//系统当前时间
varmyDate =newDate(yyyy, mm, dd, hh, mm, ss);
varmyDate =newDate(yyyy, mm, dd);
varmyDate =newDate(“monthName dd, yyyy hh:mm:ss”);
varmyDate =newDate(“monthName dd, yyyy”);
varmyDate =newDate(epochMilliseconds);
varmyDate =newDate();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数) 时间戳！！
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间
varmyDate =newDate();
myDate.setDate(myDate.getDate() + 10);//当前时间加10天//类似的方法都基本相同,以set开头,具体参考第2点
vari = daysBetween(beginDate,endDate);//返回天数
vari = beginDate.getTimezoneOffset(endDate);//返回分钟数
//checkDate() 只允许”mm-dd-yyyy”或”mm/dd/yyyy”两种格式的日期
if( checkDate(“2006-01-01”) ){ }
//正则表达式(自己写的检查 yyyy-mm-dd, yy-mm-dd, yyyy/mm/dd, yy/mm/dd 四种)
varr =/^(\d{2}|\d{4})[\/-]\d{1,2}[\/-]\d{1,2}$/;if( r.test( myString ) ){ }
varmyString =newString(“Every good boy does fine.”);
varmyString = “Every good boy does fine.”;
varmyString = “Every ” + “good boy ” + “does fine.”;
varmyString = “Every “; myString += “good boy does fine.”;
//截取第 6 位开始的字符
varmyString = “Every good boy does fine.”;
varsection = myString.substring(6);//结果: “good boy does fine.”
//截取第 0 位开始至第 10 位为止的字符
varmyString = “Every good boy does fine.”;
varsection = myString.substring(0,10);//结果: “Every good”
//截取从第 11 位到倒数第 6 位为止的字符
varmyString = “Every good boy does fine.”;
varsection = myString.slice(11,-6);//结果: “boy does”
//从第 6 位开始截取长度为 4 的字符
varmyString = “Every good boy does fine.”;
varsection = myString.substr(6,4);//结果: “good”
varmyString = “Hello”;
varlcString = myString.toLowerCase();//结果: “hello”
varucString = myString.toUpperCase();//结果: “HELLO”
varaString = “Hello!”;
varbString =newString(“Hello!”);
if( aString == “Hello!” ){ }//结果: true
if( aString == bString ){ }//结果: true
if( aString === bString ){ }//结果: false (两个对象不同,尽管它们的值相同)
varmyString = “hello everybody.”;
// 如果检索不到会返回-1,检索到的话返回在该串中的起始位置
if( myString.indexOf(“every”) >-1){ }//结果: true
varmyString = “I is your father.”;
varresult = myString.replace(“is”,”am”);//结果: “I am your father.”
\b : 后退符\t : 水平制表符\n : 换行符\v : 垂直制表符\f : 分页符\r : 回车符\” : 双引号\’ : 单引号\\ 反斜杆Unicode 编码varmyString = “hello”;
varcode = myString.charCodeAt(3);//返回”l”的Unicode编码(整型)
varchar =String.fromCharCode(66);//返回Unicode为66的字符
varmyString = “hello all”;
varcode =encodeURI(myString);//结果: “hello%20all”
varstr =decodeURI(code);//结果: “hello all”
//相应的还有: encodeURIComponent() decodeURIComponent()
Math.abs(num) : 返回 num 的绝对值
Math.acos(num) : 返回 num 的反余弦值
Math.asin(num) : 返回 num 的反正弦值
Math.atan(num) : 返回 num 的反正切值
Math.atan2(y,x) : 返回 y 除以 x 的商的反正切值
Math.ceil(num) : 返回大于 num 的最小整数
Math.cos(num) : 返回 num 的余弦值
Math.exp(x) : 返回以自然数为底,x次幂的数
Math.floor(num) : 返回小于 num 的最大整数
Math.log(num) : 返回 num 的自然对数
Math.max(num1,num2) : 返回 num1 和 num2 中较大的一个
Math.min(num1,num2) : 返回 num1 和 num2 中较小的一个
Math.pow(x,y) : 返回 x 的 y 次方的值
Math.random() : 返回 0 到 1 之间的一个随机数
Math.round(num) : 返回 num 四舍五入后的值
Math.sin(num) : 返回 num 的正弦值
Math.sqrt(num) : 返回 num 的平方根
Math.tan(num) : 返回 num 的正切值
Math.E : 自然数( 2.718281828459045 )
Math.LN2 : 2 的自然对数( 0.6931471805599453 )
Math.LN10 : 10 的自然对数( 2.302585092994046 )
Math.LOG2E : log 2 为底的自然数( 1.4426950408889634 )
Math.LOG10E : log 10 为底的自然数( 0.4342944819032518 )
Math.PI : π(3.141592653589793)
Math.SQRT1_2 : 1/2 的平方根( 0.7071067811865476 )
Math.SQRT2 : 2 的平方根( 1.4142135623730951 )
vari =1;
vari =newNumber(1);
vari =1;
varstr = i.toString();//结果: “1”
varstr =newString(i);//结果: “1”
i = parseInt(str);//结果: 1
i = parseFloat(str);//结果: 1.0
//注意: parseInt,parseFloat会把一个类似于”32G”的字符串,强制转换成32
vari =123;varstr = “string”;
if(typeofi == “number” ){ }//true
//某些方法(如:parseInt,parseFloat)会返回一个特殊的值NaN(Not a Number)
//请注意第2点中的[注意],此方法不完全适合判断一个字符串是否是数字型!!
i = parseInt(str);
if(isNaN(i) ){ }
//此知识与[字符串比较]相同
- **小数转整数**
varf =1.5;
vari =Math.round(f);//结果:2 (四舍五入)
vari =Math.ceil(f);//结果:2 (返回大于f的最小整数)
vari =Math.floor(f);//结果:1 (返回小于f的最大整数)
vari =3.14159;
//格式化为两位小数的浮点数
varstr = i.toFixed(2);//结果: “3.14”
//格式化为五位数字的浮点数(从左到右五位数字,不够补零)
varstr = i.toPrecision(5);//结果: “3.1415”
vari =parseInt(“0x1f”,16);
vari =parseInt(i,10);
vari =parseInt(“11010011”,2);
//返回0-1之间的任意小数
varrnd =Math.random();
//返回0-n之间的任意整数(不包括n)
varrnd =Math.floor(Math.random() * n)
Regex//在这个最大的对象的原型上加一个extends方法 使得下面所有的原型 都有这个方法
//这个原型的作用是通过迭代 复制传进来的构造器的所有的原型的方法
Object.prototype.extends =function(parent){
//console.log(parent.prototype);
for(varpropinparent.prototype){
//console.log(prop);//eat extends
this.prototype[prop] = parent.prototype[prop];//复制传进来的构造器的所有的原型的方法给当前正在调用这个方法的对象
}
}
functionPerson(name){
this.name = name;
}
Person.prototype = {
eat:function(){
alert(this.name+"在吃饭");
}
};
functionFather(name){
this.name = name;
}
Father.extends(Person);//extends方法是最大的对象Object加的方法 所有的子孙 构造器都有这个方法
varf =newFather("小头爸爸");
f.eat();
StringMath Math.random()Date 日期类ArrayRegex
[] 一个字符的范围\w==[a-zA-Z0-9_] \d==[0-9]{count} 设置匹配数量比如 \w{5}// 的正则表达式匹配局部， /^$/ 的正则表达式是匹配全部() 的作用就是为了分组匹配String.prototype.isEmail =function(){
email = this;
if(email.indexOf("@")!=-1&&email.indexOf(".")!=-1)
{
if(email.indexOf("@")<email.lastIndexOf("@")){
alert("邮箱不合法");
}else{
alert("邮箱合法");
}
}
}
varemail ="jingguanliuye@gmail.com";
email.isEmail();
//===============================日历练习(方法简洁 高效)======================================
//var year = parseInt(prompt("请输入日历年份："));
//var month = parseInt(prompt("请输入日历月份："))-1;
Date.prototype.printCalendar =function(){
varyear =this.getFullYear(),month =this.getMonth();
vardate =newDate(year,month,1);
//alert(date.toLocaleString());
document.write("<div class=‘date‘>"+year+"年"+(month+1)+"月</div>");
document.write("日 一 二 三 四 五 六<br />");
varday = date.getDay();
for(vari=0;i<day;i++){
document.write(‘ ‘);
}
varcount =newDate(year,month+1,0).getDate();//这里的0返回一个月的最后一天
for(vari=1;i<=count;i++){
document.write(i+‘ ‘);
if((i+day)%7==0){
document.write(‘<br/>‘);
}
}
}
newDate(2012,2).printCalendar();
Date 期类ArrayRegex
[] 一个字符的范围\w==[a-zA-Z0-9_] \d==[0-9]{count} 设置匹配数量比如 \w{5} ， {c1,c2}// 的正则表达式匹配局部， /^$/ 的正则表达式是匹配全部() 的作用就是为了分组匹配Regex
+ 代表的是 1-N 个， * 代表的是 0-N 个? 代表该字符要不没有要不就有一个. 代表的是任意字符\转义符BOM[] 一个字符的范围\w==[a-zA-Z0-9_] \d==[0-9]{count} 设置匹配数量比如 \w{5} ， {c1,c2}// 的正则表达式匹配局部， /^$/ 的正则表达式是匹配全部() 的作用就是为了分组匹配1-N 个， * 代表的是 0-N 个? 代表该字符要不没有要不就有一个. 代表的是任意字符\转义符window 是 Window 构造器造出来的一个对象 alert(window instanceof Window)document 是 Document 构造器造出来的一个对象div 是由 HTMLDivElement 这个构造器创建的一个实例 div = new HTMLDivElement() span = new HTMLSpanElement()console.log();
screen 指的不是浏览器的宽度，指的是整个电脑屏幕的分辨率
navigator
userAgent 判断当前浏览器信息location
URL ：统一资源定位符 Union Resource Locationhref 属性重定向（改变）页面的URL，进行页面跳转history
go 方法能够让我们进行历史回退或者前进e. frames
iframe ）f. document
DOM 模型的核心对象DOM 文档对象模型getElementById $(‘#aaa‘)getElementByTagName $(‘div‘)getElementsByClassName $(‘.aaa‘)getElementsByName 只用在表单元素中document object
className ， styleidname , value (表单元素)href , src …(对应的元素)innerHTMLchildrenparentNodesetAttribute/getAttributeappendChildscreen 指的不是浏览器的宽度，指的是整个电脑屏幕的分辨率
navigator
userAgent 判断当前浏览器信息location
URL ：统一资源定位符 Union Resource Locationhref 属性重定向（改变）页面的URL，进行页面跳转history
go 方法能够让我们进行历史回退或者前进frames
获得当前窗体的子页面（`iframe`）
document
DOM 模型的核心对象DOM 对象都是在堆内存创建的 都是有一个构造器生成的var body = document.body;console.log(body.toString())console.log(body instanceof HTMLBodyElement)getElementById ：通过传入的ID，返回标识了这个ID的唯一对象的内存地址getElementsByTagName :通过传入的标签名字，返回所有该标签对象（ HTMLCollection ）getElementsByClassName :通过类的名字，返回所有该类的元素对象（ HTMLCollection ）createElement :想要创建出来的元素能够绘制在页面中，那么它必须在DOM树中
document 对象是DOM原型的核心对象，它是内存DOM树的根，所以它提供了很多功能让我们快速的找到DOM树中的某些DOM节点（对象）element功能方法：（自定义属性非常灵活好用）
setAttribute/getAttribute //getAttribute获取标签的属性 –用来操作标签的属性setAttribute 设置标签的属性appendChild :添加子元素属性：
idclassName ， stylename , value (只有表单元素有 其他是没有的)href , src …(对应的元素)innerHTML/innerText innerText 返回文本信息children ://子元素集合parentNode //父元素点 出来，除此意外的 自定义属性，请通过 get/setAtribute 去操作tab 切换效果DOM 操作的具体应用 DOM 操作就是用 js 来写 HTML 代码document.getElementById —根据 id 查找节点 [返回的是节点本身]document.getElementsByTagName –根据标签名字来查找[返回的是数组] document.getElementsByTagName[i]document.getElemenstByName –根据 name 属性来查找节点（一般用在表单中）[返回的是数组] document.getElemenstByName[i]注意：早期浏览器都认为 name 只出现在表单中
因此 document.getElemenstByName 只对表单中的元素发挥作用 后来部分浏览器把 Name 属性扩展到一般的元素 如： div 但是IE浏览器还是只能对表单使用 byName 因此处于兼容性 我们只能对表单使用 byName
DOM 中查找节点的思路：（由大到小 个别情况 由子到父）由大到小：（通过下面的来定位）
document.getElementById —根据id查找节点 [返回的是节点本身]document.getElementsByTagName –根据标签名字来查找[返回的是数组] document.getElementsByTagName[i]document.getElemenstByName –根据 name 属性来查找节点（一般用在表单中）[返回的是数组] document.getElemenstByName[i]childNodes/childchildren[index]/childNodesnode.parentNode –>获取父元素nextSibling previousSiblingnextSibling previousSibling firstChild lastChild 这四个属性容易受到 空白文本 的影响 建议不用//============给Object原型加一个方法 消除文本节点对DOM操作的影响 例如：nextSibling` `previousSibling` `firstChild` `lastChild （受到换行 和文本节点影响）
Object.prototype.next =function(){
//NodeType == 3 text的代号
//NodeType == 1 tag的代号
if(this.nextSibling){//判断下一个兄弟节点是否存在
switch(this.nextSibling.nodeType){
case1:
returnthis.nextSibling;
case3:
returnthis.nextSibling.nextSibling;
}
}else{
returnnull;
}
console.log(div1.next().next().innerText);
5、对于查到的某个元素里面的子元素非常多 这时候还可利用 getElementsByTagname 进一步筛选
注意对于元素对象和 document 对象相比 元素对象只能利用 getElementsByTagName 函数 其他两个不能用
节点查找也是通过由大到小来定位：找到大的元素进一步细化 完全可以找到页面上任意一个元素控制他
子元素 不好找 就找他的父元素
要过滤空白文本节点，用 children 取他的文本节点
childNodes[]parentNodefirstChildgetElementsByTagName(‘元素标签‘)lastchildnextSiblingpreviousSiblingchildren[index] children 不是 w3c 标准 但是各大浏览器兼容性很好通过给原型添加方法在元素后面创建标签
启示：在项目中，很多很多地方都需要一个方法但是系统没提供，这时可以通过原型扩展
//var p = document.createElement(‘p‘);
//p.innerHTML = "this is a p";
//var child = document.getElementsByTagName(‘div‘);
//给Div的HTMLDivElement构造器原型加一个创建元素的方法 要所有的元素都有这个方法 改成 Object
HTMLDivElement.prototype.createElement = function(tagName){
varchild =document.createElement(tagName);
this.appendChild(child);
returnchild;
}
varchild =document.getElementsByTagName(‘div‘)[2].createElement("p");
child.innerHTML = ‘pppppp‘;
Attributes 存储节点的属性列表(只读)
childNodes 存储节点的子节点列表(只读)
dataType 返回此节点的数据类型
Definition 以 DTD 或 XML 模式给出的节点的定义(只读)
Doctype 指定文档类型节点(只读)
documentElement 返回文档的根元素(可读写)
firstChild 返回当前节点的第一个子节点(只读)
Implementation 返回 XMLDOMImplementation 对象
lastChild 返回当前节点最后一个子节点(只读)
nextSibling 返回当前节点的下一个兄弟节点(只读)
nodeName 返回节点的名字(只读)
nodeType 返回节点的类型(只读)
nodeTypedValue 存储节点值(可读写)
nodeValue 返回节点的文本(可读写)
ownerDocument 返回包含此节点的根文档(只读)
parentNode 返回父节点(只读)
Parsed 返回此节点及其子节点是否已经被解析(只读)
Prefix 返回名称空间前缀(只读)
preserveWhiteSpace 指定是否保留空白(可读写)
previousSibling 返回此节点的前一个兄弟节点(只读)
Text 返回此节点及其后代的文本内容(可读写)
url 返回最近载入的XML文档的 URL (只读)
Xml 返回节点及其后代的 XML 表示(只读)
cloneNode 返回当前节点的拷贝createAttribute 创建新的属性节点操作 DOMDocument 属性和方法
createCDATASection 创建包括给定数据的 CDATA 段
createComment 创建一个注释节点
createDocumentFragment 创建 DocumentFragment 对象
createElement_x_x 创建一个元素节点
createEntityReference 创建 EntityReference 对象
createNode 创建给定类型,名字和命名空间的节点
createPorcessingInstruction 创建操作指令节点
createTextNode 创建包括给定数据的文本节点
getElementsByTagName 返回指定名字的元素集合
hasChildNodes 返回当前节点是否有子节点
insertBefore 在指定节点前插入子节点
Load 导入指定位置的XML文档
loadXML 导入指定字符串的XML文档
removeChild 从子结点列表中删除指定的子节点
replaceChild 从子节点列表中替换指定的子节点
Save 把 XML`文件存到指定节点
selectNodes 对节点进行指定的匹配,并返回匹配节点列表
selectSingleNode 对节点进行指定的匹配,并返回第一个匹配节点
transformNode 使用指定的样式表对节点及其后代进行转换
transformNodeToObject 使用指定的样式表将节点及其后代转换为对象
document.documentElement 返回文档的根节点
document.activeElement 返回当前文档中被击活的标签节点
event.fromElement 返回鼠标移出的源节点
event.toElement 返回鼠标移入的源节点
event.srcElement 返回激活事件的源节点
node.parentNode,node.parentElement 返回父节点
node.childNodes 返回子节点集合（包含文本节点及标签节点）
node.children 返回子标签节点集合
node.textNodes 返回子文本节点集合
node.firstChild 返回第一个子节点
node.lastChild 返回最后一个子节点
node.nextSibling 返回同属下一个节点
node.previousSibling 返回同属上一个节点
node.a(oNode) 追加子节点：
node.applyElment(oNode,sWhere)
sWhere 有两个值： outside / i nside 应用标签节点
node.insertBefore()
node.insertAdjacentElement()
node.replaceAdjacentText()
node.remove()node.removeChild()node.removeNode()node.replaceChild()node.replaceNode()node.swapNode()node.cloneNode(bAll) 返回复制复制节点引用node.contains() 是否有子节点node.hasChildNodes() 是否有子节点getElementById ：通过传入的ID，返回标识了这个ID的唯一对象的内存地址getElementsByTagName :通过传入的标签名字，返回所有该标签对象（ HTMLCollection ）getElementsByClassName :通过类的名字，返回所有该类的元素对象（ HTMLCollection ）createElement :想要创建出来的元素能够绘制在页面中，那么它必须在DOM树中
document 对象是DOM原型的核心对象，它是内存DOM树的根，所以它提供了很多功能让我们快速的找到DOM树中的某些DOM节点（对象）element
setAttribute/getAttribute //getAttribute获取标签的属性 –用来操作标签的属性setAttribute 设置标签的属性appendChild :添加子元素idclassName ， stylename , value (只有表单元素有 其他是没有的)href , src …(对应的元素)innerHTML/innerText innerText返回文本信息children ://子元素集合parentNode //父元素点 出来，除此意外的 自定义属性 ，请通过 get/setAtribute 去操作onclick: 当事件源被点击的时候调用处理程序onmouseover: 鼠标进入事件onmouseout: 鼠标移出事件onmousedown: 鼠标按下去的时候onmouseup: 鼠标抬起来的时候onscroll: 当事件源滚动条滚动的时候onkeydown: 当键盘按下的时候onkeypress: 当键盘按下去的时候onkeyup: 当键盘弹上来的时候onfocus: 当事件源获得光标onblur: 当事件源失去光标onchange: 当事件源 blur 的时候内容改变了的话js 方式操作IE 浏览器第一个对象就会传入 event 事件源对象event 事件源对象（ event = event||window.event ;）IE 浏览器的事件源属性是 target 属性（ event.target = event.target||event.srcElement ;）IE 浏6览器的事件源属性是 srcElement 属性
JavaScript 读书路线
标签：
原文地址：http://www.cnblogs.com/wangkang1/p/5928898.html
