腾讯2015春招web前端开发练习卷
一、十五道不定项选择题
1、jquery ajax
jquery ajax中都支持哪些数据类型?
A. xml
B. html
C. jsonp
D. json
- AJAX = Asynchronous JavaScript and XML
- XMLHttpRequest 是 AJAX 的 基础 ;
- AJAX 不是新的编程语言,而是一种使用现有标准的新方法;
- 通过 AJAX,JavaScript 无需等待服务器的响应,而是在等待服务器响应时执行其他脚本以及 当响应就绪后对响应进行处理。如果服务器繁忙或缓慢,应用程序会挂起或停止 ;
2、类型判断
下面哪些语句可以 在JS里判断一个对象oStringObject是否为String。
A. oStringObject instanceof String
B. typeof oStringObject ==
C. 'string' oStringObject is String
D. 以上答案都不正确
- JS是一种弱类型语言。JS拥有动态类型,相同的变量可以用作不同的类型。
- JS有7种数据类型:
三种基本类型(数字,字符串,布尔),
两种引用数据类型(对象,数组),
两种特殊数据类型(undefined,null)。- JS有5种原始类型:数字,字符串,布尔,undefined,null。
3、存储技术
常见的浏览器端的存储技术有哪些?
A. cookie
B. localStorage
C. session
D. userData
cookie
- 会话cookie是一种临时cookie,它记录了用户访问站点时的设置和偏好,当用户退出浏览器时,会话cookie就会被删除。
- 持久cookie的生存时间更长一些,它存储在用户的硬盘上,浏览器退出或计算机重启时他们仍然存在。会话cookie与持久cookie之间的唯一区别就是它们的过期时间。
- cookie会随着每次HTTP请求头信息一起发送,无形中增加了网络流量,另外,cookie能存储的数据容量有限,根据浏览器类型不同而不同,IE6大约只能存储2K。
localStorage
- localStorage即本地存储,可用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
- 特点:
- 同源策略限制。若想在不同页面之间对同一个localStorage进行操作,这些页面必须在同一协议、同一主机名和同一端口下。(IE8和9存储数据仅基于同一主机名,忽略协议(HTTP和HTTPS)和端口号的要求)
- 只在本地存储。localStorage的数据不会跟随HTTP请求一起发送到服务器,只会在本地生效。
- 永久保存。保存的数据没有过期时间,直到手动去除。
- 存储方式。localStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串,也会在存储时转换为字符串。true值会转换为"true")。
- 存储上限限制:不同的浏览器存储的上限也不一样,但大多数浏览器把上限限制在5MB以下。
sessionStorage
- sessionStorage 是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
- 特点
- 同源策略限制。若想在不同页面之间对同一个sessionStorage进行操作,这些页面必须在同一协议、同一主机名和同一端口下。(IE 8和9存储数据仅基于同一主机名,忽略协议(HTTP和HTTPS)和端口号的要求)。
- 单标签页限制。sessionStorage操作限制在单个标签页中,在此标签页进行同源页面访问都可以共享sessionStorage数据。
- 只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器,只会在本地生效,并在关闭标签页后清除数据。(若使用Chrome的恢复标签页功能,seesionStorage的数据也会恢复)。
- 存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串,也会在存储时转换为字符串。true值会转换为"true")。
- 存储上限限制:不同的浏览器存储的上限也不一样,但大多数浏览器把上限限制在5MB以下。
Flash ShareObject
- 这种方式能能解决上面提到的cookie存储的两个弊端,而且能够跨浏览器,应该说是目前最好的本地存储方案。不过,需要在页面中插入一个Flash,当浏览器没有安装Flash控件时就不能用了。所幸的是,没有安装Flash的用户极少。
- 缺点:需要安装Flash插件。
userData
- userData存储通过将数据写入一个UserData存储区(UserData store)来保存数据,userData将数据以XML格式保存在客户端上,UserData存储方式只适用于IE浏览器(window系统+IE)。
- UserData存储区保存以后,即使IE浏览器关闭或者刷新了,下一次进入该页面,数据也能够重新载入而不会丢失,也就是数据将一直存在,除非你人为删除或者用脚本设置了该数据的失效期。容量可达到640K,这种方案是很可靠的,不需要安装额外的插件。
- 缺点:它仅在IE下有效。
Google Gear
- Google开发出的一种本地存储技术。支持IE6、IE7、FireFox2.0、FireFox3.0。
- 缺点:需要安装Gear组件。
globalStorage
- 在浏览器关闭以后,使用globalStorage存储的信息仍能够保留下来,和sessionStorage一样,域中任何一个页面存储的信息都能被所有的页面共享。目前只有FF支持,且只支持当前域下的globalStorage存储。
4、协同工作问题
如何规避javascript多人开发函数重名问题?
A. 根据不同的开发人员实现的功能,在函数名加前缀
B. 每个开发人员都把自己的函数封装到类中,然后调用的时候即使函数名相同,但是因为是要类.函数名来调用,所以也减少了重复的可能性
C. 以上都不正确
5、数据类型
下面属于javascript基本数据类型的有?
A. 字符串
B. 数字
C. null
D. undefined
- typeof 运算符可返回以下
- 原始类型之一:string、number、boolean、undefined
- 复杂数据类型之一:function、object
- typeof 运算符把对象、数组或 null 返回 object
- typeof 运算符不会把函数返回 object,而是返回 function 。
- typeof 运算符把数组返回为 “object”,因为在 JavaScript 中数组即对象
typeof "" // 返回 "string"
typeof 0 // 返回 "number"
typeof 3.14 // 返回 "number"
typeof (7) // 返回 "number"
typeof (7 + 8) // 返回 "number"
typeof true // 返回 "boolean"
typeof x // 返回 "undefined" (假如 x 没有值)
typeof undefined // 返回 "undefined"
typeof null // 返回 "object"
null === undefined // 返回 "false"
null == undefined // 返回 "true"
6、语法标签
下面有关html结构描述正确的有?
A. <ul> <li> </li> </ul>
B. <ol> <li> </li> </ol>
C. <dl><dt><dd></dd></dt></dl>
D. <table> <tr> <td></td> </tr> </table>
//无序 HTML 列表
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
//有序 HTML 列表
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
//dl标签
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
// table
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
7、bootstrap语法
在bootstrap中, 关于导航条,下列说法正确的是?
A. 应该将被包裹的元素放到navbar-collapse类中
B. 表单应该放置于navbar-form内
C. 可以使用navbar-left和navbar-right来对齐导航条
D. 可以使用navbar-fixed-top和navbar-fixed-bottom来将导航条固定到顶部或底部
8、css样式语法
以下是行内元素的有()
A. span
B. input
C. ul
D. p
9、兼容性问题
下面关于IE、FF下面脚本的区别描述错误的是?
A. innerText FIREFOX不支持,IE支持
B. document.createElement FIREFOX支持,IE不支持
C. setAttribute('class','styleClass') FIREFOX支持,IE不支持
D. 用setAttribute设置事件 FIREFOX不支持,IE支持
( 1 ) 判断浏览器类型方法
- var isIE = document.all ? true : false;
( 2 ) innerText
- firefox不能对支持innerText
- firefox支持innerHTML但却不支持innerText,它支持
- textContent来实现innerText,不过默认把多余的空格也保留了。
- 如果不用textContent,如果字符串里面不包含HTML代码也可以用innerHTML代替。
( 3 ) 禁止选取网页内容
- IE中一般用js:obj.onselectstart=function(){returnfalse;}
- firefox用CSS:-moz-user-select:none
( 4 ) 滤镜的支持(例:透明滤镜)
- IE:filter:alpha(opacity=10);
- firefox:-moz-opacity:.10;
( 5 ) 捕获事件
- IE:obj.setCapture()、obj.releaseCapture()
- Firefox:
document.addEventListener(”mousemove”,mousemovefunction,true);
document.removeEventListener(”mousemove”,mousemovefunction,true);
( 6 ) 获取鼠标位置
- IE:event.clientX、event.clientY
- Firefox:需要事件函数传递事件对象
obj.οnmοusemοve=function(ev){
X=ev.pageX;Y=ev.pageY;
}
( 7 ) DIV等元素的边界问题
- 比如:.div1{width:100px;height:100px;border:#0000001pxsolid;}
- IE:
div1的宽度(包括边框宽度):100px
div1的高度(包括边框宽度):100px- Firefox:
div1的宽度(包括边框宽度):102px
div1的高度(包括边框宽度):102px
( 8 ) CSS处理问题
- 比如:{border-width : 0px !important; border-width:1px;}
!important来优先使用css语句(仅firefox支持)- IE:边框宽度是1px
- Firefox:边框宽度是0px
( 9 ) document.formName.item(”itemName”)问题
- IE:可以使用
document.formName.item(”itemName”)或document.formName.elements[“elementName”]- Firefox:只能使用
document.formName.elements[“elementName”]- 解决方法:统一使用document.formName.elements[“elementName”]
( 10 ) 集合类对象问题
- IE:可以使用()或[]获取集合类对象
- Firefox:只能使用[]获取集合类对象
- 解决方法:统一使用[]获取集合类对象。
( 11 ) 自定义属性问题
- IE:可以使用
获取常规属性的方法来获取自定义属性或
getAttribute()获取自定义属性;- Firefox:只能使用
getAttribute()获取自定义属性。- 解决方法:统一通过getAttribute()获取自定义属性
( 12 ) eval(”idName”)问题
- IE:可以使用以下来取得id为idName的 HTML对象;
eval(”idName”)
getElementById(”idName”)- Firefox:只能使用
getElementById(”idName”)- 解决方法:统一用getElementById(”idName”)来取得id为idName的HTML对象。
( 13 ) 变量名与某HTML对象ID相同的问题
- IE:
TML对象的ID可以作为document的下属对象变量名直接使用
不可以使用与HTML对象ID相同的变量名- Firefox:
TML对象的ID不可以作为document的下属对象变量名直接使用
可以使用与HTML对象ID相同的变量名
( 14 ) const问题
- IE:只能使用var关键字来定义常量
- Firefox:可以使用var关键字或const关键字来定义常量
- 解决方法:统一使用var关键字来定义常量
( 15 ) input.type属性问题
- IE:input.type属性为只读
- Firefox:input.type属性为读写
- 解决方法:不修改input.type属性。如果必须要修改,可以先隐藏原来的input,然后在同样的位置再插入一个新的input元素
( 16 ) window.event问题
- IE:可以运行
- Firefox:不可以运行,因为Firefox的event只能在事件发生的现场使用
- 解决方法:在事件发生的函数上加上event参数。
在函数体内(假设形参为evt)使用
varmyEvent=evt?evt:(window.event?window.event:null)- 示例html:
<input type = ” button ” οnclick=” doSomething(event) ”/>- 示例js:
function doSomething(evt){
var myEvent = evt ? evt : (window.event ? window.event : null )
…
}
( 17 ) window.event问题
- IE:可以运行
- Firefox:不可以运行,因为Firefox的event只能在事件发生的现场使用
- 解决方法:在事件发生的函数上加上event参数。
在函数体内(假设形参为evt)使用
varmyEvent=evt?evt:(window.event?window.event:null)- 示例html:
<input type = ” button ” οnclick=” doSomething(event) ”/>- 示例js:
function doSomething(evt){
var myEvent = evt ? evt : (window.event ? window.event : null )
…
}
( 18 ) CSS圆角问题
——圆角问题是CSS中的经典问题,建议使用JQuery框架集来设置圆角
- IE:ie7以下版本不支持圆角。
- Firefox:
-moz- border-radius:4px,或者
-moz-border-radius-topleft:4px;
-moz-border-radius- topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border- radius-bottomright:4px;
( 19 ) CSS透明问题
——最好两个都写,并将opacity属性放在下面
- IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)
- Firefox:opacity:0.6
( 20 ) ul和ol列表缩进问题
——消除ul、ol等列表的缩进时
——样式应写成:list-style : none; margin : 0px; padding : 0px;
- IE:
设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点
设置padding对样式没有影响- Firefox:
设置margin:0px仅仅可以去除上下的空白
设置padding:0px后仅仅可以去掉左右缩进,还必须设置list-style:none才 能去除列表编号或圆点- 总结:在IE中仅仅设置margin:0px即可达到最终效果,而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果
( 21 ) cursor:hand VS cursor:pointer
——两者都是手形指示
- IE:支持pointer
- Firefox:不支持hand
( 22 ) 访问的父元素的区别
- IE:使用obj.parentElement或obj.parentNode访问obj的父结点
- Firefox:使用obj.parentNode访问obj的父结点
10、对象
下面有关javascript内部对象的描述,正确的有?
A. History 对象包含用户(在浏览器窗口中)访问过的 URL
B. Location 对象包含有关当前 URL 的信息
C. Window 对象表示浏览器中打开的窗口
D. Navigator 对象包含有关浏览器的信息