代码改变世界

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>