前端开发JavaScript介绍
摘要： html5 web前端开发工具 ios前端开发工具 jsp前端开发工具 A.起源 1.JavaScript可以分为三部分：核心，客户端以及服务器。核心是语言的内核，包含操作符，表达式，语句以及程序。客户端应用的JavaScri……
| html5 web前端开发工具 |
| ios前端开发工具 |
| jsp前端开发工具 |
A.起源
1.JavaScript可以分为三部分：核心，客户端以及服务器。核心是语言的内核，包含操作符，表达式，语句以及程序。客户端应用的JavaScript是一组对象的集合，利用这些对象可以对浏览器和用户交互进行控制。服务器的javaScript也是一组对象的集合，这些对象可应用于web服务器编程，如支持与数据库管理系统之间的通信，
B.JavaScript与Java
1.JavaScript与Java全然不同，其中最重要的区别在于对面向对象编程的支持。
2.java是一种强类型的语言，编译时必须知道类型并检测操作对象的类型是否兼容。而javaScript中的变量无需事先声明，其类型是动态定义的，因此编译时无法进行类型检查。这两种语言之间另外一个更为重要的的区别是Java中的对象是静态的，也就是说，在编译时，对象的数据成员和方法的集合是固定不变的，而JavaScript的对象是动态的———执行时对象的数据成员的方法的数量是可变的。
3.JavaScript与Java之间的主要相似之处体现在表达式的语句，赋值语句以及控制语句方面。
C.JavaScript的用途
1.JavaScript最初的设计目标是为web连接中的服务器和客户终端提供编程能力。
2.客户端的JavaScript可以完成一些本来应该通过服务器端完成的编程任务，如以前是将计算功能驻留在服务器中，然后通过浏览器请求浏览。但是，客户端的JavaScript并不能完全取代所有的服务期计算。尤其是服务器端软件支持的文件操作，数据库访问，网络连接等功能，客户端的JavaScript都不支持。
3.JavaScript的另一个广受关注的功能是建立在文档对象模型DOC基础上。通过DOCJavaScript脚本可以访问并修改某个html文档中任何元素的css属性和内容。
D.浏览器和html/JavaScripts
1.如果一个html文档中没有包含任何嵌入式脚本，那么浏览器将逐行读取这个文档，并将发现标记，属性以及内容呈现在窗口中，如果脚本中包含了javaScript脚本，那么当浏览器遇到这些脚本时，将利用JavaScript解释器来“执行”脚本。当到达脚本的末尾是，浏览器将从解释器中返回，再次开始读取html文档，并显示其中的内容。
2.有两种在html文档中嵌入JavaScript的方法，分别是显式还有隐式。显式嵌入意味着JavaScript代码驻留在html文档中。这一方法有些缺陷，在相同文档中混合两种截然不同的代码使得文档难以阅读，而且有时，创建，维护html的人与创建和维护JavaScript的人不是同一个人。所以让两个不是同一个人干相同的事会引起很多问题。为了避免这些问题，可将JavaScript放在其自己的的文件中，与html文档分离。这成为隐式嵌入。隐式嵌入的优点是，对于浏览器用户来说，脚本是不可见的。它避免了针对较为旧版本浏览器的隐藏脚本的问题。
3.那些只在被请求或响应用户交互时产生内容的脚本应该放在文档头部总的来说，这意味着函数定义和与按钮等元素相关的代码需要放在头部。另一方面，那些别解释器发现后只会解释一次的脚本，需要放在文档主体中。这样，虽然解释器能够发现位于文档头部的脚本，但不会再读取文档时就会对这些脚本进行解释。但是，当解释器发现了位于文档主体中的脚本时就会立即解释。如果使用隐式嵌入，那么这些原则同样适用于引用外部JavaScript文件的XHTML代码。E.浏览器的组成
1.shell部分
2.内核部分
a.渲染部分（语法规则和渲染)
b.js引擎
c.其他模块
F.编程语言
1.编译器
i.编译性语言 java c c++（静态语言）
缺点：可移植性不强
优点：速度快
ii.解释性语言 JavaScript（动态语言）
缺点：慢
优点：跨平台G.js的逼格
1.解释性语言—跨平台
2.单线程
3.ECMA标准
H.js三大部分
1.ECMAScript
2.DOM(控制我们写的html和css和js)
3.BOM(历史记录的回放，操作，返回)
I.如何引入js
1.页面内嵌<script></script>标签。
2.外部引入<script src=”。。。.js”></script>
i.当加载到<script type=”text/javascript”></script>时会堵塞当前html页面其他的加载。
ii.为符合web标准; 结构，样式，行为, 相分离，通常会采用外部引入。G.变量的声明和命名规则
1.变量（用来储存数据的空间）
i.变量声明
声明(var abc;)，赋值(abc = 123;)，分解。
单一var声明法(var abc = 123;)
2.命名规则
i.变量名必须以.英文字母，__，$开头。
i.变量名可以包括,英文字母，__,$，数字。
i.不可以用系统的关键字，保留字作为变量名。
3.同时申请多个变量时
<script type="text/javascript">
var abc = 123,
bcd = 546,
cdf = 234;
</script>
4.<script type="text/javascript">
var abc = "fgh"; （fgh:字符串）
</script>K.基本语法
1.不可改变的原始值（栈数据）
Number,String,Boolean,Undefined,Null
i.<script type=”text/javascript”>
var abc = 123;
abc = null;
说明：abc，不是空的话，就用abc，如果是空的话，就不用了。
</script>
2.引用值(堆数据)
i. array(数组)，
<script type="text/javascript">
var arr1 = [1,2,3,4]
var arr2 = arr1;
arr1.push(5);
document.write(arr1); 输出为 12345
document.write(arr2); 输出为 12345
</script>
ii. object()
iii. function()
3.js语句基本规则
i.语句后面要用分号结束。
ii.js语法错误会引发后续代码终止，但不会影响其他js代码块。如果是基础语法错误，那么当前<script> </script>就不会显示并且执行，如果是逻辑错误，那么会执行当前<script> </script>里面的没有出现错误的语句
iii.书写要规范，“=”号两边都应该有空格。L.基本运算符
1.与 或 非
<script type=”text/javascript”>
&&
特点：全对才为对，如果第一个是错的就立即返回其运算结果，如果第一个不是错的，是对的，就返回最后一个表达式的运算结果。
||
特点：全错才为错，如果有对的就立即返回其运算结果，如果第一个不是对的，就返回最后一个表达式的运算结果。
!
特点：让其当前的数据变成相反的布尔值类型。 [ture or false]
</script>
2.认定为false的值
undefined, null, NaN, "", 0, falseM.条件语句
1.if语句 if ( ) { }
i.if语句中，若将document.write();写出{}，则将不会参与循环，不管if语句判断是否正确，都不会影响大括号外结果的输出。
<script type=”text/javascript”>
var score = parseInt(window.prompt(“请输入数字”));
if (score <= 100 && score > 90){
document.write(“alibaba”);
}else if (score <= 90 && score > 80) {
document.write(“tencent”);
}else if (score <= 80 && score > 70) {
document.write(“jinritoutiao”);
}else if (score <= 70 && score > 60) {
document.write(“baidu”);
}else if{
document.write(“不是我教的”);
}
</script>
2.for循环语句
.可以多条语句，用逗号分隔，但是不可以用分号。
.for循环里面的语句意思是，先执行var i = 0;再看看满不满足第二个分后里面 i < 100 这个条件，若满足执行i++;然后带着i++;后的值再继续循环，直到for为(false)，停止循环，并结束。
.相互等价
<script type="text/javascript" class="one">
for(var i = 0;i < 100; i ++){
}
</script>
<script type="text/javascript" class="two">
var i = 0;
if(i < 100){
document.write(i);
}
i ++;
</script>
3.while循环语句
i.while循环
<script type="text/javascript">
var i = 0;
while(i < 100){
document.write(i)
i ++;
}
</script>
ii.do while:先执行“do”里面的，在执行后面的。
<script type="text/javascript">
var i = 100;
do{
document.write("a")
}while(i > 100);
</script>
4.switch语句
<script type="text/javascript">
var text=123; //条件
switch(text){ //要判断的内容，与case里面的内容进行比较。
case 123:
document.write("the same"); //若switch里面的text与case内容相同，则输出document.write("")里面的内容。
break; //断开，跳出循环。此只可以用在循环里面。此处若是不加，则也会执行下一个语句的输出。
case 234:
document.write("the same");
break;
default:
document.write("others");
}
</script>
<script type="text/javascript">
var week = window.prompt("请输入数字");
switch (week){
case "星期一":
case "星期二":
case "星期三":
case "星期四":
case "星期五":
document.write("working");
break;
case"星期六":
case"星期日":
document.write("rest");
break;
default:
document.write("别开玩笑了");
}
</script>
5.break和continue的区别
i.break是跳出循环，停止当前的循环，直接对当前语句的判断进行输出。
ii.continue是跳过执行下面的语句，直接进行下一次的循环。N.数组
<script type=”text/javascript”>
var arr = [1,true,undefined,”4″,””]
document.write(arr[0]); //取值
document.write(arr.lenghth); //数组的长度
</script>
1.用数组算平均数
<script type="text/javascript">
var arr = [10,23,34,45,56,67,78,89,90];
var a = 0;
var ava;
for(var i = a; i < arr.length - 1; i ++){
a = a + arr[i];
}
ava = a / arr.length;
document.write(ava);
</script>
2.用数组求出最大的数。
<script type="text/javascript">
var arr = [0,23,34,45,156,67,78,89,9]
var a = 0;
for(var i = a; i < arr.length; i ++){
if(arr[i] > a){
a = arr[i];
}
}
document.write(a);
</script>
3.二维数组。
<script type="text/javascript">
var arr = [[1,2,3],[2,3,4],[3,4,5]];
arr[0][0] = 1;
arr[1][2] = 4;
arr[2][2] = 5;
</script>
<script type="text/javascript">
document.write(Number("123"));
parseInt: 将里面的东西变成数字，将浮点型数字变成整型数字。
parseFloat：将里面的东西变成浮点型数字。
string: 将里面的东西变成字符串。
tostring: 将里面的东西变成字符串的形式。
boolean: 将里面的东西变成ture或者false。
isNaN:
</script>O.显示类型转换
1.Number () 将括号里面的的东西强制转换为数字
<script type=”text/javascript”>
例：Number(‘123’) 输出 (number)
Number(‘abc’) 输出 (NaN)
Number(false) 输出 (0)
Number(true) 输出 (1)
Number(null) 输出 (0)
</script>
2.parseInt(string,radix) 将string字符串强制转换为整型数字
a.<script type="text/javascript">
例： parseInt("123.1") 输出 (123)
parseInt("124.1.2") 输出 (123)
parseInt("123abc1234") 输出 (123)
说明：(1).如果括号内写的是字符串型的"123.2.4",则输出成123.2;如果括号内写成的是数字型的123.2.4,那么会输出报错。
</script>
b.<script type="text/javascript">
var a = 123;
document.write(parseInt(a,16)); （将123看成16进制的123，再将其转换为10进制的数。）
</script>
3.parseFloat(string) 将string字符串强制转换为浮点型数字
<script type="text/javascript">
例：parseFloat("123.2") 输出 (123.2)
parseFloat("123.2.4") 输出 (123.2)
parseFloat(123.2.4) 输出 (报错)
说明：(1).如果括号内写的是字符串型的"123.2.4"或者是123.2,则输出成123.2;如果括号内写成的是数字型的123.2.4,那么会输出报错，若原始数据无浮点型，则将输出整型数字。
</script>
4..toString(radix) 想要把谁转换成字符串就把他放在点的前面。
a.<script type="text/javascript">
例：var a = 123;
document.write(a.toString());
说明：(1).不可以直接写成【123.toString】，必须先声明变量。
(2).Undefined和null不可用.toString(radix)调用。
(3).这里的string，“s” 要大写。
</script>
b.<script type="text/javascript">
例：var a = 123;
document.write(a.toString(16));（将123看成是10进制的转换成16进制的）
</script>
5.String()（将括号内个东西转换成字符串的形式）
<script type="text/javascript">
例:document.write(String(123)); 输出 （字符串型的"123"）
</script>
6.Boolean() （将括号内的判断为“true” 或者 “False”）
只有这六个值为【False】undefined,null,NaN,"",0,false。
<script type="text/javascript">
document.write(Boolean());
</script>P.隐式类型转换
1.isNaN() （隐式调用Number()，将里面的东西转换成数字,再看转换后的是不是数字型。）
<script type=”text/javascript”>
例：var a = 123;
document.write(isNaN(a));
说明：这里必须先声明变量，不可以直接将变量值放入isNaN()的括号内。
</script>
2.++/-- /+ / -（在进行运算时，也是先会调用显示类型转换Number()，转换为数字类型在进行运算，若不能转换为数字，则将显示NaN。）
<script type="text/javascript">
例：var a = "123";
document.write(++a); 输出 【124】
例：var a = "abc";
document.write(++a); 输出 【NaN】
说明：这里必须先声明变量，不可以直接将变量值放入isNaN()的括号内。
</script>
3.* / % / / （在进行运算时，也是先会调用显示类型转换Number()，转换为数字类型在进行运算，若不能转换为数字，则将显示NaN。）
<script type="text/javascript">
例：document.write(1 * 2); 输出 【2】
document.write("2" * 2); 输出 【4】
document.write("a" * 2); 输出 【NaN】
</script>
4.&& / || / !（隐式调用显示类型转换Boolean()）
<script type="text/javascript">
例：var a = "";
document.write(!a); （ 说明”undefined,null,false,NaN,0,"";输出为ture。)
</script>
5.< / > / <= / >= （只有数字和字符串相比，或者数字和布尔类型相比）
<script type="text/javascript">
例: document.write(1 > "a"); 输出 【false】
例: document.write(1 > "2"); 输出 【false】
例: document.write("3" > "2"); 输出 【ture】
</script>Q.不发生类型转换
- === / ！== （绝对等于和绝对不等于）
<script type=”text/javascript”>
例：if(1 === “1”){
document.write(‘绝对等于’);
}else{
document.write(‘绝对不等于’);
}
</script>
R.特殊情况
<script type=”text/javascript”>
var a;
document.write(a); 【会出错】
</script>
<script type="text/javascript">
document.write(typeof(a)); 【undefined】
</script>
<script type="text/javascript">
NaN 不等于任何东西。
</script>S.函数function()
a.<script type=”text/javascript”>
function test(a){
document.write(a);
}
test(47);
</script>
分解为：
<script type=”text/javascript”>
test();
var a;
a = 47;
document.write(47);
</script>
b.函数的类数组
<script type="text/javascript">
function test(a,b,c,d){
// arguments[0] 接收外面传进来的实参。
// arguments[1]
// 。 。 。
document.write(a + b);
}
test(1,2);
说明：(1)test.length 为形参的长度
(2)arguments.length 为实参的长度
</script> 输出为 【3】
<script type="text/javascript">
function test(a,b,c,d){
if(test.length > arguments.length){
document.write('形参的长度大于实参');
}else{
document.write('形参的长度小于实参');
}
}
test(1,2);
</script>T.返回值（有时会利用这些返回值进行一些其他运算）return返回的值代表的是整个函数的数值。
1.
<script type=”text/javascript”>
function a(a1){
return ‘abc’;
}
document.write(a());
</script> 输出为 【abc】
2.终止函数不会在执行输出。
<script type="text/javascript">
function a(a1){
return 'abc';
document.write('bcd');
}
document.write(a());
</script> 输出为 【abc】
3.实验（赋值是从右往左，第一个函数是先执行的a(2,4)进行计算，在将数值赋给b。
<script type="text/javascript">
function a(a1,a2){
var ret = "";
ret = a1 + a2;
return ret;
}
var b = a(2,4);
document.write(b + '123');
</script> 输出为 【6123】
<script type="text/javascript">
function a(a1,a2){
var ret = "";
ret = a1 + a2;
return ret;
}
document.write(a(2,4) + '123');
</script> 输出为 【6123】
4.斐波那契数列（上下两个函数相等，区别在于递归公式的应用）
<script type="text/javascript">
var input = parseInt(window.prompt('请输入数字'));
function a(n){
if(n == 1 || n == 2){
return 1;
}
return a(n - 1) + a(n - 2);
}
document.write(a(input));
</script>
<script type="text/javascript">
var input = parseInt(window.prompt('请输入数字'));
function a(n){
if(n == 1 || n == 2){
return 1;
}
b = a(n - 1) + a(n - 2);
return b;
}
document.write(a(input));
</script>
5.递归公式
<script type="text/javascript">
function a(b){
return b * a(b - 1);
}
document.write(a(3));
</script>
说明：b为5的话
(1) return b * a(b - 1)
(2) return (b - 1) * (b - 2)
(3) return (b - 2) * (b - 3)
(4) return (b - 3) * (b - 4)U.作用域和作用域链的精解
a.作用域定义：变量（变量作用于又称上下文）和函数生效（能被访问）的区域。
b.[[scope]]每个javascript函数都是一个对象，对象中有些属性我们可以访问，但有些不可以访问，这些属性仅提供javascript引擎存取，[[scope]]就是其中一个。[[scope]]指的就是我们所说的作用域，其中存储了运行期上下文的集合。
c.作用域链：[[scope]]中所储存的执行期上下文对象的集合，这个集合呈链式链接，我们把这种链式链接叫做作用域链。
d.运行期上下文：当函数执行时，会自动创建一个称为执行期上下文的内部对象，一个执行器上下文定义了一个函数执行时的环境，函数每次执行时对应的执行上下文都是独一无二的，所以多次调用一个函数会导致创建多个执行上下文，当函数执行完毕，执行上下文被销毁。
d.查找变量：从作用域链的顶端依次向下查找。
e.示例题
说明：先定义，后执行，先执行全局定义，从外往里，先定义，然后查找，最后执行。执行输出的结果也是先是最里面的函数先执行输出显示，然后一层一层往外输出显示。
<script type="text/javascript">
var glob = 110;
function a(){
var aaa = 123;
function b(){
var bbb = 234;
function c(){}
document.write(eee);
}
b(); 输出 【 】
说明：因为var eee = 111;在同一级函数function e(){}里面，因为不是同一级，所以看不到函数function e(){}里面的东西。
function e(){
var eee = 111;
document.write(glob);
}
e(); 输出 【110】
}
a(); 输出 【 】
</script>V.闭包
说明:（当内部函数被保存到外部时，将会生成闭包。闭包导致原有作用域链不释放，造成内存泄露。）
1.
<script type=”text/javascript”>
function a(){
function b(){
var bbb = 234;
document.write(aaa);
}
var aaa = 123;
return b;
}
var glob = 100;
var demo = a();
demo();
</script>
2.闭包的作用
(1)实现共有变量：函数累加器
<script type="text/javascript">
var fruit = 'apple';
function eat1(){
return{
eat:function(){
if (fruit != ''){
document.write('I am eatting' + ' ' + fruit);
document.write('<br>');
fruit = '';
}else{
document.write('There is nothing');
document.write('<br>');
}
},
put:function (myFruit) {
fruit = myFruit;
}
}
}
var eater = eat1();
(1) eater.eat();
(2) eater.eat();
(3) eater.put('banana');
eater.eat();
</script>
(2)可以做缓存：eater
(3)可以实现封装，属性私有化
<script type="text/javascript">
function a(){
var name = 'Qu';
return {
say : function (){
document.write(name);
}
}
}
var oPerson = new a();
oPerson.say();
</script>| 前端开发工具 api |
| 前端开发工具fe助手 |
| sql前端开发工具 |
W.立即执行函数 （进行页面和变量的初始化）
说明：(1).下面三种方法，外面的大括号是先外面把里面的函数变成表达式，然后后面的小括号的意思是执行输出。
(2).立即执行函数可以解决函数闭包的情况。
1.第一种写法
<script type="text/javascript">
( function () {
document.write('asdfghj');
}() );
</script>
2.第二种写法
<script type="text/javascript">
( function () {
document.write('asdfghj');
}) ();
</script>
3.使用方法
<script type="text/javascript">
( function (a) {
document.write(a);
}(5) );
</script> 输出为 【5】
4.其他使用方法 && || ! + -
<script type="text/javascript">
1 && function test(){
document.write('Tao');
}();
</script>
<script type="text/javascript">
0 || function test(){
document.write('Tao');
}();
</script>
<script type="text/javascript">
+function test(){
document.write('Tao');
}();
</script>
<script type="text/javascript">
-function test(){
document.write('Tao');
}();
</script>X.闭包的防范
说明：（闭包会导致多个执行函数共用一个公有变量，如果不是特殊需要，应尽量防止这种情况发生）
例：<script type=”text/javascript”>
function bb() {
var arr = [];
function b() {
for(var i = 0; i <= 10; i++ ) {
arr[i] = function () {
document.write(i);
}
}
}
b();
return arr;
}
var arr1 = bb();
for(var i = 0; i < arr1.length; i++) {
arr1[i]();
}
</script>
说明：想要输出函数 function b(){},先要将里面的函数循环先执行完在执行函数b，执行函数function () {document.write(i);}也一样，先要执行for循环，等到循环结束才可以执行输出document.write(i);。可是现在输出的是10个10。所以要解决函数闭包的问题，解决函数闭包的问题要使用立即执行函数。示例如下。
<script type="text/javascript">
function bb() {
var arr = [];
function b() {
for(var i = 0; i < 10; i++ ) {
(function(j) {
arr[j] = function () {
document.write(j);
}
}(i))
}
}
b();
return arr;
}
var arr1 = bb();
for(var i = 0; i < arr1.length; i++ ) {
arr1[i]();
}
</script>
说明：立即函数可以将输入的数值直接拿过来用，不会出现储存的现象。而且执行完就直接将函数进行销毁。不会保存之前执行过的执行上下文。Y.js运行三部曲
a.语法分析（通篇找一下基本的语法分析）
b.预编译（执行期上下文定义的时候）
1.预编译前奏
(1)imply global暗示全局变量：及任何变量，如果变量未经声明就使用，此变量就为全局对象所有。
<script type="text/javascript">
//window代表全局变量
a = 123;
var b = 234;
window.b = 345;
document.write(a);
document.write(b);
</script> 输出为 【123,345】
(2)在函数内直接不声明就用，其也为全局变量所有。
<script type="text/javascript">
function abc(){
var a = b = 123; //赋值为从右往左赋值。但是此处变量a为函数内部的，而b是全局变量的。
c = 234; //c的值即为函数所有也为全局变量所有。
}
abc();
document.write(window.a); 输出为 【undefined】 //此处变量a为函数内部声明的变量，全局外无法看到内部声明的变量，所有输出为undefined.
document.write(window.b); 输出为 【123】 //全局变量
document.write(window.c); 输出为 【234】 //全局变量
</script>
(3)一切未声明的[全局变量]，全是window的属性。
例： a = 123; ===> window.a = 123;
2.预编译四部曲步骤
例：<script type="text/javascript">
function fn(a){
var a = 123;
function a(){} //函数声明
var b = function(){} //函数表达式
var d = function(){} //函数表达式
document.write(a);
document.write(b);
document.write(d);
}
fn(1);
</script>
(1)创建AO（执行期上下文）对象
<script type="text/javascript">
1. AO =
this ==> window //全局
arguments[1], //传进来的实参值
</script>
(2)找形参和变量声明，将变量和形参名作为AO属性名，值为undefined
<script type="text/javascript">
2.形参： a ==> undefined
变量声明： b ==> undefined
d ==> undefined
</script>
(3)将实参值和形参统一
<script type="text/javascript">
3.形参：a == > 1
变量声明：b ==> undefined
d ==> undefined
</script>
(4)在函数体里面找函数声明，值赋予函数体。
<script type="text/javascript">
4.a ==> function () {}//把函数a挂到AO上，把a的值换成函数体
e ==> function () {}
</script>
(5)执行
123 function () {} function () {}
说明：a = 123,将函数function(){}覆盖，若要是document.write(a)写在函数fun里，在var a = 123;的前面。则会打印出字符串的function a() {document.write(a)}
(6)说明：整体思想：
(！1)变量声明提升
<script type="text/javascript">
function a(){
document.write(b);
var b = 123;
}
a();
</script>
(！2)函数声明提升
<script type="text/javascript">
b();
function b(){
var a = 123;
document.write(a);
}
</script>
c.解释执行Z.对象
a.属性的增，删，改，查
<script type=”text/javascript”>
var dengsao = {
husband:’邓’,
husbandn: null,
height:168,
age:28,
name:’saozi001′,
zhuojian:function () {
if(this.husband != null){
delete this.husband; //删
}else{
document.write(‘还能在一起’);
}
},
chuchai:function () {
this.husband = { name : ‘xxx’}
}
}
dengsao.zhuojian();
dengsao.chuchai();
dengsao.zhuojian();
document.write(dengsao.husband);
dengsao.husband = ‘xiao liu’; //增
document.write(dengsao.husband);
delete dengdao.husband; //改
document.write(dengsao.husband);
</script>
b.对象的创建方法
(1)对象字面量也叫对象直接量
<script type="text/javascript">
var obj = {}
</script>
(2)构造函数（制造函数的工厂,函数名首字母要大写）
i.系统自带 new.Object();
<script type="text/javascript">
function Object(){
document.write('Qu Botao');
}
var obj = new Object(); //调用这个函数对象,如果不写new则就会调用这个函数，打印出function Object(){}。
var obj1 = new Object();
document.write(obj)
</script>
ii.自定义（自定义一些方法和属性）
<script type="text/javascript">
var obj = new Object();
obj.name = 'sunny';
obj.face = 'just so so';
obj.height = 183;
obj.married = undefined;
obj.eat = function () {
this.height ++；
}
</script>
(3)构造函数和创建调用函数对象的基本使用
<script type="text/javascript">
function Person(){
this.name = '哪吒';
this.age = 3;
this.traffic = '风火轮'；
this.naohai = function(){
}
}
var oPerson = new Person();
var oPerson1 = new Person();
oPerson.name = '金吒';
document.write(oPerson1.name);
document.write(oPerson.name);
</script> 输出为 哪吒金吒
说明：因为调用了两个函数对象，所以更改其中一个，不影响第二个调用函数对象的输出。
(4)构造函数的内部机制
<script type="text/javascript">
function Person(){
//当外部调用这个函数对象是会在这个第一行强制进行一个 var this = {空对象 var that = {};
that = '绿吒';
this.name = '哪吒';
this.age = 3;
this.traffic = '风火轮'；
this.naohai = function(){
}
return that;
//若果这里有一个显示的return that,那么输出时就会只输出return that的返回值。隐式的就会跳过忽略。
//隐式的一个return this;
//如果返回的是原始值，那么就会跳过返回的原始值，执行隐式的值。
}
var oPerson = new Person();
var oPerson1 = new Person();
oPerson.name = '金吒';
document.write(oPerson1.name);
document.write(oPerson.name);
</script> 输出为 哪吒金吒
(5)构造函数的多样化自定义
<script type="text/javascript">
function Person(name, age, sex){
this.name = name;
this.age = age;
this.sex = sex;
this.traffic = '风火轮'；
this.naohai = function(){
}
}
var oPerson = new Person('金吒', 18, 'famale');
var oPerson1 = new Person('古力娜扎', 16, 'male');
document.write(oPerson.name);
document.write(oPerson.age);
document.write(oPerson.sex);
document.write(oPerson1.name);
document.write(oPerson1.age);
document.write(oPerson1.sex);
</script>
c.Object.create（原形）方法 AA.包装类的一些特殊对象
aa. String()
<script type=”text/javascript”>
var obj = new Object();
var str = new String(); //天生就带有一些特殊方法
function String(){
this.toString = …
this.length = …
}
</script>
BB.原型 (对象的祖先就为原型,原型里面不写分号进行分割，有两条直接逗号分隔。)
aa.定义：原型是构造函数对象的一个属性，他定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象。
说明：当构造函数没有属性而原型有的时候，调用原型的，当构造函数有需要调用的属性时候就优先考虑构造函数。原型里面的东西可以改动，但是只能增加，不可以删除。当又声明一个新的对象时，调用原型的属性也会有所更改。
<script type=”text/javascript”>
function a(){
this.name = ‘Qu Xiaotao’;
}
a.prototype = {
age : 20,
name : 'Qu Botao',
face : 'Perfect',
money : [100,200,300,400],
drink : function () {
document.write('tu!');
},
sayName : function () {
document.write(this.name);
},
}
var a1 = new a();
a1.drink();
document.write('<br>');
document.write(a1.age);
document.write('<br>');
document.write(a1.name);
document.write('<br>');
document.write(a1.face);
document.write('<br>');
a1.sayName();
</script>
bb.利用原型特点和概念，可以提供共有属性。
说明：一些共有的属性会放到原型里面，而私有的会放到构造函数里面。
<script type="text/javascript">
Father.prototype = {
eat : function () {
}, //共有方法
}
function Person(name,age,face,drink){
//构造函数的内部机制
// (1) var this = Object.creat(Person.prototype);
// (2) var this = {__proto__:Person.prototype};
this.name = name;
this.age = age;
this.face = face;
this.drink = drink; //私有属性
// return this;
}
var a = new Person('Qu Botao' , 20 , 'male');
</script>
cc.对象如何查看原型的隐式属性 __proto__。
<script type="text/javascript">
Father.prototype = {
eat : function () {
}, //共有方法
}
function Person(name,age,face,drink){
// var this = {
// __proto__ : Person.prototype
//
//}
this.name = name;
this.age = age;
this.face = face;
this.drink = drink; //私有属性
// return this;
}
</script>
dd.对象如何查看自己的构造函数 ——>constructor。
<script type="text/javascript">
function a(){
}
a.prototype = {
constructor:a //原有属性constructor的意思为‘构造器’，可以查看构造函数。constructor是定义在原型里面的。
};
</script>
ee.Object也可以构造函数，也有原型。
<script type="text/javascript">
Object.prototype = {
//constructor:Object 把Object的函数体，存储到constructor里面。
}
function Object () {
this.name = 'Qu';
this.age = 20;
this.face = 'perfect';
}
var a = new Object();
var a = {} //Object构造函数的简写版本。
document.write(a.constructor);
</script>CC.原型链
aa.如何构成原型链
<script type=”text/javascript”>
Father.prototype = {
money : [100,100,100],
eat : function (){
document.write(‘Eat more fat’);
},
drink:function () {
document.write(‘Drinking more …. tu’);
},
}
function Father(name,age,face) {
this.name = name;
this.age = age;
this.face = face;
}
function Son(name,age,face){
this.name = name;
this.age = age;
this.face = face;
}
var a = new Father('Da Qu',49,'handsome');
Son.prototype = a;
var b = new Son('Xiao Qu', 20, 'perfect');
Father.prototype.money.push(200);
document.write(b.money);
delete b.name;
document.write(b.name);
</script>
bb.原型链上属性的增，删，改，查
说明：原型地原始值无法更改，比如money，可以增加，但是无法删除。下一级别的只能增加自己的属性，无法更改或者删除其上一级别的属性和方法。
cc.绝大多数对象的最终都会继承自Object.prototype
说明：在原型链上，当执行到原型顶端的时候，就停止，原型顶端也是一个原型，是一个对象原型:Object.prototype = {}
dd.Object.creat（原型）;
<script type="text/javascript">
</script>DD.call/apply
*.两者不同在于call第二个参数传进去的实参是一个个穿进去，而apply是传一个数组，整个穿进去。
aa.call (改变构造函数的this指向)
<script type=”text/javascript”>
function Person(sex) {
this.name = ‘Qu’;
this.sex = sex;
this.age = ’91’;
}
var a = {age:19};
Person.call(a,'male');
document.write(a.name);
</script> ----> Qu
1.首先，先执行Person.call();然后改变对象a的内部this指向，指向构造函数Person对应的属性和方法。
2.如果改变指向的对象里面和构造函数有相同的属性和方法，先调用构造函数内部的属性和方法。
3.call()括号内第一个参数是指向构造函数所对应的对象，第二个包括第二个开始是构造函数要穿进去的实参。
bb.apply
<script type="text/javascript">
function Person(sex,height) {
this.name = 'Qu';
this.sex = sex;
this.height = height;
}
var a = {age:19};
Person.apply(a,['female',200]);
document.write(a.sex + '' + a.height);
</script> ----> female 200
1.改变构造函数的this指向，第一个参数和call一样，第二个数传进来的必须是数组。EE.继承发展史
aa.传统形式
<script type=”text/javascript”>
Father.prototype = {
eat:function(){
document.write(‘Eating more will fat’);
}
}
function Father(){
drink:function(){
document.write('Drink a little is health');
}
}
function Son(){
play:function(){
document.write('Playing computer games');
}
}
function inherit(c,p){
c.prototype = new p();
}
//一个父亲对象会对应很多孩子对象，当通过孩子对象改变其原型时，父亲对象也会更改。 使用函数给封装起来，函数每次执行后都会销毁，不会将上次使用或者改变过的保存下来。但是每次使用都会新建一个函数，构造一个父亲对象。所以不是很好。
inherit(Son,Father);
var oSon = new Son();
</script>
bb.借用构造函数
(1)不能继承借用构造函数的原型
(2)每次构造函数都要多走一个函数
<script type="text/javascript">
Father.prototype = {
}
function Father(){
this.drink = function(){
document.write('Dring a little is health');
}
}
function Son(){
Father.call(this);
}//借用了构造函数Father里面的方法，但是不能借用构造函数Father原型里面的东西。
var a = new Son();
a.drink();
</script>
cc.共享原型
(1)不能随便改动自己的原型
<script type="text/javascript">
</script>
dd.圣杯模式
<script type="text/javascript">
function inherit(Parent,Child){
function F(){}
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.uber = Parent.prototype;
}
a.prototype = {
name:'Qu',
age:20,
}
function a() {
//...
}
function b(){
//...
}
inherit(a,b);
var c = new b;
document.write(c.name);
</script>FF.零碎的知识点。
aa.命名空间
(1)用于当很多人进行声明变量时，会有重复的变量名，防止变量干扰。将变量分门别类。每个变量模块还可以进行细分。
<script type=”text/javascript”>
var scope = {
modelA : {
workerA1 : {
},
workerA2 : {
}
},
modelB : {
workerB1 : {
},
workerB2 : {
}
}
}
</script>
bb.查看属性
(1)obj.prop
(2)obj["prop"]
说明：(1) 隐式转换为 ---> (2) 然后 ----> 输出。
cc.对象的枚举
(1)全部枚举
把属性值枚举一遍。（但是这样会把构造函数的原型也给打印出来）
<script type="text/javascript">
a.prototype = {
name : 'Qu',
age : 20,
}
function a(){
height = 170;
weight = 120;
face = 'perfect';
}
var b = new a();
for (var prop in b) {
document.write(b[prop]);
}
</script>
(2).hasOwnProperty。（obj.hasOwnProperty(attributesName).//判断attributesName是不是obj对象的属性
只枚举构造函数的属性值.
<script type="text/javascript">
a.prototype = {
name : 'Qu',
age : 20,
}
function a(){
this.height = 170;
this.weight = 120;
this.face = 'perfect';
}
var b = new a();
for (var prop in b) {
if(b.hasOwnProperty(prop)){
document.write(b[prop]);
}
}
</script>
(3)in
看看属性是不是原型或者原型链上的。
<script type="text/javascript">
a.prototype = {
name : 'Qu',
age : 20,
}
function a(){
this.height = 170;
this.weight = 120;
this.face = 'perfect';
}
var b = new a();
document.write('name' in b);
document.write('toString' in b); //在Object.prototype上。
</script>
(4)instanceof
看对象是不是后面构造器构造出来的
<script type="text/javascript">
function b(){
}
b.prototype = {
}
var a = new b();
document.write(a instanceof b);
//看前面的对象的原型链，上面有没有后面构造器的prototype形式。
</script>GG.this
aa.函数预编译过程this –> window
<script type=”text/javascript”>
Activation Object = {
this : window,
argunments : []
}
1.形参和变量声明
2.形参和实参统一
3.函数声明，整体提升。
</script>
bb.全局作用域里this --> window
<script type="text/javascript">
function (){
}
document.write(this);
</script>
cc.call/apply可以改变函数运行时this指向
区别是参数不同，一个是单一的数，一个是可以是数组。
dd.obj.fun(); fun()里面的this指向obj
ee.this练习
<script type="text/javascript">
var name = '222';
var a = {
name : '111',
say : function () {
document.write(this.name);
},
}
var fun = a.say;
fun(); //222
a.say();//111
var b = {
name : '333',
say : function (fun) {
fun();
}
}
b.say(a.say);//222
b.say = a.say;
b.say(); //333
</script>HH.arguments
aa.callee 基本用不上。指向本函数的引用。
<script type=”text/javascript”> var num = parseInt(window.prompt(‘请输入数字’))；
var a = (function (n) {
if( n == 1 || n < 1){
return 1;
}
return n * arguments.callee(n – 1);
}(num));
document.write(a);
</script>
bb.caller 查看谁调用的这个函数。
<script type="text/javascript">
function b(){
a();
}
function a(){
document.write(a.caller);
}
b(); 输出为 function b() {}
</script>II.克隆
aa.浅层克隆
<script type=”text/javascript”>
function clone(parent,child){
var child = child || {};
for (var prop in parent){
if(parent.hasOwnProperty(prop)){
child[prop] = parent[prop];
}
}
return child;
}
person.prototype.age = 20;
function person(){
this.name = 'Qu';
this.money = [100,100,200,300];
}
var oPerson = new person();
var oChind = clone(oPerson);
document.write(oChild); 输出为 Qu
oChild.name = 'cherry';
document.write(oPerson.name); 输出为 Qu
oChild.money.push(400);
document.write(oPerson.money); 输出为 100,100,200,300,400
</script>
bb.深层次克隆（引用值改变，克隆的复制的不变）JJ.数组
aa.数组的定义
(1)new Array(length/comtent)
<script type=”text/javascript”>
var a = [1,2,3,4];
var b = new Array(1,2,3,4) //当里面只写一个数字时，代表的是数组的长度，但是不可以写小数点。当数字写两个以上时，就代表数组上每个数字写的是什么。
</script>
(2)字面量
<script type="text/javascript">
var b = new Array() //当里面只写一个数字时，代表的是数组的长度，但是不可以写小数点。当数字写两个以上时，就代表数组上每个数字写的是什么。
</script>
bb.数组的读和写
(1)arr[num] (不可以溢出读)
<script type="text/javascript">
var a = [1,2,3,4]
document.write(a[0 ~ a.length-1]);
</script>
(2)arr[num] = xxx; (可以溢出写)
<script type="text/javascript">
var a = [1,2,3,4]
a[10] = 1;
document.write(a.length); 输出为 1,2,3,4......1
</script> // 稀松数组KK.数组的常用方法
aa.改变原数组
(1)reverse,sort,push,pop,shift,unshift
push:在数组最后增添一个数，或者一个数组。
<script type=”text/javascript”>
var a = [1,2,3,4];
a.push(5);
document.write(a);
</script> —-> 1,2,3,4,5
pop:在数组最后删除一个数,一个一个删除。也可以从后面一个个取。
删：<script type="text/javascript">
var a = [1,2,3,4];
a.pop();
document.write(a);
</script> ----> 1,2,3
取：<script type="text/javascript">
var a = [1,2,3,4];
a.pop();
var b = a.pop();
document.write(b);
</script> ----> 4
sort: 将数组从小到大排序。、
<script type="text/javascript">
var a = [1,6,3,7,9,0,2,4,6];
a.sort();
document.write(a);
</script> ----> 0,1,2,3,4,6,6,7,9
reverse:将数组反转
<script type="text/javascript">
var a = [1,2,3,4];
a.reverse();
document.write(a);
</script> ----> 4,3,2,1
splice:切片（a.splice(1,3,3,4,5);第一个数是在第几个位置的数字上开始切，第二个数字是切多长，后面的数是切完后放的数字。也可以将切掉的数字进行输出。
<script type="text/javascript">
var a = [1,2,3,4];
a.splice(1,3,3,4,5);
document.write(a);
</script>
shift:字数组最前面第一位删除一个数据。
<script type="text/javascript">
var a = [1,2,3,4];
a.shift();
var b = a.pop();
document.write(b);
</script> ----> 2,3,4
unshift:字数组最前面第一位增加一个数据。
<script type="text/javascript">
var a = [1,2,3,4];
a.unshift(0);
document.write(a);
</script> ----> 0,1,2,3,4bb.不改变原数组
(1)concat:连接数组
<script type=”text/javascript”>
var a = [1,2,3,4,5];
var b = [6,7,8,9,0];
var c = a.concat(b);
document.write(c);
</script> —-> 1,2,3,4,5,6,7,8,9,0
(2)join:用你所设定的符号将数组里面的数字之间进行连接。
<script type="text/javascript">
var a = [1,2,3,4,5];
document.write(a.join('^'));
</script> ----> 1^2^3^4^5
(3)split:将数组里面的每个数组分开，用自己设定的符号将里面的数字分隔成一个个的数组。
<script type="text/javascript">
var a = [1,2,3,4];
var b = a.join('-');
var c = b.split(' ');
document.write( c);
</script> ----> 1,-,2,-,3,-,4LL.三目运算符
aa.简化版的if语句
<script type=”text/javascript”>
(1)document.write(1 > 2 ? ‘shi’ : ‘fou’);
(2)1 > 2 ? document.write(‘shi’) : document.write(‘fou’);
</script>
意思相同
<script type=”text/javascript”>
if(1 > 2){
document.write(‘shi’);
}else{
document.write(‘fou’);
}
</script>
MM.类数组
aa.可以利用属性名模拟数组的特征
cc.可以动态的增长length属性
dd.如果强行让类数组调用push方法，则会根据length属性值的位置进行属性的扩充。
<script type=”text/javascript”>
var a = {
‘1’ : 2,
‘2’ : 3,
‘length’ : 2,
‘push’ : Array.prototype.push,
}
a.push('a'); a.push('b');
document.write(a[0]); undefined
document.write(a[1]); 2
document.write(a[2]); a
document.write(a[3]); b
</script>执行过程：
1.首先执行的时候a里面的第几位是根据你所编写的属性名而定的。
2.当push进去数值时，会在你length规定的位置放进数值，若当前位置有数值，则替换。
3.当执行完2步骤之后，length会自动进行length++;后面继续push进去数值时，会建立一个新的属性名。属性名就是length++后的名字。
NN.try…catch
aa.try{}catch(e)finally{}
<script type=”text/javascript”>
try{
document.write(‘abc’);
document.write(a);
document.write(1234);
}catch(e){
//e.name;
//e.massage
document.write(e.name);
}
document.write(‘Hellow World’);
</script>
说明：当try里面有错误的代码时，停止执行try后面的代码，跳到catch里面。执行catch里面的代码。当try里面没有代码的错误时，不会执行catch里面的代码，运行完try里面的代码直接跳出，执行外部的代码。
bb.Error.name的六种值对应的信息
(1)EvalError:eval()的使用与定义不一致
(2)RangeError: 数值越界
(3)ReferenceError: 非法或不能识别的引用值
(4)SyntaxError：发生语法解析错误
(5)TypeError：操作数类型错误
(6)YRIRrror：URI处理函数使用不当
OO.es5严格模式
aa.“use strict”
<script type=”text/javascript”>
‘use strict’;
</script>
说明：es5格式。
(1)不在兼容es3的一些不规则语法，使用全新的es5规范
说明：遵循es5里面的规则和标准。
(2)两种用法：
a.全局严格模式
b.局部函数内严格模式（推荐）
(3)就是一行字符串，不会对不兼容严格模式的浏览器产生影响。
(4)不支持with; arguments.callee; function.caller。变量赋值必须声明，局部this必须被赋值(Person.call(null/undefined)复制什么就会显示什么）。拒绝重复属性和形参。但是在es3里面可以用。例：
<script type="text/javascript">
var name = 'Qu';
var obj = {
name : 'cheery';
}
with(obj) {
document.write(name);
}
</script> ---> cheery
说明：括号里面写对象。大括号里面写要提前执行的函数。
<script type="text/javascript">
with (document) {
write('asdf');
}
</script> ---> asdfPP.DOM（它是用来操作文档的，就是操作HTML和css文档）
aa.DOM —> Dcument Object Model（文档对象模型）
bb.DOM定义了表示和修改文档所需的对象，这些对象的行为和属性以及这些对象之间的关系。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和css功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。
cc.DOM的基本操作
(1)对节点的增删改查
a.查：
查看元素节点（前四种是常用的，后两种是不常用的）
1.document代表整个文档
2.document.getElementById();元素id在IE8以下的浏览器，不区分id大小写，而且也返回匹配name属性的元素。
3.document.getElementByTagName()[0 ~ 9]; //标签名
4.document.getElementByClassName()[0 ~ 9]; //类名 -> ie8和ie8以下的ie版本中不能用。
5.querySelector //css选择器[非实时的] 在ie7和ie7以下的版本中不兼容
6.querySelectorAll() //css选择器[非实时的] 在ie7和ie7以下的版本中不兼容
例：
<div id = 'abc' class = 'bcd'>123</div>
<div id = 'abc1' class = 'dfg'></div>
<script type="text/javascript">
//选择Id标签
var a = document.getElementById('abc');
//选择标签:后面一定要加[0 ~ 9]
var b = document.getElementsByTagName('div')[0~9];
//类标签:如果有两个标签有相同的名称，则可以两个都选择进行改变；若只想改变相同标签名称其中的一个，后面就加上[0 ~ 9]。
var c = document.getElementByClassName('dfg')[0~9];
</script>
<script type="text/javascript">
//创建元素
var oDiv = document.creatElement('填写标签名称');
//改变元素class
oDiv.className = '';
//改变元素文本内容
oDiv.innerText = 123;
//改变里面的html内容
oDive.innerHTML = '<div>';
//把新创建的元素添加到哪里去
document.body.appendChild('oDiv');
</script>
2.只有这三个标签里面写name才会被var = document.getElementsByName('abc')[0 ~ 9]选中。
<input name = 'abc'>
<form name = 'abc'></form>
<img src="" name = 'abc'>
<iframe src="" name = 'abc'></iframe>
<script type="text/javascript">
var oDiv = document.getElementsByName('');
</script>
3.DOM基本操作
A.节点的类型
元素节点 --- 1
属性节点 --- 2
文本节点 --- 3 （空格也算文本节点）
注释节点 --- 8
document --- 9
DocumentFragment --- 11
B.节点的四个属性(用于鉴别)
1.nodeName
元素的标签名，以大写形式表示，只读
2.nodeValue
Text（文本）节点或Comment（注释）节点的文本内容，可读写
3.nodeType（区别节点的唯一办法）。
该节点的类型，只读。
4.attributes
Element节点的属性集合。(例如id='only' class='only' style='only'...)
C.遍历节点树
parentNode -> 父节点（就顶端的parentNode为#document）
childNodes -> 子节点
firstNodes -> 第一个子节点
lastNodes -> 最后一个子节点
nextSibling -> 下一个兄弟节点
previousSibing -> 前一个兄弟节点
D.基于元素节点树的遍历
parentElement -> 返回当前元素的父元素节点（IE不兼容）
children -> 只返回当前元素的元素节点
node.childElementCount === node.child.length当前元素节点的子元素节点个数（IE不兼容）
firstElementChild -> 返回的是第一个元素节点（IE不兼容）
lastElementChild -> 返回的是最后一个元素节点（IE不兼容）
nextElementSibling -> 返回最后一个兄弟元素节点（IE不兼容）
previousElementSibling ->前一个兄弟元素节点（IE不兼容）
E.DOM树
代表的是继承关系，结构化的关系。
F.
1.getElementById方法定义在Document.prototype上，即Element节点上不能使用。
2.getElementByName方法定义在HTMLDocument.prototype上，即非html中的document不能使用(xhtml document.Element)。
3.getElementByTagName方法定义在Document.prototype和Element.prtotype上。
4.HTMLDocument.prototype定义了一些常用的属性，body,head分别指代了HTML文档中的<body><head>标签。
5.Document.prototype上定义了documentElement属性，指代文档的根元素，在HTML文档中，他总是指代<html>元素。
6.getElementByClassName, querySelectorAll, querySelector在Document.Element类中均有定义。
G.
增：
document.createElement();创建元素节点
document.createTextNode();创建文本节点
document.createComment();创建注释节点
document.createDocumentFragment();
插:parentNode是指在这个父节点进行操作什么什么。
parentNode.appendChild();
parentNode.insertBefore(a,b);在b的节点前面插入a节点。
删：
parentNode.removeChild();
this.appendChild();??????????????????????????????????????
替换：
parent.replaceChild(new,origin);
H.
Element节点的一些属性（这些属性可读可写。）
innerHTML
展示源代码
innerText/textContent(火狐不兼容)
展示文本内容
Element节点的一些方法（属性是对象的，特性是对象的。）
ele.setAttribute（可以增添，也可以修改。）
ele.getAttribute（可以取值。）
例：<script type="text/javascript">
var a = document.createElement('p');
a.setAttribute('class','one');
var b = document.createTextNode('哇偶！');
a.appendChild(b);
var c = document.createElement('div');
c.setAttribute('class',' two');
c.appendChild(a);
document.body.appendChild(c);
</script>
I.查看滚动条的滚动距离
1.window.pageXOffset/pageYOffset
IE8及IE8以下不兼容
2.document.body/documentElement.scrollLeft/scrollTop
兼容性比较混乱，用时取两个值相加，因为不可能存在两个相同有值。
3.封装兼容性方法，求滚动轮滚动距离getScrollOffset();
<script type="text/javascript">
function getScrollOffset () {
if (window.pageXOffset){
return {
x : window.pageXOffset,
y : window.pageYOffset
}
}
return {
x : document.body.scrollLeft + document.documentElement.scrollLeft,
y : document.body.scrollTop + document.documentElement.scrollTop
}
}
</script>
J.查看视口的尺寸
1.window.innerWidth/innerHeight
IE8以及IE8一下不兼容
2.document.documentElement.clientWidth/clientHeight
标准模式下，任意浏览器都兼容
3.document.body.clientWidth/clientHeight
适用于怪异模式下的浏览器
4.封装函数
<script type="text/javascript">
function sk(){
if(window.innerWidth){
return{
w : window.innerWidth,
h : window.innerHeight
}
if(document.compatMode == 'CSS1Compat'){
return {
w : document.documentElement.clientWidth,
h : document.documentElement.clientHeight
}
}else if (document.compatMode == 'BackCompat')
return {
w : document.body.clientWidth,
h : document.body.clientHeigh
}
}
}
</script>
K-0.查看元素的几何尺寸（在这里面查看的元素位置是没有相对定位的）
1.domEle.getBoundingClientRect();
2.兼容性很好
3.该方法返回一个对象，对象里面有left,top,right,bottom等属性。
.left和top代表该元素左上角的X和Y坐标，标规则是距离左边边框的距离。
.right和bottom代表元素右下角的X和Y坐标,坐标规则是距离左边边框的距离。
4.height和width属性老版本IE并未实现。
<script type="text/javascript">
function getElementOffset(ele) {
var box = ele.getBoundingClientRect();
var w = box.width || (box.right - box.left);
var h = box.height || (box.bottom - box.top);
return {
w : w,
h : h,
}
}
</script>
5.返回的结果并不是‘实时的’。
<div class = 'a' style = 'width: 100px; height: 100px; background-color: green; position: absolute; top: 2000px; left: 100px'></div>
<script type="text/javascript">
var a = document.getElementsByClassName('a')[0];
//在DOM里面a.getBoundingClientRect();
</script>
K-1.查看元素的尺寸
1.dom.offsetWidth, dom.offsetHeight
K-2.查看元素位置（这里面元素的位置是要看有没有有定位的父级的）
1.dom.offsetLeft, dom.offsetTop
2.对于无定位父级的元素，返回相对文档的坐标，对于有定位父级的元素，返回相对于最近的有定位的父级的坐标。
3.dom.offsetParent
4.返回最近的有定位的父级，若无，返回body, body.offsetParent,返回null
5.eg:求元素相对文档的坐标。
<script type="text/javascript">
function getElementPosition(ele) {
var x = 0,
y = 0;
while (ele != document.body) {
x += ele.offsetLeft;
y += ele.offsetTop;
ele = ele.offsetParent;
}
return {
x : x,
y : y;
}
}
</script>
L.让滚动条自己滚动
1.window上有三个方法。
2.window.scroll()/scrollTo()/scrollBy();
<a href="javascript:void(0); window.setInterval(function () {window.scrollBy(0,20)},200">开启快速阅读模式</a>
//void(0)是用来解除a标签的原始属性及其特征，javascript是给a标签一个协议，允许a标签调用js模块及其方法。
<p>1</p>
<p>2</p>
<p>3</p>
.
.
<p>100</p>
3.三个方法功能类似，用法都是将x,y坐标传入。即实现让滚动轮滚动到当前位置。
4.区别：scrollBy()会在之前的数据基础上做累加。
5.eg:利用scrollBy()快速阅读的功能。 QQ.日期对象
A.使用方法
http://www.w3school.com.cn/jsref/jsref_obj_date.asp
B.如何测量代码运行时间(上下两个时间一相减就可以。)
<script type="text/javascript">
(1) new Date().getTime();
xxx
(2) new Date().getTime();
</script>
C.js定时器(下面都是window上面的方法)
1.setInterval( , ); 循环执行
<script type="text/javascript">
var num = 1;
setInterval('num ++,document.write(num);',1000);
</script>
<script type="text/javascript">
window.setInterval(function () {
var num = 1;
num ++;
document.write(num);
},1000);
</script>
2.clearInterval(); 停止循环执行
<script type="text/javascript">
var num = 1;
var time = setInterval(function () {
num ++;
document.write(num);
if(num == 10 ){
window.clearInterval(time);
}
},1000);
</script>
3.setTimeout();
4.clearTimeout();
D.定时器
<input class = 'minutes' style = 'border: 1px solid black' value = '0' type = 'text'>分
<input class = 'seconds' style = 'border: 1px solid black' value = '0' type = 'text'>秒
<script type="text/javascript">
var seconds = document.getElementsByClassName('seconds')[0],
minutes = document.getElementsByClassName('minutes')[0],
secondsCount = 0,
minutesCount = 0;
var time = window.setInterval(function(){
secondsCount ++;
if(secondsCount == 60){
secondsCount = 0;
minutesCount ++;
minutes.value = minutesCount;
}
seconds.value = secondsCount;
if(minutesCount == 2){
clearInterval(time);
}
},10);
</script>RR.脚本化css
A.读写元素css属性（更改时写的值必须是字符串的格式）
1.dom.style.prop
.可读写行间样式，没有兼容性问题，碰到float这样的关键字属性，前面应该加css.
.什么叫行间样式：<div class = ‘one’ style = ‘width:10px;height:10px;border:1px solid #fff’></div>
.怎么读取：dom.style.prop; dom.style.borderWidth, dom.style.borderStyle。
.怎么改写： 例：dom.style.width = ‘200px’;
.eg:float ---> cssFloat
.符合属性必须拆解，组合单词变成小驼峰式写法。
.写入的值必须是字符串格式
B.查询计算样式(写在css文件里面，写在<head></head>标签里面都可以读取到。也是唯一一种可以取伪元素样式的。)
1.window.getCompushedStyle(ele,null);
ele:要取得目标对象
null:你要先看看自己写的目标对象里面有没有伪元素，要是有伪元素就写出来‘:after’。
2.计算样式只读。
window.getCompushedStyle(ele,null).width
window.getCompushedStyle(ele,null).color
3.返回的计算样式的值都是绝对值，没有相对单位。
4.IE8及IE8一下不兼容。
C.查询样式（IE独有的属性）
1.ele.currentStyle
2.计算样式只读
ele.currentStyle.width
ele.currentStyle.height
ele.currentStyle.color
3.返回的计算样式的值不是经过转换的绝对值。
4.IE独有的属性
D.[常用的方法]封装兼容姓方法getStyle(obj,prop)
<script type="text/javascript">
function getStyle(obj,prop) {
if(obj.currentStyle) {
return obj.currentStyle[Prop];
}else{
return window.getComputedStyle(obj,null)[Prop];
}
}
</script>SS.事件
A.如何绑定事件
1.ele.onxxx = function () {}
兼容性很好，但是一个元素只能绑定一个处理程序
基本等同于写在HTML行间上。
<div id = ‘demo’></div>
<script type=”text/javascript”>
var div = document.getElementById(‘demo’);
div.onclick = function () {
alert(‘帅！！！’);
}
</script>
2.obj.addEventListener('xxx',function () {},false);
IE以下不兼容，可以为一个事件绑定多个处理程序。
<script type="text/javascript">
var a = document.getElementById('demo');
a.addEventListener('click',function () {
alert('帅！！！');
},false)
</script>
3.obj.attachEvent('on' + 'xxx', function () {});
IE独有，一个事件同样可以绑定多个处理程序
<script type="text/javascript">
var div = document.getElementById('demo');
div.attachEvent('onclick',function () {
alert('帅！！！');
})
</script>B.事件处理程序的运行环境
1.ele.onxxx = function (event) {}
程序this指向是dom元素本身
2.obj.addEventListener('xxx' , fn , false);
程序this指向是dom元素本身
3.obj.attachEvent('on' + 'xxx' , fn);
程序this指向window
4.封装兼容性的addEvent(elem,type,handle);方法
<script type="text/javascript">
function addEvent (elem,type,handle) {
if (elem.addEventListener) {
elem.addEventListener(type, handle, false);
}else if (elem.attachEvent) {
elem['a' + type + handle] = handle;
elem[type + handle] = function () {
elem['a' + type + handle].call(elem);
}
elem.attachEvent('on' + type ,elem[type + handle]);
}else (
elem['on' + type] = handle;
)
}
</script>C.解除事件处理程序
1.ele.onclick = false/”/null;
<script type=”text/javascript”>
ele.onclick = function () {
alert(‘帅!!!’);
}
ele.onclick = null;
</script>
2.ele.removeEventListener(type, fnName , false);
<script type="text/javascript">
var a = function () {
alert('帅！！！');
}
ele.addEventListener('click', a ,false);
ele.removeEventListener('click', a , false);
</script>
3.ele.detachEvent('on' + 'type' , fnName);
<script type="text/javascript">
var a = function () {
alert('帅！！！');
}
ele.attachEvent('onclick', a);
ele.detachEvent('onclick', a);
</script>
4.若绑定匿名函数，则无法解除。D.事件处理模型—事件冒泡，捕获
1.事件冒泡：结构上（非视觉上）嵌套关系的元素，会存在时间冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）
2.事件捕获：结构上（非视觉上）嵌套关系的元素，会存在时间冒泡的功能，即同一事件，自父元素冒泡向子元素。（自上向底）。
3.IE没有捕获事件E.取消冒泡和阻止默认事件
1.取消冒泡：
.W3C标准event.stopPropagation();但不支持ie9以下版本。
这样就不会继续冒泡下去。
<script type=”text/javascript”>
wrapper.addEventListener(‘click’, function (e) {
e.stopPropagation();
},false);
</script>
.IE独有event.cancelBubble = true;
<script type="text/javascript">
wrapper.addEventListener('click', function (e) {
e.cancelBubble = true;
},false);
</script>
.封装取消冒泡的函数stopBubble(event)
<script type="text/javascript">
function stopBubble (event) {
var event = event || window.event;
if(event.stopPropagation) {
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
</script>
2.阻止默认事件:
.默认事件--表单提交，a标签跳转，右键菜单等。
.return.false;以对象属性的方式注册的事件才生效。
<script type="text/javascript">
xxx.onclick = function () {
return false;
}
</script>
.event.preventDefault();W3C标准，IE9以下不兼容。
.event.returnValue = false;兼容IE。
.封装阻止默认事件的函数canselHandler(event);
<script type="text/javascript">
function cancelHandler (event) {
var event = event || window.event;
if(event.preventDefault) {
event.preventDefault();
}else{
event.returnValue = false;
}
}
</script>F.触发顺序，先捕获，后冒泡
J.focus,blur,change,submit,reset,select等事件不冒泡。
H.事件对象（属性和方法）
1.event || window.event 用于IE。
2.事件源对象（监视真实点击的部位，看实际是从哪个部位冒泡下去的。 ）
.event.target 火狐独有。
.event.srcElement IE独有。
.这俩chrome都有。
3.兼容性写法。
<div id = 'wrapper' style = 'background-color:red; width:200px,height : 200px;'>
<div id = 'content'style = 'background-color:green; width:100px,height : 100px;'>
<div id = 'box' style = 'background-color:black; width:50px,height : 50px;'>
</div>
</div>
</div>
<script type="text/javascript">
var wrapper = document.getElementById('wrapper');
content = document.getElementById('content');
box = document.getElementById('box');
wrapper.addEventListener('click', function (e) {
var event = e || window.event;
var target = event.srcElement || event.target;
},false);
</script>I.事件委托:通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件,也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。
1.利用事件冒泡，和事件源对象进行处理
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
</ul>
<script type=”text/javascript”>
var oUl = document.getElementsByTagName(‘ul’)[0];
oUl.addEventListener(‘click’, function (e) {
var event = event || window.event;
var target = event.srcElement || event.target;
document.write(target.innerText);
},false);
</script>
2.优点：
.性能：不需要循环所有的元素一个个绑定事件。
.灵活：当有新的子元素时不需要重新绑定事件。J.事件分类
1.鼠标事件
2.前面要加'on'。(事件里面没有大写)
.click
.mousedown
.mousemove
.mouseup
.contextmenu
.mouseover
.mouseout
<div id = 'one' style = 'width:100px; height:100px;background-color:green;'></div>
<script type="text/javascript">
var div = document.getElementById('one');
div.onmouseover = function (e) {
this.style.backgroundColor = 'red';
}
div.onmouseout = function (e) {
this.style.backgroundColor = 'blue';
}
</script>
3.用button来区分鼠标的按键，0左/1中/2右
4.DOM3标准规定：click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标键
5.如何解决mousedown和click的冲突。(定格时间的方法叫做时间戳)
<div id = 'one' style = 'height:100px; width:100px;background-color:green'></div>
<script type="text/javascript">
var div = document.getElementById('one');
var key = false,
firstTime,
lastTime;
div.onclick = function (e) {
if(key){
console.log('onclick');
}
}
div.onmousedown = function (e) {
firstTime = new Date().getTime();
}
div.onmouseup = function (e) {
lastTime = new Date().getTime();
if(firstTime - lastTime < 300){
key = true;
}
}
</script>
6.键盘事件
.keydown keyup keypress
.keydown > keypress > keyup
.keydown和keypress的区别
keydown可以响应任意键盘按键，keypress只可以响应字符类键盘按键
keypress返回ASCII码，可以转换成相应字符。
<script type="text/javascript">
document.onkeydown = function (e) {
console.log(1);
}
document.onkeyup = function (e) {
console.log(2);
}
document.onkeypress = function (e) {
console.log(3);
}
</script>
.用keypress找charCode;
用keydown找which。
7.文本操作事件
input,onfocus,onblur
<input type = 'password' oninput = 'console.log(1)' style = 'border:2px solid black'>
<input type="text" onfocus= "if(this.value == '请输入密码'){this,value = ''}" onblur = "if(this.value == ''){this.value = '请输入密码'}" value = '请输入密码' >
8.窗体操作类
1.scroll
2.load
当页面加载完之后，才会执行onload事件。
<script type="text/javascript">
</script>
9.Doctype
1.渲染模式
在多年以前，各浏览器都处于个子比较封闭的发展中（基本没有兼容性可谈）。随着web的发展，兼容性问题的解决越来越显得迫切，随即，各浏览器厂商发布了按照标准模式（遵循各厂商制定的统一标准）工作的浏览器，比如IE6.0就是其中之一。但是考虑到以前建设的网站并不支持标准模式，所以各浏览器在加入标准模式的同时也保留了混杂模式（即以前那种未按照统一标准的模式，也叫怪异模式）。
2.输入框和名称之间的绑定
<label for = "inp">密码：</label><input id = 'inp' type="password">
<script type="text/javascript"></script>TT.Ajax
A.Apache
1: 是一个服务器软件。
2：127.0.0.1:80 指向服务器的一个目录 目录和端口号都可以修改
3: 默认直接打开index文件
B.端口号
1：用来区分不同应用的数据传输接口
2：一般服务器默认的都是80端口。（网页）
3：如何修改端口号。
C.XML
1.名字：可扩展标志语言
2.样子：和html类似
3.区别：xml是用来储蓄数据的
D.Json
1.类型：数据格式
2.结构： {“name”:”laowang”,”age”:”11”,tongxie:[“张三”,”李四”,”王五”]}
3.格式要求： 双引号（必须）
4.属性值： 任何类型
E.Cookie：
作用 ：
1.服务器和浏览器进行资源共享
2.用户唯一标识
特点：在本页面所有的请求，会默认把cookie发送给服务器
F.局限性：
1: 存蓄的内容大小 只有几K
2: 会损耗请求的速度
G.Localstorage
现象：第二次打开网页，比第一次快。
原因：缓存 304 not modified
原理：判断 浏览器当前版本和服务器版本是否相同 ，自己去缓存取吧。
H.引出
1.存储体积 M为单位
I.作用：
1：存储一些稳定的数据。加快速度 （Css和js 保存起来，第二次直接从本地获取）
2：页面刷新做判断。
1: 搜索历史。
2：淘宝登录状态判断。
3：服务器无法获取localstorage(html5的一个接口)。
J.存多久：过期时间
1：永远不会过期。必须手动删除
2：不同域名下，互补干扰。
K.回调：
定义：满足一定条件执行函数。
Ajax：怎么使用。
- 当数据返回 并且数据状态正常的时候 执行onreadystatechange 方法L.readystate 和 status
区别: readystate 数据返回的情况 （物流信息 申通）
Status：服务器返回的数据状态 （商品信息 卖家）
0 代表未初始化。 还没有调用 open 方法
1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕M.Onreadystatechange
作用：监听readystate 值变化举个栗子：
Onclick0-1 执行一次
1-2 执行一次
2-3 执行一次
3-4 执行一次N.JSON.parse
这个方法 把json字符串转化为对象
UU.异步加载js（凡是异步加载的脚本都不可以用document.write(),应为他会破坏脚本结构。）;
A.javascript异步加载的三种方案
.defer异步加载，但要等到dom文档全部解析完才会被执行。IE专属。
.async异步加载，加载完就执行，async只能加载外部脚本，不能把js写在script标签里。
.A,B执行时也不阻塞页面
.创建script，插入到DOM中，加载完毕后callBack。
<script type="text/javascript">
function scriptLoaded(url,callback) {
var script = document.createElement('script');
script.type = 'text/javascript';
if(script.readyState) {
script.onreadystatechange = function () {
if(readyState == 'loaded' || readyState == 'complete') {
script.onreadystatechange == null;
callback();
}
}
}else{
script.onload = function (){
callback();
}
}
script.src = url;
document.head.appendChild(script);
}
</script></body>
</html>
| 前端快速开发工具 |
| 优秀的前端开发工具 |
| 前端开发工具justep |
近期评论