web前端课程检测2
一、简答题(每题6分,共90分)
1、CSS都有哪些选择器？
(评分标准：满分6分，任选6个以上得满分)
属性选择器p{}、类选择器.cls{}、ID选择器 #id{}、通用选择器 *{}
伪类选择器:hover{}、 伪对象选择器:after{}、后代选择器 a b{}
子代选择器a>b{}、并集选择器a,b{}、交集选择器a#b{}
2、什么叫CSS初始化？常用的CSS初始化有哪些，什么区别？
(评分标准：满分6分，根据回答情况酌情给分)
CSS初始化是为了解决各种浏览器的默认样式不同，而选择直接将网页的默认样式清空，保持不同浏览器显示效果的统一。(2分)
常用的额CSS初始化方式有两种：reset.css normalize.css (2分)
Reset是将所有浏览器的默认样式全部清空，而normalize会保留浏览器中部分统一的且有效的样式(2分)
3、JavaScript的数据类型都有什么？(评分标准：每条1分，满分6分，全写中文或全写英文得3分)
Undefined： 未定义。
Null: 表示空的引用。
Boolean： 布尔类型
Number: 数值类型
String： 字符串类型
Object: 对象类型
4、解释一下JavaScript中的this指针、闭包、作用域？
(评分标准：满分6分，根据回答情况酌情给分)
This指向：JS函数中的this，永远指向函数调用语句所在的对象(谁调用函数，this指向谁)。(2分)
闭包： 在函数中，写一个子函数。内层函数可以访问外层函数中的变量。(2分)
作用域： 变量生效的范围称为作用域。JS中只有全局作用域和函数作用域。(2分)
5、使用jQuery操作元素的属性attr()方法和val()有什么区别?
(评分标准：满分6分，每条3分)
Attr():用于读取或者设置元素的属性；
Val(): 用于读取或者设置表单元素的value；
6、JavaScript怎样创建节点、删除节点、替换节点、复制节点？(评分标准：满分6分，每条1.5分)
创建节点： .creatElement();
删除节点： .removeChild();
替换节点： .replaceChild();
复制节点： .cloneNode(true/false);
7、jquery.extend 与 jquery.fn.extend的区别？
(评分标准：满分6分，每条3分)
jquery.extend：用于声明全局插件/方法。声明插件/方法使用$.func();直接调用
query.fn.extend：用于声明局部插件/方法。声明插件/方法使用$(“选择器”).func();选中节点后在调用。
8、描述一下JS中的事件流模型？以及如何阻止事件冒泡？
(评分标准：满分6分，回答合理即可得分)
JS中的事件流模型分为事件冒泡和事件捕获：
事件冒泡：当某DOM元素触发一种事件时，会从当前节点开始，逐级往上触发其祖先节点的同类型事件，直到DOM根节点；(2分)
事件捕获： 当某DOM元素触发一种事件时，会从文档根节点开始，逐级向下触发其祖先节点的同类型事件，直到该节点自身；(2分)
取消事件冒泡：
在IE8之前浏览器中，使用 e.cancelBubble = true; (1分)
在其他浏览器中，使用e.stopPropagation();(1分)
9、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
(评分标准：满分6分，每项2分，任选3个以上得满分)
行级元素：<span> <img> <a> <input> <b> <strong> <em> 等
块级元素： <div> <p> <h1>~<h6> <pre> <blockquote> <table> <ul>
空元素： <img /> <meta /> <input /> <link/>
10、JS中如何将数组转化为json字符串，然后再转化回来？
(评分标准：满分6分，每项3分)
数组转为JSON字符串：JSON.stringify(arr);
JSON字符串转为JSON对象：JSON.parse(str);
11、请说出三种减低页面加载时间的方法？
(评分标准：满分6分，任选3条得满分，其他合理答案均可)
① 将JS文件放到文档的最后加载；
② 将多个JS文件、CSS文件合并压缩；
③ 使用雪碧图将页面中的小图片合并处理；
④ 图片使用JS进行延迟加载；
⑤ 其他合理答案均可
12、写出原生JS实现Ajax的关键步骤？
(评分标准：满分6分，酌情给分即可)
var ajax = new XMLHttpRequest();(1分)
ajax.onreadystatechange = function(){(1分)
if(ajax.readyState==4 && ajax.status==200){ (1分)
console.log(ajax.responseText); (1分)
}
}
ajax.open("GET","h51701.json"); (1分)
ajax.send(null); (1分)
13、什么叫同源策略？写出一种解决Ajax跨域请求的方式？(评分标准：满分6分，酌情给分即可)
同源策略： 当从一个文件请求另一个文件数据时，JS要求两个文件必须处于同一协议名、同一主机名、同一端口号下，才能请求成功。(3分)
跨域请求处理：(3分，任选其一即可得满分)
① 后台PHP中
设置：header("Access-Control-Allow-Origin:*");
② 使用src属性+JSONP跨域。
<script type="text/javascript" src="请求地址"></ script>
要求后台返回回调函数名，并将返回数据通过参数传入，并在前台写好回调函数
③ JQuery实现JSONP：
$.ajax({
type:"post",
url:"http://localhost/H5-1705PHP/json.php",
dataType:"jsonp",
success:function(data){
console.log(data);
}
});
14、.CSS中的link和@import有什么区别？常用哪种？
(评分标准：满分6分，任选3条得满分)
① link属于标准的HTML标签，而@import不是标准标签；
② link可以兼容所有低版本浏览器，而@import只在CSS2之后能用；
③ link是将两个文件链接起来，起桥梁作用； 而@import相当于将CSS文件复制到HTML文件中；
④ link会在HTML文件边加载的过程中，边链接CSS文件；
@import会在HTML文件全部加载完以后，再导入CSS文件；
15、rgba()和opacity的透明效果有什么不同？
(评分标准：满分6分，每条3分，回答合理即可得分)
opacity：可以使当前元素的颜色、背景色以及所有子元素都透明
rgba()：只能使当前元素的颜色或背景色透明，对子元素没有影响。
二、编程题(每题10分,共10分)
二、编程题(共10分)
有这样一个URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，
将其按key-value形式返回到一个json结构中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}
var arr = [1,2,3,3,4,4,5,5,6,1,9,3,25,4];
var newArr = [];
for(var i=0; i<arr.length; i++){
if(newArr.indexOf(arr[i])<0){
newArr.push(arr[i]);
}
}
