JavaScript前端开发之章节课后习题及答案

第一章

• 填空题

1. window.document.body可以简写为__document.body____。
2. console.log(alert('Hello'))在控制台的输出结果是__undefined____。
3. 编辑器中“以UTF-8无BOM格式编码”中的BOM指的是__字节顺序标记____。
4. alert('测试'.length)的输出结果是__2____。

• 判断题

1. JavaScript是Java语言的脚本形式。（ 错 ）
2. JavaScript中的方法名不区分大小写。（ 错 ）
3. JavaScript语句结束时的分号可以省略。（ 对 ）
4. 通过外链式引入JavaScript时，可以省略</script>标记。（错 ）

• 选择题

1. 定义函数使用的关键字是（A）。

        A. function   B. func    C. var    D. new

     2.为代码添加多行注释的语法为（ C ）。

        A. <!-- -->    B. //    C. /*  */    D. #

     3.在对象的方法中访问属性name的语法为（ B ）。

        A. self.name    B. this.name    C. self.name()    D. this.name()

• 编程题

1. 利用本章知识，编写一个将用户输入的信息输出到网页的JavaScript程序。

<script>
	// 接收用户输入的信息
	var inputs = prompt('请自定义用户信息：');
	// 输出到网页中
	document.write(inputs);
</script>

第二章

• 填空题

1. Boolean(undefined)方法的运行结果等于__false____。
2. 表达式(-5) % 3的运行结果等于___-2___。

• 判断题

1. JavaScript中age与Age代表不同的变量。（ 对 ）
2. $name在JavaScript中是合法的变量名。（ 对 ）
3. 运算符“.”可用于连接两个字符串。（ 错 ）

• 选择题

1. 下列选项中，不能作为变量名开头的是（ B ）。

        A. 字母 B. 数字  C. 下划线 D. $

     2.下列选项中，与0相等（==）的是（ D ）。

        A. null   B. undefined C. NaN      D. ''

数字和字符串有隐试转换规则：

1. 任何非零的数为true，0为false。

2. 字符串来说任何非空字符串为 true，空字符串为false。

   所以 0转换成布尔为false ,“”转化成布尔为false 所以结果为true

3. 如若使用非自动隐试转换判断可以使用=== 或者 !==替代 ==和!==

     3.下列选项中，不属于比较运算符的是（ D ）。

        A. ==   B. ===     C. !==      D. =

• 编程题

1. 请编写程序求出1~100之间的素数。

<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>

1. 有红、白、黑三种球若干个，其中红、白球共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>

第三章

• 填空题

1. 表达式“[a, b] = [12, 34, 56]”执行后，变量b的值为___34___。
2. 表达式“[1, 2, '1', '2'].lastIndexOf('1', 1)”的返回值是___-1__。

lastIndexOf 是从末尾开始检索的，参数一是查找的数据，参数二是起始位置。此处起始位置 为 1 ， 因此从 2 开始往前查找，未找到，返回 -1。

• 判断题

1. 被delete关键字删除的数组元素值，该元素依然占用一个空的存储位置。（ 对 ）
2. 表达式“['haha', 'xixi'].splice(4, 2)”的返回值是['haha', 'xixi']。（ 错 ）

splice 返回的是一个数组，数组里面为删除掉的元素。此处 起始位置为4大于数组总数，因此没有数据被删除，所以返回一个空数组。

     3.表达式“Array.isArray('0')”的返回值是false。（ 对 ）

• 选择题

1. 下列语句不能用于遍历数组的是（ D ）。

        A.for B.for…in C.for…of D.if

     2.下列方法中，不能用于添加数组元素的是（ C ）。

        A. unshift() B. push() C.shift()       D. splice()

     3.下列选项中创建数组的方式错误的是（ C ）。

        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相等的元素，并生成一个新数组，不改变原数组。

<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>

1. 利用indexOf()函数统计数组arr（['a','b','d','d','c','d','d']）中元素d出现的次数，并同时返回其对应的所有索引下标。

<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. 函数“((a, b) => a * b)(6, 2);”的返回值是___12___。（箭头函数）
2. JavaScript中函数的作用域分为全局作用域、___函数作用域___和块级作用域。
3. 表达式“[12, 15, 8].find(function(ele){return ele >=10})”的返回值是___12___。

find函数返回满足回调函数的第一个元素的值，否则返回undefined

• 判断题

1. 函数showTime()与showtime()表示的是同一个函数。（ 错 ）
2. 函数内定义的变量都是局部变量。（ 错 ）
3. 匿名函数可避免全局作用域的污染。（ 对 ）

• 选择题

1. 阅读以下代码，执行fn1(4,5)的返回值是（B）。

        function fn1(x, y){

          return (++x) + (y++);

        }

        A. 9  B.10  C.11  D.12

     2.下列选项中，函数名称命名错误的是（ C ）。

        A. getMin   B. show      C. const      D. it_info

     3.下列选项中，可以用于获取用户传递的实际参数值的是（ C ）。

        A. arguments.length  B. theNums      C. params     D. arguments

        arguments，它是js中函数内置的一个对象，而执行函数方法的实参中值都存储在arguments中。

