《JavaScript前端开发案例教程》------第11章jQuery课后练习

一、填空题

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()可以简写为$()。

2

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