免费网站大全下载,彭阳门户网站建设,电商设计网站有哪些,网络推广十大平台前端面试题汇总
一、HTML 和 CSS
1、你做的页面在哪些流览器测试过#xff1f;这些浏览器的内核分别是什么?
IE: trident 内核Firefox#xff1a;gecko 内核Safari:webkit 内核 Opera:以前是 presto 内核#xff0c;Opera 现已改用 Google Chrome 的 Blink 内核Chrome:B…前端面试题汇总
一、HTML 和 CSS
1、你做的页面在哪些流览器测试过这些浏览器的内核分别是什么?
IE: trident 内核Firefoxgecko 内核Safari:webkit 内核 Opera:以前是 presto 内核Opera 现已改用 Google Chrome 的 Blink 内核Chrome:Blink(基于 webkitGoogle 与 Opera Software 共同开发)
2、每个 HTML 文件里开头都有个很重要的东西Doctype知道这是干什么的吗 声明位于文档中的最前面的位置处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。重点告诉浏览器按照何种规范解析页面
3、Quirks 模式是什么它和 Standards 模式有什么区别
从 IE6 开始引入了 Standards 模式标准模式中浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。
在 IE6 之前 CSS 还不够成熟所以 IE5 等之前的浏览器对 CSS 的支持很差 IE6 将对 CSS 提供更好的支持然而这时的问题就来了因为有很多页面是基于旧的布局方式写的而如 果 IE6 支持 CSS 则将令这些页面显示不正常如何在即保证不破坏现有页面又提供新的渲染机制呢
在写程序时我们也会经常遇到这样的问题如何保证原来的接口不变又提供更强大的功能 尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支即当某个参数为真时我们就使用新功能而如果这个参数 不为真时就使用旧功能这样就能不破坏原有的程序又提供新功能。IE6 也是类似这样做的它将 DTD 当成了这个“参数” 因为以前的页面大家都不会去写 DTD所以 IE6 就假定 如果写了 DTD就意味着这个页面将采用对 CSS 支持更好的布局而如果没有则采用兼容之前的布局方式。这就是 Quirks 模式怪癖模式诡异模式怪异模式。
区别
总体会有布局、样式解析和脚本执行三个方面的区别。
盒模型在 W3C 标准中如果设置一个元素的宽度和高度指的是元素内容的宽度和高度 而在 Quirks 模式下IE 的宽度和高度还包含了 padding 和 border。
设置行内元素的高宽在 Standards 模式下给等行内元素设置 wdith 和 height 都不会生效而在 quirks 模式下则会生效。
设置百分比的高度在 standards 模式下一个元素的高度是由其包含的内容来决定的如果父元素没有设置百分比的高度子元素设置一个百分比的高度是无效的用 margin:0 auto 设置水平居中使用 margin:0 auto 在 standards 模式下可以使元素水平居中但在 quirks 模式下却会失效。
还有很多答出什么不重要关键是看他答出的这些是不是自己经验遇到的还是说都是 看文章看的甚至完全不知道。
4、divcss 的布局较 table 布局有什么优点
改版的时候更方便 只要改 css 文件。 页面加载速度更快、结构化清晰、页面显示简洁。 表现与结构相分离。 易于优化seo搜索引擎更友好排名更容易靠前。
5、 img 的 alt 与 title 有何异同 strong 与 em 的异同
a:alt(alt text):为不能显示图像、窗体或 applets 的用户代理UAalt 属性用来指定替换文字。替换文字的语言由 lang 属性指定。(在 IE 浏览器下会在没有 title 时把 alt 当成 tool tip 显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。
strong:粗体强调标签强调表示内容的重要性em:斜体强调标签更强烈强调表示内容的强调点 6、你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强 progressive enhancement针对低版本浏览器进行构建页面保证最基本的功能然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 优雅降级 graceful degradation一开始就构建完整的功能然后再针对低版本浏览器进行兼容。 区别优雅降级是从复杂的现状开始并试图减少用户体验的供给而渐进增强则是从一个 非常基础的能够起作用的版本开始并不断扩充以适应未来环境的需要。降级功能衰 减意味着往回看而渐进增强则意味着朝前看同时保证其根基处于安全地带。
“优雅降级”观点 “优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为 “过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段并把测试对象限 定为主流浏览器如 IE、Mozilla 等的前一个版本。
在这种设计范例下旧版的浏览器被认为仅能提供“简陋却无 妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点因此除了修复较大的错误之外其它的差异将被 直接忽略。
“渐进增强”观点 “渐进增强”观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它有的则收集它有的寻求有的操作还有 的网站甚至会包含以上的种种但相同点是它们全都涉及到内容。这使得“渐进增强”成为 一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
那么问题来了。现在产品经理看到 IE6,7,8 网页效果相对高版本现代浏览器少了很多圆角 阴影CSS3要求兼容使用图片背景放弃 CSS3你会如何说服他
7、为什么利用多个域名来存储网站资源会更有效
CDN 缓存更方便 突破浏览器并发限制节约 cookie 带宽 节约主域名的连接数优化页面响应速度防止不必要的安全问题 8、请谈一下你对网页标准和标准制定机构重要性的理解。
网页标准和标准制定机构都是为了能让 web 发展的更‘健康’开发者遵循统一的标准降低开发难度开发成本SEO 也会更好做也不会因为滥用代码导致各种 BUG、安全问题 最终提高网站易用性。
9、请描述一下 cookiessessionStorage 和 localStorage 的区别
sessionStorage session中的数据这些数据只有在同一个会话中的页面才能访问 并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储仅
仅是会话级别的存储。而 localStorage 用于持久化的本地存储除非主动删除数据否则数据是永远不会过期的。
web storage 和 cookie 的区别
Web Storage 的概念和 cookie 相似区别是它是为了更大容量存储设计的。Cookie 的大小是受限的并且每次你请求一个新的页面的时候 Cookie 都会被发送过去这样无形中浪费了带宽另外 cookie 还需要指定作用域不可以跨域调用。 除此之外Web Storage 拥有 setItem,getItem,removeItem,clear 等方法不像 cookie 需要前端开发者自己封装 setCookiegetCookie。但是 Cookie 也是不可以或缺的Cookie 的作用是与服务器进行交互作为 HTTP 规范的一部分而存在 而 Web Storage 仅仅是为了在本地“存储”数据而生。
10、简述一下 src 与 href 的区别。
src 用于替换当前元素href 用于在当前文档和引用资源之间确立联系。
src 是 source 的缩写指向外部资源的位置指向的内容将会嵌入到文档中当前标签所在位置在请求 src 资源时会将其指向的资源下载并应用到文档内例如 js 脚本img 图片和 frame 等元素。
当浏览器解析到该元素时会暂停其他资源的下载和处理直到将该资源加载、编译、执行 完毕图片和框架等元素也如此类似于将所指向资源嵌入当前标签内。这也是为什么将js 脚本放在底部而不是头部。
href 是 Hypertext Reference 的缩写指向网络资源所在位置建立和当前元素锚点 或当前文档链接之间的链接如果我们在文档中添加
那么浏览器会识别该文档为 css 文件就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css而不是使用import 方式。
11、知道的网页制作会用到的图片格式有哪些
png-8png-24jpeggifsvg。
但是上面的那些都不是面试官想要的最后答案。面试官希望听到是 Webp。是否有关注新技术新鲜事物
科普一下 WebpWebP 格式谷歌google开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有 JPEG 的 2/3并能节省大量的服务器带宽资源和数据空间。Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式。 在质量相同的情况下WebP 格式图像的体积要比 JPEG 格式图像小 40%
12、知道什么是微格式吗谈谈理解。在前端构建中应该考虑微格式吗
微格式Microformats是一种让机器可读的语义化 XHTML 词汇的集合是结构化数据的开放标准。是为特殊应用而制定的特殊格式。
优点将智能数据添加到网页上让网站内容在搜索引擎结果界面可以显示额外的提示。应 用范例豆瓣有兴趣自行 google
13、在 css/js 代码上线之后开发人员经常会优化性能从用户刷新网页开始 一次 js 请求一般情况下有哪些地方会有缓存处理
答案dns 缓存cdn 缓存浏览器缓存服务器缓存。
14、一个页面上有大量的图片大型电商网站加载很慢你有哪些方法优 化这些图片的加载给用户更好的体验。
图片懒加载在页面上的未可视区域可以添加一个滚动条事件判断图片位置与浏览器顶端 的距离与页面的距离如果前者小于后者优先加载。 如果为幻灯片、相册等可以使用图片预加载技术将当前展示图片的前一张和后一张优先 下载。 如果图片为 css 图片可以使用 CSSspriteSVGspriteIconfont、Base64 等技术。 如果图片过大可以使用特殊编码的图片加载时会先加载一张压缩的特别厉害的缩略图 以提高用户体验。 如果图片展示区域小于图片的真实大小则因在服务器端根据业务需要先行进行图片压缩 图片压缩后大小与展示一致。
15、你如何理解 HTML 结构的语义化
去掉或样式丢失的时候能让页面呈现清晰的结构 html 本身是没有表现的我们看到例如
是粗体字体大小 2em加粗是加粗的不要认为这是 html 的表现这些其实 html 默认的 css 样式在起作用所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的 HTML 结构的优点但是浏览器都有有默认样式默认样式的目的也是为了更好的表达 html 的语义可以说浏览器的默认样式和语义化的 HTML 结构是不可分割的。 屏幕阅读器如果访客有视障会完全根据你的标记来“读”你的网页. 例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对 它完整发音.
PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页通常是因为这些设备对 CSS 的支持较弱 使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的 任务是符合设备本身的条件来渲染网页.
语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况包括 现有的或者将来新的设备.例如,一部手机可以选择使一段标记了标题的文字以粗体显示. 而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.
搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重 过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其 宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.
你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只 注重语义标记. 因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后. 除了提升易用性外,语义标记有利于正确使用CSS 和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为.
SEO 主要还是靠你网站的内容和外部链接的。
便于团队开发和维护 W3C 给我们定了一个很好的标准在团队中大家都遵循这个标准可以减少很多差异化的东西方便开发和维护提高开发效率甚至实现模块化开发。
16、谈谈以前端角度出发做好 SEO 需要考虑什么
了解搜索引擎如何抓取网页和如何索引网页 你需要知道一些搜索引擎的基本工作原理各个搜索引擎之间的区别搜索机器人 SE robot 或叫 web crawler如何进行工作搜索引擎如何对搜索结果进行排序等等。
Meta 标签优化
主要包括主题Title)网站描述(Description)和关键词Keywords。还有一些其它 的隐藏文字比如 Author作者Category目录Language编码语种等。
如何选取关键词并在网页中放置关键词 搜索就得用关键词。关键词分析和选择是 SEO 最重要的工作之一。首先要给网站确定主关键词一般在 5 个上下然后针对这些关键词进行优化包括关键词密度Density相关度Relavancy突出性Prominency等等。
了解主要的搜索引擎 虽然搜索引擎有很多但是对网站流量起决定作用的就那么几个。比如英文的主要有GoogleYahooBing 等中文的有百度搜狗有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系比如 AOL 网页搜索用的是 Google 的搜索技术MSN 用的是 Bing 的技术。
主要的互联网目录 Open Directory 自身不是搜索引擎而是一个大型的网站目录他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的主要收录网站主页搜索引擎是自动收集 的除了主页外还抓取大量的内容页面。
按点击付费的搜索引擎 搜索引擎也需要生存随着互联网商务的越来越成熟收费的搜索引擎也开始大行其道。最 典型的有 Overture 和百度当然也包括 Google 的广告项目 Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站这里面也大有优化和排名的学问你得学会用 最少的广告投入获得最多的点击。
搜索引擎登录 网站做完了以后别躺在那里等着客人从天而降。要让别人找到你最简单的办法就是将网 站提交submit到搜索引擎。如果你的是商业网站主要的搜索引擎和目录都会要求你付 费来获得收录比如 Yahoo 要 299 美元但是好消息是至少到目前为止最大的搜索引擎 Google 目前还是免费而且它主宰着 60以上的搜索市场。
链接交换和链接广泛度Link Popularity 网页内容都是以超文本Hypertext的方式来互相链接的网站之间也是如此。除了搜索引擎以外人们也每天通过不同网站之间的链接来 Surfing“冲浪”。其它网站到你的网站的链接越多你也就会获得更多的访问量。更重要的是你的网站的外部链接数越多 会被搜索引擎认为它的重要性越大从而给你更高的排名。
合理的标签使用
17、有哪项方式可以对一个 DOM 设置它的 CSS 样式
外部样式表引入一个外部 css 文件 内部样式表将 css 代码放在 标签内部 内联样式将 css 样式直接定义在 HTML 元素内部 18、CSS 都有哪些选择器
派生选择器用 HTML 标签申明 id 选择器用 DOM 的 ID 申明 类选择器用一个样式类名申明 属性选择器用 DOM 的属性申明属于 CSS2IE6 不支持不常用不知道就算了 除了前 3 种基本选择器还有一些扩展选择器包括
后代选择器利用空格间隔比如 div .a{ } 群组选择器利用逗号间隔比如 p,div,#a{ } 那么问题来了CSS 选择器的优先级是怎么样定义的 基本原则
一般而言选择器越特殊它的优先级越高。也就是选择器指向的越准确它的优先级就越 高。
复杂的计算方法
用 1 表示派生选择器的优先级 用 10 表示类选择器的优先级用 100 标示 ID 选择器的优先级 div.test1 .span var 优 先 级 110 10 1 span#xxx .songs li 优先级 1100 10 1 #xxx li 优 先 级 100 1 那么问题来了看下列代码
标签内的文字是什么颜色的 123 答案red。与样式定义在文件中的先后顺序有关即是后面的覆盖前面的与在
19、CSS 中可以通过哪些属性定义使得一个 DOM 元素不显示在浏览器可视范围内
最基本的
设置 display 属性为 none或者设置 visibility 属性为 hidden 技巧性 设置宽高为 0设置透明度为 0设置 z-index 位置在-1000
20、超链接访问过后 hover 样式就不出现的问题是什么如何解决
答案被点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变 CSS 属性的排列顺序: L-V-H-Alink,visited,hover,active
21、什么是 Css Hackie6,7,8 的 hack 分别是什么
答案针对不同的浏览器写不同的 CSS code 的过程就是 CSS hack。示例如下 1 #test { 2 width:300px; 3 height:300px; 4 background-color:blue; /firefox/ 5 background-color:red\9; /all ie/ 6 background-color:yellow; /ie8/ 7 background-color:pink; /ie7/ 8_background-color:orange; /ie6/ } 9:root #test { background-color:purple\9; } /ie9/ 10media all and (min-width:0px){ #test {background-color:black;} } /opera/ 11media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray; 12and safari*/
22、请用 Css 写一个简单的幻灯片效果页面
答案知道是要用 css3。使用 animation 动画实现一个简单的幻灯片效果。
18 no-repeat; 19 20 21 22 no-repeat; 23 24 25 26 no-repeat; 27 28 29 30 no-repeat; 31 32 33 no-repeat;
} 25% {
} 50% {
} 75% {
} 100% {
background:url(http://b.hiphotos.baidu.com/image/w%3D400/si
background:url(http://b.hiphotos.baidu.com/image/w%3D400/si
background:url(http://g.hiphotos.baidu.com/image/w%3D400/si
background:url(http://c.hiphotos.baidu.com/image/w%3D400/si
} }
24、行内元素和块级元素的具体区别是什么行内元素的 padding 和 margin 可设置吗
块级元素(block)特性
总是独占一行表现为另起一行开始而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制; 内联元素(inline)特性
和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变也就是 padding 和 margin 的left 和 right 是可以设置的就是里面文字或图片的大小。 那么问题来了浏览器还有默认的天生 inline-block 元素拥有内在尺寸可设置高宽 但不会自动换行有哪些 答案 、 、 、 、。
25、什么是外边距重叠重叠的结果是什么
外边距重叠就是 margin-collapse。
在 CSS 当中相邻的两个盒子可能是兄弟关系也可能是祖先关系的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠并且因而所结合成的外边距称为折叠 外边距。
折叠结果遵循下列计算规则
两个相邻的外边距都是正数时折叠结果是它们两者之间较大的值。 两个相邻的外边距都是负数时折叠结果是两者绝对值的较大值。 两个外边距一正一负时折叠结果是两者的相加的和。 26、rgba()和 opacity 的透明效果有什么不同
rgba()和 opacity 都能实现透明效果但最大的不同是 opacity 作用于元素以及元素内的所有内容的透明度
而 rgba()只作用于元素的颜色或其背景色。设置 rgba 透明的元素的子元素不会继承透明效果
27、css 中可以让文字在垂直和水平方向上重叠的两个属性是什么
垂直方向line-height
水平方向letter-spacing
那么问题来了关于 letter-spacing 的妙用知道有哪些么 答案:可以用于消除 inline-block 元素间的换行符空格间隙问题。
28、如何垂直居中一个浮动元素
1 // 方法一已知元素的高宽2 #div1{ 3background-color:#6699FF; 4width:200px; 5height:200px; 6position: absolute; //父元素需要相对定位7 top: 50%; 8 left: 50%; 9margin-top:-100px ; //二分之一的 heightwidth 10margin-left: -100px; 11 } 12 13 //方法二:未知元素的高宽14 15#div1{ 16width: 200px; 17height: 200px; 18background-color: #6699FF; 19 20margin:auto; 21position: absolute; //父元素需要相对定位 22left: 0; 23top: 0; 24right: 0; 25bottom: 0; 26 }
27 28 那么问题来了如何垂直居中一个?用更简便的方法。 1 #container //的容器设置如下2 { 3display:table-cell; 4text-align:center; 5vertical-align:middle; 6 }
29、px 和 em 的区别。
px 和 em 都是长度单位区别是px 的值是固定的指定是多少就是多少计算比较容易。em 得值不是固定的并且 em 会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em16px。那么12px0.75em, 10px0.625em。
30、描述一个”reset”的 CSS 文件并如何使用它。知道 normalize.css 吗你了解他们的不同之处
重置样式非常多凡是一个前端开发人员肯定有一个常用的重置 CSS 文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢原因是不同的浏览器对一些元素有不同的默认样式如果你不处理在不同的浏览器下会存在必要的风险或者更有戏剧性的性发生。
你可能会用 Normalize 来代替你的重置样式文件。它没有重置所有的样式风格但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理但又不扰乱其他的东西如粗 体的标题。 在这一方面无法做每一个复位重置。它也确实有些超过一个重置它处理了你永远都不用 考虑的怪癖像 HTML 的 audio 元素不一致或 line-height 不一致。
31、Sass、LESS 是什么大家为什么要使用他们
他们是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。
例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性如变量继承运算 函数. LESS 既可以在客户端上运行 (支持 IE 6, Webkit, Firefox)也可一在服务端运行(借助 Node.js)。 为什么要使用它们
结构清晰便于扩展。 可以方便地屏蔽浏览器私有语法差异。这个不用多说封装对浏览器语法差异的重复处理 减少无意义的机械劳动。 可以轻松实现多重继承。 完全兼容 CSS 代码可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展所以老的 CSS 代码也可以与 LESS 代码一同编译。
32、display:none 与 visibility:hidden 的区别是什么
display : 隐藏对应的元素但不挤占该元素原来的空间。visibility: 隐藏对应的元素并且挤占该元素原来的空间。 即是使用 CSS display:none 属性后HTML 元素对象的宽度、高度等各种属性值都将“丢失”;而使用 visibility:hidden 属性后HTML 元素对象仅仅是在视觉上看不见完全透明而它所占据的空间位置仍然存在。
34、CSS 中 link 和import 的区别是
Link 属于 html 标签而import 是 CSS 中提供的 在页面加载的时候link 会同时被加载而import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS
import 只有在 ie5 以上才可以被识别而 link 是 html 标签不存在浏览器兼容性问题Link 引入样式的权重大于import 的引用import 是将引用的样式导入到当前的页面中 35、简介盒子模型
CSS 的盒子模型有两种IE 盒子模型、标准的 W3C 盒子模型模型 盒模型内容、内边距、外边距一般不计入盒子实际宽度、边框
36、为什么要初始化样式
由于浏览器兼容的问题不同的浏览器对标签的默认样式值不同若不初始化会造成不同浏 览器之间的显示差异
但是初始化 CSS 会对搜索引擎优化造成小影响
37、BFC 是什么?
BFC块级格式化上下文一个创建了新的 BFC 的盒子是独立布局的盒子内元素的布局不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin 重叠的问题
BFC 是指浏览器中创建了一个独立的渲染区域该区域内所有元素的布局不会影响到区域外元素的布局这个渲染区域只对块级元素起作用
38、html 语义化是什么
当页面样式加载失败的时候能够让页面呈现出清晰的结构
有利于 seo 优化利于被搜索引擎收录更便于搜索引擎的爬虫程序来识别 便于项目的开发及维护使 html 代码更具有可读性便于其他设备解析。
39、Doctype 的作用严格模式与混杂模式的区别 用于告知浏览器该以何种模式来渲染文档
严格模式下页面排版及 JS 解析是以该浏览器支持的最高标准来执行混杂模式不严格按照标准执行主要用来兼容旧的浏览器向后兼容 40、IE 的双边距 BUG块级元素 float 后设置横向 marginie6 显示的 margin 比设置的较大。解决加入_displayinline 41、HTML 与 XHTML——二者有什么区别 1.所有的标记都必须要有一个相应的结束标记 2.所有标签的元素和属性的名字都必须使用小写 3.所有的 XML 标记都必须合理嵌套 4.所有的属性必须用引号 “” 括起来 5.把所有 和 特殊符号用编码表示 6.给所有属性赋一个值 7.不要在注释内容中使用 “–” 8.图片必须有说明文字
42、html 常见兼容性问题
1.双边距 BUG float 引起的 使用 display 2.3 像素问题 使用 float 引起的 使用 dislpay:inline -3px 3.超链接 hover 点击后失效 使用正确的书写顺序 link visited hover active 4.Ie z-index 问题 给父级添加 position:relative 5.Png 透明 使用 js 代码 改 6.Min-height 最小高度 Important 解决’ 7.select 在 ie6 下遮盖 使用 iframe 嵌套 8.为什么没有办法定义 1px 左右的宽度容器 IE6 默认的行高造成的 使用over:hidden,zoom:0.08 line-height:1px 9.IE5-8 不支持 opacity解决办法 .opacity { opacity: 0.4 filter: alpha(opacity60); /* for IE5-7 / -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity60)”; / for IE 8*/ }
10.IE6 不支持 PNG 透明背景解决办法: IE6 下使用 gif 图片
43、对 WEB 标准以及 W3C 的理解与认识
答标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件容易维 护、改版方便不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。
44、行内元素有哪些?块级元素有哪些?CSS 的盒模型?
答块级元素div p h1 h2 h3 h4 form ul 行内元素: a b br i span input select Css 盒模型:内容border ,marginpadding
45、前端页面有哪三层构成分别是什么?作用是什么?
答结构层 Html 表示层 CSS 行为层 js。
46、Doctype 作用? 严格模式与混杂模式-如何触发这两种模式区分它们有何意义?
1、!DOCTYPE 声明位于文档中的最前面处于 标签之前。告知浏览器的解析器用什么文档类型 规范来解析这个文档。 2、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 3、在混杂模式中页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 4、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。
47、行内元素有哪些块级元素有哪些 空(void)元素有那些
1CSS 规范规定每个元素都有 display 属性确定该元素的类型每个元素都有默认的 display 值比如 div 默认 display 属性值为“block”成为“块级”元素span 默认display 属性值为“inline”是“行内”元素。 2行内元素有a b span img input select strong强调的语气 块级元素有div ul ol li dl dt dd h1 h2 h3 h4…p 3知名的空元素 鲜为人知的是 48、CSS 的盒子模型
1两种 IE 盒子模型、标准 W3C 盒子模型IE 的 content 部分包含了 border 和pading; 2盒模型 内容(content)、填充(padding)、边界(margin)、 边框(border).
49、CSS 选择符有哪些哪些属性可以继承优先级算法如何计算 CSS3 新增伪类有那些
*1.id 选择器 # myid 2.类选择器.myclassname 3.标签选择器div, h1, p 4.相邻选择器h1 p 5.子选择器ul li 6.后代选择器li a 7.通配符选择器 * 8.属性选择器a[rel “external”] 9.伪类选择器a: hover, li: nth - child *可继承 font-size font-family color, UL LI DL DD DT; *不可继承 border padding margin width height ; *优先级就近原则样式定义最近者为准; *载入样式以最后载入的定位为准; 优先级为: !important id class tag important 比 内联优先级高 CSS3 新增伪类举例 p:first-of-type 选择属于其父元素的首个 元素的每个 元素。p:last-of-type 选择属于其父元素的最后 元素的每个 元素。p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。p:only-child 选择属于其父元素的唯一子元素的每个 元素。p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。 :enabled、:disabled 控制表单控件的禁用状态。 :checked单选框或复选框被选中。
50、如何居中 div,如何居中一个浮动元素?
给 div 设置一个宽度然后添加 margin:0 auto 属性div{ width:200px; margin:0 auto;
} 居中一个浮动元素 确定容器的宽高 宽 500 高 300 的层设置层的外边距 .div { Width:500px ; height:300px;//高度可以不设Margin: -150px 0 0 -250px; position:relative;相对定位 background-color:pink;//方便看效果left:50%; top:50%; }
51、浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些原因解决方法是什么常用 hack 的技巧
*IE 浏览器的内核 Trident、Mozilla 的 Gecko、google 的 WebKit、Opera 内核 Presto *png24 为的图片在 iE6 浏览器上出现背景解决方案是做成 PNG8. *浏 览 器 默 认 的 margin 和 padding 不 同 。 解 决 方 案 是 加 一 个 全 局 的 *{margin:0;padding:0;}来统一。 *IE6 双边距 bug:块属性标签 float 后又有横行的 margin 情况下在 ie6 显示margin 比设置的大。 浮动 ie 产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;} 这种情况之下 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 识别/ } *IE 下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用 getAttribute()获取自定义属性; Firefox 下,只能使用 getAttribute()获取自定义属性. 解决方法:统一通过 getAttribute()获取自定义属性.
IE 下,even 对象有 x,y 属性,但是没有 pageX,pageY 属性; Firefox 下,event 对象有 pageX,pageY 属性,但是没有 x,y 属性. *条件注释缺点是在 IE 浏览器下可能会增加额外的 HTTP 请求数。 *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 {}
52、列出 display 的值说明他们的作用。position 的值relative 和 absolute 定位原点是
1.block 象块类型元素一样显示。 none 缺省值。向行内元素类型一样显示。 inline-block 象行内元素一样显示但其内容象块类型元素一样显示。list-item 象块类型元素一样显示并添加样式列表标记。 2.position 的值 *absolute 生成绝对定位的元素相对于 static 定位以外的第一个父元素进行定位。 *fixed 老 IE 不支持 生成绝对定位的元素相对于浏览器窗口进行定位。
relative 生成相对定位的元素相对于其正常位置进行定位。 *static 默认值。没有定位元素出现在正常的流中 *忽略 top, bottom, left, right z-index 声明。 *inherit 规定从父元素继承 position 属性的值。
53、absolute 的 containing block 计算方式跟正常流有什么不同
54、position 跟 display、margin collapse、overflow、float 这些特性相互叠加后会怎么样
55、对 WEB 标准以及 W3C 的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广 泛的设备所访问、更少的代码和组件容易维 护、改版方便不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性
56、css 的基本语句构成是?
选择器{属性 1:值 1;属性 2:值 2;……}
57、浏览器标准模式和怪异模式之间的区别是什么?
盒子模型 渲染模式的不同 使用 window.top.document.compatMode 可显示为什么模式
58、CSS 中可以通过哪些属性定义使得一个 DOM 元素不显示在浏览器可视范围内 最基本的 设置 display 属性为 none或者设置 visibility 属性为 hidden
技巧性
设置宽高为 0设置透明度为 0设置 z-index 位置在-1000
59、超链接访问过后 hover 样式就不出现的问题是什么如何解决
答案被点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变 CSS 属性的排列顺序: L-V-H-Alink,visited,hover,active
60、什么是 Css Hackie6,7,8 的 hack 分别是什么
答案针对不同的浏览器写不同的 CSS code 的过程就是 CSS hack。示例如下 #test { width:300px; height:300px;
background-color:blue; /firefox/ background-color:red\9; /all ie/ background-color:yellow\0; /ie8/ background-color:pink; /ie7/ _background-color:orange; /ie6/ } :root #test { background-color:purple\9; } /ie9/ media all and (min-width:0px){ #test {background-color:black\0;} } /opera/ media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /chrome and safari/
62、请用 Css 写一个简单的幻灯片效果页面
答案知道是要用 css3。使用 animation 动画实现一个简单的幻灯片效果。
/HTML/ div.ani /css/ .ani{ width:480px; height:320px; margin:50px auto; overflow: hidden; box-shadow:0 0 5px rgba(0,0,0,1); background-size: cover; background-position: center; -webkit-animation-name: “loops”; -webkit-animation-duration: 20s; -webkit-animation-iteration-count: infinite; } -webkit-keyframes “loops” { 0% { background:url(http://d.hiphotos.baidu.com/image/w%3D400/signc01e6adca964034 f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat; } 25% {
background:url(http://b.hiphotos.baidu.com/image/w%3D400/signedee1572e9f81a4c2 632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat; } 50% {
background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign937dace2552c11dfd ed1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat; } 75% {
background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign7d37500b8544ebf86 d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat; } 100% {
background:url(http://c.hiphotos.baidu.com/image/w%3D400/signcfb239ceb0fb43161 a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat; } } 63、行内元素和块级元素的具体区别是什么行内元素的 padding 和 margin 可设置吗 块级元素(block)特性
总是独占一行表现为另起一行开始而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制; 内联元素(inline)特性 和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom) 和外边距的top/bottom(margin-top/margin-bottom)都不可改变也就是padding 和margin 的 left 和 right 是可以设置的就是里面文字或图片的大小。 那么问题来了浏览器还有默认的天生 inline-block 元素拥有内在尺寸可设置高宽但不会自动换行有哪些 答案 、 、 、 、
64、什么是外边距重叠重叠的结果是什么 答案 外边距重叠就是 margin-collapse。
在 CSS 当中相邻的两个盒子可能是兄弟关系也可能是祖先关系的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠并且因而所结合成的外边距称为 折叠外边距。 折叠结果遵循下列计算规则
1.两个相邻的外边距都是正数时折叠结果是它们两者之间较大的值。 2.两个相邻的外边距都是负数时折叠结果是两者绝对值的较大值。 3.两个外边距一正一负时折叠结果是两者的相加的和。
65、rgba()和 opacity 的透明效果有什么不同
rgba()和 opacity 都能实现透明效果但最大的不同是 opacity 作用于元素以及元素内的所有内容的透明度
而 rgba()只作用于元素的颜色或其背景色。设置 rgba 透明的元素的子元素不会继承透明效果
66、css 中可以让文字在垂直和水平方向上重叠的两个属性是什么
垂直方向line-height
水平方向letter-spacing
那么问题来了关于 letter-spacing 的妙用知道有哪些么
答案:可以用于消除 inline-block 元素间的换行符空格间隙问题。67、如何垂直居中一个浮动元素 // 方法一已知元素的高宽#div1{ background-color:#6699FF; width:200px; height:200px; position: absolute; //父元素需要相对定位top: 50%; left: 50%; margin-top:-100px ; //二分之一的 heightwidth margin-left: -100px; } //方法二:未知元素的高宽 #div1{ width: 200px; height: 200px; background-color: #6699FF; margin:auto; position: absolute; //父元素需要相对定位left: 0; top: 0; right: 0; bottom: 0; } 那么问题来了如何垂直居中一个?用更简便的方法。 #container //的容器设置如下 {
display:table-cell; text-align:center; vertical-align:middle; }
68、描述一个reset的 CSS 文件并如何使用它。知道同之处
吗你了解他们的不
重置样式非常多凡是一个前端开发人员肯定有一个常用的重置 CSS 文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢原因是不同的浏览器对一些元素有不 同的默认样式如果你不处理在不同的浏览器下会存在必要的风险或者更有戏剧性的性 发生。 你可能会用 Normalize 来代替你的重置样式文件。它没有重置所有的样式风格但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理但又不扰乱其他的东西如 粗体的标题。 在这一方面无法做每一个复位重置。它也确实有些超过一个重置它处理了你永远都
不用考虑的怪癖像 HTML 的
元素不一致或
不一致。
69、说 display 属性有哪些可以做什么
display:block 行内元素转换为块级元素display:inline 块级元素转换为行内元素display:inline-block 转为内联元素
70、哪些 css 属性可以继承
可继承 font-size font-family color, ul li dl dd dt; 不可继承 border padding margin width height ;
71、css 优先级算法如何计算
!important id class 标 签 !important 比 内联优先级高 *优先级就近原则样式定义最近者为准; *以最后载入的样式为准;
72、b 标签和 strong 标签,i 标签和 em 标签的区别
后者有语义前者则无。
73、有那些行内元素、有哪些块级元素、盒模型
1.内联元素(inline element) a – 锚点 abbr – 缩写acronym – 首 字 b – 粗体(不推荐) big – 大字体 br – 换行 em – 强调 font – 字体设定(不推荐) i – 斜体 img – 图 片 input – 输入框label – 表格标签 s – 中划线(不推荐) select – 项目选择small – 小字体文本 span – 常用内联容器定义文本内区块 strike – 中划线strong – 粗体强调sub – 下标 sup – 上标 textarea – 多行文本输入框 tt – 电传文本u – 下划线var – 定义变量2、块级元素address – 地址 blockquote – 块引用center – 举中对齐块dir – 目录列表 div – 常用块级容易也是 css layout 的主要标签 dl – 定义列表fieldset – form 控制组form – 交互表单 h1 – 大标题h2 – 副标题h3 – 3 级标题h4 – 4 级标题h5 – 5 级标题h6 – 6 级标题 hr – 水平分隔线 isindex – input prompt
menu – 菜单列表 noframes – frames 可选内容对于不支持 frame 的浏览器显示此区块内容 noscript – 可选脚本内容对于不支持 script 的浏览器显示此内容 ol – 排序表单 p – 段落 pre – 格式化文本 table – 表格 ul – 非排序列表 3.CSS 盒子模型包含四个部分组成 内容、填充padding、边框border、外边界margin。
74、有哪些选择符优先级的计算公式是什么行内样式和important 哪个优先级高
#ID .class 标签选择符 !important 优先级高
75.我想让行内元素跟上面的元素距离 10px加 margin-top 和 padding-top 可以吗
margin-top,padding-top 无效
76.CSS 的盒模型由什么组成
内容border ,marginpadding
77、.说说 display 属性有哪些可以做什么
display:block 行内元素转换为块级元素display:inline 块级元素转换为行内元素display:inline-block 转为内联元素 78、哪些 css 属性可以继承
可继承 font-size font-family color, ul li dl dd dt; 不可继承 border padding margin width height ; 79、css 优先级算法如何计算
!important id class 标 签
!important 比 内联优先级高
*优先级就近原则样式定义最近者为准;
*以最后载入的样式为准;
80、text-align:center 和 line-height 有什么区别
text-align 是水平对齐line-height 是行间。
81、前端页面由哪三层构成分别是什么作用是什么
结构层 Html 表示层 CSS 行为层 js
82、写一个表格以及对应的 CSS,使表格奇数行为白色背景偶数行为灰色鼠标一上去为黄色背景。
二、JS 基础
1、javascript 的 typeof 返回哪些数据类型
object number function boolean underfind string typeof null;//object typeof isNaN;// typeof isNaN(123) typeof [];//object Array.isARRAY(); es5 toString.call([]);//”[object Array]” var arr[]; arr.constructor;//Array
2、例举 3 种强制类型转换和 2 种隐式类型转换?
强制parseInt,parseFloat,Number() 隐式 1”1”//true nullundefined//true
3、split() join() 的区别
前者是切割成数组的形式 后者是将数组转换成字符串
4、数组方法 pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除Unshift()头部添加 shift()头部删除
5、事件绑定和普通事件有什么区别
传统事件绑定和符合 W3C 标准的事件绑定有什么区别 div1.οnclickfunction(){}; 1、如果说给同一个元素绑定了两次或者多次相同类型的事件那么后面的绑定会覆盖前面的绑定 2、不支持 DOM 事件流 事件捕获阶段目标元素阶段事件冒泡阶段
addEventListener 1、 如果说给同一个元素绑定了两次或者多次相同类型的事件所有的绑定将会依次触发 2、 支持 DOM 事件流的 3、 进行事件绑定传参不需要 on 前缀 addEventListener(“click”,function(){},true);//此时的事件就是在事件冒泡阶段执行 ie9 开始ie11 edgeaddEventListener ie9 以前attachEvent/detachEvent 1、 进行事件类型传参需要带上 on 前缀 2、 这种方式只支持事件冒泡不支持事件捕获 事件绑定是指把事件注册到具体的元素之上普通事件指的是可以用来注册的事件
6、IE 和 DOM 事件流的区别
1.执行顺序不一样、 2.参数不一样 3.事件加不加 on 4.this 指向问题
IE9 以前attachEvent(“onclick”)、detachEvent(“onclick”) IE9 开始跟 DOM 事件流是一样的都是 addEventListener
7、IE 和标准下有哪些兼容性的写法
var ev ev || window.event document.documentElement.clientWidth || document.body.clientWidth var target ev.srcElement||ev.target
8、call 和 apply 的区别
call 和 apply 相同点 都是为了用一个本不属于一个对象的方法让这个对象去执行
toString.call([],1,2,3) toString.apply([],[1,2,3]) Object.call(this,obj1,obj2,obj3) Object.apply(this,arguments)
9、b 继承 a 的方法
考点继承的多种方式function b(){} b.protoototypenew a;
10、JavaScript this 指针、闭包、作用域
this指向调用上下文 闭包内层作用域可以访问外层作用域的变量 作用域定义一个函数就开辟了一个局部作用域整个 js 执行环境有一个全局作用域
11、事件委托是什么
符合 W3C 标准的事件绑定 addEventLisntener /attachEvent 让利用事件冒泡的原理让自己的所触发的事件让他的父元素代替执行
12、闭包是什么有什么特性对页面有什么影响
闭包就是能够读取其他函数内部变量的函数。 闭包的缺点滥用闭包函数会造成内存泄露因为闭包中引用到的包裹函数中定义的变量都 永远不会被释放所以我们应该在必要的时候及时释放这个闭包函数
13、如何阻止事件冒泡和默认事件
e. stopPropagation();//标准浏览器
event.canceBubbletrue;//ie9 之前阻止默认事件 为了不让 a 点击之后跳转我们就要给他的点击事件进行阻止return false e.preventDefault();
14、添加 删除 替换 插入到某个接点的方法
obj.appendChild() obj.insertBefore() //原生的 js 中不提供 insertAfter(); obj.replaceChild()//替换 obj.removeChild()//删除
15、javascript 的本地对象内置对象和宿主对象
本地对象为 array obj regexp 等可以 new 实例化内置对象为 gload Math 等不可以实例化的 宿主为浏览器自带的 document,window 等
16、document load 和 document ready 的区别
Document.onload 是在结构和样式加载完才执行 js window.onload不仅仅要在结构和样式加载完还要执行完所有的样式、图片这些资源文件全部加载完才会触发 window.onload 事件 Document.ready 原生中没有这个方法jquery 中有 $().ready(function)
17、””和“”的不同
前者会自动转换类型后者不会
1”1” nullundefined
先判断左右两边的数据类型如果数据类型不一致直接返回 false 之后才会进行两边值的判断
18、javascript 的同源策略
一段脚本只能读取来自于同一来源的窗口和文档的属性这里的同一来源指的是主机名、协 议和端口号的组合 http,ftp:协议 主机名localhost 端口名8 同源策略带来的麻烦ajax 在不 0:http 协议的默认端口https:默认端口是 8083 同域名下的请求无法实现 如果说想要请求其他来源的 js 文件或者 json 数据那么可以通过 jsonp 来解决
19、编写一个数组去重的方法
var arr[1,1,3,4,2,4,7]; [1,3,4,2,7] 一个比较简单的实现就是 1、 先创建一个空数组用来保存最终的结果 2、 循环原数组中的每个元素 3、 再对每个元素进行二次循环判断是否有与之相同的元素如果没有将把这个元素放到新数组中 4、 返回这个新数组
function oSort(arr) { var result {}; var newArr[]; for(var i0;iarr.length;i){ if(!result[arr]) { newArr.push(arr) result[arr]1 } } return newArr }/arr.length;i)
20、JavaScript 是一门什么样的语言它有哪些特点
没有标准答案。
运行环境浏览器中的 JS 引擎v8.。。
语言特性面向对象动态语言
21、JavaScript 的数据类型都有什么
基本数据类型String,Boolean,number,undefined,object,Null 引用数据类型Object(Array,Date,RegExp,Function) 那么问题来了如何判断某变量是否为数组数据类型
方法一.判断其是否具有“数组性质”如 slice()方法。可自己给该变量定义 slice 方法 故有时会失效 方法二.obj instanceof Array 在某些 IE 版本中不正确 方法三.方法一二皆有漏洞在 ECMA Script5 中定义了新方法 Array.isArray(), 保证其兼容性最好的方法如下 toString.call(18);//”[object Number]” toString.call(“”);//”[object String]” 解析这种简单的数据类型直接通过 typeof 就可以直接判断
toString.call 常用于判断数组、正则这些复杂类型toString.call(/[0-9]{10}/)//”[object RegExp]”
if(typeof Array.isArray“undefined”){ Array.isArray function(arg){ return Object.prototype.toString.call(arg)“[object Array]” }; }
22、已知 ID 的 Input 输入框希望获取这个输入框的输入值怎么做(不使用第三方框架)
document.getElementById(“ID”).value
23、希望获取到页面中所有的 checkbox 怎么做(不使用第三方框架)
var domList document.getElementsByTagName(‘input’) var checkBoxList [];//返回的所有的 checkbox var len domList.length; //缓存到局部变量 while (len–) { //使用 while 的效率会比 for 循环更高if (domList[len].type ‘checkbox’) { checkBoxList.push(domList[len]); } }
24、设置一个已知 ID 的 DIV 的 html 内容为 xxxx字体颜色设置为黑色(不使用第三方框架)
var dom document.getElementById(“ID”); dom.innerHTML “xxxx” dom.style.color “#000”
25、当一个 DOM 节点被点击时候我们希望能够执行一个函数应该怎么做
直接在 DOM 里绑定事件 在 JS 里通过 onclick 绑定xxx.onclick test 通过事件添加进行绑定addEventListener(xxx, ‘click’, test) 那么问题来了Javascript 的事件流模型都有什么 “事件冒泡”事件开始由最具体的元素接受然后逐级向上传播
“事件捕捉”事件由最不具体的节点先接收然后逐级向下一直到最具体的“DOM 事件流”三个阶段事件捕捉目标阶段事件冒泡
26、看下列代码输出为何解释原因。
var a; alert(typeof a); // “undefined” //alert(b); // 报错b10; alert(typeof b);//”number”
解释Undefined 是一个只有一个值的数据类型这个值就是“undefined”在使用 var 声明变量但并未对其赋值进行初始化时这个变量的值就是 undefined。而 b 由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。
undefined 会在以下三种情况下产生 1、 一个变量定义了却没有被赋值 2、 想要获取一个对象上不存在的属性或者方法:
3、 一个数组中没有被赋值的元素
注意区分 undefined 跟 not defnied(语法错误)是不一样的
27、看下列代码,输出什么解释原因。
var a null; alert(typeof a); //object 解释null 是一个只有一个值的数据类型这个值就是 null。表示一个空指针对象所以用 typeof 检测会返回”object”。
28、看下列代码,输出什么解释原因。
var undefined;//此时 undefined 这个变量的值是 undefined undefined null; // true 1 true; // true 此时会把布尔类型的值转换为数字类型 true1 false0
2 true; // false 0 false; // true 0 ‘’; // true NaN NaN; // false [] false; // true [] ![]; // true undefined 与 null 相等但不恒等 一个是 number 一个是 string 时会尝试将 string 转换为 number 尝试将 boolean 转换为 number0 或 1 尝试将 Object 转换成 number 或 string取决于另外一个对比量的类型 所以对于 0、空字符串的判断建议使用 “” 。“”会先判断两边的值类型类型不匹配时为 false。 那么问题来了看下面的代码输出什么foo 的值为什么
var foo “11”2-“1”; console.log(foo);//111 console.log(typeof foo); 执行完后 foo 的值为 111foo 的类型为 number。
29、看代码给答案。
var a new Object(); a.value 1; b a; {value:1} b.value 2; alert(a.value);//2 答案2考察引用数据类型细节
30 、 已 知 数 组var stringArray [“This”, “is”, “Baidu”, “Campus”]Alert 出”This is Baidu Campus”。
答案alert(stringArray.join(“ ”))
已知有字符串 foo”get-element-by-id”,写一个 function 将其转化成驼峰表示法” getElementById”。
//
function combo(msg){ var arrmsg.split(“-”);//[get,element,by,id] for(var i1;iarr.length;i){ arr[i]arr[i].charAt(0).toUpperCase()arr[i].substr(1,arr[i].length -1);//Element } msgarr.join(“”);//msg” getElementById” return msg; } (考察基础 API)
31、var numberArray [3,6,2,4,1,5]; 考察基础API
实现对该数组的倒排输出[5,1,4,2,6,3]实现对该数组的降序排列输出[6,5,4,3,2,1] function combo(msg){ var arrmsg.split(“-”); for(var i1;iarr.length;i){ arr[i]arr[i].charAt(0).toUpperCase()arr[i].substr(1,arr[i].length
-1);
}
} msgarr.join(“”); return msg;
32、输出今天的日期以 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);
33、将字符串”{KaTeX parse error: Expected EOF, got } at position 3: id}̲/tdtd{name}”中的{KaTeX parse error: Expected EOF, got } at position 3: id}̲替换成 10{name}替换成 Tony 使用正则表达式
答案”{KaTeX parse error: Expected EOF, got } at position 3: id}̲/tdtd{id}_{$name}”.replace(/{$id}/g, ’ 10′).replace(/{$name}/g, ‘Tony’);
34、为了保证页面输出安全我们经常需要对一些特殊的字符进行转义请写 一个函数 escapeHtml将, , , “进行转义
function escapeHtml(str) { //[”]:中括号中字符只要其中的一个出现就代表满足条件 //给 replace 第二个参数传递一个回调函数回调函数中参数就是匹配结果如果匹配不到就是 null return str.replace(/[”]/g, function(match) { switch (match) { case “”: return “”; case “”: return “”; case “”: return “”; case “\””: return “”; } }); }
35、foo foo||bar 这行代码是什么意思为什么要这样写
这种写法称之为短路表达式 答案if(!foo) foo bar; //如果 foo 存在值不变否则把 bar 的值赋给 foo。
短路表达式作为””和”||”操作符的操作数表达式这些表达式在进行求值时只要 最终的结果已经可以确定是真或假求值过程便告终止这称之为短路求值。
注意 if 条件的真假判定记住以下是 false 的情况
空字符串、false、undefined、null、0
36、看下列代码将会输出什么?(变量声明提升)
var foo 1; function(){ console.log(foo); var foo 2; console.log(foo); } 答案输出 undefined 和 2。上面代码相当于
var foo 1; function(){ var foo; console.log(foo); //undefined foo 2; console.log(foo); // 2; } 函数声明与变量声明会被 JavaScript 引擎隐式地提升到当前作用域的顶部但是只提升名称不会提升赋值部分。
37、用 js 实现随机选取 10–100 之间的 10 个数字存入一个数组并排序。
var iArray []; funtion getRandom(istart, iend){ var iChoice istart - iend 1; return Math.floor(Math.random() * iChoice istart; } Math.random()就是获取 0-1 之间的随机数永远获取不到 1 for(var i0; i10; i){ var result getRandom(10,100); iArray.push(result); } iArray.sort();
38、把两个数组合并并删除第二个元素。
var array1 [‘a’,‘b’,‘c’];
var bArray [‘d’,‘e’,‘f’]; var cArray array1.concat(bArray); cArray.splice(1,1);
39、怎样添加、移除、移动、复制、创建和查找节点原生 JS实在基础没细写每一步
1创建新节点
createDocumentFragment() //创建一个 DOM 片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点 2添加、移除、替换、插入appendChild() //添加 removeChild() //移除
replaceChild() //替换
insertBefore() //插入3查找 getElementsByTagName() //通过标签名称getElementsByName() //通过元素的 Name 属性的值getElementById() //通过元素 Id唯一性 40、有这样一个 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]; var map url.split(“”); for(var i 0, len map.length; i len; i) { result
41、正则表达式构造函数 var regnew RegExp(“xxx”)与正则表达字面量 var reg//有什么不同匹配邮箱的正则表达式
答案当使用 RegExp()构造函数的时候不仅需要转义引号即\”表示”并且还需要双反斜杠即\表示一个\。使用正则表达字面量的效率更高。 邮箱的正则匹配 var regMail /^([a-zA-Z0-9_-])([a-zA-Z0-9_-])((.[a-zA-Z0-9_-]{2,3}){1,2})$/; 24.看下面代码给出输出结果。for(var i1;i3;i){ setTimeout(function(){ console.log(i); },0); }; 答案4 4 4。
原因Javascript 事件处理器在线程空闲之前不会运行。追问如何让上述代码输出 1 2 3 for(var i1;i3;i){ setTimeout((function(a){ //改成立即执行函数console.log(a); })(i),0); }; 1 //输出 2 3
42、写一个 function清除字符串前后的空格。兼容所有浏览器
使用自带接口 trim()考虑兼容性
if (!String.prototype.trim) { String.prototype.trim function() { return this.replace(/^\s/, “”).replace(/\s$/,“”); //\s 匹配空白字符回车、换行、制表符 tab 空格 } } // test the function var str \t\n test string .trim(); alert(str “test string”); // alerts “true”
43、Javascript 中 callee 和 caller 的作用
arguments.callee获得当前函数的引用
caller 是返回一个对函数的引用该函数调用了当前函数
callee 是返回正在被执行的 function 函数也就是所指定的 function 对象的正文。
那么问题来了如果一对兔子每月生一对兔子一对新生兔从第二个月起就开始生兔子 假定每对兔子都是一雌一雄试问一对兔子第 n 个月能繁殖成多少对兔子使用 callee 完成 var result[]; function fn(n){ //典型的斐波那契数列if(n1){ return 1; }else if(n2){
-2);
}
}else{
}
return 1; if(result[n]){ }else{
}
return result[n];
//argument.callee() 表 示 fn() result[n]arguments.callee(n-1)arguments.callee(n
return result[n];
44、Javascript 中, 以下哪条语句一定会产生运行错误 答案( BC )
A、 var _变量NaN;B、var 0bj [];C、var obj //; D、var obj {};
//正确答案BC
45、以下两个变量 a 和 bab 的哪个结果是 NaN 答案( C )
A、var aundefind; bNaN //拼写B、var a‘123’; bNaN//字符串C、var a undefined , b NaN D、var aNaN , b‘undefined’//”Nan”
46、var a10; b20; c4; bca 以下哪个结果是正确的答案( B )
A、 34 B、35 C、36 D、37
47、下面的 JavaScript 语句中 D 实现检索当前页面中的表单元素中的所有文本框并将它们全部清空
A.for(vari0;i form1.elements.length;i) { if(form1.elements.type”text”) form1.elements.value”“;} B.for(vari0;idocument.forms.length;i) { if(forms[0].elements.type”text”) forms[0].elements.value””; } C.if(document.form.elements.type”text”) form.elements.value”“; D.for(vari0;idocument.forms.length; i){ for(var j0;jdocument.forms.elements.length; j){ if(document.forms.elements[j].type”text”) document.forms.elements[j].value””; } }
48、要将页面的状态栏中显示“已经选中该文本框”下列 JavaScript 语句正确的是 A A.window.status”已经选中该文本框” B.document.status”已经选中该文本框” C.window.screen”已经选中该文本框” D.document.screen”已经选中该文本框”
49、以下哪条语句会产生运行错误A正确答案A、D A.var obj (); B.var obj []; C.var obj {}; D.var obj //;
50、以下哪个单词不属于 javascript 保留字B A.with B.parent C.class D.void
51、请选择结果为真的表达式C A.null instanceof Object B.null undefined C.null undefined D.NaN NaN
52、Javascript 中, 如果已知 HTML 页面中的某标签对象的 id”username” 用_ _document.getElementById(‘username’) _ _方法获得该标签对象。
53 、typeof 运算符返回值中有一个跟 javascript 数据类型不一致 它是 _ ”function”_ 。
typeof Number typeof Object
54、定义了一个变量但没有为该变量赋值如果 alert 该变量javascript 弹出的对话框中显示_ undefined_ 。
55、分析代码得出正确的结果。
var a10, b20 , c30;
a;
a; ea(b)(c)a; alert(e);
弹出提示对话框77
56、写出函数 DateDemo 的返回结果系统时间假定为今天
function DateDemo(){
var d, s“今天日期是”; d new Date(); s d.getMonth() “/”; s d.getDate() “/”; s d.getFullYear(); return s;} 结果今天日期是7/17/2010
57、写出程序运行的结果
for(i0, j0; i10, j6; i, j){ k i j;} 结果10
58、阅读以下代码请分析出结果 reverse 方法颠倒数组中元素的位置并返回该数组的引用。
59、补充按钮事件的函数确认用户是否退出当前页面确认之后关闭窗口
}
60、写出简单描述 html 标签不带属性的开始标签和结束标签的正则表达式 并将以下字符串中的 html 标签去除掉
var str “
这里是 div 里面的段落
”; // scripttype”text/javascript” var reg //?\w/?/gi;// var str “
这里是 div 里面的段落
”; alert(str.replace(reg,”)); 61、完成 foo()函数的内容要求能够弹出对话框提示当前选中的是第几个单选框。
} } }
62、完成函数showImg()要求能够动态根据下拉列表的选项变 化更新图片的显示 城市生活 都市早报 青山绿水
63、截取字符串 abcdefg 的 efg
alert(‘abcdefg’.substring(4));
64、列举浏览器对象模型 BOM 里常用的至少 4 个对象并列举 window 对象的常用方法至少 5 个
对象Window document location screen history navigator 方法Alert() confirm() prompt() open() close() 65、简述列举文档对象模型 DOM 里 document 的常用的查找访问节点的方法并做 简单说明
Document.getElementById 根据元素 id 查找元素Document.getElementByName 根据元素 name 查找元素Document.getElementTagName 根据指定的元素名查找元素 66、希望获取到页面中所有的 checkbox 怎么做(不使用第三方框架)
67、JavaScript 的数据类型都有什么
基本数据类型String,Boolean,Number,Undefined,Null 引用数据类型Object(Array,Date,RegExp,Function) 68、javascript 中有哪几种数据类型分别写出中文和英文。
string boolean number null undefined object
字符串 布尔 数值 空值 未定义 对象
69、javascript 中和的区别是什么举例说明。
会自动进行类型转换不会
70、简述创建函数的几种方式
第一种函数声明 function sum1(num1,num2){ return num1num2; } 第二种函数表达式 var sum2 function(num1,num2){ return num1num2; } 匿名函数 function(){}:只能自己执行自己
第三种函数对象方式 var sum3 new Function(“num1”,“num2”,“return num1num2”);
71、Javascript 如何实现继承
原型链继承借用构造函数继承组合继承寄生式继承寄生组合继承
72、Javascript 创建对象的几种方式
工厂方式构造函数方式原型模式混合构造函数原型模式动态原型方式
73、把 Script 标签 放在页面的最底部的 body 封闭之前 和封闭之后有什么区别浏览器会如何解析它们
如果说放在 body 的封闭之前将会阻塞其他资源的加载如果放在 body 封闭之后不会影响 body 内元素的加载
74、iframe 的优缺点
优点 1.解决加载缓慢的第三方内容如图标和广告等的加载问题 2.Security sandbox 3.并行加载脚本缺点 1.iframe 会阻塞主页面的 Onload 事件
2.即时内容为空加载也需要时间 3.没有语意
75、请你谈谈 Cookie 的弊端
缺点 1.Cookie数量和长度的限制。每个 domain 最多只能有 20 条 cookie每个 cookie 长度不能超过 4KB否则会被截掉。 2.安全性问题。如果 cookie 被人拦截了那人就可以取得所有的 session 信息。即使加密也与事无补因为拦截者并不需要知道 cookie 的意义他只要原样转发 cookie 就可以达到目的了。 3.有些状态不可能保存在客户端。例如为了防止重复提交表单我们需要在服务器端保存 一个计数器。如果我们把这个计数器保存在客户端那么它起不到任何作用。
76、DOM 操作——怎样添加、移除、移动、复制、创建和查找节点。
1.创建新节点 createDocumentFragment() // 创建一个 DOM 片段createElement() // 创建一个具体的元素createTextNode() // 创建一个文本节点 2.添加、移除、替换、插入 appendChild() removeChild() replaceChild() insertBefore() // 在已有的子节点前插入一个新的子节点 3.查找 getElementsByTagName() // 通过标签名称 getElementsByName() // 通过元素的 Name 属性的值(IE 容错能力较强会得到一个数组 其中包括 id 等于 name 值的) getElementById() // 通过元素 Id唯一性
77、js 延迟加载的方式有哪些
1.defer 和 async 2.动态创建 DOM 方式创建 script插入到 DOM 中加载完毕后 callBack 3.按需异步载入 js
78、documen.write 和 innerHTML 的区别
document.write 只能重绘整个页面innerHTML 可以重绘页面的一部分
79、哪些操作会造成内存泄漏
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。 垃圾回收器定期扫描对象并计算引用了每个对象的其他对象的数量。如果一个对象的引用 数量为 0没有其他对象引用过该对象或对该对象的惟一引用是循环的那么该对象的内存即可回收。 1.setTimeout 的第一个参数使用字符串而非函数的话会引发内存泄漏。 2.闭包 3.控制台日志 4.循环在两个对象彼此引用且彼此保留时就会产生一个循环
80、javascript 的 typeof 返回哪些数据类型?
答object、 number、 function 、boolean、 underfind
81、split() join() 的区别
答前者是切割成数组的形式后者是将数组转换成字符串
82、数组方法 pop() push() unshift() shift()各表示什么意思
答Push()尾部添加、pop()尾部删除、Unshift()头部添加、shift()头部删除
83、判断一个字符串中出现次数最多的字符统计这个次数
答var str ‘asdfssaaasasasasaa’; var json {}; for (var i 0; i str.length; i) { if(!json[str.charAt(i)]){ json[str.charAt(i)] 1;
}else{
} };
json[str.charAt(i)];
var iMax 0; var iIndex ‘’; for(var i in json){ if(json[i]iMax){ iMax json[i];
iIndex i; } } alert(‘出现次数最多的是:’iIndex‘出现’iMax‘次’);
84、javascript 的 typeof 返回哪些数据类型
Object number function boolean underfind
85、例举 3 种强制类型转换和 2 种隐式类型转换?
强制parseInt,parseFloat,number 隐式 –
86、split() join() 的区别
前者是切割成数组的形式后者是将数组转换成字符串
87、数组方法 pop() push() unshift() shift()
Push()尾部添加 shift() 尾部删除Unshift() 头部添加 shift() 头部删除
89、IE 和 DOM 事件流的区别
1.执行顺序不一样、 2.参数不一样 3.事件加不加 on 4.this 指向问题
90、IE 和标准下有哪些兼容性的写法
Var ev ev || window.event document.documentElement.clientWidth || document.body.clientWidth Var target ev.srcElement||ev.target
91、call 和 apply 的区别
Object.call(this,obj1,obj2,obj3) Object.apply(this,arguments)
93、写一个获取非行间样式的函数
function getStyle(obj,attr,value) { if(!value) { if(obj.currentStyle)//ie { return obj.currentStyle(attr); } else{//标准浏览器obj.getComputedStyle(attr,false); } } else { obj.style[attr] value; } }
95、闭包是什么有什么特性对页面有什么影响
闭包就是能够读取其他函数内部变量的函数。http://blog.csdn.net/gaoshanwudi/article/details/7355794 此链接可查看问这个问题的不是一个公司
96、解释 jsonp 的原理以及为什么不是真正的 ajax
动态创建 script 标签回调函数Ajax 是页面无刷新请求数据操作
97、javascript 的本地对象内置对象和宿主对象
本地对象为 array obj regexp 等可以 new 实例化内置对象为 gload Math 等不可以实例化的 宿主为浏览器自带的 document,window 等
98、document load 和 document ready 的区别
Document.onload 是在结构和样式加载完才执行 js Document.ready 原生种没有这个方法jquery 中有 $().ready(function)
99、字符串反转如将 ‘12345678’ 变成 ‘87654321’
//大牛做法 //思路先将字符串转换为数组 split()利用数组的反序函数 reverse()颠倒数组再利用 jion() 为字符串 var str ‘12345678’; str str.split(‘’).reverse().join(‘’);
100、将数字 12345678 转化成 RMB 形式 如 12,345,678
//个人方法 //思路先将数字转为字符 str str ‘’ ; //利用反转函数每三位字符加一个 ,最后一位不加 re()是自定义的反转函数最后再反转回去 for(var i 1; i re(str).length; i){ tmp re(str)[i - 1]; if(i % 3 0 i ! re(str).length){ tmp ‘,’; } }
101、生成 5 个不同的随机数
//思路5 个不同的数每生成一次就和前面的所有数字相比较如果有相同的则放弃当前生成的数字var num1 []; for(var i 0; i 5; i){ num1[i] Math.floor(Math.random()*10) 1; //范围是 [1, 10] for(var j 0; j i; j){ if(num1[i] num1[j]){ i–; } } }
102、去掉数组中重复的数字 方法一
//思路每遍历一次就和之前的所有做比较不相等则放入新的数组中 // 这 里 用 的 原 型 个 人 做 法 Array.prototype.unique function(){ var len this.length, newArr [],
flag 1; for(var i 0; i len; i, flag 1){ for(var j 0; j i; j){ if(this[i] this[j]){ flag 0; //找到相同的数字后不执行添加数 } } flag ? newArr.push(this[i]) : ‘’; } return newArr; }
方法二
(function(arr){ var len arr.length, newArr [], flag; for(var i 0; i len; i1, flag 1){ for(var j 0; j i; j){ if(arr[i] arr[j]){ flag 0; } } flag?newArr.push(arr[i]):‘’; } alert(newArr); })([1, 1, 22, 3, 4, 55, 66]);
103、阶乘函数98765…*1
//原型方法 Number.prototype.N function(){ var re 1; for(var i 1; i this; i){ re * i; } return re; }
var num 5; alert(num.N());
104、window.location.search 返回的是什么
答查询(参数)部分。除了给动态语言赋值以外我们同样可以给静态页面, 并使用 javascript 来获得相信应的参数值 返回值?ver1.0idtimlq 也就是问号后面的
105、window.location.hash 返回的是什么
答 锚点 返回值#love //url:http://www.sina.com/getage?#age 这时就返回”#age”
106、window.location.reload() 作用
答刷新当前页面。
107、阻止冒泡函数
function stopPropagation(e) { e e || window.event; if(e.stopPropagation) { //W3C 阻止冒泡方法 e.stopPropagation(); } else { e.cancelBubble true; //IE 阻止冒泡方法 } } document.getElementById(‘need_hide’).onclick function(e) { stopPropagation(e); }
108、什么是闭包 写一个简单的闭包
答 我的理解是闭包就是能够读取其他函数内部变量的函数。在本质上 闭包就是将函数内部和函数外部连接起来的一座桥梁。 function outer(){ var num 1; function inner(){ var n 2; alert(n num); } return inner; } outer()();
109、javascript 中的垃圾回收机制
答 在 Javascript 中如果一个对象不再被引用那么这个对象就会被 GC 回收。如果两个对象互相引用而不再 被第 3 者所引用那么这两个互相引用的对象也会被回收。因为函数 a 被 b 引用b 又被 a 外的 c 引用这就是为什么 函数a 执行后不会被回收的原因。
110、看题做答
function f1(){ var tmp 1; this.x 3; console.log(tmp); //A console.log(this.x) //B }
var obj new f1(); //1 console.log(obj.x) //2 console.log(f1()); //3 分析 这道题让我重新认识了对象和函数首先看代码1这里实例话 化了 f1 这个类。相当于执行了 f1 函数。所以这个时候 A 会输出 1 而 B 这个时候的 this 代表的是 实例化的当前对象 obj B 输出 3.。 代码2毋庸置疑会输出 3 重点 代码3首先这里将不再是一个类它只是一个函数。那么 A 输出1 B 呢这里的 this 代表的其实就是 window 对象那么 this.x 就是一个全局变量 相当于在外部 的一个全局变量。所以 B 输出 3。最后代码由于 f 没有返回值那
么一个函数如果没返回值的话将会返回 underfined 所以答案就是 1 3 3 1 3 underfined 。
111、下面输出多少
var o1 new Object(); var o2 o1; o2.name “CSSer”; console.log(o1.name); 如果不看答案你回答真确了的话那么说明你对 javascript 的数据类型了解的还是比较清楚了。js 中有两种数据类型分别是基本数据类型和引用数据类型 object Array。对于保存基本类型值的变量变量是按值访问的 因为我们操作的是变量实际保存的值。对于保存引用类型值的变量变量是按引用访问的我们操作的 是变量值所引用 指向的对象。答案就清楚了 //CSSer;
112、再来一个
function changeObjectProperty (o) { o.siteUrl “http://www.csser.com/”; o new Object(); o.siteUrl “http://www.popcg.com/”; } var CSSer new Object(); changeObjectProperty(CSSer); console.log(CSSer.siteUrl); // 如果 CSSer 参数是按引用传递的 那么结果应该是http://www.popcg.com/“但实际结果却仍是http://www.csser.com/”。事实是这 样的在函数内部修改了引用类型值的参数该参数值的原始引用保持不变。我们可 以把参数想象成局部变量当参数被重写时这个变量引用的就是一个局部变量局 部变量的生存期仅限于函数执行的过程中函数执行完毕局部变量即被销毁以释放 内存。 补充内部环境可以通过作用域链访问所有的外部环境中的变量对象但 外部环境无法访问内部环境。每个环境都可以向上搜索作用域链以查询变量和函数 名反之向下则不能。
113、输出多少
var a 6;
setTimeout(function () { var a 666;//由于变量 a 是一个局部变量alert(a); // 输出 666 }, 1000); a 66; 因为 var a 666;定义了局部变量 a并且赋值为 666根据变量作用域链 全局变量处在作用域末端优先访问了局部变量 从而覆盖了全局变量 。
var a 6; setTimeout(function () { //变量声明提前 alert(a); // 输 出 undefined var a 666; }, 1000); a 66;
因为 var a 666;定义了局部变量 a同样覆盖了全局变量但是在 alert(a);之前a 并未赋值所以输出 undefined。
记住 异步处理一切 OK 声明提前
114、输出多少
function setN(obj){ obj.name‘屌丝’; obj new Object();
obj.name ‘腐女’; }; var per new Object(); setN(per); alert(per.name); //屌丝 内部
115、JS 的继承性
window.color ‘red’; var o {color: ‘blue’}; function sayColor(){ alert(this.color); } 考点1、this 的指向 2、call 的用法sayColor(); //red sayColor.call(this); //red this 指向的是 window 对象sayColor.call(window); //red sayColor.call(o); //blue
116、精度问题: JS 精度不能精确到 0.1 所以 。。。。同时存在于值和差值中 var n 0.3,m 0.2, i 0.2, j 0.1; alert((n - m) (i - j)); //false alert((n-m) 0.1); //false alert((i-j)0.1); //true
117、加减运算
alert(‘5’3); //53 string alert(‘5’‘3’); //53 string alert(‘5’-3); //2 number alert(‘5’-‘3’); //2 number
118、什么是同源策略
指 同协议、端口、域名的安全策略由网景(Netscape)公司提出来的安全协议
119、call 和 apply 的区别是什么
参数形式不同call(obj, pra, pra)后面是单个参数。apply(obj, [args]) 后面是数组。
120、为什么不能定义 1px 左右的 div 容器
121、结果是什么
function foo(){ foo.a function(){alert(1)}; this.a function(){alert(2)}; a function(){alert(3)}; var a function(){alert(4)}; }; foo.prototype.a function(){alert(5)}; foo.a function(){alert(6)}; foo.a(); //6 var obj new foo(); obj.a(); //2 foo.a(); //1
122、输出结果
var a 5; function test(){ a 0; alert(a); alert(this.a); //没有定义 a 这个属性var a; alert(a)
} test(); // 0, 5, 0 new test(); // 0, undefined, 0 //由于类它自身没有属性 a 所以是 undefined
123、计算字符串字节数
new function(s){ if(!arguments.length||!s) return null; if(“”s) return 0; //无效代码因为上一句!s 已经判断过var l0; for(var i0;is.length;i){ if(s.charCodeAt(i)255) l2; else l1; //charCodeAt()得到的是 unCod 码 } //汉字的 unCode 码大于 255bit 就是两个字节alert(l); }(“hello world!”);
124、结果是
var bool !!2; alert(bool)//true;
技巧双向非操作可以把字符串和数字转换为布尔值。
125、声明对象添加属性输出属性
var obj { name: ‘leipeng’, showName: function(){ alert(this.name); } } obj.showName();
126、匹配输入的字符第一个必须是字母或下划线开头后面就是字母和数字或者下划线构成长度 5-20
var reg /1[a-zA-Z0-9_]{4,19}/,
name1 ‘leipeng’, name2 ‘0leipeng’, name3 ‘你好 leipeng’, name4 ‘hi’;
alert(reg.test(name1)); alert(reg.test(name2)); alert(reg.test(name3)); alert(reg.test(name4));
127、检测变量类型
function checkStr(str){ typeof str ‘string’? alert(‘true’):alert(‘false’); } checkStr(‘leipeng’);
128、如何在 HTML 中添加事件几种方法
1、标签之中直接添加 οnclick“fun()”; 2、JS 添加 Eobj.onclick method; 3、现代事件 IE9 以前 obj.attachEvent(‘onclick’, method)
标准浏览器: obj.addEventListener(‘click’, method, false);
129、BOM 对象有哪些列举 window 对象
1、window 对象 是 JS 的最顶层对象其他的 BOM 对象都是 window 对象的 属性
2、document 对象文档对象
3、location 对象浏览器当前 URL 信息 4、navigator 对象浏览器本身信息 5、screen 对象客户端屏幕信息
6、history 对象浏览器访问历史信息
130、请问代码实现 outerHTML //说明outerHTML 其实就是 innerHTML 再加上本身 Object.prototype.outerHTML function(){ var innerCon this.innerHTML, //获得里面的内容 outerCon this.appendChild(innerCon); //添加到里面alert(outerCon);
}
演示代码
!doctype html
Document
hello 131、JS 中的简单继承 call 方法
//顶一个父母类注意类名都是首字母大写的哦 function Parent(name, money){ this.name name; this.money money; this.info function(){ alert(姓名 ‘this.name’ 钱 this.money); } }
//定义孩子类 function Children(name){ Parent.call(this, name); //继承 姓名属性不要钱。this.info function(){ alert(姓名 this.name); } } //实例化类 var per new Parent(‘parent’, 800000000000); var chi new Children(‘child’); per.info(); chi.info();
132、bind(), live(), delegate()的区别
bind 绑定事件对新添加的事件不起作用方法用于将一个处理程序附加到每个匹配元素的事件上并返回 jQuery 对象。 live 方法将一个事件处理程序附加到与当前选择器匹配的所有元素 包含现有的或将来添加的 的指定事件上并返回 jQuery 对象。 delegate 方法基于一组特定的根元素将处理程序附加到匹配选择器的所有元素现有的或将来的的一个或多个事件上。
最佳实现on() off()
133、typeof 的返回类型有哪些
alert(typeof [1, 2]); //object alert(typeof ‘leipeng’); //string var i true; alert(typeof i); //boolean alert(typeof 1); //number var a; alert(typeof a); //undefined function a(){;}; alert(typeof a) //function
134、简述 link 和 import 的区别
区别 1link 是 XHTML 标签除了加载 CSS 外还可以定义 RSS 等其他事务import 属于 CSS 范畴只能加载 CSS。 区别 2link 引用 CSS 时在页面载入时同时加载import 需要页面网页完全载入以后加载。 区别 3link 是 XHTML 标签无兼容问题import 是在 CSS2.1 提出的低版本的浏览器不支持。 区别 4link 支持使用 Javascript 控制 DOM 去改变样式而import 不支持。
135、window.onload 和 document.ready 的区别
load 要等到图片和包含的文件都加在进来之后执行
ready 是不包含图片和非文字文件的文档结构准备好就执行
136、 解析 URL 成一个对象
String.prototype.urlQueryString function(){ var url this.split(‘?’)[1].split(‘’), len url.length;
this.url {}; for(var i 0; i len; i 1){ var cell url[i].split(‘’), key cell[0], val cell[1]; this.url[‘’key‘’] val; } return this.url; } var url ‘?name12age23’; console.log(url.urlQueryString().age);
137、看下列代码输出什么
var foo “11”2-“1”; console.log(foo); console.log(typeof foo); 执行完后 foo 的值为 111foo 的类型为 Number。
138、看下列代码,输出什么
var a new Object(); a.value 1; b a; b.value 2; alert(a.value); 执行完后输出结果为 2
139、已知数组 var stringArray [This”, is”, Baidu”, Campus”] Alert 出”This is Baidu Campus”。
答案alert(stringArray.join( ))
140、已知有字符串 foo“get-element-by-id”,写一个 function 将其转化成驼峰表示法getElementById。
答 案 function combo(msg){ var arr msg.split(“-”); var len arr.length; //将 arr.length 存储在一个局部变量可以提高 for 循环效 率 for(var i1;ilen;i){ arr[i]arr[i].charAt(0).toUpperCase()arr[i].substr(1,arr[i].length-1); } msgarr.join(“”); return msg; }
141、怎样添加、移除、移动、复制、创建和查找节点
1创建新节点 createDocumentFragment() //创建一个 DOM 片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点 2添加、移除、替换、插入appendChild() //添加removeChild() //移除replaceChild() //替换insertBefore() //插入
3查找 getElementsByTagName() //通过标签名称getElementsByName() //通过元素的 Name 属性的值getElementById() //通过元素 Id唯一性
142、原生 JS 的 window.onload 与 Jquery 的$(document).ready(function(){}) 有什么不同
window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是 DOM 结构绘制完毕后就执行不必等到加载完毕。
143、你如何优化自己的代码
代码重用 避免全局变量命名空间封闭空间模块化 mvc… 拆分函数避免函数过于臃肿单一职责原则 适当的注释尤其是一些复杂的业务逻辑或者是计算逻辑都应该写出这个业务逻辑 的具体过程 内存管理尤其是闭包中的变量释放
144、请描述出下列代码运行的结果
function d(){ console.log(this); } d();//window
145、需要将变量 e 的值修改为“abcd”,请写出对应的代码
var e”abcd”; 设计一段代码能够遍历下列整个 DOM 节点 146、怎样实现两栏等高 147、使用 js 实现这样的效果在文本域里输入文字时当按下 enter 键时不换行而是替换成“{{enter}}”,(只需要考虑在行尾按下 enter 键的情况). textarea.οnkeydοwnfunction(e){ e.preventDefault();//为了阻止 enter 键的默认换行效果 if(e.keycode”enter 键 码 ”){ testarea.value”{{enter}}”; } } 148、以下代码中 end 字符串什么时候输出 var ttrue; setTimeout(function(){ console.log(123); tfalse; },1000); while(t){}// 此时是一个死循环永远不可能执行 setTimeout 中的回调函数console.log(‘end’); 149 、 specify(‘hello,world’)//’h,e,l,l,o,w,o,r,l,d’ 实现 specify 函数 150、请将一个 URL 的 search 部分参数与值转换成一个 json 对象 151、请用原生 js 实现 jquery 的 get\post 功能以及跨域情况下 152、请简要描述 web 前端性能需要考虑哪方面你的优化思路是什么 //参见雅虎 14web 优化规则 //减少 http 请求 //1、小图弄成大图2、合理的设置缓存 //3、资源合并、压缩 //将外部的 js 文件置底 153、简述readyonly 与 disabled 的区别 readonly 只针对 input(text / password)和 textarea 有效 而 disabled 对于所有的表单元素都有效当表单元素在使用了 disabled 后当我们将表单以POST 或 GET 的方式提交的话这个元素的值不会被传递出去而 readonly 会将该值传递出去 154、判断一个字符串出现次数最多的字符统计这个次数并输出 155、编写一个方法去掉一个数组的复重元素 156、写出 3 个使用 this 的典型应用 构造函数中使用 this原型中使用 this对象字面量使用 this 157、请尽可能详尽的解释 ajax 的工作原理 思路先解释异步再解释 ajax 如何使用 Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求从服务器获得数据 然后用javascript 来操作DOM 而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理我们必须对XMLHttpRequest 有所了解。 XMLHttpRequest 是 ajax 的核心机制它是在 IE5 中首先引入的是一种支持异步请求的技术。简单的说也就是 javascript 可以及时向服务器提出请求和处理响应而不阻塞用户。达到无刷新的效果。 158、为什么扩展 javascript 内置对象不是好的做法 因为扩展内置对象会影响整个程序中所使用到的该内置对象的原型属性 159、请解释一下 javascript 的同源策略 域名、协议、端口相同 160、什么是三元表达式“三元”表示什么意思 ? : 因为运算符会涉及 3 个表达式 161、浏览器标准模式和怪异模式之间的区别是什么 标准模式是指浏览器按 W3C 标准解析执行代码 怪异模式则是使用浏览器自己的方式解析执行代码因为不同浏览器解析执行的方式不一 样所以我们称之为怪异模式。 浏览器解析时到底使用标准模式还是怪异模式与你网页中的 DTD 声明直接相关DTD 声明定义了标准文档的类型标准模式解析文档类型会使浏览器使用相应的方式加载网页 并显示忽略 DTD 声明,将使网页进入怪异模式 162、如果设计中使用了非标准的字体你该如何去实现 先通过 font-face 定义字体再引用 163、用 css 分别实现某个 div 元素上下居中和左右居中 margin:0 auto; 164、module(12,5)//2 实现满足这个结果的 modulo 函数 165、HTTP 协议中GET 和 POST 有什么区别分别适用什么场景 get 传送的数据长度有限制post 没有 get 通过 url 传递在浏览器地址栏可见post 是在报文中传递 适用场景 post 一般用于表单提交 get 一般用于简单的数据查询严格要求不是那么高的场景 166、HTTP 状态消息 200 302 304 403 404 500 分别表示什么 200请求已成功请求所希望的响应头或数据体将随此响应返回。 302请求的资源临时从不同的 URI 响应请求。由于这样的重定向是临时的客户端应当继续向原有地址发送以后的请求。只有在 Cache-Control 或Expires 中进行了指定的情况下 这个响应才是可缓存的 304如果客户端发送了一个带条件的 GET 请求且该请求已被允许而文档的内容自上次访问以来或者根据请求的条件并没有改变则服务器应当返回这个状态码。304 响应禁止包含消息体因此始终以消息头后的第一个空行结尾。 403服务器已经理解请求但是拒绝执行它。 404请求失败请求所希望得到的资源未被在服务器上发现。 500服务器遇到了一个未曾预料的状况导致了它无法完成对请求的处理。一般来说这 个问题都会在服务器端的源代码出现错误时出现。 167 、 HTTP 协 议 中 header 信 息 里 面 怎 么 控 制 页 面 失 效 时 间 last-modified,cache-control,Expires 分别代表什么 Last-Modified 文 档的最后改动时间。客户可以通过 If-Modified-Since 请求头提供一个日期该请求将被视为一个条件 GET只有改动时间迟于指定时间的文档 才会返回否则返回一个 304Not Modified状态。Last-Modified 也可用 setDateHeader 方法来设置。 Expires 应该在什么时候认为文档已经过期从而不再缓存它 168、HTTP 协议目前常用的有哪几个KEEPALIVE 从哪个版本开始出现的 http1.0 http1.1 keeplive 169、业界常用的优化 WEB 页面加载速度的方法可以分别从页面元素展现请求连接css,js,服务器等方面介绍 170、列举常用的 web 页面开发调试以及优化工具 sublime vscode webstorm hbuilder dw httpwatchie ff:firebug chrome: 171、解释什么是 sql 注入xss 漏洞172、如何判断一个 js 变量是数组类型 ES5:Array.isArray() [] instanceof Array Object.prototype.toString.call([]);//“[object Array]” 173、请列举 js 数组类型中的常用方法 方法 描述 concat() 连接两个或更多的数组并返回结果。 join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 pop() 删除并返回数组的最后一个元素 push() 向数组的末尾添加一个或更多元素并返回新的长度。 reverse() 颠倒数组中元素的顺序。 shift() 删除并返回数组的第一个元素 slice() 从某个已有的数组返回选定的元素 sort() 对数组的元素进行排序 splice() 删除元素并向数组添加新元素。 toSource() 返回该对象的源代码。 toString() 把数组转换为字符串并返回结果。 toLocaleString() 把数组转换为本地数组并返回结果。 unshift() 向数组的开头添加一个或更多元素并返回新的长度。 valueOf() 返回数组对象的原始值 174、FF 与 IE 中如何阻止事件冒泡如何获取事件对象以及如何获取触发事件的元素 175、列举常用的 js 框架以及分别适用的领域 jquery简化了 js 的一些操作并且提供了一些非常好用的 API jquery ui、jquery-easyui在 jqeury 的基础上提供了一些常用的组件 日期下拉框表格这些组件 require.js、sea.js阿里的玉帛》模块化开发使用的 zepto精简版的 jquery常用于手机 web 前端开发 提供了一些手机页面实用功能,touch ext.js跟 jquery 差不多但是不开源也没有 jquery 轻量 angular、knockoutjs、avalon(去哪儿前端总监)MV*框架适合用于单页应用开发(SPA) 176、js 中如何实现一个 map 数组的 map 方法 概述 map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。 语法 array.map(callback[, thisArg]) 参数 callback 原数组中的元素经过该方法后返回一个新的元素。 currentValue callback 的第一个参数数组中当前被传递的元素。 index callback 的第二个参数数组中当前被传递的元素的索引。 array callback 的第三个参数调用 map 方法的数组。 thisArg 执行 callback 函数时 this 指向的对象。 实现 177、js 可否实现面向对象编程如果可以如何实现 js 对象的继承 创建对象的几种方式实现继承的几种方式原型链 178、约瑟夫环—已知 n 个人以编号 123…分别表示围坐在一张圆桌周围。从编号为 k 的人开始报数数到 m 的那个人出列他的下一个人又从 1 开始报数数到 m 的那个人又出列依此规律重复下去直到圆桌周围的人全部出列。 179、有 1 到 10w 这个 10w 个数去除 2 个并打乱次序如何找出那两个数 180、如何获取对象 a 拥有的所有属性可枚举的、不可枚举的 不包括继承来的属性 Object.keys——IE9 或者使用 for…in 并过滤出继承的属性 for(o in obj){ if(obj.hasOwnproperty(o)){ //把 o 这个属性放入到一个数组中 } } 181、有下面这样一段 HTML 结构使用css 实现这样的效果 左边容器无论宽度如何变动右边容器都能自适应填满父容器剩余的宽度。 182、下面这段代码想要循环昝输出结果 01234请问输出结果是否正确如果不正确请说明为什么并修改循环内的代码使其输出正确结果 for(var i0;i5;i){ setTimeout(function(){ console.log(i’’); },100*i); } 183、解释下这个 css 选择器什么发生什么 [rolenav]ul a:not([href^-mailto]){} 184、JavaScript 以下哪条语句会产生运行错误 A. var obj (); B. var obj []; C. var obj {}; D. var obj //; 答案AD 185、以下哪些是 javascript 的全局函数ABCDE A.escape 函数可对字符串进行编码这样就可以在所有的计算机上读取该字符串。ECMAScript v3 反对使用该方法应用使用 decodeURI() 和 decodeURIComponent() 替代它。 B.parseFloat parseFloat() 函数可解析一个字符串并返回一个浮点数。 该函数指定字符串中的首个字符是否是数字。如果是则对字符串进行解析直到到达数字 的末端为止然后以数字返回该数字而不是作为字符串。 C.eval 函数可计算某个字符串并执行其中的的 JavaScript 代码。 D.setTimeout E.alert 186、关于 IE 的 window 对象表述正确的有CD A.window.opener 属性本身就是指向 window 对象 window.opener 返回打开当前窗口的那个窗口的引用. 如果当前窗口是由另一个窗口打开的, window.opener 保留了那个窗口的引用. 如果当前窗口不是由其他窗口打开的, 则该属性返回 null. B.window.reload()方法可以用来刷新当前页面 //正确答案应该是 location.reload 或者 window.location.reload C.window.location”a.html”和 window.location.href”a.html”的作用都是把当前页面替换成 a.html 页面 D.定义了全局变量 g可以用 window.g 的方式来存取该变量 187、描述错误的是 D AHttp 状态码 302 表示暂时性转移 对B:domContentLoaded 事件早于 onload 事件 //正确 当 onload 事件触发时页面上所有的 DOM样式表脚本图片flash 都已经加载完成了。 当 DOMContentLoaded 事件触发时仅当 DOM 加载完成不包括样式表 图片flash。 C: IE678 不支持事件捕获 D:localStorage 存储的数据在电脑重启后丢失 //错误因为没有时间限制try…catch 语句。(在 IE5、Mozilla 1.0、和 Netscape 6 中可用) 188、关于 link 和import 的区别正确的是 A A: link 属于 XHTML 标签而import 是 CSS 提供的 B页面被加载时link 会同时被加载而后者引用的 CSS 会等到页面被加载完再加载Cimport 只在 IE5 以上才能识别 而 link 是 XHTML 标签无兼容问题 D: link 方式的样式的权重高于import 的权重 189、下面正确的是 A A: 跨域问题能通过 JsonP 方案解决 B不同子域名间仅能通过修改 window.name 解决跨域 //还可以通过 script 标签 src jsonp C只有在 IE 中可通过 iframe 嵌套跨域 //任何浏览器都可以使用 iframe DMediaQuery 属性是进行视频格式检测的属性是做响应式的 188、错误的是AC A: Ajax 本质是 XMLHttpRequest //异步请求 json 和 xml 数据 B: 块元素实际占用的宽度与它的 width、border、padding 属性有关与 background 无关C: position 属性 absolute、fixed、—relative—会使文档脱标 D: float 属性 left 也会使 div 脱标 189、不用任何插件如何实现一个 tab 栏切换 通过改变不同层的 css 设置层的显示和隐藏 190、基本数据类型的专业术语以及单词拼写 191、变量的命名规范以及命名推荐 192、三种弹窗的单词以及三种弹窗的功能 alert confirm prompt 193、console.log( 8 | 1 ); 输出值是多少 答案9 194、只允许使用 - * / 和 Math.* 求一个函数 y f(x, a, b);当 x 100 时返回 a 的值否则返回 b 的值不能使用 if else 等条件语句也不能使用|,?:,数组。 答案 function f(x, a, b) { var temp Math.ceil(Math.min(Math.max(x - 100, 0), 1)); return a * temp b * (1 - temp); } console.log(f(-10, 1, 2)); 195、JavaScript alert(0.4*0.2);结果是多少和你预期的一样吗如果不一样该如何处理 有误差应该比准确结果偏大。 一般我会将小数变为整数来处理。当前之前遇到这个问题时也上网查询发现有人用 try catch return 写了一个函数 当然原理也是一致先转为整数再计算。看起来挺麻烦的我没用过。 196、一个 div有几种方式得到这个 div 的 jQuery 对象 想直接获取这个 div 的 dom 对象如何获取dom 对象如何转化为 jQuery 对象 var domViewdocument.getElementById(“nodesView”) document.getElementsByClassName(“aabbcc”); document.querySelector(“.aabbcc#nodesView”); 转换为 jquery 对象$( domView) 197、主流浏览器内核 IE trident 火 狐 gecko 谷歌苹果 webkit OperaPresto 198、如何显示/隐藏一个 dom 元素请用原生的 JavaScript 方法实现 dom.style.display”none”; dom.style.display””; 199、JavaScript 有哪几种数据类型 Number String Boolean Null Undefined Object 200、jQuery 框架中$.ajax()的常用参数有哪些 text: 返回纯文本字符串 error 写一个post 请求并带有发送数据和返回数据的样例 201、JavaScript 数组元素添加、删除、排序等方法有哪些 Array.concat( ) 连接数组 Array.join( ) 将数组元素连接起来以构建一个字符串 Array.length 数组的大小 Array.pop( ) 删除并返回数组的最后一个元素 Array.push( ) 给数组添加元素Array.reverse( ) 颠倒数组中元素的顺序Array.shift( ) 将元素移出数组Array.slice( ) 返回数组的一部分Array.sort( ) 对数组元素进行排序 Array.splice( ) 插入、删除或替换数组的元素Array.toLocaleString( ) 把数组转换成局部字符串Array.toString( ) 将数组转换成一个字符串Array.unshift( ) 在数组头部插入一个元素 202、如何添加 html 元素的事件有几种方法请列举 a、直接在标签里添加 这是一个层 b、在元素上通过 js 添加: c、使用事件注册函数添加 203、JavaScript 的循环语句有哪些 while for do while for…in 204、作用域-编译期执行期以及全局局部作用域问题 理解 js 执行主要的两个阶段预解析和执行期 205、闭包下面这个 ul如何点击每一列的时候 alert 其 index 这是第一条这是第二条这是第三条//非闭包实现 var lisdocument.querySelectorAll(‘li’); document.querySelector(‘#test’).οnclickfuncti on(e){ for (var i 0; i lis.length; i) { var li lis[i]; if(lie.target){ alert(i); } } }; //闭包实现 var lisdocument.querySelectorAll(‘li’); for (var i 0; i lis.length; i) { var li lis[i]; li.οnclick(function(index){ return function(e){ alert(index); }; })(i); } 206、列出 3 条以上 ff 和 IE 的脚本兼容问题 1、在 IE 下可通过 document.frames[“id”];得到该 IFRAME 对象 而在火狐下则是通过 document.getElementById(“content_panel_if”).contentWindow; 2、IE 的写法 _tbody_table.childNodes[0] 在 FF 中firefox 会在子节点中包含空白则第一个子节点为空白“ 而 ie 不会返回空白可以通过 if(” ! node.nodeName)过滤掉空白子对象 3、模拟点击事件if(document.all){ //ie 下 document.getElementById(“a3”).click(); } else{ //非 IE var evt document.createEvent(“MouseEvents”); evt.initEvent(“click”, true, true); document.getElementById(“a3”).dispatchEvent(evt); } 4、事件注册 if (isIE){window.attachEvent(“onload”, init);}else{window.addEventListener(“load”, init, false);} 207、列举可以哪些方面对前端开发进行优化 代码压缩、合并减少 http 请求图片制作精灵图、代码优化 208、至少列出一种 JavaScript 继承的实现方式 209、如现在有一个效果有显示用户头像、用户昵称、用户其他信息当用户鼠标移到头像上时会弹出用户的所有信息如果是你你会如何实现这个功能请用代码实现 //答案见J:\代码,PPT,笔记,电子书\面试题\面试题 02.html 210、call 与 apply 有什么作用又有什么什么区别用 callee 属性实现函数递归 apply 的参数是数组,call 的参数是单个的值除此之外两者没有差别重点理解 this 的改变callee 已经不推荐使用
211、用正则表达式写出由字母开头其余由数字、字母、下划线组成的 6~30 的字符串 var reg/2[\da-zA-Z_]{5,29}/;
212、列举浏览器对象模型 BOM 里常用的至少 4 个对象并列举 window 对象的常用方法至少 5 个 10 分
对象window document location screen history navigator
方法alert() confirm() prompt() open() close() setInterval() setTimeout() clearInterval() clearTimeout()
(详细参见J:\代码,PPT,笔记,电子书\面试题\window 对象方法.png)
213、Javascript 中 callee 和 caller 的作用 caller 是返回一个对函数的引用该函数调用了当前函数 用法fn.caller callee 是返回正在被执行的 function 函数也就是所指定的 function 对象的正文。用法arguments.callee 214、对于 apply 和 call 两者在作用上是相同的即是调用一个对象的一个方 法以另一个对象替换当前对象。将一个函数的对象上下文从初始的上下文改 变为由 thisObj 指定的新对象。
但两者在参数上有区别的。对于第一个参数意义都一样但对第二个参数?apply 传入的是一个参数数组也就是将多个参数组合成为一个数组传入而 call 则作为 call 的参数传入从第二个参数开始。?如 func.call(func1,var1,var2,var3)对应的 apply 写法为 func.apply(func1,[var1,var2,var3]) 。
215、在 Javascript 中什么是伪数组如何将伪数组转化为标准数组
伪数组类数组无法直接调用数组方法或期望 length 属性有什么特殊的行为但仍可以对真正数组遍历方法来遍历它们。典型的是函数的 argument 参数还有像调用
getElementsByTagName,document.childNodes 之类的,它们都返回 NodeList 对象都属于伪数组。
可以使用 Array.prototype.slice.call(fakeArray)将数组转化为真正的 Array 对象。
216、写一个函数可以计算 sum(5,0,-5);输出 0; sum(1,2,3,4);输出 10;
Js 基本功
217、事件代理怎么实现
在元素的父节点注册事件通过事件冒泡在父节点捕获事件
218、《正则》写出正确的正则表达式匹配固话号区号 3-4 位 第一位为 0中横线7-8 位数字中横线3-4 位分机号格式的固话号 常用正则表达式语法要熟悉 /0[0-9]{2,3}-\d{7,8}/
219、《算法》 一下 A,B 可任选一题作答两题全答加分
A:农场买了一只羊第一年是小羊第二年底生一只第三年不生第四年底再生一只第 五年死掉。
B: 写 出 代 码 对 下 列 数 组 去 重 并 从 大 到 小 排 列
{5,2,3,6,8,6,5,4,7,1,9}
先去重再排序
去重方法参考J:\代码,PPT,笔记,电子书\面试题
220、请写出一张图片的 HTML 代码已知道图片地址为“images/abc.jpg”,宽100px高 50px
221、请写一个正则表达式要求最短 6 位数最长 20 位阿拉伯数和英文字母不区分大小写组成
^(?.\d)(?.[a-z])(?.*[A-Z])[a-zA-Z\d]{6,20}$
222、统计 1 到 400 亿之间的自然数中含有多少个 1比如 1-21 中有 1、10、11、12、13、14、15、16、17、18、19、20、21 这么多自然数有 13 个 1 答案参考J:\代码,PPT,笔记,电子书\面试题\面试题_222.html
223、删除与某个字符相邻且相同的字符比如 fdaffdaaklfjklja 字符串处理之后成为“fdafdaklfjklja”
答案参考J:\代码,PPT,笔记,电子书\面试题\面试题_223.html
224、请写出三种以上的 Firefox 有但 InternetExplorer 没有的属性和函数
1、在 IE 下可通过 document.frames[“id”];得到该 IFRAME 对象 而在火狐下则是通过 document.getElementById(“content_panel_if”).contentWindow; 2、IE 的写法 _tbody_table.childNodes[0]
在 FF 中firefox 会在子节点中包含空白则第一个子节点为空白“ 而 ie 不会返回空白可以通过 if(” ! node.nodeName)过滤掉空白子对象 3、模拟点击事件if(document.all){ //ie 下 document.getElementById(“a3”).click(); } else{ //非 IE var evt document.createEvent(“MouseEvents”); evt.initEvent(“click”, true, true); document.getElementById(“a3”).dispatchEvent(evt); } 4、事件注册 if (isIE){window.attachEvent(“onload”, init);}else{window.addEventListener(“load”, init, false);}
225、请写出一个程序在页面加载完成后动态创建一个 form 表单并在里面添加一个 input 对象并给它任意赋值后义 post 方式提交到http://127.0.0.1/save.php 答案参考J:\代码,PPT,笔记,电子书\面试题\面试题_225.html
226、用 JavaScript 实现冒泡排序。数据为 23、45、18、37、92、13、24
面试经常遇到的排序查找算法要熟悉
227、解释一下什么叫闭包并实现一段闭包代码
简单理解就是函数的嵌套形成闭包闭包包括函数本身及其外部作用域
228、简述一下什么叫事件委托以及其原理
在元素的父节点注册事件通过事件冒泡在父节点捕获事件
229、前端代码优化的方法
var User { 对象count 1属性 getCountfunction{ 方法return this.count; }
}
console.log(User.getCount()); var func User.getCount; console.log(func()); 1 undefinedwindow;
230、下列JavaScript 代码执行后依次 alert 的结果是
(function test(){
var ab5; alert(typeof a); alert(typeof b); })();
alert(typeof a); alert(typeof b); //number number undefined number
231、下列JavaScript 代码执行后iNum 的值是
var iNum 0;
for(var i 1; i 10; i){ if(i % 5 0){ continue;
}
iNum;
}
分析
i1 1
i2 2
i3 3 i4 4 i5 i6 6 i7 7 i8 8 i9 9
232、输出结果是多少
1 var a; var b a * 0; if (b b) { console.log(b * 2 “2” - 0 4);
} else {
console.log(!b * 2 “2” - 0 4);
}
答案26
扩展关于乘法操作符J:\代码,PPT,笔记,电子书\面试题\乘性操作符.png 2 答案6
3var t 10; function test(t){ var t t;//此时的 t 是一个局部变量全局变量没有任何变化console.log(t);//此时的结果又是多少 }test(t); console.log(t); 答案10 4var t 10; function test(test){ var t test;
}test(t); console.log(t); 答案10 6var t 10; function test(test){ t test;
}test(t); console.log(t); 答案10 7var t 10; function test(test){ t t test;//undefined10NaN console.log(t); var t 3;
}test(t); console.log(t); 答 案 NaN 10 8var a; var b a / 0;
if (b b) {//bNaN
console.log(!b * 2 “2” - 0 4);
} else {
console.log(!b * 2 “2” - 0 4);
}
答 案 26 9
答案Infinity24
233、用程序实现找到 html 中 id 名相同的元素 id 名重复的元素 234、下列JavaScript 代码执行后运行的结果是
点击我
var btn document.getElementById(‘btn’); var handler { id: ‘_eventHandler’, exec: function(){ alert(this.id);
}
}
btn.addEventListener(‘click’, handler.exec);
答案btn因为 handler.exec 是由 btn 这个按钮执行的
235、☆☆☆下列 JavaScript 代码执行后依次 alert 的结果是
var obj {proto: {a:1,b:2}}; function F(){}; F.prototype obj.proto; var f new F(); obj.proto.c 3;
obj.proto {a:-1, b:-2}; alert(f.a);//1 alert(f.c);//3 delete F.prototype[‘a’]; alert(f.a);//undefined alert(obj.proto.a);//-1
236、下列JavaScript 代码执行后的效果是 itemitemitemitemitemvar items document.querySelectorAll(‘#listli’); for(var i 0;i items.length; i){ setTimeout(function(){ items[i].style.backgroundColor ‘#fee’; }, 5);
}
答案异常
237、下列 JavaScript 代码执行后的 li 元素的数量是 ItemItemItemvar items document.getElementsByTagName(‘li’); for(var i 0; i items.length; i){ if(items[i].innerHTML ‘’){ items[i].parentNode.removeChild(items[i]); }
}
答案4 个
238、程序中捕获异常的方法 window.error try{}catch(){}finally{} 239、将字符串”{KaTeX parse error: Expected EOF, got } at position 3: id}̲/tdtd{name}”中的{KaTeX parse error: Expected EOF, got } at position 3: id}̲替换 成 10{name}替换成 Tony 使用正则表达式
答 案 ”{KaTeX parse error: Expected EOF, got } at position 3: id}̲/tdtd{id}_{$name}”.replace(/{$id}/g,’ 10′).replace(/{$name}/g,‘Tony’);
240、给 String 对象添加一个方法传入一个 string 类型的参数然后将 string 的每个字符间价格空格返回例如
addSpace(“hello world”) // - ‘h e l l o ?w o r l d’
String.prototype.spacify function(){
return this.split(‘’).join(’ );
};
241、写出函数 DateDemo 的返回结果系统时间假定为今天
function DateDemo(){
var d, s“今天日期是”; d new Date(); s d.getMonth() “/”; s d.getDate() “/”; s d.getFullYear();
return s;
}
结果今天日期是7/17/2010
242、输出今天的日期以 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); 243、已知数组 var?stringArray??[“This”,?“is”,?“Baidu”,?“Campus”] Alert 出”This?is?Baidu?Campus”。
答案alert(stringArray.join(“”))
244、已知有字符串 foo”get-element-by-id”,写一个 function 将其转化成驼峰表示法”getElementById”。
function combo(msg){ var arrmsg.split(“-”); for(var i1;iarr.length;i){ arr[i]arr[i].charAt(0).toUpperCase()arr[i].substr(1,arr[i].length-1); }
msgarr.join(“”); return msg; }
245、.var numberArray[3,6,2,4,1,5]; 考察基础 API
1)实现对该数组的倒排输出[5,1,4,2,6,3]
2)实现对该数组的降序排列输出[6,5,4,3,2,1] function combo(msg){ var arrmsg.split(“-”); for(var i1;iarr.length;i){ arr[i]arr[i].charAt(0).toUpperCase()arr[i].substr(1,arr[i].length-1);
}
msgarr.join(“”); return msg; }
246、把两个数组合并并删除第二个元素。
var array1 [‘a’,‘b’,‘c’];
var bArray [‘d’,‘e’,‘f’]; var cArray array1 答 案 array1array1.concat(bArray) array1.splice(1,1) 247、如何消除一个数组里面重复的元素
var arr[1,2,3,3,4,4,5,5,6,1,9,3,25,4];
function deRepeat(){ var newArr[]; var obj{}; var index0; var larr.length; for(var i0;il;i){ if(obj[arr[i]]undefined)
{
obj[arr[i]]1; newArr[index]arr[i]; }
else if(obj[arr[i]]1)
}
return newArr;
}
var newArr2deRepeat(arr); alert(newArr2); //输出 1,2,3,4,5,6,9,25 248、用 js 实现随机选取 10–100 之间的 10 个数字存入一个数组并排序。
var iArray [];
funtion getRandom(istart, iend){ var iChoice istart - iend 1; return Math.floor(Math.random() * iChoice istart;
}
for(var i0; i10; i){ iArray.push(getRandom(10,100)); }
iArray.sort();
249、正则表达式构造函数 var regnew RegExp(“xxx”)与正则表达字面量 var reg//有什么不同匹配邮箱的正则表达式
答案当使用 RegExp()构造函数的时候不仅需要转义引号即\”表示”并且还需要双反斜杠即\表示一个\。使用正则表达字面量的效率更高。? 250、1 var regMail /^([a-zA-Z0-9_-])([a-zA-Z0-9_-])((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
正则表达式对象 3 – 清除空格
写一个 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” 251、数组和字符串 输出结果
答案lashou 拉手 lashou 1,2,3 1,2,3,4 1,2,3,4
252、下列控制台都输出什么
第 1 题 function setName(){ name“张三”; } setName(); console.log(name); 答案“张三”
253、第 2 题
//考点1、变量声明提升 2、变量搜索机制var a1; function test(){ console.log(a); var a1; } test(); 答案undefined
254、第 3 题
var b2; function test2(){ window.b3; console.log(b); } test2(); 答案3
255、第 4 题
c5;//声明一个全局变量 c function test3(){ window.c3; console.log©; //答案undefined原因由于此时的 c 是一个局部变量 c 并且没有被赋值 var c; console.log(window.c);//答案3原因这里的 c 就是一个全局变量 c
} test3();
256、第 5 题
var arr []; arr[0] ‘a’; arr[1] ‘b’; arr[10] ‘c’; alert(arr.length); //答案11 console.log(arr[5]); //答案undefined 257、第 6 题 var a1; console.log(a); //答案1 console.log(a); //答案3
258、第 7 题
console.log(nullundefined); //答案true console.log(“1”1); //答案true因为会将数字 1 先转换为字符串 1 console.log(“1”1); //答案false因为数据类型不一致
259、第 8 题
typeof 1; “number” typeof “hello”; “string” typeof /[0-9]/; “object” typeof {}; “object” typeof null; “object” typeof undefined; “undefined” typeof [1,2,3]; “object” typeof function(){}; //“function”
260、第 9 题
parseInt(3.14); //3 parseFloat(“3asdf”); //3 parseInt(“1.23abc456”); parseInt(true);//“true” NaN
261、第 10 题
//考点函数声明提前function bar() { return foo; foo 10; function foo() {} //var foo 11; } alert(typeof bar());//“function”
262、第 11 题考点函数声明提前
var foo 1; function bar() { foo 10; return; function foo() {} } bar(); alert(foo);//答案1
263、第 12 题
console.log(a);//是一个函数var a 3; function a(){} console.log(a);3
264、第 13 题
//考点对 arguments 的操作function foo(a) { arguments[0] 2; alert(a);//答案2因为a、arguments 是对实参的访问b、通过 arguments[i] 可以修改指定实参的值 } foo(1);
265、第 14 题
function foo(a) { alert(arguments.length);//答案3因为 arguments 是对实参的访问 } foo(1, 2, 3); 266、第 15 题bar();//报错 var foo function bar(name) { console.log(“hello”name); console.log(bar); }; //alert(typeof bar); foo(“world”);//“hello” console.log(bar);//undefined console.log(foo.toString()); bar();//报错
267、第 16 题
function test(){ console.log(“test 函数”); } setTimeout(function(){ console.log(“定时器回调函数”); }, 0) test(); function foo(){ var name“hello”; }
三、Jquery
1、jQuery 的 slideUp 动画 如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行 该如何处理呢? 先 stop(true,true)后 slideUp() 示例代码参考J:\代码,PPT,笔记,电子书\面试题\面试题_jquery_slideup.html 关于 stop()参考J:\代码,PPT,笔记,电子书\面试题\面试题_jquery.png
四、HTML5 CSS3
1、CSS3 有哪些新特性
1.CSS3 实现圆角border-radius阴影box-shadow 2.对文字加特效text-shadow、线性渐变gradient旋转transform 3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜 4.增加了更多的 CSS 选择器 多背景 rgba 5.在 CSS3 中唯一引入的伪元素是 ::selection. 6.媒体查询多栏布局 7.border-image
2、html5 有哪些新特性、移除了那些元素如何处理 HTML5 新标签的浏览器兼容问题如何区分 HTML 和 HTML5
新特性 1.拖拽释放(Drag and drop) API 2.语义化更好的内容标签header,nav,footer,aside,article,section 3.音频、视频 API(audio,video) 4.画布(Canvas) API 5.地理(Geolocation) API 6.本地离线存储 localStorage 长期存储数据浏览器关闭后数据不丢失 7.sessionStorage 的数据在浏览器关闭后自动删除 8.表单控件calendar、date、time、email、url、search 9.新的技术 webworker, websocket, Geolocation
移除的元素 1.纯表现的元素basefontbigcenterfont, sstrikettu 2.对可用性产生负面影响的元素frameframesetnoframes 支持 HTML5 新标签
IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签可以利用这一特性 让这些浏览器支持 HTML5 新标签浏览器支持新标签后还需要添加标签默认的样式当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架 如何区分
DOCTYPE 声明新增的结构元素、功能元素
3、本地存储Local Storage 和 cookies储存在用户本地终端上的数据 之间的区别是什么
Cookies:服务器和客户端都可以访问大小只有 4KB 左右有有效期过期后将会删除 本地存储只有本地浏览器端可访问数据服务器不能访问本地存储直到故意通过 POST 或者 GET 的通道发送到服务器每个域 5MB没有过期数据它将保留知道用户从浏览器清除或者使用 Javascript 代码移除
4、如何实现浏览器内多个标签页之间的通信?
调用 localstorge、cookies 等本地存储方式
5、你如何对网站的文件和资源进行优化
文件合并 文件最小化/文件压缩使用 CDN 托管 缓存的使用
6、什么是响应式设计
它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有 的人能在这些设备上让网站运行正常
7、新的 HTML5 文档类型和字符集是
答HTML5 文档类型!doctype html HTML5 使用的编码
8、HTML5 Canvas 元素有什么用
9、HTML5 存储类型有什么区别
答Media API、Text Track API、Application Cache API、User Interaction、Data Transfer API、Command API、Constraint Validation API、History API
10、用 H5CSS3 解决下导航栏最后一项掉下来的问题
11、CSS3 新增伪类有那些
p:first-of-type 选择属于其父元素的首个 元素的每个 元素。p:last-of-type 选择属于其父元素的最后 元素的每个 元素。p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。p:only-child 选择属于其父元素的唯一子元素的每个 元素。p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。 :enabled、:disabled 控制表单控件的禁用状态。
:checked单选框或复选框被选中。
12、请用 CSS 实现一个矩形内容有投影有圆角hover 状态慢慢变透明。
css 属性的熟练程度和实践经验
13、描述下 CSS3 里实现元素动画的方法
动画相关属性的熟悉程度
14、html5\CSS3 有哪些新特性、移除了那些元素如何处理 HTML5 新标签的浏览器兼容问题如何区分 HTML 和 HTML5
HTML5 现在已经不是 SGML 的子集主要是关于图像位置存储地理定位等功能的增加。
绘画 canvas 元素 用于媒介回放的 video 和 audio 元素 本地离线存储 localStorage 长期存储数据浏览器关闭后数据不丢失
sessionStorage 的数据在浏览器关闭后自动删除 语意化更好的内容元素比如 article、footer、header、nav、section 表单控件calendar、date、time、email、url、search CSS3 实现圆角阴影对文字加特效增加了更多的 CSS 选择器 多背景 rgba 新的技术 webworker, websockt, Geolocation 移除的元素 纯表现的元素basefontbigcenterfont, sstrikettu 对可用性产生负面影响的元素frameframesetnoframes *是 IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签 可以利用这一特性让这些浏览器支持 HTML5 新标签 浏览器支持新标签后还需要添加标签默认的样式 *当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架 15、你怎么来实现页面设计图你认为前端应该如何高质量完成工作? 一个满屏 品 字布局 如何设计?
*首先划分成头部、body、脚部。。。。。 *实现效果图是最基本的工作精确到 2px 与设计师产品经理的沟通和项目的参与做好的页面结构页面重构和用户体验 处理 hack兼容、写出优美的代码格式针对服务器的优化、拥抱 HTML5。
16、你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强 progressive enhancement针对低版本浏览器进行构建页面保证最基本的功能然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 优雅降级 graceful degradation一开始就构建完整的功能然后再针对低版本浏览器进行兼容。 区别优雅降级是从复杂的现状开始并试图减少用户体验的供给而渐进增强则是从 一个非常基础的能够起作用的版本开始并不断扩充以适应未来环境的需要。降级功 能衰减意味着往回看而渐进增强则意味着朝前看同时保证其根基处于安全地带。 “优雅降级”观点
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被 认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段并把测试对 象限定为主流浏览器如 IE、Mozilla 等的前一个版本。 在这种设计范例下旧版的浏览器被认为仅能提供“简陋却无 妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点因此除了修复较大的错误之外其它的差异将被 直接忽略。 “渐进增强”观点
“渐进增强”观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它有的则收集它有的寻求有的操作 还有的网站甚至会包含以上的种种但相同点是它们全都涉及到内容。这使得“渐进增强” 成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
那么问题了。现在产品经理看到 IE6,7,8 网页效果相对高版本现代浏览器少了很多圆角阴影CSS3要求兼容使用图片背景放弃 CSS3你会如何说服他
17、为什么利用多个域名来存储网站资源会更有效
CDN 缓存更方便 突破浏览器并发限制节约 cookie 带宽 节约主域名的连接数优化页面响应速度防止不必要的安全问题
18、请谈一下你对网页标准和标准制定机构重要性的理解。
无标准答案网页标准和标准制定机构都是为了能让 web 发展的更‘健康’开发者遵循统一的标准降低开发难度开发成本SEO 也会更好做也不会因为滥用代码导致各种 BUG、安全问题最终提高网站易用性。
19、请描述一下 cookiessessionStorage 和 localStorage 的区别
sessionStorage 用于本地存储一个会话session中的数据这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种
持久化的本地存储仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储除非主动删除数据否则数据是永远不会过期的。 web storage 和 cookie 的区别
Web Storage 的概念和 cookie 相似区别是它是为了更大容量存储设计的。Cookie 的大小是受限的并且每次你请求一个新的页面的时候 Cookie 都会被发送过去这样无形中浪费了带宽另外 cookie 还需要指定作用域不可以跨域调用。 除此之外 Web Storage 拥有 setItem,getItem,removeItem,clear 等方法 不像cookie 需要前端开发者自己封装 setCookiegetCookie。但是 Cookie 也是不可以或缺的Cookie 的作用是与服务器进行交互作为 HTTP 规范的一部分而存在 而Web Storage 仅仅是为了在本地“存储”数据而生。
20、知道 css 有个 content 属性吗有什么作用有什么应用
知道。css 的 content 属性专门应用在 before/after 伪元素上用来插入生成内容。最常见的应用是利用伪类清除浮动。 //一种常见利用伪类清除浮动的代码 .clearfix:after { content:“.”; //这里利用到了 content 属性display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; }
after 伪元素通过 content 在元素的后面生成了内容为一个点的块级素再利用clear:both 清除浮动。 那么问题继续还有知道 css 计数器序列数字字符自动递增吗如何通过css content 属性实现 css 计数器 答案css 计数器是通过设置 counter-reset 、counter-increment 两个属性 、及counter()/counters()一个方法配合 after / before 伪类实现。
21、如何在 HTML5 页面中嵌入音频?
HTML 5 包含嵌入音频文件的标准方式支持的格式包括 MP3、Wav 和 Ogg
Your browser does’nt support audio embedding feature.
22、如何在 HTML5 页面中嵌入视频
和音频一样HTML5 定义了嵌入视频的标准方法支持的格式包括MP4、WebM 和 Ogg Your browser doesnt support video embedding feature.
23、HTML5 引入什么新的表单属性
Datalist datetime output keygen date month week time number range emailurl
24、CSS3 新增伪类有那些
p:first-of-type 选择属于其父元素的首个 元素的每个 元素。p:last-of-type 选择属于其父元素的最后 元素的每个 元素。p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。p:only-child 选择属于其父元素的唯一子元素的每个 元素。p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。 :enabled、:disabled 控制表单控件的禁用状态。 :checked单选框或复选框被选中。
25、(写)描述一段语义的 html 代码吧。
HTML5 中新增加的很多标签如
、 、 和 等 就是基于语义化设计原则 div id“header” h1标题 /h1 h2专注 Web 前端技术 /h2 /div 语义 HTML 具有以下特性 文章转载自： http://www.morning.qrndh.cn.gov.cn.qrndh.cn http://www.morning.ywpwq.cn.gov.cn.ywpwq.cn http://www.morning.swzpx.cn.gov.cn.swzpx.cn http://www.morning.lonlie.com.gov.cn.lonlie.com http://www.morning.sbrjj.cn.gov.cn.sbrjj.cn http://www.morning.tfpmf.cn.gov.cn.tfpmf.cn http://www.morning.jgncd.cn.gov.cn.jgncd.cn http://www.morning.nnmnz.cn.gov.cn.nnmnz.cn http://www.morning.bxfy.cn.gov.cn.bxfy.cn http://www.morning.gkktj.cn.gov.cn.gkktj.cn http://www.morning.rcmwl.cn.gov.cn.rcmwl.cn http://www.morning.cwlxs.cn.gov.cn.cwlxs.cn http://www.morning.jgmlb.cn.gov.cn.jgmlb.cn http://www.morning.wjrtg.cn.gov.cn.wjrtg.cn http://www.morning.jqjnl.cn.gov.cn.jqjnl.cn http://www.morning.ggnfy.cn.gov.cn.ggnfy.cn http://www.morning.rkmhp.cn.gov.cn.rkmhp.cn http://www.morning.wbqt.cn.gov.cn.wbqt.cn http://www.morning.nmngg.cn.gov.cn.nmngg.cn http://www.morning.kgfsz.cn.gov.cn.kgfsz.cn http://www.morning.zybdj.cn.gov.cn.zybdj.cn http://www.morning.nspbj.cn.gov.cn.nspbj.cn http://www.morning.qfplp.cn.gov.cn.qfplp.cn http://www.morning.njfgl.cn.gov.cn.njfgl.cn http://www.morning.gqflj.cn.gov.cn.gqflj.cn http://www.morning.plfrk.cn.gov.cn.plfrk.cn http://www.morning.nxbsq.cn.gov.cn.nxbsq.cn http://www.morning.jhyfb.cn.gov.cn.jhyfb.cn http://www.morning.wzwpz.cn.gov.cn.wzwpz.cn http://www.morning.hclqy.cn.gov.cn.hclqy.cn http://www.morning.gpnfg.cn.gov.cn.gpnfg.cn http://www.morning.nfdty.cn.gov.cn.nfdty.cn http://www.morning.gfkb.cn.gov.cn.gfkb.cn http://www.morning.kndyz.cn.gov.cn.kndyz.cn http://www.morning.pdtjj.cn.gov.cn.pdtjj.cn http://www.morning.sgfgz.cn.gov.cn.sgfgz.cn http://www.morning.dzgyr.cn.gov.cn.dzgyr.cn http://www.morning.fwmln.cn.gov.cn.fwmln.cn http://www.morning.zmwzg.cn.gov.cn.zmwzg.cn http://www.morning.bwzzt.cn.gov.cn.bwzzt.cn http://www.morning.lmjkn.cn.gov.cn.lmjkn.cn http://www.morning.xsjfk.cn.gov.cn.xsjfk.cn http://www.morning.bzbq.cn.gov.cn.bzbq.cn http://www.morning.rqrxh.cn.gov.cn.rqrxh.cn http://www.morning.jokesm.com.gov.cn.jokesm.com http://www.morning.yrjkp.cn.gov.cn.yrjkp.cn http://www.morning.lggng.cn.gov.cn.lggng.cn http://www.morning.jwxmn.cn.gov.cn.jwxmn.cn http://www.morning.gjwkl.cn.gov.cn.gjwkl.cn http://www.morning.xhqr.cn.gov.cn.xhqr.cn http://www.morning.gjqnn.cn.gov.cn.gjqnn.cn http://www.morning.lkwyr.cn.gov.cn.lkwyr.cn http://www.morning.qsdnt.cn.gov.cn.qsdnt.cn http://www.morning.sflnx.cn.gov.cn.sflnx.cn http://www.morning.qwdlj.cn.gov.cn.qwdlj.cn http://www.morning.trplf.cn.gov.cn.trplf.cn http://www.morning.ktnt.cn.gov.cn.ktnt.cn http://www.morning.ntqjh.cn.gov.cn.ntqjh.cn http://www.morning.gyrdn.cn.gov.cn.gyrdn.cn http://www.morning.npbnc.cn.gov.cn.npbnc.cn http://www.morning.kbyp.cn.gov.cn.kbyp.cn http://www.morning.lssfd.cn.gov.cn.lssfd.cn http://www.morning.dwncg.cn.gov.cn.dwncg.cn http://www.morning.jokesm.com.gov.cn.jokesm.com http://www.morning.jfjqs.cn.gov.cn.jfjqs.cn http://www.morning.ctqbc.cn.gov.cn.ctqbc.cn http://www.morning.dyght.cn.gov.cn.dyght.cn http://www.morning.yfcyh.cn.gov.cn.yfcyh.cn http://www.morning.mxlmn.cn.gov.cn.mxlmn.cn http://www.morning.plpqf.cn.gov.cn.plpqf.cn http://www.morning.yjdql.cn.gov.cn.yjdql.cn http://www.morning.wlgpz.cn.gov.cn.wlgpz.cn http://www.morning.rxfgh.cn.gov.cn.rxfgh.cn http://www.morning.njpny.cn.gov.cn.njpny.cn http://www.morning.pqjlp.cn.gov.cn.pqjlp.cn http://www.morning.rjhts.cn.gov.cn.rjhts.cn http://www.morning.jrqbr.cn.gov.cn.jrqbr.cn http://www.morning.xhqr.cn.gov.cn.xhqr.cn http://www.morning.qcztm.cn.gov.cn.qcztm.cn http://www.morning.feites.com.gov.cn.feites.com
