前端基础 -JQuery之 相关事件

JQuery 事件 jquery事件绑定：

• js方式： 1通过标签的事件属性进行绑定 2.获取对象

    		对象.事件属性 = function(){
    			函数体
    		}
  

• jquery方式： 获取jquery对象

    	jquery对象.事件方法(function(){
    		函数体
    	})
  

• jquery事件： submit() clcik() focus() blur() change()

案例：

效果图：

代码：

	
		
		
		常见事件
		
		
			#e02 {
				border: 1px solid #000000;
				height: 200px;
				width: 200px;
			}
		
		
		
		
		
			$(document).ready(function() {
				$("#e01").blur(function() {
					$("#textMsg").html("文本框失去焦点：blur");
				}).focus(function() {
					$("#textMsg").html("文本框获得焦点：focus");
				}).keydown(function() {
					$("#textMsg").append("键盘按下：keydown");
				}).keypress(function() {
					$("#textMsg").append("键盘按：keypress");
				}).keyup(function() {
					$("#textMsg").append("键盘弹起：keyup");
				});

				var i = 0;
				$("#e02").mouseover(function() {
					$("#divMsg").html("鼠标移上：mouseover");
				}).mousemove(function() {
					//$("#divMsg").html("鼠标移动：mousemove , " + i++ );
				}).mouseout(function() {
					$("#divMsg").html("鼠标移出：mouseout");
				}).mousedown(function() {
					$("#divMsg").html("鼠标按下：mousedown");
				}).mouseup(function() {
					$("#divMsg").html("鼠标弹起：mouseup");
				});

				$("#e03").click(function() {
					$("#buttonMsg").html("单击：click");
				}).dblclick(function() {
					$("#buttonMsg").html("双击：dblclick");
				});

			});