jQuery基础教程-第3章练习

03.js

$(document).ready(function(){
    //Answer 1
    $('div.author').click(function(event){
        $('#header div').removeClass().addClass('selected');
    });

    //Answer 2
    $('div.chapter').find('h3').dblclick(function(event){
        $(event.target).parent().find('p').toggleClass('hidden');
    });

    //Answer 3
    // Allow the style switcher to expand and collapse.
    var toggleSwitcher = function(event) {
        if (!$(event.target).is('button')) {
            $('#switcher button').toggleClass('hidden');
        }
    };

    // The setBodyClass() function changes the page style.
    // The style switcher state is also updated.
    var setBodyClass = function(className) {
        $('body').removeClass().addClass(className);

        $('#switcher button').removeClass('selected');
        $('#switcher-' + className).addClass('selected');

        $('#switcher').unbind('click', toggleSwitcher);

        if (className == 'default') {
            $('#switcher').bind('click', toggleSwitcher);
        }
    };


    $(document).keyup(function(event){
        if(event.keyCode == 39){
            //console.log();
            var curBodyClass=$('body').attr('class');
            switch(curBodyClass)
            {
                case 'default':
                    setBodyClass('narrow');
                    break;
                case 'narrow':
                    setBodyClass('large');
                    break;
                case 'large':
                    setBodyClass('default');
                    break;
                default:
                    setBodyClass('default');
            }
        }
    });

    //Answer 4
    $('p').mousemove(function(e){
        console.log("mouseXY:"+ e.pageX+","+ e.pageY);
    });

    //Answer 5
    $(document).mousedown(function(e){
        $('p').addClass('hidden');
    });

    $(document).mouseup(function(e){
        $('p').removeClass('hidden');
    });
});