jQuery 事件处理的例子，理解jQuery常用的事件处理方法。

    test-jquery
   
   
        .poem
        {
            margin: 0 5em;
        }
        .chapter
        {
            margin: 1em;
        }
        #switcher
        {
            float: right;
            background-color: #ddd;
            border: 1px solid #000;
            margin: 10px;
            padding: 10px;
            font-size: .9em;
        }
        #switcher h3
        {
            margin: 0;
        }
        /*  按钮类 */#switcher .button
        {
            width: 100px;
            float: left;
            text-align: center;
            margin: 10px;
            padding: 10px;
            background-color: #fff;
            border-top: 3px solid #888;
            border-left: 3px solid #888;
            border-bottom: 3px solid #444;
            border-right: 3px solid #444;
        }
        #header
        {
            clear: both;
        }
        body.large #container .chapter
        {
            font-size: 1.5em;
        }
        body.narrow #container .chapter
        {
            width: 400px;
        }
        .selected
        {
            font-weight: bold;
        }
        .hidden
        {
            display: none;
        }
        #switcher .hover
        {
            cursor: pointer;
            background-color: #afa;
        }
   
   

        $(document).ready(function() {
            //#switcher .button 和上面的Style对应，这句话的意思是为每一个按钮类都绑定单击事件
            $('#switcher .button').click(function(event) {
                $('body').removeClass();
                if (this.id == 'switcher-narrow') {
                    $('body').addClass('narrow');
                }
                else if (this.id == 'switcher-large') {
                    $('body').addClass('large');
                }
                $('#switcher .button').removeClass('selected');
                $(this).addClass('selected');
                //阻止冒泡
                event.stopPropagation();
               
            });
        });

        $(document).ready(function() {
            //鼠标移入和移出响应hover自定义方法有两个参数，分别是移入和移出时所对应的响应方法
            $('#switcher .button').hover(function() {
                $(this).addClass('hover');
            }, function() {
                $(this).removeClass('hover');
            });
        });
        //隐藏按钮和移入移出实现
        $(document).ready(function() {
            //定义一个方法名字，方便多次调用
            var toggleStyleSwitcher = function() {
                //toggleClass()如果存在类则删除，不存在则添加
                $('#switcher .button').toggleClass('hidden');
            };

            //注册单击事件的行为
            $('#switcher').click(toggleStyleSwitcher);

            //toggle方法会交替操作参数1和参数2
            $('#switcher').toggle(function() {
                $('#switcher .button').addClass('hidden'); //隐藏所有按钮，因为jquery有迭代能力所有可以使所有button有效
            },
            function() {
                $('#switcher .button').removeClass('hidden'); //去除所有按钮的隐藏css
            })

            //下面的两段是演示如何注册和移出dom元素上的事件
            //移除单击事件的行为
            $('#switcher-narrow, #switcher-large').click(function() {
                $('#switcher').unbind('click', toggleStyleSwitcher);
                //#switcher 此时已经没有了单击的响应方法
               
            });

            //注册单击事件的行为，这个时候再点击#switcher才能好使
            $('#switcher-normal').click(function() {
                $('#switcher').click(toggleStyleSwitcher);
            });
        });
        //模拟Switcher被单击
        $(document).ready(function() {
            $('#switcher').click();
        });
   


   
   

您可能感兴趣的文章: