欢迎使用CSDN-markdown编辑器

Jquery 基础教程课后练习 2~6章

第二章

1.给位于嵌套列表第二层次的所有（li）元素添加special类；
2.给位于表格第三列的所有单元格添加year类；
3.为表格中包含文本Tragedy的第一行添加special类；
4.选择包含链接（a）的所有列表项（li元素），为每个选中的列表项的同辈列表项添加afterlink类；
5.为与.pdf链接最接近的祖先元素（ul）添加tragedy类。
代码如下：

// 1        $('#selected-plays > li > ul > li').addClass('special');    // 2        $('tr').find('td:eq(2)').addClass('year');    // 3        $('td:contains(Tragedy)').parent().filter('tr:eq(0)').addClass('special');    // 4        $('a').parent().siblings().not('li:has(a)').addClass('afterlink');    // 5        $('a[href$=".pdf"]').parents('ul:eq(0)').addClass('tragedy');

注意html结构，互相之间的父子关系
效果如下：

第三章

1.在Charles Dickens被单击时，给它应用selected样式；
2.在双击章标题时，切换章文本可见性；
3.当用户按下右方向键（键码39）时，切换到下一个body类；
4.使用console.log（）函数记录在段落中移动的鼠标的坐标位置；
5.使用.mousedown() 和.mouseup()跟踪页面中鼠标事件。如果鼠标按键在按下它的地方释放，则为所有段落添加hidden类。如果在按下它的地方被释放，删除所有段落的hidden类。
代码如下：

// 1    $('.author').click(function () {        $(this).addClass('selected');    });    // 2    $('.chapter-title').dblclick(function () {        $('.chapter-title').toggleClass('hidden')    });    // 3    $(document).keyup(function (event) {        var num = $('#switcher button').filter('.selected').index()-1;        if(event.which == 39) num = (num+1)%3;        var btnClassname = $('#switcher button').eq(num).attr('id').split("-")[1];        setBodyClass(btnClassname);    });    // 4    $(function(){        $(document).mouseover(function(event) {            console.log(event.pageX);            console.log(event.pageY);        })    });    // 5    $(function(){        var posx_down,posx_up,posy_down,posy_up;        $(document).mousedown(function(event){            posx_down=event.clientX;            posy_down=event.clientY;        });        $(document).mouseup(function(event){            posx_up=event.clientX;            posy_up=event.clientY;            if(posx_down == posx_up && posy_down == posy_up){                $("p").addClass("hidden");            }else if(posy_down<posy_up){                $("p").removeClass("hidden");            }        })    });

第四章

1.修改样式表，一开始先隐藏页面内容，当页面加载后，慢慢淡入内容；
2.在鼠标悬停到段落上面时，给段落应用黄色背景；
3.点击标题（h2）使其不透明度变为25%，同时添加20px左外边距，当这两个效果完成后，把讲话文本变成50%不透明度；
4.按下方向键时，使样式转换器向相应的方向平滑移动20像素，方向键键码分别是 37（左），38（上），39（右），40（下）。
代码如下：

//1    $('body').css('display', 'none');    $('body').fadeIn('20000');    //2    $('p')        .mouseover(function () {            $(this).css('backgroundColor', 'yellow');        })        .mouseout(function () {            $(this).css('backgroundColor', 'white');        })    ;    // 3    $('h2').click(function () {        $(this)            .fadeTo('fast', 0.25)            .animate({paddingLeft: '+=200' + 'px'}, {                duration: 'slow',                queue: false            })            .queue(function (next) {                $('.speech').fadeTo('slow', 0.5)            });    });    // 4    var key_left = 37;    var key_up = 38;    var key_right = 39;    var key_down = 40;    var $switcher = $('#switcher');    $switcher.css('position', 'relative');    $(document).keyup(function (event) {        switch (event.which) {            case key_left:                $switcher                    .animate({                        left: '-=20px'                    }, {                        duration: 'fast'                    });                break;            case key_up:                $switcher                    .animate({                        top: '-=20px'                    }, {                        duration: 'fast'                    });                break;            case key_right:                $switcher                    .animate({                        left: '+=20px'                    }, {                        duration: 'fast'                    });                break;            case key_down:                $switcher                    .animate({                        top: '+=20px'                    }, {                        duration: 'fast'                    })        }    });

第五章

1修改添加back to top链接代码，以便这些链接只从第四段后面才开始出现；
2.在单击back to top链接时，为每个链接后面添加一个新段落，其中包含You were here字样；
3.单击作者名称时，把文本改为粗体（添加标签，不操作css）；
4.在随后单击粗体作者名称时，删除之前添加的（b）元素；
5.为正文中每一个段落添加一个inhabitants类，但不能调用.addClass()方法。
代码如下：

1    $('<a href="#top">back to top</a>').insertAfter('div.chapter p:gt(2)');    $('<a id ="top"></a>').prependTo('body');// 2    $('a[href $= "#top"]').on('click', function(){        $('<p>You were here</p>').insertAfter(this);    });// 3,4    var i = 0;    $('#f-author').on('click', function() {        if (i == '0') {            $(this).wrap("<strong></strong>");            i = 1;        }else {            $(this).unwrap();            i = 0;        }    });// 5    $('.chapter p').wrapInner('<div class = "inhabitants"></div>');

第六章

1.页面加载后，把exercises-content.html的主体（body）内容提取到页面的内容区域；
2.不要一次就显示整个文档，为左侧字母表创建“提示条”，当用户鼠标放到字母上时，从exercises-content.html中加载与该字母有关内容；
3.为页面加载添加错误处理功能，在页面的内容区显示错误消息，修改脚本，请求does-not-exist.html而不是exercises-content.html，以测试错误处理功能。
4.页面加载后向Twitter发送一个JSONP请求，取得用户最新的五条消息，插入到页面内容区，取得用户kswedberg最后5条消息的url是http：//twitter.com/status/user_timeline/kswedberg.jason?count=5
代码如下：

 //1    $('#dictionary').load('exercises-content.html');   // 2 3   // 鼠标放上出现提示    $('h3').mouseenter(function () {            var letter_id =$(this).parent().attr('id');            $(this).parent().append('<div class="pre"></div>');            $('.pre').load('exercises-content.html #' + letter_id , function(response, status, xhr){                if(status == 'error'){                    $('#dictionary').html('Sorry, but an error occurred: ' + xhr.status)                        .append(xhr.responseText);                }});    });    // 鼠标离开提示消失    $('h3').mouseleave(function () {        $(this).next().remove();    });

最后一个url已经失效，大概思路是先看url内容，然后构建用于填充#dictionary的html然后添加到load事件中