事件绑定/合成

初始化文件：

<div id="panel">
    <h5 class="head">什么是jQuery?</h5>
    <div class="content">
        jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作 DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
    </div>
</div>

1、2为鼠标移进、移出 ，3、4为鼠标按下

1、$(function(){
    $("#panel h5.head").mouseover (function(){
        $(this).next().show();
    });
    $("#panel h5.head").mouseout (function(){
         $(this).next().hide();
    })
})


2、$(function(){
    $("#panel h5.head").hover (function(){
        $(this).next().show();
    },function(){
        $(this).next().hide();  
    })
})


3、$(function(){
    $("#panel h5.head").toggle (function(){
            $(this).next().show(); /带时间的 show(600);
    },function(){
            $(this).next().hide();/带时间的 hide(600);
    })
})

fade淡入、淡出

$(this).next().fadeIn();
$(this).next().fadeOut();

slide

$(this).next().slideUp();
$(this).next().slideDown();

animate1

$(this).animate({left: "500px",height:"200px"}, 3000);//边运动边变化

$(this).animate({left: "500px"}, 3000)
                .animate({height: "200px"}, 3000);//运动完再变化

animate2

$(function(){
        $("#panel").css("opacity", "0.5");//设置不透明度
        $("#panel").click(function(){
              $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
                     .animate({top: "200px" , width :"200px"}, 3000 )
                     .fadeOut("slow");
        });
    });

4、$(function(){
    $("#panel h5.head") .toggle (function(){
            $(this).next(). toggle();
    },function(){
            $(this).next(). toggle();
    })
})

事件对象属性：

$("input").keyup(function(e){
        alert(e.which);
    })

其他keyup的e的相关属性：e.metaKey +" "+e.ctrlKey


$("a").mousedown(function(e){
        alert(e.which)  // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
        return false;//阻止链接跳转
    })