笔记5，jQuery中的事件

  jQuery的事件是对JavaScript事件的封装，常用的事件分类如下

    基础事件

        window事件

        鼠标事件

        键盘事件

        表单事件

    复合事件是多个事件的组合

        鼠标光标悬停

        鼠标连续点击

1，基础事件

    鼠标事件

    

    <script type="text/javascript">

        $(document).ready(function() {

               $("#nav li").mouseover(function() {     //当鼠标移过#nav li元素时

                    $(this). addClass("heightlight");        //为鼠标所在li元素添加样式

               });

               $("#nav li").mouseout(function() {       //当鼠标移出#nav li元素时

                    $(this).removeClass();   //移除鼠标所在li元素的全部样式

               });

            });

</script>

    键盘事件

    

<script type="text/javascript">

    $(document).ready(function () {

            $("[type=password]").keyup(function () {

                    $("#events").append(" keyup");

            }).keydown(function (e) {

                    $("#events").append(" keydown");

            }).keypress(function () {

                    $("#events").append(" keypress");

        });

        $(document).keydown(function (event) {

                if (event.keyCode == "13") {//按回车键

                    alert("确认要提交么？");

                }

        });

    });

</script>

    表单事件

    

<script type="text/javascript">

        $(document).ready(function () {

            $("[name=member]").focus(function(){

                 $(this).addClass("input_focus");

            });

        $("[name=member]").blur(function(){

             $(this).removeClass("input_focus");

           });

        });

</script>

2，绑定事件

    除了使用事件名绑定事件外，还可以使用bind()方法

    $("input[name=event_1]").bind("click",function() {  

          $("p").css("background-color","#F30"); }

    );

    bind()方法还可以同时绑定多个事件

    $("input[name=event_1]").bind({

        mouseover: function () {

            $("ul").css("display", "none");

        },

        mouseout: function () {

            $("ul").css("display", "block");

        }

      }); 

    移除绑定事件

    函数： unbind([type],[fn])  type事件类型，如：blur、click等基础事件还可以自定义事件   fn处理函数

    当unbind()不带参数时，表示移除所绑定的全部事件

    鼠标光标悬停事件

        hover()方法相当于mouseover与mouseout事件的组合

    $("#myaccound").hover(function(){        

            $("#menu_1").css("display","block");    

         },     

        function(){       

             $("#menu_1").css("display","none");    

         }

    );

    鼠标连续点击事件

        toggle()方法用于模拟鼠标连续click事件

        $("body").toggle(

            function () { },  //第一次点击

            function () { },  //第二次点击

            function () { }   //第三次点击

        );

  显示隐藏元素

    $(".tipsbox").show("slow"); 以较慢的速度显示元素

    显示速度可以取如下值：毫秒（如1000）、slow、normal、fast

切换元素可见状态

    toggle()除了可以模拟鼠标的连续单击事件外，还能用于切换元素的可见状态

    $("li:gt(5):not(:last)").toggle();

淡入淡出效果

    fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果

    $("input[name=fadein_btn]").click(function(){    

           $("img").fadeIn("slow"); }以较慢的速度淡入

    );

   $("input[name=fadeout_btn]").click(function(){      

          $("img").fadeOut(1000); }以1000毫秒的速度淡出

    );

改变元素的高度

        slideDown() 可以使元素逐步延伸显示，slideUp()则使元素逐步缩短直至隐藏

        $("h2").click(function(){  

                $(".txt").slideUp("slow");        

                $(".txt").slideDown("slow");

        });

tab切换

<script type="text/javascript">

$(document).ready(function(){

     $("#tabs .tabs-top ul li").click(function(){ //点击事件

          $(this).addClass("choosed"); //给本次点击的加一个显示的样式

          $(this).siblings("li").removeClass("choosed"); //除了本次点击的其他里面的li移除显示样式

          $("#tabs .tabs-body .content").hide(); //隐藏所以的内容

          $("#tabs .tabs-body .content").eq($(this).index()).show();

        //显示本次点击第几个内容($(this).index()这个事点击的序号，内容也是显示第几个)  

     });

  });

</script>