题目

参考文档：http://www.qdfuns.com/notes/24613/49b35e1700779ccfe80e13bc47130df8.html

参考文档：http://www.jobui.com/mianshiti/it/web/5066/

参考文档：http://www.cnblogs.com/coco1s/p/4029708.html

1、请用div+css写出文字水平垂直居中，图片水平垂直居中的样式及布局。

1

单文字垂直居中:

2

.align_cc{height:30px;line-height:30px;text-align:center; }

3

多行文字垂直居中：

4

.align_box {width: 220px;height: 200px;display: table-cell;vertical-align: middle;text-align: center;*position: relative;}               

5

.align_box span.align_word {display: inline-block;*position: absolute;*left: 0;*top: 50%;*width: 100%;}

6

.align_box span.align_word a {*display: inline-block;*position: relative;*top: -50%;}

7

<div class="align_box">

8

        <span class="align_word">

9

                <a href="">文字垂直居中对齐文字垂直居中对齐文字垂直居中对齐</a>

10

        </span>

11

</div>

1

图片垂直居中：

2

.ver_pic {width: 200px; height: 200px;line-height:200px;text-align: center;background: #eee;}

3

.ver_pic img { vertical-align:middle;width:100px;height:100px;}

2、请用div+css写出左侧固定(width：200px)，右侧自适应的页面布局。

1

.c_left{float:left;display:inline-block;width:200px;}

2

.c_right{margin-left:200px;} 

3、请写出至少五种css浏览器兼容性的写法。

1

* ：IE6、IE7可以识别；

2

_和- ：IE6可以识别；

3

!important ：表示高优先级，IE7及以上、Firefox都支持，IE6认识带!important的样式属性，但不认识!important的优先级

4

-webkit- ：针对谷歌浏览器内核支持的CSS样式

5

-moz- ：针对Firefox浏览器的内核CSS写法

6

-ms- ：针对ie内核CSS写法

7

-o- ：针对opera内核CSS写法

4、jquery的绑定事件有几种方式 ，请举例说明其优缺点。

记得自己看懂吃透：

1

bind()可以向匹配的元素绑定一个或者多个事件处理器。但是它不会在没有存在dom树中的元素绑定该事件;而live()、delegate()则可以实现在不存在dom树中的元素继续绑定事件.

2

live方法其实是bind方法的变种，其基本功能同bind方法的功能一样都是为一个元素绑定某个事件，但是bind方法只能给当前存在的元素绑定事件，对于事后采用JS等方式新生成的元素无效，而live方法则正好弥补了bind方法的这个缺陷，它可以对后生成的元素也可以绑定相应的事件。

3

live()方法用到了事件委托的概念来处理事件的绑定，会绑定相应的事件到你所选择的元素的根元素上，即是document元素上，一旦事件冒泡到document上，jQuery将会查找selector/event metadata,然后决定那个handler应该被调用。

4

delegate()有点像.live(),不同于.live()的地方在于，它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.

5

其实.bind(), .live(), .delegate()都是通过.on()来实现的，.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的。

6

bind的缺点：

7

它会绑定事件到所有的选出来的元素上，当元素很多时，会出现效率问题；

8

当页面加载完的时候，你才可以进行bind()；

9

它不会绑定到在它执行完后动态添加的那些元素上。

10

live的优点：

11

仅有一次的事件绑定，绑定到document上；

12

动态添加的elemtns依然可以触发那些早先绑定的事件，因为事件真正的绑定是在document上；

13

可以在document ready之前就可以绑定那些需要的事件。

14

live的缺点：

15

从jq1.7开始已经不被推荐了;

16

当一个元素采用live方法进行事件的绑定的时候，如果想阻止事件的传递或冒泡，就要在函数中return false,仅仅调用stopPropagation()是无法实现阻止事件的传递或者冒泡的,因为都要到达document，所以速度也会非常慢；

17

delegate的优点：

18

可以选择把这个事件放到哪个元素上了，可以有效的减小你所要查找的元素；

19

可以用在动态添加的元素上。

20

delegate的缺点：

21

需要查找哪个元素上发生了那个事件，尽管比document少很多了，不过，还是得浪费时间来查找。

22

on的优点：

23

提供了一种统一绑定事件的方法,可以用.on()来代替上述的3种方法。

24

one是在dom树加载后，对元素的绑定，和bind一样属于后期绑定，但是会在事件执行之后移除元素的绑定事件，事件只执行一次。

5、请写出js内存泄漏的问题。

1

循环引用：一个DOM对象被多个Javascript对象引用就可能会引发内存泄露，解决方法：

2

3

js闭包的应用：参考下面文档

4

DOM插入顺序：参考下面文档

5

参考文档：http://blog.csdn.net/li2274221/article/details/25217297

6、js面向对象的几种方式。

1

第一种模式：工厂方式

2

var lev=function(){ return "脚本之家"; };

3

function Parent(){ var Child = new Object(); Child.name="脚本"; Child.age="4"; Child.lev=lev; return Child; };

4

var x = Parent();

5

alert(x.name);

6

alert(x.lev());

7

第二种模式：构造函数方式

8

var lev=function(){ return "脚本之家"; };

9

function Parent(){ this.name="脚本"; this.age="30"; this.lev=lev; };

10

var x =new Parent();

11

alert(x.name);

12

alert(x.lev());

13

第三种模式：原型模式

14

var lev=function(){ return "脚本之家"; };

15

function Parent(){ };

16

Parent.prototype.name="李小龙";

17

Parent.prototype.age="30";

18

Parent.prototype.lev=lev;

19

var x =new Parent();

20

alert(x.name);

21

alert(x.lev());

22

第四种模式：混合的构造函数，原型方式（推荐）

23

function Parent(){ this.name="脚本"; this.age=4; };

24

Parent.prototype.lev=function(){ return this.name; };

25

var x =new Parent();

26

alert(x.lev());

27

第五种模式：动态原型方式

28

function Parent(){ this.name="脚本"; this.age=4; if(typeof Parent._lev=="undefined"){

29

        Parent.prototype.lev=function(){ return this.name; } Parent._lev=true; }

30

};

31

var x =new Parent();

32

alert(x.lev());

7、解释css sprites，如何使用。

1

Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

8、浏览器标准模式和怪异模式之间的区别是什么?

1

盒子模型 渲染模式的不同

2

使用 window.top.document.compatMode 可显示为什么模式

9、你如何对网站的文件和资源进行优化?期待的解决方案包括？

1

文件合并

2

文件最小化/文件压缩

3

使用CDN托管

4

缓存的使用

10、事件委托是什么？

1

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

11、javascript的本地对象，内置对象和宿主对象分别指什么？

1

本地对象为array obj regexp等可以new实例化

2

内置对象为gload Math 等不可以实例化的

3

宿主为浏览器自带的document,window 等

12、”==”和“===”的不同

1

前者会自动转换类型

2

后者不会

13、希望获取到页面中所有的checkbox怎么做？写一个方法

1

var domList = document.getElementsByTagName(‘input’)

2

var checkBoxList = [];

3

var len = domList.length;　　//缓存到局部变量

4

while (len--) {　　//使用while的效率会比for循环更高

5

　　if (domList[len].type == ‘checkbox’) {

6

    　　checkBoxList.push(domList[len]);

7

　　}

8

}

14、Javascript的事件流模型都有什么？

1

    “事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播

2

    “事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的

3

    “DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

15、输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26。

1

var d = new Date();

2

// 获取年，getFullYear()返回4位的数字

3

var year = d.getFullYear();

4

// 获取月，月份比较特殊，0是1月，11是12月

5

var month = d.getMonth() + 1;

6

// 变成两位

7

month = month < 10 ? '0' + month : month;

8

// 获取日

9

var day = d.getDate();

10

day = day < 10 ? '0' + day : day;

11

alert(year + '-' + month + '-' + day);

16、用js实现随机选取10--100之间的10个数字，存入一个数组，并排序。

1

var iArray = [];

2

funtion getRandom(istart, iend){

3

        var iChoice = istart - iend +1;

4

        return Math.floor(Math.random() * iChoice + istart;

5

}

6

for(var i=0; i<10; i++){

7

        iArray.push(getRandom(10,100));

8

}

9

iArray.sort();

17、把两个数组合并，并删除第二个元素。

1

var array1 = ['a','b','c'];

2

var bArray = ['d','e','f'];

3

var cArray = array1.concat(bArray);

4

cArray.splice(1,1);

18、写一个function，清除字符串前后的空格。

1

使用自带接口trim()，考虑兼容性：

2

​

3

​

1

if (!String.prototype.trim) {

2

 String.prototype.trim = function() {

3

 return this.replace(/^\s+/, "").replace(/\s+$/,"");

4

 }

5

}

6

7

// test the function

8

var str = " \t\n test string ".trim();

9

alert(str == "test string"); // alerts "true"

19、讲解原生Js实现ajax的原理。

1

Ajax 的全称是Asynchronous JavaScript and XML，其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。

2

3

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

4

5

XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

6

7

XMLHttpRequest这个对象的属性有：

8

9

     onreadystatechang    每次状态改变所触发事件的事件处理程序。

10

     responseText    从服务器进程返回数据的字符串形式。

11

     responseXML    从服务器进程返回的DOM兼容的文档数据对象。

12

     status    从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）

13

     status Text    伴随状态码的字符串信息

14

     readyState    对象状态值

15

         0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

16

17

         1 (初始化) 对象已建立，尚未调用send方法

18

19

         2 (发送数据) send方法已调用，但是当前的状态及http头未知

20

21

         3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

22

23

         4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

20、XHTML和HTML有什么区别

1

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

2

最主要的不同：

3

XHTML 元素必须被正确地嵌套。

4

XHTML 元素必须被关闭。

5

标签名必须用小写字母。

6

XHTML 文档必须拥有根元素。