• 编程题

1. 编写函数实现单击change按钮，为div元素添加红色双线的边框。

<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. 若var a = {}; 则console.log(a == {}); 的输出结果为___false___。
2. 查询一个对象的构造函数使用___constructor___属性。

• 判断题

1. Number.MIN_VALUE表示最小的负数。（ 错 ）//最小正值
2. 对象中未赋值的属性的值为undefined。（ 对 ）
3. obj.name和obj['name']访问到的是同一个属性。（ 对 ）

• 选择题

1. 调用函数时，不指明对象直接调用，则this指向（ B ）对象。

        A. document    B. window    C. Function    D. Object

     2.通过 [].constructor访问到的构造函数是（ C ）。

        A.Function     B. Object     C. Array       D. undefined

     3.Math对象的原型对象是（ D ）。

        A. Math.prototype   B.Function.prototype   C. Object   D. Object.prototype

• 编程题

1. 利用String对象的属性和方法实现过滤字符串前后空格。

<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, '');
 };

1. 编写代码模拟Object.create()的功能。

Object.prototype.create = function(obj) {
    if (Object.prototype.create) {
        return Object.prototype.create;
    }
    function F() {}
        F.prototype = obj;
        return new F();
    };

第六章

• 填空题

1. 在BOM中，所有对象的父对象是___window___。
2. ___setTimeout（）___方法用于在指定的毫秒数后调用函数。
3. history对象的___length___可获取历史列表中的URL数量。

• 判断题

1. 全局变量可以通过window对象进行访问。（ 对 ）
2. 修改location对象的href属性可设置URL地址。（ 对 ）
3. history对象调用pushState()方法会改变历史列表中URL的数量。（ 对 ）
4. screen对象的outerHeight属性用于返回屏幕的高度。（ 错 ）

• 选择题

1. 下列选项中，描述正确的是（ B ）。

        A. resizeBy()方法用于移动窗口

        B.pushState()方法可以实现跨域无刷新更改URL

        C. window对象调用一个未声明的变量会报语法错误

        D.以上选项都不正确

     2.下面关于BOM对象描述错误的是（ D ）。

        A. go(-1)与back()皆表示向历史列表后退一步

        B.通过confirm()实现的确认对话框，单击击确认时返回true

        C. go(0)表示刷新当前网页

        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. DOM中___doucument.createElement()___方法可用于创建一个元素节点。
2. HTML DOM中的根节点是___<html>标签___。

• 判断题

1. document.querySelector('div ').classList可以获取文档中所有div的class值。（ 错 ）
2. 删除节点的removeChild()方法返回的是一个布尔类型值。（ 错 ）//返回的是标签
3. HTML文档每个换行都是一个文本节点。（ 对 ）
4. document对象的getElementsByClassName()方法和getElementsByName()方法返回的都是元素对象集合HTMLCollection。（ 错 ）

• 选择题

1. 下面可用于获取文档中全部div元素的是（ B ）。

        A. document.querySelector('div')   B. document.querySelectorAll('div')

        C. document.getElementsByName('div') D. 以上选项都可以

    2.下列选项中，可以作为DOM的style属性操作的样式名为（ B ）。

        A. Background   B. display C. background-color        D. LEFT

    3.下列选项中，可用于实现动态改变指定div中内容的是（ C ）。

        A.console.log()   B. document.write() C. innerHTML D. 以上选项都可以

• 编程题

1. 请利用HTML DOM实现全选、全不选、反选功能。

<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. JavaScript为响应用户行为所执行的程序代码是指___事件处理程序___。
2. JavaScript中通过___事件监听___可为<div>的mouseover事件绑定多个事件处理程序。

• 判断题

1. 在事件发生时，若未设置事件处理程序的参数，就不会产生事件对象。（ 错 ）
2. IE8浏览器中可通过preventDefault()方法阻止a元素的默认行为。（ 错 ）//IE浏览器不支持
3. 事件对象的type属性可以获取发生事件的类型。（ 对 ）

• 选择题

1. 下列事件中，不会发生冒泡的是（ C ）。

        A. click       B. mouseout   C. blur     D. keyup

     2.Chrome浏览器中，获取鼠标单击页面位置的是（ B ）。

        A. clientX和clientY      B. pageX和pageY

        C. screenX和screenY           D. scrollLeft和scrollTop

     3.以下选项可在IE8浏览器中获取事件对象的是（ C ）。

        A. document.event   B. 元素对象.event C. window.event D. 以上选项都不可以

• 编程题

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>

1. 请实现按ESC键关闭“打开的登录框”。

① 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. 正则表达式“[a-z]”和“[z-a]”表达的含义相同。（ 错 ）
3. 正则表达式“[^a]”的含义是匹配以a开始的字符串。（ 错 ）

• 选择题

