石家庄企业建站哪家好,太仓建设银行网站,wordpress三方登录,郴州网站seo外包前言 本文总结了一些优质的前端面试题#xff08;多数源于网络#xff09;#xff0c;初学者阅后也要用心钻研其中的原理#xff0c;重要知识需要系统学习#xff0c;透彻学习#xff0c;形成自己的知识链。万不可投机取巧#xff0c;只求面试过关是错误的#xff01; … 前言 本文总结了一些优质的前端面试题多数源于网络初学者阅后也要用心钻研其中的原理重要知识需要系统学习透彻学习形成自己的知识链。万不可投机取巧只求面试过关是错误的 面试有几点需注意 1.面试题目 根据你的等级和职位变化入门级到专家级范围↑、深度↑、方 向↑。 2.题目类型 技术视野、项目细节、理论知识题算法题开放性题案例题。 3.进行追问 可以确保问到你开始不懂或面试官开始不懂为止这样可以大大延 展题目的区分度和深度知道你的实际能力。因为这种关联知识是长时期的学 习绝对不是临时记得住的。 回答问题再棒面试官可能是你的直接领导面试会考虑我要不要这个人做我的同事所以态度很重要。感觉更像是相亲 资深的工程师能把absolute和relative弄混这样的人不要也罢因为团队需要的你这个人具有可以依靠的才能靠谱。 前端开发面试知识点大纲 HTMLCSS 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应 JavaScript 数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。 其他 HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯 前端工程师必须掌握的知识点 1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。 2、DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。 3、事件 —— 如何使用事件以及IE和标准DOM事件模型之间存在的差别。 4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。 5、严格模式与混杂模式 —— 如何触发这两种模式区分它们有何意义。 6、盒模型 —— 外边距、内边距和边框之间的关系及IE8以下版本的浏览器中的盒模型 7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们 8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。 9、HTML与XHTML——二者有什么区别你觉得应该使用哪一个并说出理由。 10、JSON —— 作用、用途、设计结构。 ……………… 一HTMLCSS 1.CSS选择器有哪些哪些属性可以被继承 元素选择器、类选择器、 ID选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器、伪类、伪元素...... CSS继承特性主要是指文本方面的继承常用的例如font-size , color , font-family , font-weight , text-align , text-indent , line-height 等都是可以继承的而关于与盒模型相关的不带继承。 具体 不可继承的display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before。 所有元素可继承visibility和cursor。 内联元素可继承letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。 终端块状元素可继承text-indent和text-align。 列表元素可继承list-style、list-style-type、list-style-position、list-style-image。 2.HTML5为什么只需要写!DOCTYOE HTML,作用是什么 HTML5 不基于 SGML所以不需要引用 DTD因此没有声明DTD; 作用!DOCTYPE声明不是 HTML 标签它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。浏览器获知文档类型; (**在 HTML 4.01 中!DOCTYPE声明引用 DTD因为 HTML 4.01 基于 SGML。 SGML(Standard Generalized Markup Language)即标准通用标记语言;DTD (Document Type Definition)规定了标记语言的规则这样浏览器才能正确地呈现内容。**). 3.CSS3中如何实现屏幕的自适应 1添加在HTML页面的元元素meta,meta nameviewport contentwidthdevice-width,initial-scale1,user-scalableno; 2 将CSS中的固定值修改为相对值; 3 栅格系统流式网格布局; 4 CSS3的媒体查询; 4.HTML中放入CSS样式的几种方式。 内联样式style”属性属性值;” 内部样式style选择器{属性值;}/style 外部样式link hrefcss/style.css relstylesheet typetext/css 5.简述如何居中div,如何居中一个浮动的元素如何让绝对定位的div居中 绝对定位和浮动的元素居中知道定位元素本身的宽高的话,例:宽高是300px position: absolute; left: 50%; top: 50%; margin-150px 0 0 -150px; 水平垂直居中 1 inline-block配合text-align加上table-cell配合vertical-align .parent{ display: table-cell; vertical-align:middle; text-align:center;} .child{ display: inline-block;} 2 absolute配合transform .parent{ position: relative;} .child{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} 3. .parent{ display: flex; justify-content: center; align-items: center;} 4. (水平居中) .div{position: absolute; width: 1200px; background: none; margin: 0 auto; top: 0; left: 0; bottom: 0; right: 0; } #####6.利用CSS实现等高布局 i.左侧宽度的30%背景色为灰色右侧宽度70%背景色为红色 ii.左侧高度随着右侧高度变化而变化右侧高度不定 利用padding-bottom|margin-bottom正负值相抵 设置父容器设置超出隐藏overflow:hidden这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度当它里面的任一列高度增加了则父容器的高度被撑到里面最高那列的高度其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。 head meta charsetUTF-8 title等高布局/title style typetext/css .container{ overflow:hidden; } .left{ float:left; width:30%; background-color: #ddd; padding-bottom: 2000px; margin-bottom: -2000px; } .right{ float:left; width:70%; background-color: #f00; padding-bottom: 2000px; margin-bottom: -2000px; } /style /head body div classcontainer div classleftlorem/div div classrightLorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam tenetur facilis possimus, voluptate fugit nesciunt dignissimos libero enim, eligendi aspernatur nam, officia temporibus iure sunt. Error laudantium nam, quam! Quam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dignissimos cupiditate omnis. In possimus sequi rem esse expedita quibusdam, eaque laboriosam quo id quos sapiente inventore, temporibus delectus, neque soluta./div /div /body 7.Margin属性应用。 http://www.zhangxinxu.com/wordpress/?p48 (1)控制元素周围空间的间隔从视觉角度上达到相互隔开的目的。 (2).页面上实现css sprite背景定位效果 关于页面上背景定位效果可以参见我的文章“IE6下png背景不透明问题的综合拓展”有关页面上定位的demo实例页面 (3).在选项卡等边框线的处理 下图显示的是一种比较常见的选项卡样式旧版的迅雷首页就是这样子的选项卡。 我其实已经在图上做了点小小的标注使用margin-top:-1px;解决选项卡下边框显示的问题。类似的如果您要用四个div实现5条1像素的左右边框就像表格一样的效果就可以使用让每个div都有左右1像素的边框然后margin-right:-1px;或是margin-left:-1px;让之间的边框重叠这样就实现了四标签实现5边框的效果了。 (4).图片与文字对齐问题 图片与文字默认是居底对齐了。所以当图片与文字在一起的时候往往都是不对齐的。尤其图片较小时就更加明显了我看到很多人使用vertical-align:middle;对齐。在火狐下效果是不错但是IE下虽然是效果好了些但还是不够。 如果图片是个20像素*20像素左右的小图片文字也差不多12px大则使用vertical-align:text-bottom;是不错的个方法。还有个屡试不爽兼容性不错的方法就是使用margin负值了。img标签是个很不错的标签支持margin四个方向的正的和负的定位。一般img标签打头的小图标与文字对齐的话img{margin:0 3px -3px 0;}可以说是公式版的东西能实现效果和兼容性俱佳的对齐效果。 8.position的应用属性值以及区别 http://www.cnblogs.com/bokin/archive/2012/12/14/2816864.html 9.Border属性。 10. 为什么要进行CSS样式重置。 -因为浏览器的兼容问题不同浏览器对有些标签的默认值是不同的如果没对CSS初始化往往会出现浏览器之间的页面显示差异。 -当然初始化样式会对SEO有一定的影响但鱼和熊掌不可兼得但力求影响最小的情况下初始化。 body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button, textarea,hr{margin:0;padding:0} body,button,input,select,textarea{ font:12px/1.5 宋体,arial, verdana, sans-serif} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal} li{list-style:none} fieldset,img{border:0} table{border-collapse:collapse;border-spacing:0} q:before,q:after{content:”} button,input,select,textarea{font-size:100%} legend{color:#000} small{font-size:12px} hr{border:none;height:1px} a{text-decoration:none} a:hover{text-decoration:underline} .cle:after{content:.;display:block;height:0;clear:both;visibility:hidden} .cle{ display:inline-block} .cle{ display:block} .clear {clear: both;} 豆瓣上的几种重置模板https://www.douban.com/note/330400235/ 11.a元素target属性规定在何处打开页面上所有链接请举例说明。 http://www.doc88.com/p-130783716484.html 1._blank a hrefdocument.html target_blankmy document/a 浏览器会另开一个新窗口显示document.html文档 2._parent a hrefdocument.html target_parentmy document/a 指向父frameset文档 3._self a hrefdocument.html target_selfmy document/a 把文档调入当前页框 4._top a hrefdocument.html target_topmy document/a 去掉所有页框并用document.html取代frameset文档 12.选择器优先级排序由大到小写出示例标签选择器ID选择器类选择器 ID选择器类选择器标签选择器 13样式中:before:after的作用 :before:after是伪元素选择器定义到元素内容之前之后要配合content: “ ”;一起使用. 解决问题1、撑起包含浮动元素的父元素的高度 (1)、指定元素高度 (2)、overflow:hidden; (3)、追加空子元素clear:both (4)、div:after{ content:; display:block; clear:both; } 2、上外边距溢出问题 #d2:before{ content:; display:table; } 14. 行内元素有哪些块级元素有哪些空元素单标签有哪些请举例说明每种至少3个 行内元素a,span,i,em,strong,label,code, img,input,select,textarea,button 块级元素div,p,h1...h6,ol,ul,dl,table,form 空元素单标签br,hr,img,input,link,meta 15.Doctype作用? 严格模式与混杂模式如何区分它们有何意义? 1!DOCTYPE声明位于位于HTML文档中的第一行处于 html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以混杂兼容模式呈现。 2严格标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在混杂兼容模式中页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 16.页面导入样式时使用link和import有什么区别 1link属于XHTML标签除了加载CSS外还能用于定义RSS, 定义rel连接属性等作用而import是CSS提供的只能用于加载CSS; 2页面被加载的时link会同时被加载而import引用的CSS会等到页面被加载完再加载; 3import是CSS2.1 提出的只在IE5以上才能被识别而link是XHTML标签无兼容问题; 17.html5有哪些新特性、移除了那些元素如何处理HTML5新标签的浏览器兼容问题如何区分 HTML 和 HTML5 (1)HTML5 现在已经不是 SGML 的子集主要是关于图像位置存储多任务等功能的增加: ①绘画 canvas; ②用于媒介回放的 video 和 audio 元素; ③本地离线存储 localStorage 长期存储数据浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除; ④语意化更好的内容元素比如 article、footer、header、nav、section; ⑤表单控件calendar、date、time、email、url、search; ⑥新的技术webworker, websocket, Geolocation; (2)移除的元素 纯表现的元素basefontbigcenterfont, sstrikettu; 对可用性产生负面影响的元素frameframesetnoframes (3)支持HTML5新标签 ①IE8/IE7/IE6支持通过document.createElement方法产生的标签可以利用这一特性让这些浏览器支持HTML5新标签浏览器支持新标签后还需要添加标签默认的样式。 ②当然也可以直接使用成熟的框架,比如html5shiv;可以把HTML5的新元素转换成IE6认识的内容。只需要在你的head中调用这段代码就行 !--if lt IE 9] script srchttp://html5shiv.googlecode.com/svn/trunk/html5.js/script ![endif]-- (4)如何区分HTML5 DOCTYPE声明\新增的结构元素\功能元素 18.简述一下你对HTML语义化的理解 1.用正确的标签做正确的事情。 2.html语义化让页面的内容结构化结构更清晰便于对浏览器、搜索引擎解析; 3.即使在没有样式CSS情况下也以一种文档格式显示并且是容易阅读的; 4.搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重利于SEO; 5.使阅读源代码的人对网站更容易将网站分块便于阅读维护理解。 19.HTML5的离线储存怎么使用工作原理能不能解释一下 https://segmentfault.com/a/1190000000732617 在用户没有与因特网连接时可以正常访问站点或应用在用户与因特网连接时更新用户机器上的缓存文件。 原理HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)通过这个文件上的解析清单离线存储资源这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时浏览器会通过被离线存储的数据进行页面展示。 使用 如何使用 1、页面头部像下面一样加入一个manifest的属性 2、在cache.manifest文件的编写离线存储的资源 CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html 3、在离线状态时操作window.applicationCache进行需求实现。 20.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢 https://segmentfault.com/a/1190000000732617 在线的情况下浏览器发现html头部有manifest属性它会请求manifest文件如果是第一次访问app那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了那么浏览器就会使用离线的资源加载页面然后浏览器会对比新的manifest文件与旧的manifest文件如果文件没有发生改变就不做任何操作如果文件改变了那么就会重新下载文件中的资源并进行离线存储。 离线的情况下浏览器就直接使用离线存储的资源。 21.请描述一下 cookiessessionStorage 和 localStorage 的区别 22.iframe有哪些缺点 (1)iframe会阻塞主页面的Onload事件 (2)搜索引擎的检索程序无法解读这种页面不利于SEO; (3)iframe和主页面共享连接池而浏览器对相同域的连接有限制所以会影响页面的并行加载。 如果需要使用iframe最好是通过javascript动态给iframe添加src属性值。 23.label的作用是什么是怎么用的 label标签来定义表单控制间的关系,当用户选择该标签时浏览器会自动将焦点转到和标签相关的表单控件上。 (1) label forNameNumber:/label input type“text“nameuserName idName/ (2) labelDate:input typetext nameB//label 24.HTML5的form如何关闭自动完成功能 给不想要提示的 form 或某个 input 设置为 autocomplete”off ”。 (自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时浏览器基于之前键入过的值应该显示出在字段中填写的选项。) 25.介绍一下标准的CSS的盒子模型低版本IE的盒子模型有什么不同的 1有两种 IE 盒子模型、W3C 盒子模型 2盒模型 内容(content)、填充(padding)、边界(margin)、 边框(border) 3区 别 IE的content部分把 border 和 padding计算了进去; 26.CSS3新增伪类有那些 语法 作用 目标伪类 :target 突出显示活动的html锚元素。 元素状态伪类 :enabled 匹配每个已启用元素 :disabled 匹配每个被禁用的元素 :checked 匹配每个被选中的input元素限于radio和 checkbox 结构伪类 :first-child 匹配属于其父元素的首个子元素(td:first-child) :last-child 匹配属于其父元素的最后一个子元素 :empty 匹配没有子元素的每个元素 :only-child 匹配属于其父元素的唯一子元素 :nth-child(num) 匹配是其父元素中的第 num 个子元素(td:nth-child(2)) 否定伪类 :not(selector) 在一组元素中将 满足 selector 选择器的元素排除出去 table td:not(:first-child) 27.display有哪些值说明他们的作用。 block 块类型。默认宽度为父元素宽度可设置宽高换行显示。 none 缺省值。象行内元素类型一样显示。 inline 行内元素类型。默认宽度为内容宽度不可设置宽高同行显示。 inline-block 默认宽度为内容宽度可以设置宽高同行显示。 list-item 象块类型元素一样显示并添加样式列表标记。 table 此元素会作为块级表格来显示。 inherit 规定应该从父元素继承 display 属性的值。 28.position的值有哪些值 absolute:生成绝对定位的元素相对于值不为 static的第一个父元素进行定位。 fixed :(老IE不支持)生成绝对定位的元素相对于浏览器窗口进行定位。 relative:生成相对定位的元素相对于其正常位置进行定位。 static:默认值。没有定位元素出现在正常的流中忽略 top, bottom, left, right z-index 声明。 inherit:规定从父元素继承 position 属性的值。 29.CSS3有哪些新特性 新增各种CSS选择器 : not(.input)所有 class 不是“input”的节点 圆角 border-radius:8px 多列布局 multi-column layout 阴影和反射 Shadow\Reflect 文字特效 text-shadow、 文字渲染 Text-decoration 线性渐变 gradient 旋转 transform 增加了旋转,缩放,定位,倾斜,动画多背景 30.请解释一下CSS3的Flexbox弹性盒布局模型,以及适用场景 https://segmentfault.com/a/1190000003942546 box-flex是css3新添加的盒子模型属性它的出现打破了我们经常使用的浮动布局实现垂直等高、水平均分、按比例划分。但是它有一定的局限性在firefox、chrome这浏览器下需要使用它们的私有属性来定义firefox(-moz)、chrome-webkit。 31.CSS里的visibility属性有个collapse属性值是干嘛用的在不同浏览器下以后什么区别 http://www.webhek.com/visibility-collapse visibility有第三种值visibilityhiddencollapse。当一个元素的visibility属性被设置成collapse值后对于一般的元素它的表现跟hidden是一样的。但例外的是如果这个元素是table相关的元素例如table行table grouptable列table column group它的表现却跟display: none一样也就是说它们占用的空间也会释放。但是各种浏览器对collapse值的处理方式不一样。 32.使用 CSS 预处理器吗喜欢那个 css预处理器也叫动态样式语言拥有编程的变量、继承、运算、函数的特性它可以让你的CSS更加简洁、适应性更强、可读性更佳更易于代码的维护等诸多好处常用的有less、sass、stylus。 SASS 和 Compass 指南http://ruby-china.org/topics/4396 33.CSS优化、提高性能的方法有哪些 http://www.zhihu.com/question/19886806 1、提高代码性能 1、尽量将样式写在单独的css文件里面在head元素中引用 2、不使用import 3、避免使用复杂的选择器层级越少越好 4、精简页面的样式文件去掉不用的样式 5、利用CSS继承减少代码量 4、提高代码的可维护性 1、命名与备注 2、提取重复样式 3、统一书写顺序 34.浏览器是怎样解析CSS选择器的 https://segmentfault.com/q/1010000000713509 浏览器先产生一个元素集合这个集合往往由最后一个部分的索引产生如果没有索引就是所有元素的集合。然后向上匹配如果不符合上一个部分就把元素从集合中删除直到真个选择器都匹配完还在集合中的元素就匹配这个选择器了。从右往左 35.**抽离样式模块怎么写说出思路有无实践经验 共用模块的样式都抽离出来,作为单独的模块来处理。 36.元素竖向的百分比设定是相对于容器的高度吗 height属性取值百分比是现对于容器高度的 对于margin-top、margin-bottom、padding-top、padding-bottom这些竖直方向的内外边距属性的百分比取值参考的其实是容器的宽度而不是高低。 37.解释一下em,rem,px这些尺寸单位的不同。 http://www.jianshu.com/p/60ea15164b82 http://www.mamicode.com/info-detail-655497.html px像素Pixel相对长度单位。像素px是相对于显示器屏幕分辨率而言的 em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置则相对于浏览器的默认字体尺寸;任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em16px。那么12px0.75em,10px0.625em。为了简化font-size的换算需要在css中的body选择器中声明Font-size62.5%这就使em值变为 16px*62.5%10px, 这样12px1.2em, 10px1em, 也就是说只需要将你的原来的px数值除以10然后换上em作为单位就行了。 rem相对于根元素HTML的字体尺寸。 38.简述canvasSVG的区别 canvas在网页中实现绘图主要绘制各种统计图表柱状图、饼图、曲线图、分布图以及制作游戏和动画。 SVG全称为 Scalable Vector Graphics译为可缩放矢量图形,简称矢量图。是一种用来描述二维矢量图形的 XML 标记语言。 SVG Canvas 不依赖于分辨率 依赖于分辨率 使用DOM及事件处理器DOM专门为SVG开放接口 不能使用DOM及事件处理器 不能实现游戏开发 可以实现游戏开发 实现大型渲染区域的应用(例如百度地图) 是以图片(png 39.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言XHTML是一个基于XML的置标语言 最主要的不同XHTML的语法较为严谨, 1.元素必须被正确地嵌套。 2.元素必须被关闭。 3.标签名必须用小写字母。 4.XHTML 文档必须拥有根元素。 还有就是XHTML可兼容各大浏览器、手机以及PDA并且浏览器也能快速正确地编译网页。 40.前端页面有哪三层构成分别是什么?作用是什么? 网页的结构层structural layer由 HTML 或 XHTML 之类的标记语言负责创建。搭建文档的结构。 网页的表示层presentation layer 由 CSS 负责创建。 设置文档的呈现效果。 网页的行为层behavior layerJavascript 语言和 DOM 负责创建。去实现文档的行为。 41.CSS清除浮动的几种方法至少两种 使用带clear属性的空元素; 使用CSS的overflow属性 使用CSS的:after伪元素 使用邻接元素处理 42.CSS3有哪些新特性 CSS3实现圆角border-radius:8px阴影box-shadow:10px对文字加特效text-shadow、线性渐变gradient旋转transform 多背景 rgba transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜 增加了更多的CSS选择器 属性选择器E[foo^bar]匹配foo属性值以bar开始的E元素 E[foo$bar]匹配foo属性值以bar结束的E元素 E[foo*bar]匹配foo属性值包含bar的E元素 结构伪类选择器 E:root匹配E所在文档的根元素 E:nth-child(n)匹配元素类型为E且是父元素的第n个子元素 E:nth-last-child(n)匹配元素类型为E且是父元素的倒数第n个子元素与上一项顺序相反 E:nth-of-type(n)匹配父元素的第n个类型为E的子元素 E:nth-last-of-type(n)匹配父元素的倒数第n个类型为E的子元素与上一项顺序相反 E:first-of-type匹配父元素的第一个类型为E的子元素 E:last-child匹配元素类型为E且是父元素的最后一个子元素 E:last-of-type匹配父元素的最后一个类型为E的子元素 E:only-child匹配元素类型为E且是父元素中唯一的子元素 E:only-of-type匹配父元素中唯一子元素是E的子元素 E:empty匹配不包含子节点(包括文本)的E元素 二JavaScript 1.JavaScript的typeof返回哪些数据类型 undefined, string,number,boolean,object,function,symbol ①可以判别原始类型原始数据类型: undefined, string,number,boolean,symbol 除了null之外返回object; eg: typeof 1 返回结果number ;typeof {} 返回结果:object; ②不能判别具体的对象类型除了function之外 eg: typeof [1] 返回结果:object typeof function(){} 返回结果:function; 2.split()和join()的区别 join() 方法用于把数组中的所有元素放入一个字符串。 元素是通过指定的分隔符进行分隔的。 指定分隔符方法join(#);其中#可以是任意 var anew Array(); a[0]XHTML; a[1]CSS; a[2]JavaScript; a.join(--); XHTML--CSS--JavaScript split()方法用于把一个字符串分割成字符串数组. var straaa,bbb,ccc,ddd; str.split(,); [aaa, bbb, ccc, ddd] split是把一串字符根据某个分隔符分成若干个元素存放在一个数组里。而Join是 把数组中的字符串连成一个长串可以大体上认为是split的逆操作。 3.谈谈This对象的理解。 http://blog.jobbole.com/67347/ this是js的一个关键字随着函数使用场合不同this的值会发生变化。 但是有一个总原则那就是this指的是调用函数的那个对象。 this一般情况下是全局对象Global。 作为方法调用那么this就是指这个对象 4.JS中null和undefined的区别。 www.ruanyifeng.com/blog/2014/03/undefined null是一个表示无的对象转为数值时为0undefined是一个表示无的原始值转为数值时为NaN。 null表示没有对象即该处不应该有值。典型用法是 1作为函数的参数表示该函数的参数不是对象。 2作为对象原型链的终点。Object.getPrototypeOf(Object.prototype) // null undefined表示缺少值就是此处应该有一个值但是还没有定义。典型用法是 1变量被声明了但没有赋值时就等于undefined。 2) 调用函数时应该提供的参数没有提供该参数等于undefined。 3对象没有赋值的属性该属性的值为undefined。 4函数没有返回值时默认返回undefined。 var i; i // undefined function f(x){console.log(x)}f() // undefined var o new Object(); o.p // undefinedvar x f(); x // undefined 5.你对JSON的了解常见格式。 JSONJavaScript 对象表示法JavaScript Object Notation。 https://segmentfault.com/a/1190000000668072 JSON有两种结构 json简单说就是javascript中的对象和数组所以这两种结构就是对象和数组两种结构通过这两种结构可以表示各种复杂的结构 1、对象对象在js中表示为“{}”括起来的内容数据结构为 {keyvalue,keyvalue,...}的键值对的结构在面向对象的语言中key为对象的属性value为对应的属性值所以很容易理解取值方法为对象.key 获取属性值这个属性值的类型可以是数字、字符串、数组、对象几种。 2、数组数组在js中是中括号“[]”括起来的内容数据结构为 [java,javascript,vb,...]取值方式和所有语言中一样使用索引获取字段值的类型可以是数字、字符串、数组、对象几种。 经过对象、数组2种结构就可以组合成复杂的数据结构了。 JavaScript中有5种简单数据类型也称为基本数据类型Undefined、Null、Boolean、Number和String。还有1种复杂数据类型——ObjectObject本质上是由一组无序的名值对组成的。 6.异步加载JS的方式有哪些 http://blog.csdn.net/l522703297/article/details/50754695 一同步加载 我们平时使用的最多的一种方式。 script srchttp://yourdomain.com/script.js/script script srchttp://yourdomain.com/script.js/script 同步模式又称阻塞模式会阻止浏览器的后续处理停止后续的解析只有当当前加载完成才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为就会造成页面堵塞。所以一般建议把script标签放在body结尾处这样尽可能减少页面阻塞。 二异步加载 异步加载又叫非阻塞加载浏览器在下载执行js的同时还会继续进行后续页面的处理。主要有三种方式。 方法一也叫Script DOM Element (function(){ var scriptEle document.createElement(script); scriptEle.type text/javasctipt; scriptEle.async true; scriptEle.src http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js; var x document.getElementsByTagName(head)[0]; x.insertBefore(scriptEle, x.firstChild); })(); async属性是HTML5中新增的异步支持。此方法被称为Script DOM Element 方法。Google Analytics 和 Google Badge 都使用了这种异步加载代码 (function(){; var ga document.createElement(script); ga.type text/javascript; ga.async true; ga.src (https: document.location.protocol ? https://ssl : http://www) .google-analytics.com/ga.js; var s document.getElementsByTagName(script)[0]; s.parentNode.insertBefore(ga, s); })(); 但是这种加载方式执行完之前会阻止onload事件的触发而现在很多页面的代码都在onload时还执行额外的渲染工作所以还是会阻塞部分页面的初始化处理。 方法二onload时的异步加载 (function(){ if(window.attachEvent){ window.attachEvent(load, asyncLoad); }else{ window.addEventListener(load, asyncLoad); } var asyncLoad function(){ var ga document.createElement(script); ga.type text/javascript; ga.async true; ga.src (https: document.location.protocol ? https://ssl : http://www) .google-analytics.com/ga.js; var s document.getElementsByTagName(script)[0]; s.parentNode.insertBefore(ga, s); } )(); 这种方法只是把插入script的方法放在一个函数里面然后放在window的onload方法里面执行这样就解决了阻塞onload事件触发的问题。 注:DOMContentLoaded与load的区别。前者是在document已经解析完成页面中的dom元素可用但是页面中的图片视频音频等资源未加载完作用同jQuery中的ready事件后者的区别在于页面所有资源全部加载完毕。 方法三其他方法 由于JavaScript的动态性还有很多异步加载方法 XHR Injection、 XHR Eval、 Script In Iframe、 Script defer属性、 document.write(script tag)。 XHR Injection(XHR 注入)通过XMLHttpRequest来获取javascript然后创建一个script元素插入到DOM结构中。ajax请求成功后设置script.text为请求成功后返回的responseText。 //获取XMLHttpRequest对象考虑兼容性。 var getXmlHttp function(){ var obj; if (window.XMLHttpRequest) obj new XMLHttpRequest(); else obj new ActiveXObject(Microsoft.XMLHTTP); return obj; }; //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理 var xmlHttp getXmlHttp(); xmlHttp.open(GET, http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js, true); xmlHttp.send(); xmlHttp.onreadystatechange function(){ if (xmlHttp.readyState 4 xmlHttp.status 200){ var script document.createElement(script); script.text xmlHttp.responseText; document.getElementsByTagName(head)[0].appendChild(script); } } 基于jQuery的Ajax script typetext/javascript srcjquery.js script typetext/javascript $(document).ready(function() { $.ajax({ type: GET, url:test.js, async:true, //async为true的时候是异步的 dataType,script}) //dataType为script的时候已经帮你把返回结果用script类型的dom元素添加到文档中了如果跨域POST会转换为GET }); /script 分析使用xmlHttpRequest的动态加载技术说白了就是ajax其实就是在上述三种方法的基础上包装上一层ajax而已同步异步你自己控制兼容性如何得看你用哪种方法实现了我给的例子直接使用了jquery库兼容性非常好而且你不需要写一堆关于xmlHttpRequest的东西若你不想用第三方库那自己百度个手工实现ajax吧。 Script In iframe在父窗口插入一个iframe元素然后再iframe中执行加载JS的操作。 var inJS function(){alert(2)}; var iframe document.createElement(iframe); document.body.appendChild(iframe); var doc iframe.contentWindow.document;//获取iframe中的window要用contentWindow属性。 doc.open(); doc.write(scriptvar inJSfunction(){};\/scriptbody οnlοadinJS()/body); doc.close(); HTML5新特性 defer属性IE4.0就出现。defer属声明脚本中将不会有document.write和dom修改。浏览器会并行下载其他有defer属性的script。而不会阻塞页面后续处理。注所有的defer脚本必须保证按顺序执行的。 script typetext/javascript defer/script async属性HTML5新属性。脚本将在下载后尽快执行作用同defer但是不能保证脚本按顺序执行。他们将在onload事件之前完成。 script typetext/javascript defer/script Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async属性。可以同时使用async和defer这样IE 4之后的所有IE都支持异步加载。 没有async属性script将立即获取下载并执行期间阻塞了浏览器的后续处理。如果有async属性那么script将被异步下载并执行同时浏览器继续后续的处理。 总结对于支持HTML5的浏览器实现JS的异步加载只需要在script元素中加上async属性为了兼容老版本的IE还需加上defer属性对于不支持HTML5的浏览器(IE可以用defer实现)可以采用以上几种方法实现。原理基本上都是向DOM中写入script或者通过eval函数执行JS代码你可以把它放在匿名函数中执行也可以在onload中执行也可以通过XHR注入实现也可以创建一个iframe元素然后在iframe中执行插入JS代码。 三延迟加载 有些JS代码在某些情况在需要使用并不是页面初始化的时候就要用到。延迟加载就是为了解决这个问题。将JS切分成许多模块页面初始化时只加载需要立即执行的JS然后其它JS的加载延迟到第一次需要用到的时候再加载。类似图片的延迟加载。 JS的加载分为两个部分下载和执行。异步加载只是解决了下载的问题但是代码在下载完成后就会立即执行在执行过程中浏览器处于阻塞状态响应不了任何需求。 解决思路为了解决JS延迟加载的问题可以利用异步加载缓存起来但不立即执行需要的时候在执行。如何进行缓存呢将JS内容作为Image或者Object对象加载缓存起来所以不会立即执行然后在第一次需要的时候在执行。 1模拟较长的下载时间 利用thread让其sleep一段时间在执行下载操作。 2模拟较长的JS代码执行时间 var start Number(new Date()); while(start 5000 Number(new Date())){//执行JS} 这段代码将使JS执行5秒才完成 JS延迟加载机制(LazyLoad)简单来说就是在浏览器滚动到某个位置在触发相关的函数实现页面元素的加载或者某些动作的执行。如何实现浏览器滚动位置的检测呢可以通过一个定时器来实现通过比较某一时刻页面目标节点位置和浏览器滚动条高度来判断是否需要执行函数。 7.Ajax是什么写一个简单的使用方法。 Asynchronouse Javascript And XML异步的JS和XML AJAX技术的本质在用户浏览页面的同时浏览器底层向服务器发出HTTP请求并处理服务器返回的响应消息。 AJAX的典型应用搜索建议、在线股票、在线聊天室、即时的数据验证、级联下拉列表 简单使用方法保存数据到服务器成功时显示信息。 jQuery 代码: $.ajax({ type: POST, url: some.php, data: nameJohnlocationBoston, success: function(msg){ alert( Data Saved: msg ); } }); 8.webSocket是干嘛用的 http://blog.sina.com.cn/s/blog_acddf95d0101beuj.html WebSocket协议是一种双向通信协议它建立在TCP之上同http一样通过TCP来传输数据但是它和http最大的不同有两点1.WebSocket是一种双向通信协议在建立连接后WebSocket服务器和Browser/UA都能主动的向对方发送或接收数据就像Socket一样不同的是WebSocket是一种建立在Web基础上的一种简单模拟Socket的协议2.WebSocket需要通过握手连接类似于TCP它也需要客户端和服务器端进行握手连接连接成功后才能相互通信。之前网站的实时通讯技术都是轮询就是特定的时间浏览器向服务器发送请求缺点很占用带宽 Websocket实现即时服务好处 1. header:相互沟通的header是很小的大概只有2Bytes 2. server Prsh:服务器的推送服务器不在被动的接受浏览器的request之后才返回数据而是有新数据时就主动推送给浏览器。 9.Get和Post的区别数据怎样获取 (1)GET请求提交的数据在地址栏能看到POST看不到,get安全性非常低post安全性较高。 (2)GET请求把请求数据追加在请求URI后面以?开头POST请求把请求数据追加在请求主体中 (3)HTTP协议规定请求消息起始行总长度不能超过1024字节请求主体长度没有限制。GET请求提交的数据或是汉字一般也就几十个不超过2kb。post传送的数据量较大一般被默认为不受限制. (4)语义不同:get是从服务器上获取数据post是向服务器传送数据。 10.用JS和jQuery怎样获得元素节点 JSdocument.getElementById(‘idName’);/document.getElementsByTagName(‘标签名’); jQuery:$.(‘#idName’);/$.(‘标签名’); 11.用jQuery如何操作页面添加样式和属性 jq.css( name ) 获取样式的值$(div).css(color); jq.css( name, value ) 设置样式的值$(div).css(color, red); jq.css( {name:value, name:value} ) jq.addClass( className ) 为选定元素添加一个class jq.removeClass( className ) 为选定元素删除一个class jq.hasClass( className ) 判断选定元素是否有指定class jq.toggleClass( className ) 切换class有则删除无则添加 12.JS中的数据类型尝试画一下内存结构 基本数据类型null ,undefined ,number ,boolean ,string,symbol(ES6新增) 引用数据类型object http://es6.ruanyifeng.com/#docs/symbol 13.jQuery绑定事件的方法不少于2种 (1)bind unbind为选定元素绑定特定事件的处理函数 jq.bind( 事件名, fn ) (2)one为选定元素绑定一次事件处理函数 jq.one( 事件名, fn ) (3)click / dblclick / mouseover / mouseout .... bind()函数的简化 jq.click( fn ) 等价于 jq.bind(click, fn) 注意DOM所有事件中只有一部分(23个事件)有简化版本 上述3种方法只能为DOM树已经存在的元素绑定监听函数无法为后创建的元素绑定监听函数。 4delegate( )子元素委托父元素代理处理自己的事件 $(父元素).delegate(子元素, 事件名, fn) 5live指定子元素把指定的事件全部委托给document对象——jQuery1.8之后删除了此方法。 $(子元素).live(事件名, fn) 6on 可以实现类似bind / delegate的所有功能 类似bind的使用方法把监听函数绑定在事件源上 $(子元素).on(事件名, fn) 类似delegate的使用方法把监听函数委托在父元素上 $(父元素).on(事件名, 子元素, fn) fn中的this 指的是子元素 #####14. 有这样一个URLhttp://item.taobao.com/item.htm?a1b2cdxxxe,请写一段js程序提取URL中的各个GET参数参数名和参数个数不确定将其按key-value形式返回到一个json结构中如{a:’1’,b:’2’,c:’’,d:’XXX’,e:undefined} function serilizeUrl(url) { var result {}; url url.split(?)[1]; console.log(url);//a1b2cdxxxe var map url.split(); console.log(map);//[a1, b2, c, dxxx, e] for(var i0;imap.length;i) { result[map[i].split()[0]] map[i].split()[1]; } return result; } var urlhttp://item.taobao.com/item.htm?a1b2cdxxxe; console.log(serilizeUrl(url));//Object {a: 1, b: 2, c: , d: xxx, e: undefined} #####15.现有数组对象[{obj:{name:”jhon”}},{obj:{sex:”nan”}}],用js实现转换json格式{obj:{name:”jhon”,sex:”nan”}}. var arr[{obj:{name:jhon}},{obj:{sex:nan}}]; //--{obj:{name:”jhon”,sex:”nan”}} var obj1{} for(var i0;iarr.length;i){ for(var k in arr[i].obj){ obj1[k]arr[i].obj[k]; } } for( var k in arr[0]){ var jsonObj{}; jsonObj[k]obj1; console.log(JSON.stringify(jsonObj));//{obj:{name:jhon,sex:nan}} } 16.什么是闭包闭包有什么用请举例说明. 闭包就是外层函数将内层函数封装受保护的局部变量返回到外部。实现可重用的局部变量且保护其不受污染。 闭包的特性 1.函数内再嵌套函数;2.内部函数可以引用外层的参数和变量;3.参数和变量不会被垃圾回收机制回收. function foo() { var a 1; function bar() { a a 1; alert(a); } return bar; } var closure foo(); // 这个时候返回的是 bar() 这个函数外加其包上的变量 a; console.log(closure); var closure2 foo(); // 这里同样生成了另外一个闭包(实例) console.log(closure2); closure(); // 2 closure2(); // 2 , 绑定了另外一份变量 a closure(); // 3 closure2(); //3 17.写一个数组去重的方法。 (1) 构建一个新的数组存放结果;for循环中每次从原数组中取出一个元素用这个元素循环与结果数组对比;若结果数组中没有该元素则存到结果数组中. Array.prototype.unique1 function(){ var res [this[0]]; for(var i 1; i this.length; i){ var repeat false; for(var j 0; j res.length; j){ if(this[i] res[j]){ repeat true; break; } } if(!repeat){ res.push(this[i]); } } return res; } var arr [1, a, a, b, d, e, e, 1, 0] console.log(arr.unique1()); (2) 先将原数组进行排序;检查原数组中的第i个元素与结果数组中的最后一个元素是否相同因为已经排序所以重复元素会在相邻位置;如果不相同则将该元素存入结果数组中. Array.prototype.unique2 function(){ this.sort(); //先排序 var res [this[0]]; for(var i 1; i this.length; i){ if(this[i] ! res[res.length - 1]){ res.push(this[i]); } } return res; } var arr [1, a, a, b, d, e, e, 1, 0] console.log(arr.unique2());//[0, 1, a, b, d, e] 这种方法也会有一定的局限性因为在去重前进行了排序所以最后返回的去重结果也是排序后的。如果要求不改变数组的顺序去重那这种方法便不可取了 (3).创建一个新的数组存放结果;创建一个空对象;for循环时每次取出一个元素与对象进行对比如果这个元素不重复则把它存放到结果数组中同时把这个元素的内容作为对象的一个属性并赋值为1存入到第2步建立的对象中。 说明至于如何对比就是每次从原数组中取出一个元素然后到对象中去访问这个属性如果能访问到值则说明重复。 Array.prototype.unique3 function(){ var res []; var json {}; for(var i 0; i this.length; i){ if(!json[this[i]]){ res.push(this[i]); json[this[i]] 1; } } console.log(json);//Object {34: 1, 112: 1, 你好: 1, str: 1, str1: 1} return res; } var arr [112,112,34,你好,112,112,34,你好,str,str1]; console.log(arr.unique3());//[112, 34, 你好, str, str1]; 18.如何实现浏览器内多个标签页之间的通信? WebSocket、SharedWorker 也可以调用localStorge、cookies等本地存储方式 localStorge另一个浏览上下文里被添加、修改或删除时它都会触发一个事件window.onstorage function(){ localStrorage存储的内容发生改变 } 我们通过监听事件控制它的值来进行页面信息通信 a.html // 设 location.href 为 [http://xxx/a.html] // 两种方法设置 localStorage localStorage[location.href] location.href; localStorage.setItem(location.href, location.href); b.html // 设 location.href 为 [http://xxx/xxx/b.html] // 两种方法获取 localStorage console.info(localStorage[location.href]); console.info(localStorage.getItem(location.href)); // 输出 http://xxx/a.html 注意quirksSafari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常 19.网页中的事件总结 http://blog.csdn.net/qx1995318/article/details/51921736 Html事件列表 一般事件: onClick: 鼠标点击事件多用在某个对象控制的范围内的鼠标点击 onDblClick: 鼠标双击事件 onMouseDown: 鼠标上的按钮被按下了 onMouseUp: 鼠标按下后松开时激发的事件 onMouseOver: 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove: 鼠标移动时触发的事件 onMouseOut: 当鼠标离开某对象范围时触发的事件 onKeyPress: 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onKeyDown: 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] onKeyUp: 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] 页面相关事件: onAbort: 图片在下载时被用户中断 onBeforeUnload: 当前页面的内容将要被改变时触发的事件 onError: 捕抓当前页面因为某种原因而出现的错误如脚本错误与外部数据引用的错误 onLoad: 页面内空完成传送到浏览器时触发的事件包括外部文件引入完成 onMove: 浏览器的窗口被移动时触发的事件 onResize: 当浏览器的窗口大小被改变时触发的事件 onScroll: 浏览器的滚动条位置发生变化时触发的事件 onStop: 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断 onUnload: 当前页面将被改变时触发的事件 表单相关事件: onBlur: 当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可] onChange: 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可] onFocus: 当某个元素获得焦点时触发的事件 onReset: 当表单中RESET的属性被激发时触发的事件 onSubmit: 一个表单被递交时触发的事件 滚动字幕事件: onBounce: 在Marquee内的内容移动至Marquee显示范围之外时触发的事件 onFinish: 当Marquee元素完成需要显示的内容后触发的事件 onStart: 当Marquee元素开始显示内容时触发的事件 编辑事件: onBeforeCopy:当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件 onBeforeCut: 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件 onBeforeEditFocus: 当前元素将要进入编辑状态 onBeforePaste: 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件 onBeforeUpdate: 当浏览者粘贴系统剪贴板中的内容时通知目标对象 onContextMenu: 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的中加入onContentMenureturn false就可禁止使用鼠标右键了] onCopy: 当页面当前的被选择内容被复制后触发的事件 onCut: 当页面当前的被选择内容被剪切时触发的事件 onDrag: 当某个对象被拖动时触发的事件 [活动事件] onDragDrop: 一个外部对象被鼠标拖进当前窗口或者帧 onDragEnd:当鼠标拖动结束时触发的事件即鼠标的按钮被释放了 onDragEnter: 当对象被鼠标拖动的对象进入其容器范围内时触发的事件 onDragLeave: 当对象被鼠标拖动的对象离开其容器范围内时触发的事件 onDragOver: 当某被拖动的对象在另一对象容器范围内拖动时触发的事件 [活动事件] onDragStart: 当某对象将被拖动时触发的事件 onDrop: 在一个拖动过程中释放鼠标键时触发的事件 onLoseCapture: 当元素失去鼠标移动所形成的选择焦点时触发的事件 onPaste: 当内容被粘贴时触发的事件 onSelect: 当文本内容被选择时的事件 onSelectStart:当文本内容选择将开始发生时触发的事件 数据绑定: onAfterUpdate : 当数据完成由数据源到对象的传送时触发的事件 onCellChange:当数据来源发生变化时 onDataAvailable: 当数据接收完成时触发事件 onDatasetChanged: 数据在数据源发生变化时触发的事件 onDatasetComplete: 当来子数据源的全部有效数据读取完毕时触发的事件 onErrorUpdate: 当使用onBeforeUpdate事件触发取消了数据传送时代替onAfterUpdate事件 onRowEnter:当前数据源的数据发生变化并且有新的有效数据时触发的事件 onRowExit:当前数据源的数据将要发生变化时触发的事件 onRowsDelete: 当前数据记录将被删除时触发的事件 onRowsInserted: 当前数据源将要插入新数据记录时触发的事件 外部事件: onAfterPrint: 当文档被打印后触发的事件 onBeforePrint: 当文档即将打印时触发的事件 onFilterChange: 当某个对象的滤镜效果发生变化时触发的事件 onHelp: 当浏览者按下F1或者浏览器的帮助选择时触发的事件 onPropertyChange: 当对象的属性之一发生变化时触发的事件 onReadyStateChange: 当对象的初始化属性值发生变化时触发的事件 20.查看以下代码 var adocument.getElementById(d1); a.onclickfun1; a.onclickfun2; 对象a被绑定的点击事件将执行的函数(fun1,fun2为函数)是什么 a href# idd11111111111111111/a script var adocument.getElementById(d1); a.onclickfun1; a.onclickfun2; function fun1(){ a.innerHTML222222; console.log(22222); } function fun2(){ a.innerHTML33333; console.log(33333); } /script a对象被点击后执行的是fun2; #####21.在javascript中和的区别?分别说出以下返回的布尔值 false’false’;false0;false0;0’’;’’0;0’0’;0’0’; 用于一般比较用于严格比较在比较的时候可以转换数据类型严格比较只要类型不匹配就返回flase。 false’false’;//false false0;//true false0;//false 0’’;//true ’’0;//false 0’0’;//true 0’0’;//false 22.核心DOM与HTML DOM的区别 http://www.wtoutiao.com/p/1f4LxOv.html 1核心DOM遍历DOM树、添加新节点、删除节点、修改节点核心DOM适合操作节点如创建删除查找等。对象Document,Node, ElementNode,TextNode,AttributeNodeCommentNode,NodeList 2HTML DOM以一种简便的方法访问DOM树HTML DOM适合操作属性如读取或修改属性的值。对象image,Table,Form,Input,Select...HTML标签对象化 HTML DOM是核心DOM的一种简化。 23.列举三种强制转换和两种隐式转换的方式。 强制转换Numble();Boolean();ParseInt(); 隐式转换字符串数字比较 24.写一个方法让b继承a的方法。 function a(){ console.log(aaa); } a.prototype{ aa:function(){ console.log(AAAAA); } } function b(){ console.log(bbb); a.apply(this,arguments); } // b.prototypea.prototype; Object.setPrototypeOf(b.prototype,a.prototype); var bbnew b; bb.aa(); #####25.写出以下代码依次输出的结果__,__,__,__; var a10; sayHi(); function sayHi(){ var aa10; alert(a); return a; } alert(a); alert(sayHi()10); NaN,10,NaN,NaN; 26.简单区分数组方法pop() push() unshift() shift()。 Push()尾部添加 pop()尾部删除 Unshift()头部添加 shift()头部删除 27.call和apply的区别 http://www.cnblogs.com/fighting_cp/archive/2010/09/20/1831844.html 方法传递的参数不同 Object.call(this,obj1,obj2,obj3) Object.apply(this,arguments) 28.事件委托是什么 利用事件冒泡的原理让自己的所触发的事件由他的父元素代替执行 29.如何阻止事件冒泡和默认事件 功能:停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象则这是一个非IE浏览器 if ( e e.stopPropagation ) { // 因此它支持W3C的stopPropagation()方法 e.stopPropagation(); }else{ // 否则我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble true; } } 功能阻止事件默认行为 function stopDefault( e ) { // 阻止默认浏览器动作(W3C) if ( e e.preventDefault ) { e.preventDefault(); } else { // IE中阻止函数器默认动作的方式 window.event.returnValue false; } return false; } 30.介绍js有哪些内置对象 http://www.jb51.net/w3school/js/js_reference.htm http://www.cnblogs.com/yujon/p/5467576.html Object 是 JavaScript 中所有对象的父对象 数据封装类对象Object、Array、Boolean、Number 和 String 其他对象Function、Arguments、Math、Date、RegExp、Error 31.说几条写JavaScript的基本规范 http://www.cnblogs.com/luoting/archive/2013/03/09/2938062.html 1.不要在同一行声明多个变量。 2.使用 /!来比较true/false或者数值 3.使用对象字面量替代new Array这种形式 4.不要使用全局函数。 5.Switch语句必须带有default分支 6.函数不应该有时候有返回值有时候没有返回值。 7.For循环必须使用大括号 8.If语句必须使用大括号 9.for-in循环中的变量 应该使用var关键字明确限定作用域从而避免作用域污染。 32.简述对JavaScript原型原型链的理解它们有什么特点 每个对象都会在其内部初始化一个属性就是prototype(原型)当我们访问一个对象的属性时如果这个对象内部不存在这个属性那么他就会去prototype里找这个属性这个prototype又会有自己的prototype于是就这样一直找下去也就是我们平时所说的原型链的概念。 关系instance.constructor.prototype instance.__proto__ 特点 JavaScript对象是通过引用来传递的我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时与之相关的对象也会继承这一改变。 当我们需要一个属性的时Javascript引擎会先看当前对象中是否有这个属性 如果没有的话就会查找他的Prototype对象是否有这个属性如此递推下去一直检索到 Object 内置对象。 function Func(){} Func.prototype.name Sean; Func.prototype.getInfo function() { return this.name; } var person new Func();//现在可以参考var person Object.create(oldObject); console.log(person.getInfo());//它拥有了Func的属性和方法 //Sean console.log(Func.prototype); // Func { nameSean, getInfofunction()} 33.JavaScript继承的几种实现方式 function Animal(){ this.species 动物; } function Cat(name,color){ this.name name; this.color color; } 1、构造继承 function Cat(name,color){ Animal.apply(this, arguments); this.name name; this.color color; } var cat1 new Cat(大毛,黄色); alert(cat1.species); // 动物 2、原型继承 Cat.prototype new Animal(); Cat.prototype.constructor Cat; var cat1 new Cat(大毛,黄色); alert(cat1.species); // 动物 3、利用空对象作为中介 var F function(){}; F.prototype Animal.prototype; Cat.prototype new F(); Cat.prototype.constructor Cat; 4、拷贝继承 ..... http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html 34.写一个duplicator方法使其实现数组复制并添加到该数组后面eg:[1,2,3,4].duplicator()----[1,2,3,4,1,2,3,4]. Array.prototype.duplicatorfunction(){ var newArrthis.concat(this); return newArr; } var arr[1,2,3,4,5,6]; var doubleArrarr.duplicator(); console.log(doubleArr);//[1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6] 三其他 1.常见的浏览器内核。 浏览器内核的解析和对比:http://www.cnblogs.com/fullhouse/archive/2011/12/19/2293455.html 浏览器内核 浏览器 私有属性前缀 备注 Webkit内核 Safari ,Chrome -webkit- Chrome内核:BlinkWebKit的分支 Gecko内核 Mozilla常指的是Firefox浏览器 -moz- Presto内核 Opera -o- Opera内核原为Presto现为Blink; Trident内核 IE浏览器 -ms- 2.常见的浏览器问题有哪些如何解决 (1)png24位的图片在iE6浏览器上出现背景解决方案是做成png8位. (2)浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。 (3)IE6双边距bug:块属性标签float后又有横行的margin情况下在ie6显示margin比设置的大.浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 10px;} 这种情况之下IE会产生20px的距离解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别) 渐进识别的方式从总体中逐渐排除局部。 首先巧妙的使用“\9”这一标记将IE游览器从所有情况中分离出来。 接着再次使用“”将IE8和IE7、IE6分离开来这样IE8已经独立识别。 css .bb{ background-color:#f1ee18;/*所有识别*/ background-color:#00deff\9; /*IE6、7、8识别*/ background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ } (4) IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性. (5) IE下,even对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. 解决方法条件注释缺点是在IE浏览器下可能会增加额外的HTTP请求数。 (6)Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决. 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {} (7)设置较小高度标签一般小于10px在IE6IE7遨游中高度超出自己设置高度 解决方案给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。 备注这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的这个标签的高度还是会达到默认的行高。 (8)其他各种特殊样式的兼容比如透明度、圆角、阴影等。特殊样式每个浏览器的代码区别很大所以只能现查资料通过给不同浏览器写不同的代码来解决。 推荐两个网站caniuse.com以及html5test.com大家在使用新技术前可以在这两个网站上看看浏览器的支持情况 3.介绍一下你对浏览器内核的理解 主要分成两部分渲染引擎(layout engineer或Rendering Engine)和JS引擎。 渲染引擎负责取得网页的内容HTML、XML、图像等等、整理讯息例如加入CSS等以及计算网页的显示方式然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。 JS引擎解析和执行javascript来实现网页的动态效果。 最开始渲染引擎和JS引擎并没有区分的很明确后来JS引擎越来越独立内核就倾向于只指渲染引擎。 4.**webSocket如何兼容低浏览器 http://www.tuicool.com/articles/EF7Nni http://blog.csdn.net/u011925826/article/details/17532465 5. 请简述对前端框架bootstrap栅格系统的认识 Bootstrap内置了一套响应式、移动设备优先的流式栅格系统随着屏幕设备或视口viewport尺寸的增加系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行row与列column的组合创建页面布局然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理 1.行row必须包含在.container中以便为其赋予合适的排列aligment和内补padding。 2.使用行row在水平方向创建一组列column。 3.你的内容应当放置于列column内而且只有列column可以作为行row的直接子元素。 4.类似.row ; .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。 5.通过设置padding从而创建列column之间的间隔gutter。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。 6.栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如三个等宽的列可以使用三个.col-xs-4来创建。转载于:https://www.cnblogs.com/summer0802/p/5990553.html
