1. 界面初始化事件
普通js代码是用window.onLoad 事件或者用body的onLoad属性,在jquery里取代他的是$(document).ready()函数。
window.onLoad事件彼此之间是会相互覆盖的,后面写的就会覆盖前面的事件。而ready函数却可以同时存在多个,按照先后顺序执行。如果onLoad事件和ready同时存在会怎么样呢,在jQuery1.8.2 测试结果,两种办法的事件都会执行,ready绑定的事件先执行。
有的人说ready函数会被屏蔽,可能是版本不同吧。
$(document).ready()函数可以简写成$();
http://blog.sina.com.cn/s/blog_6e437c5b0106euzi.html
2. 事件绑定,为Jquery对象绑定事件。
函数:bind(type,[data],fn)
bind()方法能够为匹配元素的某个事件绑定一个事件处理函数,这个事件可以是存在的 如click,dbclick等等,也可以是自己乱起的,不存在的,如:巴嘎雅路bagayalu,caonima,wocao等等,只不过这个时候,浏览器无法识别这个事件,需要用别的方法来激活她,或者触发她,下面稍后会说。
绑定click事件 如下:
$(function(){ $("div").bind("click",function(){ alert($(this).text()); }); $("div").click(function(){ alert("click"); }); });
在用bind绑定事件的时候,是可以向处理函数传递数据的。即第二个参数的用途。
参数值以对象的形式进行传递的。然后在处理函数中可以通过 event.data 属性值来获取该值。
$(function(){ $("div").bind("click",{aaa:"abc "},function(event){ // event为参数的名字,形参,随意取 alert(event.data.aaa+$(this).text()); }); });
绑定事件后可以用unbind([type],[data]) 方法解除绑定。
其中第一个参数表示要删除绑定的事件名,第二个参数表示删除的附带参数 --》不懂第二个怎么用
例:$("div").unbind("click");
$("div").bind("click",{aaa:"abc "},function(a){
alert(a.data.aaa+$(this).text());
});
$("div").click(function(){
alert("abc");
$("div").unbind("click");
});
jQuery还提供了另一个方法:one(type,[data],fn)。这个方法和bind用法是一样的,但是绑定函数只会执行一次。
下面开始说怎么激活自己随意定义的事件。
使用函数 trigger(type,[data])。
$(function(){ $("div").bind("wocao",function(){ alert($(this).text()+"wocao"); }); $("div").trigger("wocao"); });如上,我们自定义一个事件,界面加载完成后,会调用trigger方法来触发bind绑定的事件,所有会直接弹出消息框。
$("div").bind("me", function () { alert($(this).text()); }); $("div").bind("mouseover",function(){ $("div").trigger("me"); });这样在鼠标移过div的时候来激发自定义的事件。----有点不明白,我们把事件的处理直接写在mouseover的事件处理函数里就可以了,干嘛非要这么麻烦,菜鸟啊,不懂其深意,求指教。
在下面这个示例中,每当单击按钮一次,则将会触发trigger()方法绑定的focus 事件,同时浏览器默认的 focus 事件也将被触发一次,则“<span>单击一次!</span>”HTML 源代码被增加两次。
<input type="text" value=""/> <button id="ok">ok</button> <script language="javascript" type="text/javascript"> $("input").focus(function(){ $("<span>单击一次!</span>").appendTo("body"); }); $("#ok").click(function(){ $("input").trigger("focus"); }); </script>
$("#ok").click(function(){ $("input").triggerHandler("focus"); });
或许是被点击对象本身含有这个事件的时候,浏览器才会默认调用之。