1. 正则表达式“/[m][e]/gi”匹配字符串“programmer”的结果是（ D ）。

                A. m B. e C. programmer D. me

     2.下列正则表达式的字符选项中，与“*”功能相同的是（ A ）。

                A.{0,} B.? C. + D. .

     3.下列选项中，可以完成正则表达式中特殊字符转义的是（ B ）。

                A. / B. \  C. $ D. #

• 编程题

1. 请利用正则表达式查找4个连续的数字或字符。

// 定义正则
var reg = /[0-9]{4}|[a-z]{4}/gi;
// 测试
console.log('12abcd3456'.match(reg));

1. 请利用正则表达式实现二代身份证号码的验证。

// 定义正则
var reg = /^\d{6}\d{4}[01]\d[0123]\d\d{3}[\d|X]$/i;
// 测试
console.log('110555199006167471'.match(reg));

第十章

• 填空题

1. 在发送请求时，HTTP的___Content-Type___头字段用于设置内容的编码类型。
2. XMLHttpRequest对象的___onreadystatechange事件___属性用于感知Ajax状态的转变。

• 判断题

1. JSON.parse()用于将一段JSON字符串转换为对象。（ 对 ）
2. XMLHttpRequest对象的send()方法用于创建一个新的HTTP请求。（ 对 ）
3. XMLHttpRequest对象的abort()方法用于取消当前请求。（ 对 ）

• 选择题

1. 下面关于setRequestHeader()方法描述正确的是（ B ）。

        A. 用于发送请求的实体内容

        B. 用于单独指定请求的某个HTTP头

        C. 此方法必须在请求类型为POST时使用

        D. 此方法必须在open()之前调用

     2.下面关于JSON对象形式描述错误的是（ B ）。

        A. JSON对象是以“{”开始，以“}”结束

        B. JSON对象内部只能保存属性，不能保存方法

        C. 键与值之间使用英文冒号“:”分隔

        D. 通过“对象['属性名']”的方式获取相关数据

     3.阅读如下代码，输出结果为“李白”的选项为（ A、C  ）。

        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表单验证程序，判断用户名是否已经被注册。

输入用户名：<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)]);

1. 利用Ajax跨域请求获取指定地区的天气预报信息。

<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.com.cn/data/cityinfo/101010100.html');

第十一章

• 填空题

1. jQuery显示隐藏的元素用___show()___实现。
2. jQuery中___$.ajaxSetup()___用于设置全局Ajax默认的选项。

• 判断题

1. 选择器“$(':input')”仅能获取表单中的input元素标签。（ 错  ）
2. jQuery中的页面加载事件可以注册多个事件处理程序。（ 对 ）
3. jQuery中的hover()方法可同时处理鼠标移入与移出事件的切换。（ 对 ）

• 选择题

1. 以下选项中，可以根据包含文本匹配到指定元素的是（ B ）。

        A. text()       B. contains() C. input()      D. attr()

     2.下面选项中，可用来追加到指定元素的末尾的是（ D ）。

        A. insertAfter()   B. append()     C. appendTo()      D. after()

insertAfter(content)  把所匹配到的内容插入到content元素的尾部

append(content) 把content内容追加到匹配元素内容的尾部

appendTo() 把匹配到的内容插入到content内容的尾部

after() 把content内容插入到元素的尾部

     3.如果想要获取指定元素的位置，以下可以使用的是（ A ）。

        A. offset()       B. height()     C. css()      D. width()

• 编程题

1. 请简述JavaScript中的window.onload 事件和jQuery中的ready()方法的区别。

①  执行时机：JavaScript中window.onload必须等待网页中的所有内容加载完成后（包括外部元素，如图片）才能执行，而jQuery中的ready()网页中的所有DOM结构绘制完成后就执行（可能关联内容并未加载完成）。

② 编写个数：JavaScript中window.onload不能同时编写多个，而jQuery中的ready()能够同时编写多个。

③ 简化写法：jQuery中的ready()可以简写为$()。

1. 请利用jQuery实现用户登录框的拖拽功能。

① 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. jQuery中___:checked___可以获取复选框的所有选中值。
2. 在jQuery中event对象的___which___属性可获取键盘按键值。

• 判断题

1. jQuery是对JavaScript封装的函数库。（ 对 ）
2. 变量aa = bb = 0，则aa变为3后，bb也等于3。（ 错 ）
3. JSON是独立于语言的数据交换格式。（ 对 ）
4. “{}”可用于在JavaScript中创建对象。（ 对 ）
5. 变量创建后，可以在任意位置使用。（ 错 ）

• 选择题

1. 循环语句for (var i=0; i = 1; i++) { } 的循环次数是（ D ）。

                A. 0 B.1   C.2 D.无限

     2.下列选项中，不属于jQuery选择器的是（ C ）。

                A. 元素选择器  B. 属性选择器   C. CSS选择器   D. 分组选择器

     3.下列选项中，（ C ）可用来切换元素的可见状态。

                A. show()      B. hide()   C. toggle()  D. slideToggle()