一、简答题(每题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]);
}
}