一、选择
2. Location上的哪个属性更改不会刷新页面(D)
A. href (location.href 属性返回当前页面的 URL。)
B. search (从问号 (?) 开始的 URL（查询部分）)
C. host (主机名和当前 URL 的端口号)
D. hash (hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。)
location属性一般引用自Location对象，可以用于获取或者设置当前的URL。
window.location === document.location; //true 均引用自Location对象；
URL的一般组成包括：
eg: protocol://[user[:password]@]hostname:[port][/path][?query][#fragment]
获取URL的方式包括：
location.href
location.toString()
location.toLocaleString()
document.URL
设置URL的方式：
location.href = " xxx"; //不加协议会默认为相对路径，location="xxx"类似
window.location对象的其他属性包括：
location.host //主机加端口号
location.hostname //主机
location.port //端口号
location.protocol //协议
location.pathname //路径
location.hash //片段标识符，可以用于保存网页状态
location.search //返回链接内的查询字符串（包括问号，不包括片段标识符`#`部分）
每次修改location的属性（除hash外），页面都会以新URL重新加载；
虽然修改location.hash页面不会重新加载，但是会在浏览器中生成一条新的历史记录；
3. 以下哪个方法没有对数组进行遍历操作(D)
A. Reduce （reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。）
B. Map （map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。）
C. Sort （sort() 方法用于对数组的元素进行排序，默认排序顺序为按字母升序。）
D. Pop（移除最后一个数组元素）
链接：数组方法精选博客
4. userAgent属性不包含下列哪种信息(B)
A. 浏览器渲染引擎
B. 设备分辨率
C. 操作系统
D. 浏览器版本
User Agent中文名为用户代理，简称 UA，它是一个特殊字符串头，使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。
5. 在js中获取div标签对应的Dom对象oDiv, 执行oDiv.class = ‘duyi’，div标签上或出现（C）
A．class = ‘duyi’
B. className =‘duyi’
C.空
D. class=’’
oDiv.class=’‘duyi’; 并不能改变该对象的class属性；oDiv.className = ‘duyi’;可以修改该对象的class属性
className属性设置某个元素的class属性时将替换该元素原有的class设置。
如果需要的的“追加”效果而不是“替换”，可以利用字符串拼接操作，把新的class设置追加到className属性上去。
var oDiv=document.getElementById('a');
// oDiv.class = 'duyi';
oDiv.className='duyi';
console.log(oDiv);
二、填空
-
History可以通过_go(-2)_方法进行页面回退2步操作。
history.go(-1); // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面
history 对象提供了三个方法来访问历史列表：
history.back() 载入历史列表中前一个网址，相当于按下“后退”按钮。
history.forward() 载入历史列表中后一个网址（如果有的话），相当于按下“前进”按钮。
history.go() 打开历史列表中一个网址。要使用这个方法，必须在括号内指定一个正数或负数。例如 history.go(-2) 相当于按“后退”按钮两次。
go() 用法：history.go(x)；在历史的范围内去到指定的一个地址。如果 x < 0，则后退 x 个地址，如果 x > 0，则前进 x 个地址，如果 x == 0，则刷新现在打开的网页。history.go(0) 跟 location.reload() 是等效的 -
Label标签通过__for___属性和其他标签进行关联。
label中的for属性规定了label与哪个表单元素绑定。for属性的值和表单元素的id值一样，即可完成该label标签与该表单元素的绑定。
<label for="test">label标签</label>
<input type="text" id="test">
该label便签和input便签完成了绑定，当鼠标点击“label标签”时，input元素会被触发，用户即可完成输入。
- 模拟重力场的课中是通过_top = document.documentElement.clientHeight – oDiv.offsetHeight(当前页面高度-块的高度)_公式判断该物体正好运动到浏览器底部。
三、编程题
1. 定义数组：var arr = [{name: ‘cst’, age: ‘18’}, {name: ‘jc’, age: ‘20’}, {name: ‘dxm’, age: ‘50’} , {name: ‘dcg’, age: ‘30’}]。利用filter和map对数组进行操作：留下name中包含c的，并且让他们的年龄都乘2
var arr = [
{name: 'cst', age: '18'},
{name: 'jc', age: '20'},
{name: 'dxm', age: '50'},
{name: 'dcg', age: '30'}
]
var arr2 = arr.filter(function (ele) {
return ele.name.indexOf('c') != -1;
}).map(function (ele) {
ele.age *= 2;
return ele
})
console.log(arr2)
2.2. 用你能想到较好的，且通用方式把浏览器输入框上的网址，如：https://www.baidu.com/s?ie=utf-8&f=8。按以下几个部分划分并且创建对象：
○ 协议：https
○ 主机：www.baidu.com
○ 路径：/s
○ 参数：ie=utf-8&f=8
此对象属性和属性值形式如下：
{
protocol: 'https',
host：'www.baidu.com',
path: '/s',
search: {ie:'utf-8',f:'8'}
}
方式一、
var url = new URL("https://www.baidu.com/s?ie=utf-8&f=8");
function getUrlObj() {
var result = {
protocol: url.protocol,
host: url.hostname,
path: url.pathname,
search: {},
};
var str = url.search.substr(1);
var params = str.split("&");
params.reduce(function (pre, cur) {
// pre 函数累计执行后的结果
// cur 当前正在处理的数据
var items = cur.split("=");
pre[items[0]] = items[1];
return pre;
}, result.search);
console.log(result);
}
getUrlObj();
方式二、
var url = new URL('https://www.baidu.com/s?ie=utf-8&f=8')
function urlToObj() {
var result = {
protocol: url.protocol,
host: url.hostname,
path: url.pathname,
search:{}
}
for (param of url.searchParams) {
result.search[param[0]] = param[1]
}
console.log(result)
}
urlToObj()
3. 实现一个getDom(str)函数，可以根据参数（str形式如：’#id’、’.Class’、‘tag’）的不同选择对应选择不同的dom。
注：
○ '#id’此参数为根据id名称选择dom，.Class此参数为根据类名选择dom，'tag’此参数为根据标签名称获取dom。
○ 不能使用原生的getElementsByClassName方法
function trimClassName (dom) {
var reg = /\s+/g;
// 把所有的空格变成一个先
var newClassStr = dom.className.replace(reg, ' ');
return newClassStr;
};
//创建一个获取class元素方法
function getByClass(_className) {
var allDomArray = [].slice.call(document.getElementsByTagName('*'), 0);
//slice()通过索引位置获取新的数组，该方法不会修改原数组，只是返回一个新的子数组。
//getElementsByTagName()可以根据 标签名 获取一组元素节点对象，
var newDomArr = [];//创建新dom方法
allDomArray.forEach(function (ele, index) {
var newClassStr = trimClassName(ele).trim();//trim()删除左右两端的空格
var classNameArray = newClassStr.split(' ');
classNameArray.forEach(function (className, index) {
if (className == _className) {
newDomArr.push(ele);
}
})
});
return newDomArr;
};
function getDom(selector) {
this.length = 0;
if (selector.indexOf('.') != -1) {
var dom = getByClass( selector.slice(1) );
}else if (selector.indexOf('#') != -1) {
var dom = document.getElementById( selector.slice(1) );
}else {
var dom = document.getElementsByTagName(selector);
}
return dom;
} ;
4. 请尝试写出缓冲运动的效果。
function startMove (dom, target) {
clearInterval(timer);
var iSpeed = null;
timer = setInterval(function () {
iSpeed = (target - dom.offsetLeft) / 7;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (dom.offsetLeft == target) {
clearInterval(timer);
}else {
dom.style.left = dom.offsetLeft + iSpeed + 'px';
}
}, 30);
};
5. 请用伪代码（用中文分步描述逻辑）写出轮播图的制作思路。
软性答案
a. 布局 需要 overflow:hidden的标签（div），内部有ul且宽度足够容纳多个li：float变成一横排。
b. 引入之前的运动函数配合完成操作。
c. 用一个定时器控制时间间隔，利用运动函数让ul当前当前位置发生改变，每次移动一个li或最外侧div的宽度。
d. 添加左右点击事件，通过计算移动方向和移动距离控制ul左右移动
e. 利用闭包原理给每一个索引按钮绑定事件，事件处理函数可以根据当前索引值决定ul移动到哪个位置上。
扫一扫
294
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
