《JavaScript前端开发案例教程》课后习题及答案（黑马程序员编著）
- 课后习题
- 第一章
- 第二章
- 第三章
- 第四章
- 第五章
- 第六章
- 第七章
- 第八章
- 第九章
- 第十章
- 第十一章
- 第十二章
- 参考答案
- 第一章
- 第二章
- 第三章
- 第五章
- 第六章
- 第七章
- 第八章
- 第九章
- 第十章
- 第十一章
- 第十二章
课后习题
第一章
一、填空题
1.window.document.body可以简写为______。
2.console.log(alert(‘Hello’))在控制台的输出结果是______。
3.编辑器中“以UTF-8无BOM格式编码”中的BOM指的是______。
4.alert(‘测试’.length)的输出结果是______。
二、判断题
1.JavaScript是Java语言的脚本形式。（ ）
2.JavaScript中的方法名不区分大小写。（ ）
3.JavaScript语句结束时的分号可以省略。（ ）
4.通过外链式引入JavaScript时，可以省略标记。（ ）
三、选择题
1.定义函数使用的关键字是（ ）。
A. function B. func C. var D. new
2.为代码添加多行注释的语法为（ ）。
A.
B. // C. /* */ D. #
3.在对象的方法中访问属性name的语法为（ ）。
A. self.name B. this.name C. self.name() D. this.name()
四、编程题
1．利用本章知识，编写一个将用户输入的信息输出到网页的JavaScript程序。
第二章
一、填空题
1.Boolean(undefined)方法的运行结果等于______。
2.表达式(-5) % 3的运行结果等于______。
二、判断题
1.JavaScript中age与Age代表不同的变量。（ ）
2.$name在JavaScript中是合法的变量名。（ ）
3.运算符“.”可用于连接两个字符串。（ ）
三、选择题
1.下列选项中，不能作为变量名开头的是（ ）。
A. 字母 B. 数字 C. 下划线 D. $
2.下列选项中，与0相等（==）的是（ ）。
A. null B. undefined C. NaN D. ‘’
3.下列选项中，不属于比较运算符的是（ ）。
A. = = B. === C. ! == D. =
四、编程题
1.请编写程序求出1~100之间的素数。
2.有红、白、黑三种球若干个，其中红、白球共25个，白、黑球共31个，红、黑球共28个，求这三种球各有多少个？
第三章
一、填空题
1.表达式“[a, b] = [12, 34, 56]”执行后，变量b的值为______。
2.表达式“[1, 2, ‘1’, ‘2’].lastIndexOf(‘1’, 1)”的返回值是______。
二、判断题
1.被delete关键字删除的数组元素值，该元素依然占用一个空的存储位置。（ ）
2.表达式“[‘haha’, ‘xixi’].splice(4, 2)”的返回值是[‘haha’, ‘xixi’]。（ ）
3.表达式“Array.isArray(‘0’)”的返回值是false。（ ）
三、选择题
1.下列语句不能用于遍历数组的是（ ）。
A.for B.for…in C.for…of D.if
2.下列方法中，不能用于添加数组元素的是（ ）。
A. unshift() B. push() C.shift() D. splice()
3.下列选项中创建数组的方式错误的是（ ）。
A.var arr = new Array(); B. var arr = [];
C.var arr = new array(); D. var arr =[]; arr.length = 3;
四、编程题
1.移出数组arr（[1,2,3,4,2,5,6,2,7,2]）中与2相等的元素，并生成一个新数组，不改变原数组。
2.利用indexOf()函数统计数组arr（[‘a’,‘b’,‘d’,‘d’,‘c’,‘d’,‘d’]）中元素d出现的次数，并同时返回其对应的所有索引下标。
第四章
一、填空题
1.函数“((a, b) => a * b)(6, 2);”的返回值是______。
2.JavaScript中函数的作用域分为全局作用域、______ 和块级作用域。
3.表达式“[12, 15, 8].find(function(ele){return ele >=10})”的返回值是______。
二、判断题
1.函数showTime()与showtime()表示的是同一个函数。（ ）
2.函数内定义的变量都是局部变量。（ ）
3.匿名函数可避免全局作用域的污染。（ ）
三、选择题
1.阅读以下代码，执行fn1(4,5)的返回值是（）。
function fn1(x, y){
return (++x) + (y++);
}
A. 9 B.10 C.11 D.12
2.下列选项中，函数名称命名错误的是（ ）。
A. getMin B. show C. const D. it_info
3.下列选项中，可以用于获取用户传递的实际参数值的是（ ）。
A. arguments.length B. theNums C. params D. arguments
四、编程题
1.编写函数实现单击change按钮，为div元素添加红色双线的边框。
第五章
一、填空题
1.若var a = {}; 则console.log(a == {}); 的输出结果为______。
2.查询一个对象的构造函数使用______属性。
二、判断题
1.Number.MIN_VALUE表示最小的负数。（ ）
2.对象中未赋值的属性的值为undefined。（ ）
3.obj.name和obj[‘name’]访问到的是同一个属性。（ ）
三、选择题
1.调用函数时，不指明对象直接调用，则this指向（ ）对象。
A. document B. window C. Function D. Object
2.通过 [].constructor访问到的构造函数是（ ）。
A.Function B. Object C. Array D. undefined
3.Math对象的原型对象是（ ）。
A. Math.prototype B.Function.prototype C. Object D. Object.prototype
四、编程题
1.利用String对象的属性和方法实现过滤字符串前后空格。
2.编写代码模拟Object.create()的功能。
第六章
一、填空题
1.在BOM中，所有对象的父对象是______。
2.______ 方法用于在指定的毫秒数后调用函数。
3.history对象的______可获取历史列表中的URL数量。
二、判断题
1.全局变量可以通过window对象进行访问。（ ）
2.修改location对象的href属性可设置URL地址。（ ）
3.history对象调用pushState()方法会改变历史列表中URL的数量。（ ）
4.screen对象的outerHeight属性用于返回屏幕的高度。（ ）
三、选择题
1.下列选项中，描述正确的是（ ）。
A. resizeBy()方法用于移动窗口
B.pushState()方法可以实现跨域无刷新更改URL
C. window对象调用一个未声明的变量会报语法错误
D.以上选项都不正确
2.下面关于BOM对象描述错误的是（ ）。
A. go(-1)与back()皆表示向历史列表后退一步
B.通过confirm()实现的确认对话框，单击击确认时返回true
C. go(0)表示刷新当前网页
D.以上选项都不正确
四、编程题
1.编写程序，实现电子时钟自动走动的效果，并提供一个按钮控制电子时钟是否停止走动。
第七章
一、填空题
1.DOM中______方法可用于创建一个元素节点。
2.HTML DOM中的根节点是______。
二、判断题
1.document.querySelector('div ').classList可以获取文档中所有div的class值。（ ）
2.删除节点的removeChild()方法返回的是一个布尔类型值。（ ）
3.HTML文档每个换行都是一个文本节点。（ ）
4.document对象的getElementsByClassName()方法和getElementsByName()方法返回的都是元素对象集合HTMLCollection。（ ）
三、选择题
1.下面可用于获取文档中全部div元素的是（ ）。
A. document.querySelector(‘div’) B. document.querySelectorAll(‘div’)
C. document.getElementsByName(‘div’) D. 以上选项都可以
2.下列选项中，可以作为DOM的style属性操作的样式名为（ ）。
A. Background B. display C. background-color D. LEFT
3.下列选项中，可用于实现动态改变指定div中内容的是（ ）。
A.console.log() B. document.write() C. innerHTML D. 以上选项都可以
四、编程题
1.请利用HTML DOM实现全选、全不选、反选功能。
第八章
一、填空题
1.JavaScript为响应用户行为所执行的程序代码是指______。
2.JavaScript中通过______可为
二、判断题
1.在事件发生时，若未设置事件处理程序的参数，就不会产生事件对象。（ ）
2.IE8浏览器中可通过preventDefault()方法阻止a元素的默认行为。（ ）
3.事件对象的type属性可以获取发生事件的类型。（ ）
三、选择题
1.下列事件中，不会发生冒泡的是（ ）。
A. click B. mouseout C. blur D. keyup
2.Chrome浏览器中，获取鼠标单击页面位置的是（ ）。
A. clientX和clientY B. pageX和pageY
C. screenX和screenY D. scrollLeft和scrollTop
3.以下选项可在IE8浏览器中获取事件对象的是（ ）。
A. document.event B. 元素对象.event C. window.event D. 以上选项都不可以
四、编程题
1.请实现鼠标选中文本，先显示一个浮动工具栏，然后在工具栏里提供“分享”按钮。
2.请实现按ESC键关闭“打开的登录框”。
第九章
一、填空题
1.在正则表达式中， 用于匹配单词边界， 用于匹配非单词边界。
2.正则表达式中“()”既可以用于分组，又可以用于 。
二、判断题
1.正则表达式中，可通过反向引用获取子表达式的捕获内容。（ ）
2.正则表达式“[a-z]”和“[z-a]”表达的含义相同。（ ）
3.正则表达式“[^a]”的含义是匹配以a开始的字符串。（ ）
三、选择题
1.正则表达式“/[m][e]/gi”匹配字符串“programmer”的结果是（ ）。
A. m B. e C. programmer D. me
2.下列正则表达式的字符选项中，与“*”功能相同的是（ ）。
A.{0,} B.? C. + D. .
3.下列选项中，可以完成正则表达式中特殊字符转义的是（ ）。
A. / B. \ C. $ D. #
四、编程题
1.请利用正则表达式查找4个连续的数字或字符。
2.请利用正则表达式实现二代身份证号码的验证。
第十章
一、填空题
1.在发送请求时，HTTP的______头字段用于设置内容的编码类型。
2.XMLHttpRequest对象的______属性用于感知Ajax状态的转变。
二、判断题
1.JSON.parse()用于将一段JSON字符串转换为对象。（ ）
2.XMLHttpRequest对象的send()方法用于创建一个新的HTTP请求。（ ）
3.XMLHttpRequest对象的abort()方法用于取消当前请求。（ ）
三、选择题
1.下面关于setRequestHeader()方法描述正确的是（ ）。
A. 用于发送请求的实体内容
B. 用于单独指定请求的某个HTTP头
C. 此方法必须在请求类型为POST时使用
D. 此方法必须在open()之前调用
2.下面关于JSON对象形式描述错误的是（ ）。
A. JSON对象是以“{”开始，以“}”结束
B. JSON对象内部只能保存属性，不能保存方法
C. 键与值之间使用英文冒号“:”分隔
D. 通过“对象[‘属性名’]”的方式获取相关数据
3.阅读如下代码，输出结果为“李白”的选项为（ ）。
var data = [{“name”:“李白”,“age”:5},{“name”:“杜甫”,“age”:6}];
A. alert(data[0].name);
B. alert(data.0.name);
C. alert(data[0][‘name’]);
D. alert(data.0.[‘name’]);
四、编程题
1.编写Ajax表单验证程序，判断用户名是否已经被注册。
2.利用Ajax跨域请求获取指定地区的天气预报信息。
第十一章
一、填空题
1.jQuery显示隐藏的元素用______实现。
2.jQuery中______用于设置全局Ajax默认的选项。
二、判断题
1.选择器“$(‘:input’)”仅能获取表单中的input元素标签。（ ）
2.jQuery中的页面加载事件可以注册多个事件处理程序。（ ）
3.jQuery中的hover()方法可同时处理鼠标移入与移出事件的切换。（ ）
三、选择题
1.以下选项中，可以根据包含文本匹配到指定元素的是（ ）。
A. text() B. contains() C. input() D. attr()
2.下面选项中，可用来追加到指定元素的末尾的是（ ）。
A. insertAfter() B. append() C. appendTo() D. after()
3.如果想要获取指定元素的位置，以下可以使用的是（ ）。
A. offset() B. height() C. css() D. width()
四、编程题
1.请简述JavaScript中的window.onload 事件和jQuery中的ready()方法的区别。
2.请利用jQuery实现用户登录框的拖拽功能。
第十二章
一、填空题
1.jQuery中______可以获取复选框的所有选中值。
2.在jQuery中event对象的______属性可获取键盘按键值。
二、判断题
1.jQuery是对JavaScript封装的函数库。（ ）
2.变量aa = bb = 0，则aa变为3后，bb也等于3。（ ）
3.JSON是独立于语言的数据交换格式。（ ）
4.“{}”可用于在JavaScript中创建对象。（ ）
5.变量创建后，可以在任意位置使用。（ ）
三、选择题
1.循环语句for (var i=0; i = 1; i++) { } 的循环次数是（ ）。
A. 0 B.1 C.2 D.无限
2.下列选项中，不属于jQuery选择器的是（ ）。
A. 元素选择器 B. 属性选择器 C. CSS选择器 D. 分组选择器
3.下列选项中，（ ）可用来切换元素的可见状态。
A. show() B. hide() C. toggle() D. slideToggle()
参考答案
第一章
一、填空题
1.document.body
2.undefined
3.字节顺序标记
4.2
二、判断题
1.错。
2.错。
3.对。
4.错。
三、选择题
1.A
2.C
3.B
四、编程题
1.
<script>
// 接收用户输入的信息
var inputs = prompt('请自定义用户信息：');
// 输出到网页中
document.write(inputs);
</script>
第二章
一、填空题
1.false
2.-2
二、判断题
1.对。
2.对。
3.错。
三、选择题
1.B
2.D
3.D
四、编程题
1.素数概念：除了1和它本身以外不再有其他的因数，最小的素数为2。
<script>
// 遍历1~100之间的数据
for(var n=1;n<=100;n++){
if(n==1){
continue;
}else{
var flag=true;// 用来保存n是否为素数，默认n为素数
for(var j=2;j<n;j++){
if(n%j==0){// 若能被j整除，则n不是素数
flag = false;
}
}
}
if(flag){// 如果是质数，在网页中打印该数据
document.write("100以内的素数有："+n+'<br/>');
}
}
</script>
2.方式一：根据题目描述可知，红球最多为25个，白球最多为31个，黑球最多为28个。因此，依次遍历循环循环，按照条件对比即可。
<script>
for (var red = 0; red <= 25; ++red) {
for (var white = 0; white <= 31; ++white) {
for (var black = 0; black <= 28; ++black) {
if (((red + white) == 25) && ((white + black) == 31) && ((red + black) == 28)) {
document.write('红球：' + red + '，白球：' + white + '，黑球：' + black);
}
}
}
}
</script>
方式二：根据题目描述可知，每种颜色的球最多为多少个，选择一个颜色的球为基准，使用表达式表示出另外两种球的个数，最后再根据条件进行判断即可。假设以白球为基准，最多为31个，遍历并计算红和黑球。
<script>
for (var w = 0; w <= 31; ++w) {
var r = 25 - w;
var b = 31 - w;
if ((r + b) == 28) {
document.write('红球：' + r + '，白球：' + w +'，黑球：' + b);
}
}
</script>
第三章
一、填空题
1.34
2.-1
二、判断题
1.对。
2.错。
3.对。
三、选择题
1.D
2.C
3.C
四、编程题
1.。
<script>
// 创建数组
var arr = [1,2,3,4,2,5,6,2,7,2];
// index表示新数组newarr的下标，默认为0
var index = 0,newarr = [];
// 遍历数组
for(var i in arr){
// 数组元素不全等于2,则将其保存到newarr中
if(arr[i] !== 2){
newarr[index] = arr[i];
++index;
}
}
</script>
<script>
// 创建数组
var arr = ['a','b','d','d','c','d','d'];
// 待查找的元素
var search= 'd';
// nwarr保存search在arr中的下标，i用于指定查找位置，j用于设置newarr的下标
var newarr = [],i=j=0;
while(i < arr.length){
// 在arr中从i开始查找search，查找到第一个停止，返回对应的下标，没有找到返回-1
var res = arr.indexOf(search,i);
// 在arr中找到search
if ( res !== -1) {
newarr[j] = res; // 将当前查找的元素下标保存到newarr中
i = res + 1; // 从新指定查找的位置
++j; // 改变newarr的下标
}
}
console.log('arr中元素d出现的次数:'+newarr.length+'；对应的所有索引下标:'+newarr);
</script>
第四章
一、填空题
1.12
2.函数作用域
3.12
二、判断题
1.错。
2.错。
3.对。
三、选择题
1.B
2.C
3.D
四、编程题
1.
<style>
div{ width:50px; height: 50px; border:1px solid;}
</style>
<div></div>
<p> <button id="btn">change</button> </p>
<script>
var btn = document.getElementById('btn');
var div = document.getElementsByTagName('div')[0];
btn.onclick = function () {
div.style.border = 'double red';
}
</script>
第五章
一、填空题
1.false
2.constructor
二、判断题
1.错。
2.对。
3.对。
三、选择题
1.B
2.C
3.D
四、编程题
1.
<script>
String.prototype.trim = function() {
return this.replace(/(^\s*)|(\s*$)/g, '');
};
String.prototype.ltrim = function() {
return this.replace(/(^\s*)/g, '');
};
String.prototype.rtrim = function() {
return this.replace(/(\s*$)/g, '');
};
</script>
Object.prototype.create = function(obj) {
if (Object.prototype.create) {
return Object.prototype.create;
}
function F() {}
F.prototype = obj;
return new F();
};
第六章
一、填空题
1.window或window对象
2.setTimeout()
3.length或length属性
二、判断题
1.对。
2.对。
3.对。
4.错。
三、选择题
1.B
2.D
四、编程题
1.
<style>
div{
height:50px;
line-height:50px;
text-align:center;
border:double #ccc;
width:100px;
}
</style>
<div id="clock"></div><p><button id="btn">暂停/开始</button></p>
<script>
window.onload = startTime;
var timer = null;
function startTime()
{
var now = new Date(); // 获取当前的时间的毫秒数
var h = now.getHours(); // 获取now的小时 (0 ~ 23)
var m = now.getMinutes(); // 获取now的分钟 (0 ~ 59)
var s = now.getSeconds(); // 获取now的秒数 (0 ~ 59)
// 利用两位数字表示 分钟 和 秒数
m = m < 10 ? '0'+ m : m;
s = s < 10 ? '0'+ s : s;
document.getElementById('clock').innerHTML = h + ":" + m + ":" + s
timer = setTimeout('startTime()', 500);
}
// 通过按钮控制时钟暂停或开始
document.getElementById('btn').onclick = function(){
if(timer){
clearTimeout(timer);
timer = null;
}else{
startTime();
}
}
</script>
第七章
一、填空题
1.document.createElement()
2.标签
二、判断题
1.错。
2.错。
3.对。
4.错。
三、选择题
1.B
2.B
3.C
四、编程题
1.
<style>
table{width:80%; border:1px solid #69c; border-collapse: collapse; margin:10px auto;}
table tr th,table tr td{border:1px solid #69c; height:30px; font-size: 12px;
text-align: center;}
</style>
<table>
<tr><th>操作</th><th>编号</th><th>图书名称</th><th>价格</th></tr>
<tr>
<td><input type="checkbox" name="books"></td>
<td>1</td><td>测试1</td><td>39.90</td>
</tr>
<tr>
<td><input type="checkbox" name="books"></td>
<td>2</td><td>测试2</td><td>78.90</td>
</tr>
<tr>
<td><input type="checkbox" name="books"></td>
<td>3</td><td>测试3</td><td>30.90</td>
</tr>
<tr><td colspan="4">
<input id="checkAll" type="button" value="全选">
<input id="checkNone" type="button" value="全不选">
<input id="checkInvert" type="button" value="反选">
</td><tr>
</table>
<script>
(function(){
// 分别获取全选按钮、全不选按钮、反选按钮
var checkAll = document.getElementById('checkAll');
var checkNone = document.getElementById('checkNone');
var checkInvert = document.getElementById('checkInvert');
// 获取所有复选框
var checkboxes = document.getElementsByName('books');
checkAll.onclick = function(){// 全选
for(var i in checkboxes){
checkboxes[i].checked = true;
}
};
checkNone.onclick = function(){// 全不选
for(var i in checkboxes){
checkboxes[i].checked = false;
}
};
checkInvert.onclick = function(){// 反选
for(var i in checkboxes){
checkboxes[i].checked = checkboxes[i].checked ? false : true;
}
};
})();
</script>
第八章
一、填空题
1.事件处理程序
2.事件监听
二、判断题
1.错。
2.错。
3.对。
三、选择题
1.C
2.B
3.C
四、编程题
1.
① CSS样式-
<style>
#toolbar {border: 1px solid #ff5c00; border-radius: 8px;width: 60px;position: absolute;height: 30px;line-height: 30px; top: 0; left: 0;display: none;background-color: #fff;text-align: center; font-size: 12px; }
#toolbar e { position: absolute;top: -5px;left: 20px;width: 10px;height: 5px;background: url(arrow.gif) no-repeat; }
</style>
② 编写HTML
<div id="share">显示悬浮工具栏。</div><div>不显示悬浮工具栏</div>
<div id="toolbar"><e></e><span>分享<span></div>
④ 事件处理
<script>
var toolbar = document.getElementById('toolbar');
var share = document.getElementById('share');
share.onmouseup = function (event) {
// 获取鼠标按下时的位置
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// 判断是否有文本选中，选中则显示浮动工具栏
if (window.getSelection().toString() || document.selection.createRange().text) {
toolbar.style.display = 'block';
// 设置浮动工具栏的显示位置
toolbar.style.left = pageX - 20 + 'px';
toolbar.style.top = pageY + 10 + 'px';
}
};
document.onmousedown = function (event) {
var event = event || window.event;
var target = event.target || event.srcElement;
var targetId = target.id;
//没有发生在toolbar身上才隐藏悬浮工具栏
if (targetId != "toolbar") {
toolbar.style.display = 'none';
}
}
</script>
① CSS样式
<style>
.login-header { width: 100%;text-align: center;height: 30px; font-size: 24px;line-height: 30px;}
* {margin: 0;padding: 0;}
.box { width: 400px; height: 300px;border: 5px solid #eee;box-shadow: 2px 2px 2px 2px #666;position: absolute;top: 15%;left: 30%;display: none;}
.hd { width: 100%; height: 25px; background-color: #7c9299; border-bottom: 1px solid #369; line-height: 25px; color: white;cursor: move;}
#box_close {float: right; cursor: pointer;}
</style>
② 编写HTML
<div class="login-header"><a id="link">点击，弹出登录框</a></div>
<div class="box" id="box">
<div class="hd" id="drop">注册信息 (可以拖拽)
<span id="box_close">【关闭】</span>
</div>
<div class="bd"></div>
</div>
③ JavaScript处理键盘按键
<script>
// 获取“点击，弹出登录框”的链接、登录框的关闭按钮、登录框、页面背景色
var link = document.getElementById("link");
var closeBtn = document.getElementById("box_close");
var login = document.getElementById("box");
// 点击登录 显示登录框和遮罩
link.onclick = function () {
login.style.display = "block";
}
// 点击关闭按钮 隐藏登录框和遮罩
closeBtn.onclick = function () {
login.style.display = "none";
}
// 按下键盘上的ESC键 隐藏登录框和遮罩
document.onkeydown = function (e) {
console.log(e.keyCode);//ESC键的键盘码是27
if (e.keyCode === 27) {
closeBtn.onclick();
}
}
</script>
第九章
一、填空题
1.\b，\B
2.改变限定符的作用范围
二、判断题
1.对。
2.错。
3.错。
三、选择题
1.D
2.A
3.B
四、编程题
1.
// 定义正则
var reg = /[0-9]{4}|[a-z]{4}/gi;
// 测试
console.log('12abcd3456'.match(reg));
2.
// 定义正则
var reg = /^\d{6}\d{4}[01]\d[0123]\d\d{3}[\d|X]$/i;
// 测试
console.log('110555199006167471'.match(reg));
第十章
一、填空题
1.Content-Type
2.onreadystatechange事件
二、判断题
1.对。
2.对。
3.对。
三、选择题
1.B
2.B
3.A、C
四、编程题
1.
输入用户名：<input id="username" type="text">
<input id="chk" type="button" value="检测是否可用">
<script>
var chk = document.getElementById('chk');
var username = document.getElementById('username');
chk.onclick = function() {
if (username.value === '') {
alert('用户名不能为空！');
return false;
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
var data = JSON.parse(xhr.responseText);
if (data.isReg) {
alert('对不起，该用户名已经被注册');
} else {
alert('恭喜您，该用户名可以注册！');
}
} else {
alert('服务器发生错误。');
}
}
};
xhr.open('GET', 'user.php?username=' + username.value);
xhr.send();
};
</script>
user.php
<?php
$username = 'admin';
echo json_encode(['isReg' => ($_GET['username'] == $username)]);
2.
<div id="weather"></div>
<script>
var weather = document.getElementById('weather');
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
var data = JSON.parse(xhr.responseText).weatherinfo;
weather.innerHTML = data.city + ' ' + data.weather + ' ' + data.temp2;
}
}
};
xhr.open('GET', 'weather.php');
xhr.send();
</script>
weather.php
<?php
echo file_get_contents('http://www.weather/data/cityinfo/101010100.html');
第十一章
一、填空题
1.show()
2.$ .ajaxSetup()
二、判断题
1.错。
2.对。
3.对。
三、选择题
1.B
2.D
3.A
四、编程题
1.
① 执行时机：JavaScript中window.onload必须等待网页中的所有内容加载完成后（包括外部元素，如图片）才能执行，而jQuery中的ready()网页中的所有DOM结构绘制完成后就执行（可能关联内容并未加载完成）。
② 编写个数：JavaScript中window.onload不能同时编写多个，而jQuery中的ready()能够同时编写多个。
③ 简化写法：jQuery中的ready()可以简写为$()。
① CSS样式
<style>
.login-header { width: 100%;text-align: center;height: 30px; font-size: 24px;line-height: 30px;}
* {margin: 0;padding: 0;}
.box { width: 400px; height: 300px;border: 5px solid #eee;box-shadow: 2px 2px 2px 2px #666;position: absolute;top: 15%;left: 30%;}
.hd { width: 100%; height: 25px; background-color: #7c9299; border-bottom: 1px solid #369; line-height: 25px; color: white;cursor: move;}
#box_close {float: right; cursor: pointer;}
</style>
② 编写HTML
<div class="box" id="box">
<div class="hd" id="drop">注册信息 (可以拖拽)
<span id="box_close">【关闭】</span>
</div>
<div class="bd"></div>
</div>
③ 处理拖拽事件
<script type="text/javascript" src="jQuery-1.12.4.min.js"></script>
<script>
$("#drop").mousedown(function (event) {// 鼠标在拖动条上 按下 可拖动盒子
var event = event || window.event;
// 获取鼠标按下时的位置
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// 计算鼠标按下的位置 距 盒子的位置
var spaceX = pageX - parseInt($("#box").offset().left);
var spaceY = pageY - parseInt($("#box").offset().top);
// 鼠标移动的时候 获取鼠标的位置 整个盒子跟着鼠标的位置走
$(document).mousemove(function (event) {
var event = event || window.event;
// 获取移动后鼠标的位置
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// 计算并设置盒子移动后的位置
var l = parseInt(pageX - spaceX),t = parseInt(pageY - spaceY);
$("#box").offset({left:l, top:t});
// 清理鼠标拖动时，选中拖动条中文字的情况
window.getSelection().removeAllRanges() || document.selection.empty();
});
});
$(document).mouseup(function () {// 释放鼠标按键时 取消盒子的移动
$(document).unbind("mousemove")
});
</script>
第十二章
一、填空题
1.:checked
2.which
二、判断题
1.对。
2.错。
3.对。
4.对。
5.错。
三、选择题
1.D
2.C
3.C
更多推荐
《JavaScript前端开发案例教程》课后习题及答案（黑马程序员编著）
发布评论