一:DOM的加载
$(document).ready(function(){
…
});
$().ready(function(){
…
});
$(function(){
…
});
三种加载有相同的功能。
$(window).load(function(){
…
})和
Window.onload=function(){
…
}具有相同的功能。
这两种加载方式和上面三种加载方式区别在于:
第一类加载方式:DOM就绪就会执行,并不考虑关联文件的加载情况。
第二类加载方式:DOM对象的所有内容全部加载才会执行。
二:事件绑定
bind(type, [data], fn):
为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。
这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false。
$("p").bind("click", function(){
alert( $(this).text() );
});
function handler(event) {
alert(event.data.foo);
};
$("p").bind("click", {foo: "bar"}, handler);
三:简单事件绑定
有些事件经常被用到,jquery提供了简写的方法,它和bind()具有相同的效果和类似的使用方法。惟一的区别是减少了代码量。
$("p").blur( function () { alert("Hello World!"); } );
四:事件的切换
hover(over, out)
当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
toggle(fn, fn2, [fn3, fn4, ...])
每次点击后依次调用函数。
如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数,如果有更多函数,则再次触发,直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。
可以使用unbind("click")来删除。
$("li").toggle(
function () {
$(this).css({"list-style-type":"disc", "color":"blue"});
},
function () {
$(this).css({"list-style-type":"disc", "color":"red"});
},
function () {
$(this).css({"list-style-type":"", "color":""});
}
);
五:事件冒泡
多个元素可以响应同一事件。假设有两个元素,一个嵌套在另一个当中,并且绑定了同一事件。那个点击了最里层的元素以后,不但里层元素触发事件,外层元素也会触发事件。所谓“冒泡”,是指事件会按照DOM的层次结构从内向外,直至顶端的依次触发。
事件对象
在jquery中,只需为函数增加一个参数就可以使用事件对象。
事件对象的属性:
Event.type
Event.preventDefault()
Event.stopPropagation()
Event.target()
Event.relatedTarget()
Event.pageX(),event.pageY();
…
事件对象的用处?
1:停止事件冒泡
$("form").bind("submit", function(event){
event.stopPropagation();
});
2:阻止默认行为
$("form").bind("submit", function(event){
event.preventDefault();
});
六:移除事件
一个元素可以绑定多个事件,多个元素可以绑定同一事件。
unbind([type], [data])
bind()的反向操作,从每一个匹配的元素中删除绑定的事件。
如果没有参数,则删除所有绑定的事件。
你可以将你用bind()注册的自定义事件取消绑定。
如果提供了事件类型作为参数,则只删除该类型的绑定事件。
如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除。
七:模拟事件
trigger(type, [data])
在每一个匹配的元素上触发某类事件。
这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发一个'submit',则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false。
你也可以触发由bind()注册的自定义事件而不限于浏览器默认事件。
事件处理函数会收到一个修复的(规范化的)事件对象,但这个对象没有特定浏览器才有的属性,比如keyCode。
jQuery也支持 命名空间事件。这允许你触发或者解除绑定一组特定的事件处理函数,而无需一一个指定。你可以在事件类型后面加上感叹号 ! 来只触发那些没有命名空间的事件处理函数。