代码改变世界

jQuery 的事件处理

2009-01-25 18:21  闫妍  阅读(155)  评论(0)  编辑  收藏  举报

jQuery 事件处理的例子，你可以复制下面的代码，运行并对照注释，快速理解jQuery常用的事件处理方法。

 

Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <script src="jquery.js" type="text/javascript"></script>

    <style type="text/css">
        .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;
        }
    </style>

    <script type="text/javascript">

        $(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();
        });


    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
        <div id="switcher">
            <h3>
                风格更改</h3>
            <!-- 标准按钮拥有两个类风格 用空格分开 -->
            <div class="button selected" id="switcher-normal">
                标准（还原）</div>
            <div class="button" id="switcher-narrow">
                缩小宽度</div>
            <div class="button" id="switcher-large">
                字体加大</div>
        </div>
        <div id="header">
            <h2>
                博客园</h2>
            <h2 class="subtitle">
                微软程序员的大本营</h2>
            <div class="author">
                冯瑞涛</div>
        </div>
        <div class="chapter" id="chapter-preface">
            <h3 class="chapter-title">
                jQuery 一步一步从入门到精通
            </h3>
            <p>
                摘要: 随着像Silverlight·和Flex 这样的技术不断的成熟，丰富的Web 应用程序已经不简单的局限在DHtml级别上的一些脚本动态。Ajax更是昙花一现成为了一项再普通不过的“小把戏”，虽然RIA的下一个发展方向已经很明朗，但现在（至少是近几年）“呆板”的HTML依然是无法取代的，我们依然要使用HTML，CSS，Javascript。
                那么我下面将要开始的jQuery想必你已经非常的了解，因为对他的赞誉真是铺天盖地，如果你想了解她的介绍、入门、教程、在网上随处可见，我没有打算再重复这些文字，因为对于jQuery这样非常容易上手的js库，也许一些典型的例子就足够了。
                今天开始我将记录jQuery的一些使用技巧（虽然我还是用一步一步从入门到精通做标题），希望能对找到我文章的朋友一点帮助。</p>
        </div>
    </div>
    </form>
</body>
</html>