jQuery笔记$("2")——jQuery事件和动画

2.1事件编写

$(function(){
    //编写代码
    })

2.2事件绑定

$(function(){
    $("#a h1.head").bind("click",function(){
        $(this).next().show();
    })
})

2.3合成事件

2.3.1 hover()
$(function(){
    $("#a h1.head").hover(function(){
        $(this).next.show();
    },function(){
        $(this).next.hide();
    })
});
2.3.2 toggle()
$(function(){
    $("#a h1.head").toggle(function(){
        $(this).next().toggle(); 
    },function(){
        $(this).next().toggle();
    })
});

2.4阻止默认动作

$(function(){
   $("#sub").bind("click",function(event){
       var username = $("#username").val();  //获取元素的值
        if(username==""){     //判断值是否为空
	  $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
	     return false;
	}
   })
})

2.5移除事件

$(function(){
    $('#btn').bind("click", myFun1 = function(){
        $('#test').append("<p>我的绑定函数1</p>");
    }).bind("click", myFun2 = function(){
        $('#test').append("<p>我的绑定函数2</p>");
    }).bind("click", myFun3 = function(){
        $('#test').append("<p>我的绑定函数3</p>");
    });
        $('#delTwo').click(function(){
            $('#btn').unbind("click",myFun2);
    });
})

2.6 fadeIn()和fadeOut通过改变透明度

$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next("div.content").fadeOut();
    },function(){
        $(this).next("div.content").fadeIn();
    })
})

2.7 slideUp()和slideDown()通过改变高度

$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next("div.content").slideUp();
    },function(){
        $(this).next("div.content").slideDown();
    })
})