jQuery中的时间和动画

1、加载DOM：以浏览器加载文档为例，在页面加载完成后，浏览器会通过JavaScript为DOM事件添加事件，在jQuery红使用$(document).ready()方法；

2、执行时机：jQuery中的$(document).ready()方法注册的事件处理程序在DOM完全就绪时就可以被调用；

3、jQuery中的$(document).ready()方法注册的事件，只要DOM完全就绪时就会被调用；

4、避免方法：为onload事件绑定一个处理函数

$(window).load(function() {
    //编写代码
}

5、多次使用：

function one() {
    alert("one");
}
function two() {
    alert("two");
}

$(document).ready(function() {
    one();
})
$(document).ready(function() {
    two();
}

6、简写方式：$(doxument)可以简写成$()。因为当$()没有参数时，默认参数就是“document”；

7、事件绑定：在文档加载完成后，如果打算为元素绑定事件来完成某些操作，可以使用bind()方法来对匹配元素来进行特定事件的绑定；

8、bind()有3个参数：（1）事件类型，可以使自定义名称；（2）可选参数，作为event.data属性值传递给事件对象的额外数据对象；（3）用来绑定的处理函数；

9、基本效果：

HTML代码：
<div id="panel">
    <h5 class="head">什么是jQuery？</h5>
    <div class="content">
      jQuery是一个优秀的JavaScript库。
    </div>
</div>


javascript代码：
$(function() {
    $("#panel h5.head").bind("click", function() {
         $(this).next().show();
    })
})

10、加强效果：

$(function() {
   $("#panel h5.head").bind("click", function() {
       var $content = $(this).next();
       if($content.is(":visible")) {
           $content.hide();
       } else {
            $content.show();
       }
   })
})

11、改变绑定事件的类型：

$(function() {
    $("#panel h5.head").bind("mouseover", function() {
        $(this).next().show();
    }).bind("mouseover", function() {
        $(this).next().hide();
    })
})

12、简写绑定时间：

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

13、合成事件：有两个，hover()方法和toggle()方法；

14、hover()方法：

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

15、toogle方法：

$(function() {
    $("#panel h5.head").toggle(function() {
       $(this).next().show();
    }.function() {
       $(this).next().hide();
    })
});

16、再次加强事件：

$(function() {
$("#panel h5.head").toggle(function() {
$(this).addClass("highligt");
$(this).next().show();
}.function() {
$(this).removeClass("highhligt");
$(this).next().hide();
});
});

17、事件冒泡：在页面上可以有多个事件，也可以多个元素响应通一个事件：

HTML代码：
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
</body>




JavaScript代码：
$(function() {
	$('span').bind("click", function() {
		var txt = $('#msg').html() + "<p>内层span元素被单击.</p>";
		$('#msg').html(txt);
	})
    $('#content').bind("click", function() {
		var txt = $('#msg').html() + "<p>外层div元素被单击.</p>";
		$('#msg').html(txt);
	})
	$("body").bind("click", function() {
		var txt = $('#msg').html() + "<p>body元素被单击</p>.";
		$('#msg').html(txt);
	});
})

18、事件冒泡引发的问题：本来只想触发最内层元素的click事件，然后这个元素外层的元素也会被触发；

19、触发自定义事件：

为元素绑定一个“myClick”事件：
$('#btn').bind("myClick", function() {
$(‘#test’).append("<p>我的自定义事件.</p>");
})


想要触发：
$('#btn').trigger("myClick")

还有一些明天补充，今天太困了

墨冥

jQuery中的时间和动画