jacascript
1 值类型—数据类型
1.不可改变的原始值（栈数据）（stack）
Number String Boolean undefined null
2引用值（推数据）（heap）
array object function date RegExph
js运算符
1 运算操作符 1.“+” 数字运算 字符串连接 2.任何数据类型 加字符串都等于字符串
2 "-","*","/","%","=","()" 优先级"="最弱 （）最高
3"++","--" ,"+=","-=","/=","*=","%=" 比如 document.write(a++) 先执行a 在进行++
赋值的顺序自右向左，计算的顺序自左向右
被认定为false的值 undefined 、null、NaN、""、0、false
4逻辑运算符
"&&" 会先看第一表达式转换成布尔值得结果，如果结果为真，那么它会看第二个表达式转换为布尔值得结果。 碰假就停，就输出结果
"||" 先看第一个为真，就直接返回第一个值，如果第一个为假，再看第二个，就返回值。 如果第一个为假，第二为假，会返回第二个值。 碰假就停
条件语句
1.if（）{} ()里面是判断语句，如果成立就值行{}里面的语句
else if 是除if以外的条件 else 是除以上所有以外的条件
2. for(var i =0;i<10;i++){}
执行的顺序 第一步 var i= 0 第二步 if（i<10） 执行{}里面的语句 第三步 i++； 第四步 if（i<10）执行{}里面的语句 以此类推
3 while do while的区别是 do while无论如何先执行一次，在判断执行条件
4 switch case 基本形式
switch{ case 1: 代码 break; case 2: 代码 break; }
typeof() （六种数据类型） number（数字类型） string（字符串类型） boolean（布尔类型） undefined object（对象类型） function（函数类型）
（）里面写某种类型的数据就会返回某种类型的数据
类型转换
显示类型转换 1 Number（mix） 将mix转换成数字类型 2parseInt(string,radix) string是字符串类型 radix 是进制数 是将string以radix进制转换成十进制数
3 parseFloat（）转换成浮点数 4toString（radix） 里面写什么都转换成字符串 radix是进制数
隐式类型转换
1 isNaN（'abc'） 判断非数 内部转换过程是先Number（‘abc’）转化成NaN 再给isNaN（） 内部会隐式调用Number
2 var a ="123" a++; 也会隐式调用Number
3"+'' 当+前后有一个字符串类型的 会隐式调用String类型
4"-","*","/","%" 也是隐式调用number类型
5< > <= >= == 如果是字符串和数字比 先将字符串调用number类型，转化成数字，再进行比较，如果两个都是字符串，比较AScII码
3不发生类型转换的 ===（绝对等于） ！==（绝对不等于） 比如 1=="1" 返回true 1==="1" 返回false
函数 1. 定义 function 函数名 test（） {}里面写的是函数体
基本形式
function test(){ }
1. 命名函数表达式
var test = function abc（）{ document.write('a'); 这时函数执行要用test（）； 用abc（）没用 }
2 匿名函数表达式
var demo = function (){ document.write('b'); 执行用demo（） }
3 组成形式 1.函数名称 2. 参数：形参、 实参 3.返回值
function test(a,b){ a,b是形式参数 相当于在函数体定义了
var a,b; 可以无限定义形参 } test(1,2); 1，2是实际参数 当实参比形参多的时候 会将实参储存在argunments——实参列表
function sum（a,b）{ arguments[1,2] var a=1; a= 2; a变argumnets也变 arguments变 a变 arguments[0]=3; } sum(1,2)
return 返回值 有终止函数的功能
js运行三部曲 1 语法分析 2 预编译 3解释执行
1. 预编译前奏：imply global 暗示全局变量：即任何变量，如果变量未经声明就赋值，此变量就为全局对象所有 比如 a=123 var a=b=123 （b为全局变量）
2. 一切声明的全局变量： 全是window属性 window就是全局的域
var a = 123 ==> window.a=123 var b = 234 =>window.b = 234 相当于 window { a:123, b:234 }
//函数声明整体提升（无论函数写在哪里，都是提到最前面被执行）
// 变量 声明提升（声明变量放在输出语句后面，会被执行为undefined）
比如var a=b=123； 先将123赋给b，再声明a，再将b的值赋给a
预编译 四部曲
1.创建AO对象，（Activation Object 执行器上下文）
2.找形参和变量声明，将变量和形参名作为AO属性名，值为undefined
3将实参值和形参同一
4 在函数体里面找函数声明，值赋予函数体
有关预编译的题目
function fn(a){ console.log(a); //function a(){} var a=123; console.log(a); //123 function a(){} console.log(a); //123 var b=function(){} console.log(b); // function b(){} function d(){} } fn(1); //预编译发生在函数执行的前一刻
1 会先创造一个AO对象 AO{ a:1 ==>function a（）{} b: undefined d :function d(){} } 在运行函数 a ==>123 b==>function b(){}
var a = 0; b = 0; function A(a){ A=function(b){ document.write(a+b++); } document.write(a++); } A(1); //1 A(2); //4
console.log(test); //function test (){函数体} function test (test){ 先会生成一个GO对象 GO{test:undefined ==>function test(){}}
在生成一个AO对象 AO{test：undefined ==>1==> function test(){} ==>234}
console.log(test); //function test(){} var test = 234; 当 GO和AO同时拥有一个函数属性时 函数体外面执行GO 函数体里面有就执行AO 如果函数体里面没有这个属性 回去GO里面找 console.log(test); //234 function test(){}; } test(1); var test = 123;
/* a=100; function demo(e){ function e(){} arguments[0]=2; console.log(e);//2 if(a){ var b=123; function c(){} } var c; a=10; var a; console.log(b);//undefined f=123; console.log(c);//undefined console.log(a);//10 } var a; demo(1); console.log(a);//100 console.log(f);*///123
作用域精解
执行上下文
EC : 执行上下文
ECS : 执行环境栈
VO ： 变量对象
AO ： 活动对象
scope chain ：作用域链
二 执行上下文
javascript运行的代码环境有三种：
全局代码：代码默认运行的环境，最先会进入到全局环境中
函数代码：在函数的局部环境中运行的代码
Eval代码：在Eval()函数中运行的代码
全局上下文是最外围的一个执行环境，web浏览器中被认为是window对象。
在初始化代码时会先进入全局上下文中，每当一个函数被调用时就会为该函数创建一个执行上下文，每个函数都有自己的执行上下文。
总结：（执行上下文就用EC替代）
1. 全局上下文压入栈顶
2. 执行某一函数就为其创建一个EC，并压入栈顶
3. 栈顶的函数执行完之后它的EC就会从ECS中弹出，并且变量对象(VO)随之销毁
4. 所有函数执行完之后ECS中只剩下全局上下文，在应用关闭时销毁
三，VO/AO
VO(变量对象)
创建执行上下文时与之关联的会有一个变量对象，该上下文中的所有变量和函数全都保存在这个对象中。
AO(活动对象)
进入到一个执行上下文时，此执行上下文中的变量和函数都可以被访问到，可以理解为被激活。
谈到了上下文的创建和执行，我们来看看EC建立的过程：
建立阶段：(函数被调用，但是还未执行函数中的代码)
1. 创建arguments，变量，函数
2. 建立作用域链
3. 确定this的值
执行阶段：变量赋值，函数引用，执行代码
执行上下文为一个对象，包含VO，作用域链和this
具体过程：
1. 找到当前上下文调用函数的代码
2. 执行代码之前，先创建执行上下文
3. 创建阶段：
3-1. 创建变量对象(VO)：
1. 创建arguments，检查当前上下文的参数，建立该对象下的属性和属性值
2. 扫描上下文的函数申明：
1. 每扫描到一个函数什么就会在VO里面用函数名创建一个属性，为一个指针，指向该函数在内存中的地址
2. 如果函数名在VO中已经存在，对应的属性值会被新的引用覆盖
3. 扫描上下文的变量申明：
1. 每扫描到一个变量就会用变量名作为属性名，其值初始化为undefined
2. 如果该变量名在VO中已经存在，则直接跳过继续扫描
3-2. 初始化作用域链
3-3. 确定上下文中this的指向
4. 代码执行阶段
4-1. 执行函数体中的代码，给VO中的变量赋值
四，变量提升
很多人都知道变量提升，变量值为undefined时就说是变量提升造成的，现在大家应该就知道为什么了
function foo() { console.log(f1); //f1() {} console.log(f2); //undefined var f1 = 'hosting'; var f2 = function() {} function f1() {} } foo();
为什么能在申明之前就能调用也就是所谓的变量提升：
因为调用foo()时会创建VO，初始VO中变量值等有一系列的过程，所有变量初始化值为undefined，所以console.log(f2)的值为undefined。
并且函数申明先于变量申明，所以console.log(f1)的值为f1()函数而不为hosting。
五，总结
1. 调用函数是会为其创建执行上下文，并压入执行环境栈的栈顶，执行完毕弹出，执行上下文被销毁，随之VO也被销毁
2. EC创建阶段分创建阶段和代码执行阶段
3. 创建阶段初始变量值为undefined，执行阶段才为变量赋值
4. 函数申明先于变量申明
---------------------
一，作用域
包括静态作用域和动态作用域，静态作用域也叫词法作用域，
javascript采用的是静态作用域。
js中作用域是指可访问变量，对象，函数的集合，也就是调用它们能生效的代码区块。
在js中没有块级作用域，只有全局作用域和函数作用域，可以模仿块级作用域。
1-1 全局，函数作用域 举个很简单的列子
var b =c = 20 是指 var b =c； c=20；
f1函数中c没有使用var 声明为全局变量，b为局部变量，绑定在f1函数下,外部访问不到。
1-2 模仿块级作用域
没有块级作用域 但有if(),for()等块语句,在块语句内部定义的变量会保留在它们已经存在
的作用域内。 if()语句存在全局作用域下,所有内部定义的变量存在于全局作用域中,
无论在哪里都能访问到.
1-3 使用自执行的匿名函数包裹块的语句构建块作用域,也叫私有作用域.
1-4作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。
在javascript中，变量的作用域分为全局和局部两种。
！！！！ 拥有全局作用域就是在代码任何地方都能够访问到，叫做全局变量.
以下3种情况可以拥有 全局作用域
1.最外层函数和最外层函数外面定义的变量
2. 未定义直接赋值的变量
3.所有window对象:
一般情况下,所有window对象的内置属性都拥有全局作用域,如window.location
！！！！！ 局部作用域
局部作用域只在固定的代码片段内可访问到.
函数作用域
这里把函数作用域单独提出来讲并不是因为它和局部还有全局是平级关系，而是由于其比较特殊。
JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.
作用域链(重点)
下面我们说说作用域链，在javascript中，函数也是对象，实际上，javascript中的一切都是对象。函数内部有一个只给javascript引擎访问的内部属性是[[scope]]，
该属性包含了函数创建时的作用域中对象的集合，这个集合就叫做作用域链。
/*function test() { var num= 100; function a() { num++; console.log(num); } function b() { num--; console.log(num); } return [a,b]; } var myArr = test(); myArr[0](); myArr[1]();*/ // 无论test函数里面写多少函数 他们连着的都是test的AO. a函数先使test的AO里面的num++，然后b函数在调用a运行后改过的test的AO.
闭包
1.当内部函数被保存到外部时，将会生成闭包。闭包会导致原有作用作用链域不释放，造成内存泄漏
闭包的作用 1.实现公有化变量 eg：函数累加器
2.可以做缓存（存储结构） eg：eater
3.可以实现封装，属性私有化 eg：Person（）；
4.模块化开发，防止污染全局化变量
快速判断闭包：三点
1.嵌套函数
2.内层函数，一定操作了外层函数的局部变量
3.外层函数一定将内层函数返回到外部保存在一个全局变量中
判定闭包的执行结果：
1. 外层函数被调用几次，就有几个受保护的局部变量副本.
2. 来自一个闭包的函数被调用几次，受保护的局部变量就变化几次
// 1 使用闭包实现函数累加器 /*function add(){ var num = 0; function a() { console.log(++num); } return a; //a函数在执行，始终保存2个不变的空间（AO和GO），进行累加的时候，加的是别人的空间，空间不会随着每次累加结束消失，每次累加的值会接着上次的值进行累加。 } var myAdd= add(); myAdd(); myAdd(); myAdd();*/
//2 闭包 可以做缓存 /*function test() { var food = 'apple'; var obj= { eatFood : function(){ if(food != ""){ console.log("I an eating"+food); food=""; } else{ console.log("There is nothing! empty!"); } }, pushFood : function (myFood) { food =myFood; } } return obj; // 多个函数同时闭包，相当于全保存到 外部执行，他们用的都是test（）执行过程， //也就是说用的是同一个作用域。 } var person = test(); person.eatFood(); person.eatFood(); person.pushFood('banana'); person.eatFood();*/
命名空间的使用 闭包第4功能 模块化开发 /* var wife = (function (){ var name = "xiaoxin"; function LoveName(){ console.log(name); } return function(){ LoveName(); } }()) wife(); //功能实现 不会污染全局变量 使用闭包私有化的功能
立即执行函数的两种格式 针对初始化功能的函数
1.(function(){}());
2.(function(){})();
//只有表达式才能被执行 /* function test() { } var demo = function (){ console.log('a'); }();*/ // 一旦一个表达式被执行，它就会失去对原来函数的缩影，下次这个demo就不是函数，就失去了定义函数的功能，就变成空的。 //在函数面前加+、 -、 ！ 、||、 &&、也会成为立即执行函数 /*(function test () { console.log('a'); })(); (function test (){ console.log('a'); }());*/ //这2种都是立即执行函数
function test(){ var arr=[]; for(var i= 0;i<10;i++) { arr[i]=function(){ document.write(i+" "); } // 这个函数被执行时 i才会改变 也就是说这个函数里面打印i的值不会随for循环的i改变而改变，只有这个函数在外部执行 i的时候，在返回去找i的值，i已经for循环变成10了，所以输出的i为10； } // 先将for循环转完 在返回 arr ，返回的结果为10； return arr; } var myArr = test(); for(var j =0;j<10;j++) { myArr[j]();//执行这个的时候就会去执行document.write(i+" "); } */
function test() { var arr=[]; for(var i = 0;i<10;i++){ (function (j) { arr[j] =function(){ document.write(j+" "); } }(i)) //立即执行函数 当i经过for循环将值传递给j时，每次循环里面的函数保存的值都是当前j的值，然后传递给arr，每次立即函数执行玩就销毁了 进行下次循环，重新开始，每次保存的都是0~9的值，不同的传递给arr，输出的就是0~9，但是i还是10 ，
因为是打印的j的值。 } //立即执行函数放在for循环的时候，比如说循环10次， 立即执行函数就相当于写了10次立即执行函数，每一次循环都产生了新的立即执行函数。 return arr; } var myArr=test(); for(var j = 0; j < 10; j++) { myArr[j](); }*/
1.对象
1.对象的创建方法 直接 var obj={}；
2.构造函数 1.系统自带的构造函数 Object 2.自定义
var obj =new Object（）； //执行一次 产生一个对象，对象一样，但时两个不同的人 obj.name = 123 obj.say =function(){} 这样就能直接往obj里面加属性
自定义函数格式
//大坨峰式命名规则 函数首字母大写 function Person(){} var person =new Person(); 构造函数 往里面加东西 直接 person.name = 123
构造函数内部的原理
1.在函数体最前面隐式的加上 this={}
2.执行this.xxx=xxx;
3.隐式的返回this 执行new 才能发生这三步
对象的用法
var mrLi = { name : "mrLi", sex : "male", age : 15, wife : "xiaoxin", smoke : function(){ console.log("I am smoke!!! cool!") }, drink : function(){ console.log("I like mile!!!"); } } */ //增加对象 // mrLi.health=100; //删除对象 //delete mrLi.health;
//定义对象的方式 ( 构造函数) /* function Person(name,height){ var that = {}; that.name = name; that.height = height; return that; } var person = Person('xiaoxin',180); var person1 = Person('xiaoli',175);*/
包装类
var num = 4; num.len=3; console.log(num.len); //new Number (4).len=3 delete 会先新建一个用来存储 ，然后删除，在新建一个 就变成了 new Number（4）.len 返回的undefined
原型
#原型
原型的本质：对象
.所有引用类型都有一个_proto_(隐式原型)属性，属性值是一个普通的对象
- 所有的**函数**都有原型属性“prototype”
- 默认情况下，”prototype“ 是一个Object对象
prototype中默认包含一个属性：constructor，该属性指向函数对象本身
#隐式原型
-所以的对象都有隐式原型 "__proto__"属性
-隐式原型是一个对象，指向创建该对象的构造函数的原型“prototype”
-在查找对象成员时，若对象本身没有该成员，则会到隐式原型中查找
扩充内容>隐式原型和原型出现的根本原型：js没有记录类型的元数据，因此，js只能
通过对象的隐式原型找到创建它的函数的原型，从而确定其类型
所有的引用类型，_proto_属性值指向它的构造函数的"prototype"属性值
所有函数的隐式原型，都指向Function的原型
所有的函数原型的隐式原型，都指向Object的原型
//原型的增删改查 Person.prototype.LastName="Li";//只能重新增加原型赋值才能增加原型 function Person(name){ this.name=name; } var person=new Person("xiaoxin"); person.LastName="xiaoxinxin"; // person.constructor可以找到它的构造函数 //只能改变对象，使对象的值改变，不可能通过对象去改变原型的值。 //当原型属性多的话可以这样写 Person.prototype={ wife:"xiaoxin", laogong:"xiaoxin", height:1400 }*/
原型链
-由于原型“prototype”本身时对象，因此，它也有隐式原型，指向的规则不变；这样
一来，从某个对象出发，依次寻找隐式原型的指向，将形成一个链条，该链条叫做原型链。
-在查找对象成员时，若对象本身没有该成员，则会到原型链中查找
-特殊的两个情况
-Function的隐式原型指向自己的原型
- Object原型的隐式原型指向null
//Grand.prototype.prototype 指向的是object.prototype //object.prototype是原型链的终端 /* Grand.prototype.LastName="Deng"; function Grand(){ } var grand =new Grand; Father.prototype = grand; function Father(){ this.name = 'xiaoxin'; this.fortune = { card1:'visa' } } var father = new Father (); Son.prototype=father; function Son(){ this.hobbit="smoke"; } var son = new Son(); //这是原型链 连接原型链的是prototype. 一路顺着protorype找到值. //原型链的增删改查 和原型的差不多 只能自身改，不能通过它的子孙改. //son.fortune.card2 ='xiaoxin'可以通过这样去改变或增加父亲的值 */
apply() 和call()相同点：这两个方法的作用是一样的。
都是在特定的作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。
一般来说，this总是指向调用某个方法的对象，但是使用call()和apply()方法时，就会改变this的指向。
2不同点：接收参数的方式不同。
apply()方法 接收两个参数，一个是函数运行的作用域（this），另一个是参数数组。
语法：apply([thisObj [,argArray] ]);，
调用一个对象的一个方法，2另一个对象替换当前对象。
说明：如果argArray不是一个有效数组或不是arguments对象，那么将导致一个
TypeError，如果没有提供argArray和thisObj任何一个参数，那么Global对象将用作thisObj。
call()方法 第一个参数和apply()方法的一样，但是传递给函数的参数必须列举出来。
语法：call([thisObject[,arg1 [,arg2 [,...,argn]]]]);，
应用某一对象的一个方法，用另一个对象替换当前对象。
说明： call方法可以用来代替另一个对象调用一个方法，call方法可以将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象，如果没有提供thisObj参数，那么Global对象被用于thisObj。
call的运用 /* function Person(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } function Student (name,age,sex,tel,grade){ //var this ={} Person.call(this,name,age,sex);//借用别人的函数 实现自己的功能 相当于把Person 的3个功能调用过来了 this.tel = tel; this.grade = grade; } var student = new Student('sunny',123,'male',139,2017);
function Wheel(wheelSize,style) { this.wheelSize=wheelSize; this.style=style; } function Sit (c,sitColor) { this.c=c; this.sitColor =sitColor; } function Model (height,width,len){ this.height=height; this.width=width; this.len = len; } function Car(wheelSize,style,c,sitColor,height,width,len){ Wheel.apply(this,[wheelSize,style]); Sit.call(this,c,sitColor); Model.call(this,height,width,len); } var car = new Car(62,'花里胡哨','真皮','black',52,52,32);*/
this的含义及理解
1.函数预编译过程 this-->window
2.全局作用域里 this -->window
3.call/apply 可以改变函数运行时this的指向
4.obj.func(); func()里面的this指向obj
//js 圣杯模式 Father.prototype.LastName="xiaoxin"; function Father() { this.name ="xaf" } function Son(){ } var inherit = (function(){ function F(){ }; return function (Target,Origin){ F.prototype = Origin.prototype; Target.prototype = new F(); Target.prototype.constructor=Target; } }()) inherit(Son,Father); 这样给son.prototype加属性就不会影响到Father.prototype 而且还继承了Father.prototype 通过原型链的继承 Son.prototype.wife="asff"; var son = new Son(); var father = new Father();
对象的枚举
1. for in
var obj = { name : "xiaoxin", age :123, sex : 'female', height : 180, weight : 75, __proto__ :{ lastName : "xiaoli", } } for (var x in obj){ console.log(obj[x]); //它会通过原型链 将__proto__里面的属性访问出来 }
1. hasOwnProperty 判断是否 是自身的属性
for(var x in obj){ if(obj.hasOwnProperty(x)){ //这个if是判断自己属性 不会去找属性里面的原型或原型链 如果是自己的属性就输出 不是就不会输出 console.log(obj[x]); }
2. instanceof 用法
function Person (){ } var person = new Person(); // 看A对象 是不是 B构造函数 构造出来的 // 但看的是 A对象的原型链上 有没有 B的原型 //person instanceof Person
DOM——>Document.Object.Model 用来操作html xml功能的一类对象的集合
DOM基本操作
1.遍历节点树 +遍历元素节点树+节点的类型+节点的属性
// 遍历节点树 任何浏览器都好使 /*var strong = document.getElementsByTagName('strong')[0] strong.parentNode //存的是他父亲 是div strong.parentNode.parentNode //存的是div的父亲 body strong.parentNode.parentNode.parentNode //存的是body的父亲 html var div = document.getElementsByTagName('div')[0]; div.childNodes //存的是div的所有子节点 包括文本节点也算在里面 div.firstChild // 存的是第一个节点 文本节点 div.lastChild //存的是最后一个节点 也是文本节点 strong.nextSibling //存的是下一个兄弟节点 文本也算节点*/ //strong.previousSibling//存的前一个兄弟节点 //基于元素节点树的遍历 //var div = document.getElementsByTagName('div')[0]; // div.parentElement 返回当前元素的父元素节点 返回的是父亲节点 里面包括这个父亲里面所有的子节点 // div.children 返回当前元素的子元素节点 但返回的是当前元素里面所有的子节点 //div.childElementCount ===div.children.length 返回的是当前元素子节点的数量 //div.firstElementChild 返回第一个元素子节点 //div.lastElementChild 返回最后一个元素子节点 //div.nextElementSibling 返回后一个兄弟节点 //div.previousElementSibling 返回前一个兄弟节点 //节点的类型 // 元素节点——1 属性节点——2 （id class 是属性节点） 文本节点——3 // 注释节点——8 document——9 DocumentFragment——44 //获取节点属性 nodeType //节点的4个属性 //var div = document.getElementsByTagName('div')[0]; //div.firstChild.nodeName 返回的是第一个节点的名字 //div.childNodes[1].nodeName 返回第2个节点名称 只可读 不可改 //div.childNodes[0].nodeValue 可以返回的是文本内容,可修改里面的值 注释也能修改 //div.childNodes[0].nodeType //返回的是节点类型 不可改 是数值 //div.hasChildNodes() 判断div是否有子节点 //空格回车也算节点是文本节点 除非里面什么都没有才输出flase 输出true或flase //DOM元素的增删插替换 /* var div = document.getElementsByTagName('div')[0]; var text = document.createTextNode('鑫baobao'); var span = document.createElement('span'); div.appendChild(text); div.appendChild(text); var text1=document.createTextNode('小鑫宝宝'); span.appendChild(text1); document.body.appendChild(span);*/ //插入节点 /* var div = document.getElementsByTagName('div')[0]; var span = document.getElementsByTagName('span')[0]; var strong = document.createElement('strong'); div.insretBefore(strong,span); //会在span标签之前插入strong标签*/ //删除标签 /* var div = document.getElementsByTagName('div')[0]; var span = document.getElementsByTagName('span')[0]; div.removeChild(span);//剪切出来 给变量保存 还要用的情况下 span.remove()//彻底删除标签 这是没有用的情况下 要将标签先取出来 才能删除*/ //标签替换 /* var div = document.getElementsByTagName('div')[0]; var p = document.createElement('p'); var i = document.getElementsByTagName('i')[0]; div.replaceChild(p,i); //新创建的p标签和div里面的i标签替换了*/ //innerHTML /* var div = document.getElementsByTagName('div')[0]; div.innerHTML = 234;//可以改变div里面的值 div.innerHTML = "<span style = 'backgroundColor:red;>123</span> "//也可以这样写 var b = div.innertext; //取文本内容 div.setAttribute('class','demo')//为div加一个属性值 class："demo"; */ //getAttribute 的用法 var div = document.getElementsByTagName('div')[0]; var a = document.getElementsByTagName('a')[0]; a.onclick = function(){ console.log(this.getAttribute('data-log')); }
格式：标签名.parentNode->父节点
<script type="text/javascript"> //带s的都是选择一组 除了id以外，都是选择一组，有组就能循环遍历 var div =document.getElementById('only');//通过Id选择元素 var div =document.getElementsByTagName('div');//通过标签名选择元素，将页面里面所有的div选择出来 var div = document.getElementsByClassName('demo')[0];//通过class名来选择元素加个[0]是单独选择一个 var div =document.getElementsByName('fruit');// 只有标签中带有name的属性 才能使用 var strong = document.querySelector('div > span strong.demo1');//跟css选择器一样 写在括号里面 var strong = document.querySelectorAll('div >span strong.demo1 ') var div = document.getElementsByTagName('*')[0];//选择所有标签 var div = document.querySelectorAll('div'); //body里面有多少个div 它就有多少,后面无论添加删除 它只有body里面的所有div var newDiv =document.createElement('div'); //创建一个div document.body.appendChild(newDiv);//将创建的div放进body中 </script>
DOM元素的增删改查
增：1.document.createElement();创建一个元素节点方法 ()里面写什么就会创建什么标签 2.document.createTextNode(); 创建文本节点 3.document.createComment();创建注释节点 4.document.createDocumentFragment(); 插 1. document.appendChild(); 插入元素，或文本节点的 2.document.insertBefore(a,b) 会b标签之前插入a标签 删 1.parent.removeChild(); 如果标签还要用,可以用这个剪切出来, 用个变量保存 2.child.remove();彻底删除标签 替换 parent.replaceChild(new,origin) 用新的元素替换老的元素
Element节点的一些属性
1. document.innerHTML 往标签里面插入内容 2.innerText（火狐不兼容）/ textContent(老版本IE不兼容) 2.Element节点的一些方法 1.document.setAttribute('class','demo'); 为这个标签添加了一个属性值 2.document.getAttribute(); 取出标签里面的属性 比如data-log 3.dom.className=“”可以在标签里面添加class属性
日期对象Date()
Date 对象用于处理日期与时间。
创建 Date 对象： new Date()
先创建一个Date对象 var date=new Date(); date.getDate();从Date对象返回一个月中的某一天 date.getDay() 从Date对象返回一周中的某一天 date.getFullYear() 从 Date 对象以四位数字返回年份。 date.getHours() 返回Date对象的小时 date.getMinutes() 返回对象的毫秒 date.getMonth() 返回对象的月份 date.getSeconds() 返回对象的秒数 date.setFullYear() 设置Date对象中的年份(四位数字)
对Date的扩展，将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) //
Format将日期格式化
例子： // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 // (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
js计时事件
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。
注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法
setInterval()方法
语法 window.setInterval("javascript function",milliseconds); window.setInterval() 方法可以不使用 window 前缀，直接使用函数 setInterval()。 setInterval() 第一个参数是函数（function）。 第二个参数间隔的毫秒数 注意: 1000 毫秒是一秒。
格式加用法
setIntervar(function(){},1000)
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
语法 window.clearInterval(intervalVariable) window.clearInterval() 方法可以不使用window前缀，直接使用函数clearInterval()。 要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量： myVar=setInterval("javascript function",milliseconds); 然后你可以使用 clearInterval() 方法来停止执行。 格式加用法 var timer = setInterval(unction(){},1000) clearInterval(timer)
setTimeout()方法
语法 myVar= window.setTimeout("javascript function", milliseconds); setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 myVar 的变量中。
假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。 setTimeout() 的第一个参数是含有 JavaScript 语句的字符。 第二个参数指示从当前起多少毫秒后执行第一个参数。 提示：1000 毫秒等于一秒。 格式加用法 setTimeout(function(){},1000)
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码
语法 window.clearTimeout(timeoutVariable) window.clearTimeout() 方法可以不使用window 前缀。 要使用clearTimeout() 方法, 你必须在创建超时方法中（setTimeout）使用全局变量: myVar=setTimeout("javascript function",milliseconds); 如果函数还未被执行，你可以使用 clearTimeout() 方法来停止执行函数代码。 格式加用法 var timer=setTimeout( function(){},1000); clearTImeout(timer)
语法 window.clearTimeout(timeoutVariable) window.clearTimeout() 方法可以不使用window 前缀。 要使用clearTimeout() 方法, 你必须在创建超时方法中（setTimeout）使用全局变量: myVar=setTimeout("javascript function",milliseconds); 如果函数还未被执行，你可以使用 clearTimeout() 方法来停止执行函数代码。 格式加用法 var timer=setTimeout( function(){},1000); clearTImeout(timer)
语法 window.clearTimeout(timeoutVariable) window.clearTimeout() 方法可以不使用window 前缀。 要使用clearTimeout() 方法, 你必须在创建超时方法中（setTimeout）使用全局变量: myVar=setTimeout("javascript function",milliseconds); 如果函数还未被执行，你可以使用 clearTimeout() 方法来停止执行函数代码。 格式加用法 var timer=setTimeout( function(){},1000); clearTImeout(timer)
浏览器对象模型(BOM)
Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
Window 尺寸
有三种方法能够确定浏览器窗口的尺寸。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
Window Screen
window.screen对象在编写时可以不使用 window 这个前缀。
一些属性：
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
Window Location
window.location 对象在编写时可不使用 window 这个前缀。 一些例子：
一些实例:
location.hostname 返回 web 主机的域名 location.pathname 返回当前页面的路径和文件名 location.port 返回 web 主机的端口 （80 或 443） location.protocol 返回所使用的 web 协议（http: 或 https:
Window History
window.history对象在编写时可不使用 window 这个前缀。
为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。
一些方法：
history.back() - 与在浏览器点击后退按钮相同 history.forward() - 与在浏览器中点击向前按钮相同
除此之外可以用 history.go() 这个方法来实现向前，后退的功能
function a(){
history.go(1); // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面 } function b(){ history.go(-1); // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面 }
1.DOM基本操作
1.查看滚动条的滚动距离
1.1 window.pageXOffset pageXOffset表示水平方向上页面滚动的像素值
1.2window.pageYOffset pageYOffset表示垂直方向上页面滚动的像素值 IE9以上能用 IE8及IE8以下不兼容
2.document.(body/document.Element).scrollLeft 横向滚动条
2.1document.(body/document.Element).scrollTop 纵向滚动条
兼容性比较混乱，用时取两个值相加，因为不可能存在两个同时有值，其中一个会变成0
1.查看元素的几何尺寸
1.1document.getBoundingClientRect();
1.2兼容性很好
1.3该方法返回一个对象，对象里面有left，top，right，bottom等
left 和top代表该元素的左上角的X和Y坐标，right和bottom代表右下角的X和Y坐标
1.4 height和width属性老版本IE并未实现
1.5返回的结果不是实时的
取值：
document.getBoundingClientRect().left 左上角的坐标
1.查看元素的位置
1. document.offsetLeft
1.1 document.offsetTop
1.2对于无定位父级的元素，返回相对文档的坐标， 对于有父级的元素，返回相对于最近的有定位的父级的坐标
1.3 document.offsetParent 返回最近的有定位的父级，如无，返回body，body.offsetParent
1.4查看元素的尺寸 1.document.offsetWidth 元素的宽度 2document.offsetHeight 元素的高度
让滚动条滚动
1.window有三个方法
1.1 scroll() 1.2scrollTo() 1.3scrollBy()
1.4 三个功能类似，用法都是将X，Y坐标传入。即实现让滚动轮滚到当前位置
1.5 区别：scrollBy（）会在之前的数据基础上做累加
使滚动条滚动位置 直接调用该方法就行
事件的几种类型
1
ele.onxxx = function(event){} 但是一个元素的同一事件只能绑定一个 等同于写在HTML里面
2
obj.addEventListener(type,fn,false); 可以为一个事件绑定多个处理程序
3
obj.attachEvent('on'+type,fn) IE独有 同样可以为一个事件绑定多个处理类型
事件处理程序的运行环境
1
ele.onxxx=function(event){} 程序里面的this指向dom元素本身
2
obj.addEventListener(type,fn,false); 程序里的this指向dom元素本身
3
obj.attachEvent('on'+type,fn); 程序this指向window
解除事件处理程序
1
ele.onclick = false/''/null;
2
ele.removeEventListener(type,fn,false); 和 ele.addEventListener里面的事件类型 函数 要对应
3
ele.detachEvent('on'+type,fn); 注意 若绑定匿名函数，则无法解除
事件处理模型——事件冒泡、捕获
1事件冒泡 ： 结构上（非视觉上）嵌套关系的元素，会有在事件冒泡的功能，即同一事件自子元素冒泡向父元素.(自底向上)。
2事件捕获： 结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）.（自顶向下）
只需将addEventListener里false改为true就会捕获 （IE没有捕获事件）
3触发顺序：先捕获，后冒泡（前提是绑定两个函数，一个为捕获，一个为冒泡）
4 focus、blur、change、submit、rest、select等不冒泡
取消冒泡和阻止默认事件
1 取消冒泡 1 .W3C标准 event.stopPropagation();但不支持IE9一下版本 2、IE独有 event.cancelbubble= true;
2 阻止默认事件
1 默认事件——表单提交，a标签跳转，右键菜单等
2 return false；以对象属性的方法注册的事件才生效
3 event.preventDefault()；W3C标准 IE9一下不兼容
4 event.returnValue= false; 兼容IE
事件对象
1 event || window.event 用于IE 获取对象属性
2 事件源对象 1.event.target 火狐只有这个 2.event.srcElement IE只有这个
3 这两个 chrome都有
事件委托
1 利用事件冒泡和事件源对象进行处理
2 优点 1. 性能不需要循环所有的元素一个个绑定事件 2.灵活 当有新的子元素时不需要重新绑定事件
js添加和删除class类名
方法1.
添加：document.getElementById("id").classList.add("类名")；
删除：document.getElementById("id").classList.remove("类名")；
方法2
var classVal=document.getElementById("id").getAttribute("class");
添加：document.getElementById("id").setAttribute("class",classVal.concat(" 类名"));
删除：document.getElementById("id").getAttribute("class").replace("类名"," ");
方法3.
添加：document.getElementById("id").className+=" 类名";
JS事件（重要之最）
onclick鼠标点击时触发此事件
ondblclick鼠标双击时触发此事件
onmousedown按下鼠标时触发此事件
onmouseup鼠标按下后松开鼠标时触发此事件
onmouseover当鼠标移动到某对象范围的上方时触发此事件
onmousemove鼠标移动时触发此事件
onmouseout当鼠标离开某对象范围时触发此事件
onkeypress当键盘上的某个键被按下并且释放时触发此事件
.onkeydown当键盘上某个按键被按下时触发此事件
onkeyup当键盘上某个按键被按放开时触发此事件页面相关事件
onabort图片在下载时被用户中断
onbeforeunload当前页面的内容将要被改变时触发此事件
onerror出现错误时触发此事件
onload页面内容完成时触发此事件
onmove浏览器的窗口被移动时触发此事件
onresize当浏览器的窗口大小被改变时触发此事件
onscroll浏览器的滚动条位置发生变化时触发此事件
onstop浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断onunload当前页面将被改变时触发此事件表单相关事件
onblur当前元素失去焦点时触发此事件
onchange当前元素失去焦点并且元素的内容发生改变而触发此事件
onfocus当某个元素获得焦点时触发此事件
onreset当表单中RESET的属性被激发时触发此事件onsubmitIE3 、N2一个表单被递交时触发此事件滚动字幕事件onbounceIE4、N在Marquee内的内容移动至Marquee显示范围之外时触发此事件
onfinish当Marquee元素完成需要显示的内容后触发此事件
onstart当Marquee元素开始显示内容时触发此事件编辑事件
onbeforecopy当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件
onbeforecut当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件
onbeforeeditfocus当前元素将要进入编辑状态
onbeforepaste内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件onbeforeupdateIE5、 N当浏览者粘贴系统剪贴板中的内容时通知目标对象
oncontextmenu当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件
oncopy当页面当前的被选择内容被复制后触发此事件
oncut当页面当前的被选择内容被剪切时触发此事件
ondrag当某个对象被拖动时触发此事件 [活动事件]
ondragdrop一个外部对象被鼠标拖进当前窗口或者帧
ondragend当鼠标拖动结束时触发此事件，即鼠标的按钮被释放了
ondragenter当对象被鼠标拖动的对象进入其容器范围内时触发此事件
ondragleave当对象被鼠标拖动的对象离开其容器范围内时触发此事件
ondragover当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragstart当某对象将被拖动时触发此事件
ondrop在一个拖动过程中，释放鼠标键时触发此事件
onlosecapture当元素失去鼠标移动所形成的选择焦点时触发此事件
onpaste当内容被粘贴时触发此事件onselectIE4、N当文本内容被选择时的事件
onselectstart当文本内容选择将开始发生时触发的事件数据绑定
onafterupdate当数据完成由数据源到对象的传送时触发此事件
oncellchange当数据来源发生变化时
ondataavailable当数据接收完成时触发事件
ondatasetchanged数据在数据源发生变化时触发的事件
ondatasetcomplete当来子数据源的全部有效数据读取完毕时触发此事件
onerrorupdate当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件
onrowenter当前数据源的数据发生变化并且有新的有效数据时触发的事件
onrowexit当前数据源的数据将要发生变化时触发的事件
onrowsdelete当前数据记录将被删除时触发此事件
onrowsinserted当前数据源将要插入新数据记录时触发此事件外部事件
onafterprint当文档被打印后触发此事件
onbeforeprint当文档即将打印时触发此事件
onfilterchange当某个对象的滤镜效果发生变化时触发的事件
onhelp当浏览者按下F1或者浏览器的帮助选择时触发此事件
onpropertychange当对象的属性之一发生变化时触发此事件
onreadystatechange当对象的初始化属性值发生变化时触发此事件
transitionend 事件
定义和用法
transitionend 事件在 CSS 完成过渡后触发。
注意： 如果过渡在完成前移除，例如 CSS transition-property 属性被移除，过渡事件将不被触发。
更多关于 CSS 过渡，请查看我们的 CSS3 过渡。
语法
object.addEventListener("transitionend", myScript); // Standard syntax
注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。
事件处理程序的运行环境
1. documen.onxxx =function(event) 程序this指向的时dom元素本事
2.addEventListener() 方法
addEventListener() 方法用于向指定元素添加事件句柄。 addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。 你可以向一个元素添加多个事件句柄。 你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。 你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。 addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。 当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。 你可以使用 removeEventListener() 方法来移除事件的监听。
element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 "click" 或 "mousedown"). 第二个参数是事件触发后调用的函数。 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。 true 或flase
注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
格式 element.addEventListener("click", function(){ myFunction(p1, p2); });
3.document.attachEvent('on'+type,function);
type指的是事件 程序this指的是window
格式 div.attachEvent('onclick',function(){ handle.call(div); 这样handle函数就指向divl })
解除事件处理程序
1.ele.οnclick=false / "" / null
2.ele.removeEventListener(type,function,false) type是事件 解除事件 时 事件和函数要对应
3.ele.detachEvent('on'+type,function) 注意 若绑定匿名函数，则无法解除
取值区间
\w===[0-9,A-z] \W===[^\w] \d===[0-9] \D===[^\d] \s===[\t \n \r \v \f] \S===[^\s] \b===单词边界 \B===非单词边界 .===[^\r \n]
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
语法 eval(string) 参数 string必需 要计算的字符串，其中含有要计算的javascript表达式或要执行的语句
返回值
通过计算 string 得到的值（如果有的话）。
说明
该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。
如果试图覆盖 eval 属性或把 eval() 方法赋予另一个属性，并通过该属性调用它，则 ECMAScript 实现允许抛出一个 EvalError 异常。
抛出
如果参数中没有合法的表达式和语句，则抛出 SyntaxError 异常。
如果非法调用 eval()，则抛出 EvalError 异常。
如果传递给 eval() 的 Javascript 代码生成了一个异常，eval() 将把该异常传递给调用者。
：虽然 eval() 的功能非常强大，但在实际使用中用到它的情况并不多。
3914
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
