TML

1. 基本概念
   

• HTML 是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

• CSS 样式是表现。比如，标题字体、颜色变化，或为标题加入背景图片、边框等，所有这些用来改变内容外观的东西称之为表现。

• JavaScript 是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单，或鼠标滑过表格的背景颜色改变，还有焦点新闻（新闻图片）的轮换。有动画的，有交互的一般都是用 JavaScript 来实现的。

2.常用标签

• 强调语气：<em>是斜体，<strong>是加粗

• 引用：<q>短文本引用，<blockquote>长文本引用

• 换行 <br />

• 水平横线 <hr />

• 空格 &nbsp;

• 表格 <table><tbody>

• 加上后表格内容全部下载完才会显示

• 行 <tr>

• 列 <td>

• 表格表头 <th>

• 标题 <caption>

• 超链 <a>

• 例子：<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>

• 新标签打开：target="_blank"

• 图片 <img>，图像可以是 GIF，PNG，JPEG 格式的图像文件

• 例子：<img src="图片地址" alt="下载失败时的替换文本" title="提示文本">

• 表单 <form>

• 文本域 <textarea>

• 例子 <textarea rows="行数" cols="列数">文本</textarea>

• cols 多行输入域的列数；rows 多行输入域的行数。这两个属性可用 CSS 样式的 width 和 height 来代替：col 用 width、row 用 height 来代替

• 输入框 <input type="text/password" name="名称" value="文本" />

• 当 type=”text” 时，输入框为文本输入框

• 当 type=”password” 时, 输入框为密码输入框

• 单/复选框 <input type="radio/checkbox" value="值" name="名称" checked="checked"/>

• 当 type=”radio” 时，控件为单选框，同一组单选框 name 命名要一致

• 当 type=”checkbox” 时，控件为复选框

• 提交按钮 <input type="submit" value="提交">

• 重置按钮 <input type="reset" value="重置">

• 下拉列表框 ` `

• value <option value="提交值">选项</option>

• 选中 selected="selected"

• 多选 multiple="multiple"

• 标签 <label for="控件id名称">，标签的 for 属性中的值应当与相关控件的 id 属性 值一定要相同

CSS

基本知识

CSS 样式由选择符和声明组成，而声明又由属性和值组成。

• 选择符：又称选择器，指明网页中要应用样式规则的元素。

• 声明：在英文大括号{}中的的就是声明，属性和值之间用英文冒号{}分隔。当有多条声明时，中间可以英文分号;分隔。

从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。优先级遵循就近原则，一般来说，内联式 > 嵌入式 > 外部式。

• 内联式

例子 <p style="color:red;font-size:12px">这里文字是红色。</p>

• 嵌入式

• 外部式

例子：<link href="base.css" rel="stylesheet" type="text/css" />

CSS 选择器

常见的类选择器类型有如下几种：

• 标签选择器，.标签选择器名称{css样式代码;}

• 类选择器，.类选器名称{css样式代码;}

• ID 选择器，＃类选器名称{css样式代码;}

• 子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素

• 包含选择器，即加入空格 ,用于选择指定标签元素下的后辈元素

• 通用选择器，匹配html中所有标签元素，* {css样式代码;}类选择器和ID选择器都可以应用于任何元素，但 ID 选择器只能在文档中使用一次，可以使用类选择器词列表方法为一个元素同时设置多个样式，ID 选择器是不可以的。

子选择器和包含选择器区别：>作用于元素的第一代后代，空格作用于元素的所有后代。

另外还有两种选择符：

• 伪类选择符，允许给 HTML 不存在的标签（标签的某种状态）设置样式。常用的有 a:hover{color:red;}

• 分组选择符，为 HTML 中多个标签元素设置同一个样式时，可以使用分组选择符,

。例如h1,span{color:red;}

CSS 的继承、层叠和特殊性

• CSS 的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定 HTML 标签元素，而且应用于其后代。

• 特殊性：不同选择器具有不同权值，标签的权值为 1，类选择符的权值为 10，ID选择符的权值最高为 100。

