为了面试本身写的概要,参考文献:《javascript高级程序设计》javascript
一、选择符API
*querySelector()
querySelector()接收一个css选择符,返回与选择符匹配的第一个元素,若是没有就返回null。
当用document调用它的时候,在全部的document元素中查找,
若是用元素调用这个方法,就会在元素全部后代元素中查找。
若果匹配到不合法的css选择符,就是报错。
*querySelectorAll()
querySelector()接收一个css选择符,与querySelectorAll()同样,它返回的是一个知足css选择符的NodeList,
一样,也能够用document和元素调用它,若是没有找到匹配的选择符,则返回一个空的NodeLIst,若是
css选择符不合法,则会抛出错误。
*matchesSelector()
matchesSelector()方法接收一个css选择符,它能够返回调用元素是否与该选择符匹配,因此
它的返回值是布尔类型,若是能够匹配则返回true,若果不匹配则返回false。
matchesSelector()通常能够用来检查所选元素能不能被querySelector()和querySelectorAll()返回,
但浏览器并不能很好的支持matchesSelector,IE9+能够支持msMatchesSelector(),
Firefox3.6+能够支持mozMatchesSelector,Chrome支持webkitMatchesSelector(),因此须要本身封装一个方法:css
function matchesSelector(element,selector){
if(element.matchesSelector){
return element.matchesSelector(selector);
}else if(element.msMatchesSelector){
return element.msMatchesSelector(selector);
}else if(element.mozMatchesSelector){
return element.mozMatchesSelector(selector);
}else if(element.webkitMatchesSelector){
return element.webkitMatchesSelector(selector);
}else{
throw new Error("浏览器不支持");
}
}html
二、javaScript中的节点属性
*节点属性:
nodeType 每一个节点都有,返回值分别为1~12的的整数,表明不一样的节点类型
parentNode 指向每一个节点的父节点,只有一个。
childNodes 返回一个元素的全部子节点。
previousSibling 返回当前节点的上一个兄弟节点,若是当前节点是childNodes中的第一个节点,则返回null。
nextSibling 返回当前节点的下一个兄弟节点,若是当前节点是childNodes中的最后一个节点,则返回null。
*操做节点:
appendChild() 插入节点,而且被插入的节点做为父节点的最后一个子节点。即被插入节点的nextSibling为nulll;
insertBefore() 插入节点,可是insertBefore("","")接收两个参数,第一个参数是被插入的节点,第二个参数是参照节点,
执行完insertBefore后,被插入的节点将会做为参照的节点的上一个兄弟节点被插入(即previousSibling),
第二个参数也能够是null,这样就达到了和appendChild()相同的效果。
replaceChild() 替换节点,replaceChild()接收两个参数,第一个参数为要插入的节点,第二个参数为要替换的节点,
被替换的节点仍然存在于文档中,但却失去了在文档中的位置。
removeChild() 移除节点,removeChild()接收一个参数,就是被移除的节点,该方法的返回值为被移除的节点。被移除的节点
仍然存在于文档中,可是却失去了在文档中的位置。
*document节点
document存在的属性:
document.URL 取得当前页面完整的URL
document.domain 取得当前页面的域名
document.referrer 取得当前页面的来源页面地址,若是没有返回空字符串前端
三、HTML5中的自定义数据属性
HTML5中规定为元素添加非标准的属性时要加上前缀data-,目的是为元素提供与渲染无关的信息,或单纯是为了语义信息,能够随便添加
只要以data-开头便可。而后能够经过dataset来访问响应的值,而且用dataset取值的时候属性名没有了data-前缀,若是属性为data-myname
则只须要用 Selector.dataset.myname便可。java
四、HTML5中插入标记的三种方式
*innerHTML
在读的模式下,innerHTML会返回调用它的元素的全部子节点的HTML代码。
在写的模式下,innerHTML接收一段html代码做为参数,会根据制定的参数建立新的DOM树,而后用新的DOM树替换原来的DOM树。
*outerHTMl
在读得模式下,outerHTML会返回包括调用它的元素和全部子节点的所有HTML标记。
在写的模式下,至关于根据参数建立新的DOM树,而后替换包括调用该方法在内的DOM树。
转换为代码就是:
div.outerHTML("<p>this is text</p>");
var p = document.createElement('p');
p.append(document.createTextNode('this is text'));
div.parentNode.replace(p,div);
*insertAdjacentHTML()方法
接收两个参数,第一个参数是要插入的位置,第二个参数是要插入的元素。
第一个参数为beforebegin,表示在当前元素前插入一个同辈元素。
第一个参数为afterbegin,表示在当前元素之下插入一个新的子元素或者在第一个子元素以前在插入一个新的子元素。
第一个参数为beforeend,表示在当前元素之下插入一个新的子元素或者在最后一个子元素以后再插入一个新的子元素。
第一个参数诶afterend,表示在当前元素以后插入一个紧邻的同辈元素。
五、DOM中的计算样式:
*DOM2中的计算样式:
加强了document.defaultView.getComputedStyle("","") 传入两个参数,第一个参数传入的要计算样式的元素,第二个参数是一个伪元素
字符串,若是不须要得到伪元素的信息能够传入null;最终调用的形式为 var style = document.defaultView.getComputedStyle(div,null);最终采用
这样的形式取出计算后的样式。style.backgroundColor,style.width,style.height。
在IE中没有getComputedStyle属性,IE中用currentStyle返回类型跟getComputedStyle同样,调用形式为 myDiv.currentStyle。node
*cssDOM中的偏移量offset
offsetWiidth 元素在水平方向上占用的空间的大小,包括元素的宽度,元素的可见的垂直滚动条的宽度,左右边框的宽度。
offHeight 元素在垂直方向上占用空间的大小,包括元素的高度,元素中在水平方向上得滚动条的宽度,上下边框的宽度。
offsetTop 元素上外边框到包含元素的上内边框之间的距离。
offsetLeft 元素左外边框到包含元素的左内边框之间的距离。
offsetParent 所指的是元素的外包含元素。
通用的取得元素相对于文档偏移的函数:
function getElementLeft(element){
var left = element.offsetLeft;
var current = element.offsetParent;
while(current !== null){
left += current.offsetLeft;
current = current.offsetParent;
}
return left;
}jquery
*客户区的大小
clientWidth:
元素内容的宽度加上左右内边距的宽度。
clientHeight:
元素内容的高度加上上下内边距的高度
*元素的滚动的大小
scrollHeight 表示在没有滚动条的状况下,元素内容区的总高度。
scrollWidth 表示在没有滚动条的状况下,元素内容区的总宽度。
scrollTop 表示因为滚动条的存在,元素上方被隐藏的像素数。能够用它来改变滚动条的位置。
scrollLeft 表示因为滚动条的存在,元素左侧被隐藏的像素数。能够用它开改变滚动条的位置。
例如,返回顶部的按钮的例子。
function scrollToTop(element){
if(element.scrollTop != 0){
element.scrollTop = 0;
}
}
*肯定元素的大小
getBoundingClientRect()方法看不太懂,mark下。 css3
========================================================================
js中的事件总结:
一、事件捕获和事件冒泡web
二、DOM2级事件处理程序
添加事件:addEventListener()
删除事件:removeEventListener()
它们都接受三个参数,第一个参数为事件类型,第二个参数为事件触发的函数,第三个参数是一个布尔类型。ture表示在捕获阶段
调用事件处理程序,false表示在冒泡阶段调用事件处理程序。
要为一个按钮添加事件的例子:
btn.addEventListener("click",function(){alert("btn")},false);
值得注意的是,经过addEventListener()添加的事件只能用removeEventListener()删除,并且保证它们所传入的参数
必须一致才能删除,全部要知足这个规则的话,就有一个问题,就是传入匿名函数的事件将不会被删除。
IE中的事件处理程序:
添加事件:attachEvent()
删除事件:detachEvent()
它们都接受两个参数,第一个参数接受事件类型,这里与addEventListener()不用的是事件类型为基础的事件类型,
即事件类型全是on开头的事件类型,第二个参数接收触发的执行函数。该方法所有采用事件冒泡的方式来调用
事件。值得注意的一点是,attachEvent()执行环境是全局的执行环境,因此在attachEvent()中this的值是window。
3 、计算鼠标位置的事件
clientX:返回鼠标相对于浏览器视口的横坐标。
clientY:返回鼠标相对于浏览器视口的纵坐标。
pageX:鼠标相对于页面的横坐标。
pageY:鼠标相对于页面的纵坐标。
screenX:鼠标相对于屏幕的横坐标。
screenY:鼠标相对于屏幕的纵坐标。
四、鼠标滚轮滚动的事件
mousewheel事件,鼠标滚轮滚动时触发,存在一个wheelDelta属性,根据方向分正负,都是120的倍数,因此可根据wheelDelta属性
来判断鼠标滚动的方向。
五、移动端的触摸与手势事件
touchstart() 当手指触摸屏幕时触发。
touchend() 当手指从屏幕上移开时触发。
touchmove() 当手指在屏幕上连续滑动的时候触发。
touchcancel() 当系统中止跟踪触摸的时候触发。
将NodeList转换为数组
var array = Array.prototype.slice.call(NodeList,0);
将arguments对象转换为数组
var array = Array.prototype.slice.call(arguments,0);
==========================================================
一、js中字符串的操做方法
charAt()能够传入一个索引,返回字符串在该索引处的字符,能够简化,直接用[]中括号里加索引值就能达到相同的效果。
concat() 能够将字符串和字符串链接起来。
slice() 和substring() 能够传入一个或两个参数,传入一个参数时返回第一个索引到字符串尾部的子字符串。传入
第二个参数时返回第一个到第二个索引之间的子字符串。
substr() 传入一个参数时和上边做用同样,传入第二个参数的时候返回从第一个索引到第二个参数个数的子字符串。
indexOf()和lastIndexOf()返回给定字符在字符串中的索引,indexOf从头开始,lastIndexOf从字符串的尾部开始。
二、js中数组的操做方法
join() 方法接收一个参数,将数组转换成字符串并以传入的参数进行分割。
push() 方法接收参数,将参数放入数组的结尾,并返回修改后数组的长度。
pop() 方法从数组的末尾移除一项,并将移除的项返回。
shift() 方法移除数组的第一项并返回该项。
unshift() 方法以第一项的添加给数组,并返回修改后数组的长度。
数组中很是强大的方法:
splice() 提供两个参数的时候,是删除,即第一个参数是要删除的起始项,和要删除的项数。
splice() 若是三个参数,第二个参数为0时,即要删除的项数为0,第一个参数为起始项,能够有第三个,四个或更多的参数,表示从
死一个参数项起,插入后面该项,此时第二个参数为0。
若是第二个参数不为0,就是替换功能,即先从起始项删除相应长度的项,再插入后面传入参数的各个项。
三、HTTP超文本传输协议
分为4个过程:
创建链接
发送请求
发送响应
关闭链接
四、js中的闭包:
闭包在javascript高级程序设计一书中被解释为是指有权访问另外一个函数做用域中变量的函数,简单解释能够分为两种,在函数中
做为返回值,做为参数传递。
关于做用域:在javascript中没有块级做用域,并且在javascript中只有函数能够声明一个做用域,并且做用域是在函数声明的时候
就建立的。
关于执行下文:执行上下文是真实存在的,javascript程序在刚执行的时候会自动进入全局环境的执行上下文,在执行上下文中定义
事先声明的变量。而后每调用一个函数,就会在该函数的做用域中建立该函数的上下文执行环境,在函数的做用域中为函数中本身
的变量赋值。当函数执行完毕后,会销毁函数的执行上下文环境。
再次关于闭包:由于闭包是函数中引用另外一个函数做用域中变量的函数,因此在调用完外层函数的时候,按常理本应该销毁该函数的
上下文执行环境的,可是由于在函数中还存在一个引用该函数做用域中的变量的函数,全部若是该函数的上下文执行环境被销毁的话
那么引用该函数做用域的值得那个函数将取不到值,因此该函数的上下文执行环境将不会被销毁,这样当调用引用该函数做用域中的
变量的那个函数时,它们两个的上下文执行环境都在内存中,这就是闭包,闭包会增长开销。
五、js中ajax的应用:
首先在javascript中使用ajax的步骤:
一、建立XMLHttpRequest对象
var xhr = new XMLHttpRequest();
二、用open()函数创建与服务器的链接:
xhr.open("GET","url",true);
三、用send()函数像服务器发送请求
xhr.send(null);
四、处理结果
处理结果采用xhr的onreadystatechange事件来监听xhr.readyState属性,当属性为4的时候,表示请求发送成功,
而且有返回的数据。能够根据数据进行对页面的操做。
注意:在发送post的时候,须要同时发送一个去请求头。才能正确使用post的一部请求。
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
六、js中的this对象
先总结一句话,this永远指向调用该函数的对象。
============================================================
七、javascript中的对象和其余面向对象的语言有什么差异?
通常传统的面向对象语言都有类的概念,经过类能够建立任意多个具备相同属性和方法的对象,二javascript中却没有类的概念,
ECMAscript中把对象定义为无序属性的集合,其属性能够包含基本值,对象或函数。换句话说,对象是一组没有特定顺序的值,
对象的每个属性和方法都有一个特定的名字,而每一个名字都映射到一个值。
八、web语义化的做用:
为了在没有css的状况下,网页也能呈现很好的内容结构,代码结构。
加强了用户体验,title,alt,label标签的活用
有利于SEO,和搜索引擎创建良好的沟通,有利于爬虫抓取更多的有效的信息。
便于团队的开发和维护,语义化更具备可读性。
九、IE6的浮动双边距bug:
在IE6中,若是为一个元素设置了浮动之后,同时又为元素设置了左右边距,那么在IE6中会产生比实际大的边距。
解决方案是为浮动的元素加上_display:inline;
十、css解决IE中的兼容性问题:
采用渐进识别的方式来解决IE中的问题。
在末尾加上\9能够分离出IE678。
而后再在前面加上+能够分离出IE67。
而后再在前面加上_能够分离出IE6。
例如:
.bb{
background:#ffeedd;全部识别
background:#445566\9; IE678能够识别
+background:#222222; IE67能够识别
_background:#667788; IE6能够识别
}
十一、万能的清除浮动的方法:
clearfix:after{
content:'.';
height:0;
visibility:hidden;
display:block;
clear:both;
}
十二、js中的new操做符干了什么?
建立了一个空对象,并将this变量引用该对象,同时还继承了该函数的原型。面试
=============================================
一、js中的BOM对象:(浏览器对象模型)
*window对象:
window对象在ECMAscript中扮演着global对象,定义在window中的对象会自动被加入到global对象当中去,可是这两个对象仍是
有一点的小差异,就是定义在window上的对象能够被delete操做符删除,直接定义在global中的对象不能被delete操做符删除。
*window对象的location对象:
window对象中的location对象是很是经常使用的。location对象经常使用的属性有几个:
host:返回服务器名称和端口号
hostname:返回不带端口号的服务器名称
href:返回当前页面完整的URL,location的toString()方法返回相同的值。
pathname:返回URL下的目录名或文件名
port:返回URL中指定的端口号
search:返回URl中的查询字符串(以?开头地址栏的参数字符串)
注意:重要的解析查询字符串的方法
该方法主要分为如下的步骤:
一、去掉开头的问号。
二、以&为符号用split将字符串分割成数组(如今数组的每一个元素都是name=value的形式);
三、创建将要返回的保存查询字符串的对象。
四、而后用for循环遍历,再用“=”分割,取数组中第1位和第2位保存值。
五、将值装入到所要返回的对象中去。
function getQueryStringArgs(){
var qStr = (location.search.length > 0 ? qStr.substring(1) : " ");//去掉开头的?
var arg = {};
items = (qStr.length > 0 ? qStr.split("&") : []);
item = null;
name = null;
value = null;
for(var i = 0; i < items.length; i++){
item = items[i].split("=");
name = item[0];
value = item[1];
if(name.length){
arg[name]= value;
}
}
return arg;
}
*window对象中的navigator对象:
onLine检测浏览器是否链接了互联网。
*用navigator对象检测浏览器的插件
用数组,window.navigator.plugins获取插件的数组。数组里能够访问插件的name,和decription属性。
IE中不支持上述方法,IE中用ActiveXObject检测插件。
*window对象中的history对象:
history对象中的最基本的方法就是go()方法:
go()方法能够接收一个数字做为参数,数字能够是正数(正数表示向前进),也能够是负数(负数表示向后退),
例如,window.history.go(1)//表示向前进一页。
window.history.go(-1)//表示向后推一页
go()方法也能够接收字符串做为参数,接收字符串的意义就是跳到地址包含那个字符串的最近的记录的位置。
history比较经常使用的方法是back()和forward()方法,顾名思义,back()方法就是向后退一页,forward()方法就是向前进一页。
二、js中的事件对象
js在处理事件时,都会生成一个event事件对象。event对象中保留着不少常常用得属性和方法:
preventDefault() 取消事件的默认行为
stopPropagation 取消事件的冒泡行为
target 只读的属性,指向事件的目标,由冒泡引发的事件会指向最早引发事件的元素。
若是不冒泡则指向当前绑定事件的元素。与currentTarget和this所指的对象相同。
三、jquery中的模拟事件
$().focus();
$().click();
四、js中的引用类型
Object
Array
Date
RegExp
Function
特殊的引用类型:
Boolean
Number
其中Number中经常使用的几个方法
toString() 参数传几就是转换为几进制的数输出来
toFixed() 参数传几,就是以存在几位小数点的浮点数输出来
js 中的基本类型
Undefined
Null
Boolean
Number
String
五、js中对数组的迭代
感受能用的着的:
every()
判断数组中的每个元素是否知足特定的条件,若是所有为true才返回true,不然返回false。
filter()
过滤数组中知足特定条件的数,返回知足的数组。
map()
对数组中每个元素执行特定的方法,返回执行后的结果数组
forEach()
不返回任何值,至关于for
some()
与every正好相反,判断每个元素是否知足特定的条件,若是有一个伪true就返回true。
它们的用法为:
var numbers = [1,2,3,4,5,6,7];
var result = numbers.filter(function(item,index,array){
return (item > 2);
});
alert(result);// [2,3,4,5,6,7]
六、兼容浏览器的bind绑定事件方法
function bind(element,eventType,callback){
if(typeof el.addEventListener === 'function'){
el.addEventListener(eventType,callback,false);
}else if(typeof el.attachEvent ==='function'){
el.attachEvent('on' + eventType,callback);
}
}
}
七、js中原型链是什么?
访问一个对象的属性时,如今基本属性中找,若是没有,再沿着_proto_这条链向上找,这就是原型链
八、js中的做用域链
js中的做用域链的定义:当代码在执行环境中执行的时候,就会建立一个做用域链。用途是保证对执行环境有权访问的全部变量和函数的
有序访问。
做用域链的最前端都是当前执行代码所在环境的变量
九、延长做用域链
try-catch语句中的catch语句
with语句
这两个语句都会将做用域链的前端添加一个对象,对于with语句,with语句会将指定的对象添加到做用域中,
对于catch语句,会建立一个新的变量对象,其中包含的是被抛出的错误对象的声明。
十、解析JSON
JSON.stringify() 将json对象解析成字符串
JSON.parse() 将字符串转化为js对象
eval也能够实现相同将json解析为js对象的功能,可是说不安全,因此不多用。
十一、js中什么是原型?
建立的每个函数,都有一个原型属性,该属性指向一个原型对象,这个原型对象中包含着该类对象全部共享的属性和方法。
这就是原型。
十二、函数中的callee
使用方法:arguments.callee 指向拥有该arguments的函数
1三、apply()和call()
在特定的做用域中调用函数。
call()和apply()真正的用武之地在于能够扩充函数赖以运行的做用域,其最大的好处就是对象与方法之间再也不有任何的耦合关系。
bind()方法会建立一个函数的实例,其this的值会被绑定到bind()的参数中去。
1四、http状态码为304,表示请求的资源并无被修改,能够直接使用浏览器缓存的版本。
503,表示服务器接收到请求,但没有处理。多是服务器过载或维护。
403,禁止访问。
1五、js跨域问题:
*CORS
使用CORS(跨域资源共享) 实现跨域,背后的思想就是使用自定义的http请求头部与服务器进行沟通,从而决定请求是成功仍是
失败。
*JSONP
JSON withing padding,本质上是被包含在函数中调用json。(回调函数的名字,通常是在请求中指定的)
通常分为两个部分,
实际用法是:
动态的建立script元素,使用时为<script>元素添加一个src属性,这里能够指明一个跨域的URL。
JSONP简单易用,优势是能够访问响应到的文本,支持浏览器和服务器之间的双向通讯。
*经过修改document.domain来跨子域
用来解决同一个页面中不一样iframe中的跨域问题,能够取到iframe的window属性,可是取不到window如下的属性,方法是
修改两个页面的document.domain等于上一级父级域名。
*使用window.name
*图像Ping 原理是一个网页能够从任何网页加载图像,不用考虑跨域仍是不跨域。经过图像Ping的方式,浏览器得不到任何的数据, 而能够根据load和error的方法肯定服务器是否接收到了响应。 图像Ping只能用于浏览器与服务器之间的单向通讯。 *Comet 简称为服务器推送,若是AJAX是浏览器向服务器请求数据的方式,则Comet是服务器向浏览器推送数据的方式。 Comet的方式分为长轮询和流的方式。 长轮询: 浏览器发起一个到服务器的请求,服务器一直保持链接打开,知道有数据可发送时就向浏览器发送 数据,浏览器接收完数据并关闭链接。随后浏览器又发起了一个请求,这一过程持续不断。 http流:浏览器只和服务器创建一次http链接,而后链接一直打开,由服务器周期性的向浏览器发送数据, 客户端须要比较接收到的数据,分辨出哪些事新数据。1六、docType位于文档的最前面,告知浏览器以何种模式来渲染文档。 在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点没法工做。1七、js延迟加载的方式 *动态建立脚本 var script = document.createElement("script"); script.type = "text/javascript"; script.src = "client.js"; document.body.appendChild(script); *使用defer <script type ="" src="" defer="defer"></script> *使用async <script type="" async src=""></script>1八、一句话实现单词首字母大写的方法,除了用css3中的text-transform:capitalize;1九、js中实现继承的方式 一、借用原型链继承 二、借用构造函数继承 三、组合式继承 四、原型式继承 五、寄生式继承 六、寄生组合式继承20、js中建立对象的方式 一、工厂模式 二、构造函数模式 三、原型模式