参考文档: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写出文字水平垂直居中,图片水平垂直居中的样式及布局。
单文字垂直居中:
.align_cc{height:30px;line-height:30px;text-align:center; }
多行文字垂直居中:
.align_box {width: 220px;height: 200px;display: table-cell;vertical-align: middle;text-align: center;*position: relative;}
.align_box span.align_word {display: inline-block;*position: absolute;*left: 0;*top: 50%;*width: 100%;}
.align_box span.align_word a {*display: inline-block;*position: relative;*top: -50%;}
<div class="align_box">
<span class="align_word">
<a href="">文字垂直居中对齐文字垂直居中对齐文字垂直居中对齐</a>
</span>
</div>
图片垂直居中:
.ver_pic {width: 200px; height: 200px;line-height:200px;text-align: center;background: #eee;}
.ver_pic img { vertical-align:middle;width:100px;height:100px;}
2、请用div+css写出左侧固定(width:200px),右侧自适应的页面布局。
.c_left{float:left;display:inline-block;width:200px;}
.c_right{margin-left:200px;}
3、请写出至少五种css浏览器兼容性的写法。
* :IE6、IE7可以识别;
_和- :IE6可以识别;
!important :表示高优先级,IE7及以上、Firefox都支持,IE6认识带!important的样式属性,但不认识!important的优先级
-webkit- :针对谷歌浏览器内核支持的CSS样式
-moz- :针对Firefox浏览器的内核CSS写法
-ms- :针对ie内核CSS写法
-o- :针对opera内核CSS写法
4、jquery的绑定事件有几种方式 ,请举例说明其优缺点。
记得自己看懂吃透:
bind()可以向匹配的元素绑定一个或者多个事件处理器。但是它不会在没有存在dom树中的元素绑定该事件;而live()、delegate()则可以实现在不存在dom树中的元素继续绑定事件.
live方法其实是bind方法的变种,其基本功能同bind方法的功能一样都是为一个元素绑定某个事件,但是bind方法只能给当前存在的元素绑定事件,对于事后采用JS等方式新生成的元素无效,而live方法则正好弥补了bind方法的这个缺陷,它可以对后生成的元素也可以绑定相应的事件。
live()方法用到了事件委托的概念来处理事件的绑定,会绑定相应的事件到你所选择的元素的根元素上,即是document元素上,一旦事件冒泡到document上,jQuery将会查找selector/event metadata,然后决定那个handler应该被调用。
delegate()有点像.live(),不同于.live()的地方在于,它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.
其实.bind(), .live(), .delegate()都是通过.on()来实现的,.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的。
bind的缺点:
它会绑定事件到所有的选出来的元素上,当元素很多时,会出现效率问题;
当页面加载完的时候,你才可以进行bind();
它不会绑定到在它执行完后动态添加的那些元素上。
live的优点:
仅有一次的事件绑定,绑定到document上;
动态添加的elemtns依然可以触发那些早先绑定的事件,因为事件真正的绑定是在document上;
可以在document ready之前就可以绑定那些需要的事件。
live的缺点:
从jq1.7开始已经不被推荐了;
当一个元素采用live方法进行事件的绑定的时候,如果想阻止事件的传递或冒泡,就要在函数中return false,仅仅调用stopPropagation()是无法实现阻止事件的传递或者冒泡的,因为都要到达document,所以速度也会非常慢;
delegate的优点:
可以选择把这个事件放到哪个元素上了,可以有效的减小你所要查找的元素;
可以用在动态添加的元素上。
delegate的缺点:
需要查找哪个元素上发生了那个事件,尽管比document少很多了,不过,还是得浪费时间来查找。
on的优点:
提供了一种统一绑定事件的方法,可以用.on()来代替上述的3种方法。
one是在dom树加载后,对元素的绑定,和bind一样属于后期绑定,但是会在事件执行之后移除元素的绑定事件,事件只执行一次。
5、请写出js内存泄漏的问题。
循环引用:一个DOM对象被多个Javascript对象引用就可能会引发内存泄露,解决方法:
js闭包的应用:参考下面文档
DOM插入顺序:参考下面文档
参考文档:http://blog.csdn.net/li2274221/article/details/25217297
6、js面向对象的几种方式。
第一种模式:工厂方式
var lev=function(){ return "脚本之家"; };
function Parent(){ var Child = new Object(); Child.name="脚本"; Child.age="4"; Child.lev=lev; return Child; };
var x = Parent();
alert(x.name);
alert(x.lev());
第二种模式:构造函数方式
var lev=function(){ return "脚本之家"; };
function Parent(){ this.name="脚本"; this.age="30"; this.lev=lev; };
var x =new Parent();
alert(x.name);
alert(x.lev());
第三种模式:原型模式
var lev=function(){ return "脚本之家"; };
function Parent(){ };
Parent.prototype.name="李小龙";
Parent.prototype.age="30";
Parent.prototype.lev=lev;
var x =new Parent();
alert(x.name);
alert(x.lev());
第四种模式:混合的构造函数,原型方式(推荐)
function Parent(){ this.name="脚本"; this.age=4; };
Parent.prototype.lev=function(){ return this.name; };
var x =new Parent();
alert(x.lev());
第五种模式:动态原型方式
function Parent(){ this.name="脚本"; this.age=4; if(typeof Parent._lev=="undefined"){
Parent.prototype.lev=function(){ return this.name; } Parent._lev=true; }
};
var x =new Parent();
alert(x.lev());
7、解释css sprites,如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上,减轻服务器对图片的请求数量
8、浏览器标准模式和怪异模式之间的区别是什么?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式
9、你如何对网站的文件和资源进行优化?期待的解决方案包括?
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
10、事件委托是什么?
让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!
11、javascript的本地对象,内置对象和宿主对象分别指什么?
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等
12、”==”和“===”的不同
前者会自动转换类型
后者不会
13、希望获取到页面中所有的checkbox怎么做?写一个方法
var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];
var len = domList.length; //缓存到局部变量
while (len--) { //使用while的效率会比for循环更高
if (domList[len].type == ‘checkbox’) {
checkBoxList.push(domList[len]);
}
}
14、Javascript的事件流模型都有什么?
“事件冒泡”:事件开始由最具体的元素接受,然后逐级向上传播
“事件捕捉”:事件由最不具体的节点先接收,然后逐级向下,一直到最具体的
“DOM事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡
15、输出今天的日期,以YYYY-MM-DD的方式,比如今天是2014年9月26日,则输出2014-09-26。
var d = new Date();
// 获取年,getFullYear()返回4位的数字
var year = d.getFullYear();
// 获取月,月份比较特殊,0是1月,11是12月
var month = d.getMonth() + 1;
// 变成两位
month = month < 10 ? '0' + month : month;
// 获取日
var day = d.getDate();
day = day < 10 ? '0' + day : day;
alert(year + '-' + month + '-' + day);
16、用js实现随机选取10--100之间的10个数字,存入一个数组,并排序。
var iArray = [];
funtion getRandom(istart, iend){
var iChoice = istart - iend +1;
return Math.floor(Math.random() * iChoice + istart;
}
for(var i=0; i<10; i++){
iArray.push(getRandom(10,100));
}
iArray.sort();
17、把两个数组合并,并删除第二个元素。
var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1);
18、写一个function,清除字符串前后的空格。
使用自带接口trim(),考虑兼容性:
if (!String.prototype.trim) {
String.prototype.trim = function() {
return this.replace(/^\s+/, "").replace(/\s+$/,"");
}
}
// test the function
var str = " \t\n test string ".trim();
alert(str == "test string"); // alerts "true"
19、讲解原生Js实现ajax的原理。
Ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式。
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。
XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。
XMLHttpRequest这个对象的属性有:
onreadystatechang 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)
status Text 伴随状态码的字符串信息
readyState 对象状态值
0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
1 (初始化) 对象已建立,尚未调用send方法
2 (发送数据) send方法已调用,但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
20、XHTML和HTML有什么区别
HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
最主要的不同:
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。