• 层叠 就是在 HTML 文件中对于同一个元素可以有多个 CSS 样式存在，当有相同权重的样式存在时，会根据这些 CSS 样式的前后顺序来决定，处于最后面的 CSS 样式会被应用。

CSS 格式化排版

文字排版

• 字体，body{font-family:"Microsoft Yahei";}

• 字号、颜色，body{font-size:12px;color:#666}

• 粗体，body{font-weight:bold;}

• 斜体，body{font-style:italic;}

• 下划线，body{font-style:italic;}

• 删除线，body{text-decoration:line-through;}

段落排版

• 缩进，p{text-indent:2em;}

• 行间距（行高），p{line-height:1.5em;}

• 中文字间距、字母间距，letter-spacing:50px;和word-spacing:50px;

• 对齐，div{text-align:center;}

CSS 盒模型

元素分类

在 CSS 中，HTML 中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

• 常用的块状元素有：

块级元素特点：

1. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。

2. 元素的高度、宽度、行高以及顶和底边距都可设置。

3. 元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素的宽度一致），除非设定一个宽度。

设置 display:block就是将元素显示为块级元素，从而使元素具有块状元素特点。

注：img 标签与 div 层之间会有空隙的解决方法是：使用 display:block 就可以消除间隙。

• 常用的内联元素有：

内联元素特点：

1. 和其他元素都在一行上；

2. 元素的高度、宽度及顶部和底部边距不可设置；

3. 元素的宽度就是它包含的文字或图片的宽度，不可改变。

块状元素也可以通过代码 display:inline将元素设置为内联元素。

• 常用的内联块状元素有：

inline-block 元素特点：

1. 和其他元素都在一行上；

2. 元素的高度、宽度、行高以及顶和底边距都可设置。

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码 display:inline-block就是将元素设置为内联块状元素。

盒模型

• 边框

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

单独设置下边框的例子 div{border-bottom:1px solid red;}

• 宽度和高度

CSS 内定义的宽（width）和高（height），指的是 填充以里的内容范围。一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

W3C 的标准 Box Model:

所以有时会设置 box-sizing: border-box;来避免计算内部元素大小

• 填充(padding)

元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。

例子：

• 边界(margin)

元素与其它元素之间的距离可以使用边界（margin）来设置，顺序和填充一样是上，右，下，左。padding 在边框里，margin 在边框外。

CSS 布局模型

CSS 包含 3 种基本的布局模型，用英文概括为：Flow、Layer 和 Float。 在网页中，元素有三种布局模型：

1. 流动模型（Flow）

2. 浮动模型 (Float)

3. 层模型（Layer）

流动模型

流动模型，流动（Flow）是默认的网页布局模式。

流动布局模型具有2个比较典型的特征：

1. 块状元素 都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为 100%。实际上，块状元素都会以行的形式占据位置。

2. 在流动模型下，内联元素 都会在所处的包含元素内从左到右水平分布显示。

浮动模型

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动。例子：#div1{float:left;}

层模型

CSS 定义了一组定位（positioning）属性来支持层布局模型。

层模型有三种形式：

1. 绝对定位(position: absolute)

2. 相对定位(position: relative)

3. 固定定位(position: fixed)

• 绝对定位(position: absolute)

如果想为元素设置层模型中的绝对定位，需要设置 position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用 left、right、top、bottom 属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于 body 元素，即相对于浏览器窗口。

• 相对定位(position: relative)

如果想为元素设置层模型中的相对定位，需要设置 position:relative（表示相对定位），它通过 left、right、top、bottom 属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按 static(float) 方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

简单来说，就是相对元素原来的位置进行移动，元素本身所占的位置会保留。

• 固定定位(position: fixed)

设置 position:fixed;。fixed：表示固定定位，与 absolute 定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与 background-attachment:fixed; 属性功能相同。

Relative 与 Absolute 组合使用,必须遵守下面规范：

1. 参照定位的元素必须是相对定位元素的前辈元素

2. 参照定位的元素必须加入 position:relative;

3. 定位元素加入 position:absolute，便可以使用 top、bottom、left、right 来进行偏移定位了

例子(HTML 和 CSS 代码分别为)：

颜色和长度

设置颜色的方法也有很多种：

• 英文命令颜色，p{color:red;}

• RGB颜色，p{color:rgb(133,45,200);} 和 p{color:rgb(20%,33%,25%);}

• 十六进制颜色， 这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。p{color:#00ffff;}(当你设置的颜色是 16 进制的色彩值时，如果每两位的值相同，可以缩写一半，#0ff)RGB 配色表参考 RGB颜色对照表 - 在线工具 - 开源中国 或者 RGB 配色表长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

• 像素

• em，就是本元素给定字体的 font-size 值

• % 百分比

设置小技巧

水平居中设置

• 行内元素。如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center来实现的。

• 定宽块状元素(块状元素的宽度 width 为固定值)。满足定宽和块状两个条件的元素是可以通过设置“左右 margin”值为 auto 来实现居中的。

• 不定宽块状元素。

• 加入 table 标签(包括 <tbody>、<tr>、<td>)，为这个 table 设置“左右 margin 居中”

• 设置 display: inline方法：与第一种类似，显示类型设为 行内元素，然后使用 text-align:center来实现居中效果，进行不定宽元素的属性设置。

• 给父元素设置 float 和 position:relative; left:50%，子元素设置 position:relative 和left: -50% 来实现水平居中。

垂直居中设置

• 父元素高度确定的单行文本。通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度；line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。

• 父元素高度确定的多行文本。使用插入 table (包括 tbody、tr、td)标签，同时设置 vertical-align：middle。

另外，为元素设置以下两个属性之一会隐形改变 display 类型，元素的display显示类型就会自动变为以display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

position: absolute

float: left 或 float:right

二天，重新认识javascript

JS学习小结：

学习JavaScript脚本语言，首先我们要知道JavaScript是什么？

Javascript是什么，简称Js，Js是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言，使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。

Js交互图

当前什么越来越强调沟通，而Js是最接近前后端的语言，越来越多的前后端框架的支持，使他的前途很明朗，作为一种解释型语言，Js强调实时，在线。

先看下Js的特性：脚本编写语言，基于对象的语言，简单性，安全性，动态性和跨平台特性。

Js的命名规范：有两种常用的命名规则

匈牙利命名法的原则：变量名=属性+类型+对象描述。他的关键是：以一个或多个小写字母作为前缀，前缀之后是一个或多个首字母大写的单词组合，该单词指明变量的用途。

驼峰命名法的原则：第一个单词以小写字母开始，之后每一个单词的首字母大写。例如：myFirstName、myLastName，这样的变量名看上去就像驼峰一样此起彼伏，因此得名。驼峰法的关键是：除第一个单词外，其他单词首字母大小，混合使用大小写字母来构成变量名和函数名，还可以使用下划线来形成逻辑断点，这样更能增强代码的可读性。

JS的注释规范：

JS中单行注释用“ // 注释内容” 标识，多行注释使用“ /* 注释内容 */ “标识。注释的作用是提高代码的可读性，不仅自己以后用着方便，也有助于别人阅读和理解你所编写的JS代码，注释中的内容不会在网页中显示。为了方便阅读，注释一般放在需要解释的语句结尾处或者周围。

在JavaScript中四种基本的数据类型：数值（整数和实数）、字符串型（用“”号或‘’括起来的字符或数值）、布尔型（使True或False表示）和空值。在JavaScript的基本类型中的数据可以是常量，也可以变量。由于JavaScript采用弱类型的形式，因而一个数据的变量或常量不必首先作声明，而是在使用或赋值时确定其数据的类型的。当然也可以先声明该数据的类型，它是通过在赋值时自动说明其数据类型的。

Js还有一种拓展类型，那就是：Undefined 数据类型

一个为 undefined 的值就是指在变量被创建后，但未给该变量赋值以前所具有的值。

--------------------------------------------------------------------------------------------------------------------

下面是一下常用语法：

1.对象定义方式

空对象：没有任何属性和方法

var obj={};

定义对象的属性：

obj.xx="123";

定义对象的方法：

obj.function=function(){};

--------------------------------------------------------------------------------------------------------------------

2.函数的定义方式：

JavaScript函数定义

Function 函数名 （参数,变元）{

函数体;.

Return 表达式;

}

说明：

当调用函数时,所用变量或字面量均可作为变元传递。

函数由关键字Function定义。

函数名：定义自己函数的名字。

参数表，是传递给函数使用或操作的值，其值可以是常量 ，变量或其它表达式。

通过指定函数名（实参）来调用一个函数。

必须使用Return将值返回。

函数名对大小写是敏感的。

函数中的形式参数：

在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢？在JavaScript中可通过arguments .Length来检查参数的个数。

例：

Function function_Name(exp1,exp2,exp3,exp4)

Number=function _Name . arguments .length;

if (Number>1）

document.wrile(exp2);

if (Number>2)

document.write(exp3);

if(Number>3)

document.write(exp4);

...

--------------------------------------------------------------------------------------------------------------------

3 对象的引用传递

var person={name:'anker',age:100};

var x=person;

x.age=19;

console.log(x.age);//19

console.log(person.age);//19

说明js中对象的赋值也是采用引用的方式，同时指向同一个对象。

function changebj(obj) {obj.age=10};

changebj(person);

console.log(person.age);

10//打印结果也是10,说明函数传递的也是对象的引用。修改的是同一个对象。

person.sex='男';//若该属性不存在则添加，若存在则覆盖。

访问对象的方式：

obj.name

obj["name"]或者obj['name']//必须采用双引号或者单引号括起来

--------------------------------------------------------------------------------------------------------------------

4.匿名函数

（function(){//代码 })(); //可立即执行的匿名函数

解释：，包围函数（function(){})的第一对括号向脚本返回未命名的函数，随后一对空括号立即执行返回的未命名函数，括号内为匿名函数的参数。

例子：(function(arg){ alert(arg+100); })(20);

这个例子返回120。

匿名函数，就是没有引用直接加上()进行执行的函数。

var addFunc=function(a,b){

cosole.log(a+b);

};

--调用方式

addFunc(1,2);

--匿名函数

(function(a,b){console.log(a+b)})(1,2);

上面两个函数的产生的结果是一样的.只不过addFunc为函数对象的引用,而匿名函数不存在引用.

--来看个复杂的利用匿名函数的例子

var add=(function(){

var sum=0 ;

return function(){

for(var i=0;l=arguments.length,i<l;i++){

sum+=arguments[i];

}

return sum;

};

})(); --加上括号为匿名函数的写法,可以理解为直接执行了此函数,函数的执行结果返回

add(1,2,3,4);

add(2);

--等价于

var func1=function(){

var sum=0 ;

return function(){

for(var i=0;l=arguments.length,i<l;i++){

sum+=arguments[i];

}

return sum;

};

};

var add=func1();

add(1,2,3,4);

add(2);

//现在有一个场景，需要设计一个函数，前面每次调用，不会真正去计算，而是把参数保存下来，等到需要计算的再一起计算

var currying=function(fn){

var args=[] ;

return function(){

if(arguments.length===0){

return fn.apply(this,args);

}else {

Array.prototype.push.apply(args,arguments);

return arguments.callee;

}

};

}

var add=(function(){

var sum=0 ;

return function(){

for(var i=0;l=arguments.length,i<l;i++){

sum+=arguments[i];

}

return sum;

};

})();

var add=currying(add);

add(1);

add(2);

add(3);

add();

---------------------------------------------------------------------------------------------------------------------

5.闭包

可以理解成一个函数内的内部函数，它被创建在一个函数内部，引用这其外部函数的变量值。

var a=function(){

var x=1;

return function(y){

console.log(x+=y);//外部函数的x值就被包裹在引用对象中

}

}

var b=a();//实际上是返回function(y){...}的引用

b();//执行上面的引用，此时的x值变成了private的属性

闭包的两个作用：

1.可以读取函数体所在外部函数的局部变量

2.就是让这些变量的值始终保持在内存中

------------------------------------------------------------------------------------------------------------------------

6.constructor

constructor 属性返回对创建此对象的数组函数的引用。

var test=new Array();

if (test.constructor==Array)//判断test的构造函数是否是Array

{

document.write("This is an Array");

}

var createPerson=function(name,sex,age){

this.name=name;

this.sex=sex;

this.age=age;

};

//undefined

var p1=new createPerson('z1',19,'男');

//undefined

p1.constructor

//输出

function (name,sex,age){

this.name=name;

this.sex=sex;

this.age=age;

}

p1.constructor==createPerson

//输出：true

createPerson.constructor

//Function() { [native code] } //createPerson构造函数为Function,从一个侧面说明function也是对象

------------------------------------------------------------------------------------------------------------------------

7.js==与===的区别

一个等号是赋值操作，==先转换类型再比较，进行值的对比。

而===先判断类型，如果不是同一类型直接为false，只有类型和值全部都相等，才相等。

------------------------------------------------------------------------------------------------------------------------

8.JS中一切皆对象

JS中基本数据类型，也存在着对象封装，比如下面数字123的构造函数是Number,test的构造函数是String，包含length的属性

(123).constructor

//输出：function Number() { [native code] }

'test'.constructor

//输出：String() { [native code] }

'test'.length;

//输出：4

//扩展Number的函数

Number.prototype.toString=function(){

alert('hi,I\'m a number ');

};

(123).toString();

//输出：hi,I\'m a number

Number.prototype

Number {toString: null, [[PrimitiveValue]]: 0}

------------------------------------------------------------------------------------------------------------------------

9.prototype原型

每个对象都连接到一个原型对象，并且可以从中继承属性。所有通过{}或者构造函数创建的对象都连接到Object{}

对象通过(对象名称.__proto__)可以查看原型

或者通过(对象名称.constructor.prototype)查看原型

var createPerson=function(name,sex,age){

this.name=name;

this.sex=sex;

this.age=age;

};

var p1=new createPerson('z1',19,'男');

p1.constructor

//输出：

fucntion(name,sex,age){

this.name=name;

this.sex=sex;

this.age=age;

}

p1.constructor.prototype

//输出：

Object {}

createPerson.prototype

//输出：

Object {}

p1.constructor.prototype===createPerson.prototype

true

var p2={sex:'男'};

p2.constructor.prototype

//输出：Object {}

/*

在javascript中，创建一个新对象时，可以选择某个对象作为它的原型，比如

*/

var person={name:'z3',age:18,sex:'男'};

Object.create=function(o){

var F=function(){};

F.prototype=o ;

return new F();

};

var anotherPerson=Object.create(person);

anotherPerson.name;//z3

//对原型对象进行更新,发现已创建的对象值也随着变化

person.name='z4';

"z4"

anotherPerson.name

//输出："z4"

//但当对象增加相同的属性后,原型对象的属性变化，不影响对象的属性值。因为对象读取值首先读取本身对象的值，后读取原型的值

anotherPerson.name='z5';

person.name='z6';

//输出："z6"

anotherPerson.name

//输出："z5"

delete anotherPerson.name

//输出：true

anotherPerson.name//输出对象本身的属性值,原型对象的属性值不会被删除,除非通过delete 原型对象.属性输出.

//输出："z6"

delete person.name

//输出：true

anotherPerson.name

//输出：undefined

//原型连接什么时候起作用呢？只有在检索值的时候才被用到

//如果尝试者去获取对象的某个属性值，但该对象没有此属性名，那么JAVASCRIPT会尝试着从原型对象中获取属性值。

//如果原型对象也没有该属性值则再从它的原型找，直到该过程最后达到终点Object.prototype。Object

//如果想要的属性完全不存在于原型链中，那么结果就是undefined。

person.age=18;

anotherPerson.age//显示什么？

//原型关系是一种动态的关系。如果添加一个新的属性到原型中，该属性会立即对所有基于该原型创建的对象可见。

anotherPerson.__proto__===person;//true

__proto__显示对象的原型链

//可以使用hasOwnProperty方法来判断对像是否含有某个属性，如果对象拥有独有的属性，则返回true

//这个方法不会去检查原型链

------------------------------------------------------------------------------------------------------------------

10. arguments

arguments 对象是函数内部的本地变量；arguments 已经不再是函数的属性了。

你可以在函数内部通过使用 arguments 对象来获取函数的所有参数。这个对象为传递给函数的每个参数建立一个条目，

条目的索引号从 0 开始。例如，如果一个函数有三个参数，你可以通过以下方式获取参数：

arguments[0]

arguments[1]

arguments[2]

参数也可以被重新赋值:

arguments[1]='new value';

arguments 对象并不是一个真正的Array。它类似于数组，但没有数组所特有的属性和方法，除了 length。

例如，它没有 pop 方法。不过可以将其转换成数组

------------------------------------------------------------------------------------------------------------------------

11.利用JS特性实现AOP

AOP就是面向切面编程，主要作用是把一些核心业务逻辑模块无关的功能抽离出来，这些跟业务逻辑无关的功能

通常包括日志统计，安全控制，异常处理等。把这些功能抽离出来后，又通过动态织入的方式渗入到业务逻辑模块中

在JAVA中，可以通过反射和动态代理机制来实现AOP。但对于javascript这种动态语言，AOP的实现更加简单

在javascript中实现AOP，都是指把一个函数动态织入到另外一个函数中。我们可以通过扩展Function.prototype来做到这一点

*/

Function.prototype.before=function(beforefn){

var that=this ;

return function(){

beforefn.apply(this,arguments);

return that.apply(this,arguments);

};

};

Function.prototype.after=function(afterfn){

var that=this ;

return function(){

var ret=that.apply(this,arguments);

afterfn.apply(this,arguments);

return ret ;

};

};

var func=function(){

console.log(2);

};

func=func.before(function(){

console.log(1);

}).after(function(){

console.log(3);

});

func();

var func1=document.getElementById;

undefined

func1('nt-contents');

//报错信息如下, 是由于document.getElementById函数中的this指向为windows对象,而windows对象不存在这些变量。

VM245:1 Uncaught TypeError: Illegal invocation(…)

//写那么复杂主要是将this的指向还是定位到document上面

var getElementById1=(function(func){

return function(){

return func.apply(document,arguments);

}

})(document.getElementById);

------------------------------------------------------------------------------------------------------------------------

12.利用JS特性实现一些有趣的Function

var getId=document.getElementById1; //返回 这个对象 function(){return func.apply(document,arguments);}

var div=getId('ntp-contents');//返回func.apply(document,arguments)的对象，arguments参数值div1,func执行闭包中的document.getElementById函数

alert(div.id);

//我们上节课讲到，怎么在一个内部函数中保持外层的this上下使用了一个变量that来保存外,还可以使用以下方法

Function.prototype.bind=function(context){

var self=this ;

return function(){

alert(self);

alert(context);

return self.apply(context,arguments);

}

};

var obj={name : 'steven'};

var func=(function(){

alert(this.name)

}).bind(obj);

var isType=function(type){

return function(obj){

return Object.prototype.toString.call(obj)==='[object '+type+']';

};

};

var isString=isType('String');

isString('hello world');

var isArray=isType('Array');

isArray([2,3]);

13.call、apply的使用

语法

function.call(thisObj,param1,param2,param3...);

function.apply(thisObj,[param1,param2,param3...]);

用法是改变function的作用域，将参数的上下文作用域修改成thisObj对象, 也可以说this对象为thisObj.

默认的function的作用域是window，this相当于window.function