- jquery标准的绑定方式
jq对象.事件方法(回调函数);
表单对象.submit(function(){})
回调函数没有返回值或者返回true,则表单提交
返回flase则表单不提交
如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。
表单对象.submit();//让表单提交
例子
$("#name").mouseover(function () {
alert("鼠标来了...")
}).mouseout(function () {
alert("鼠标走了...")
})
- on绑定事件/off解除绑定
jq对象.on(“事件名称”,回调函数)
jq对象.off(“事件名称”)
如果off方法不传递任何参数,则将组件上的所有事件全部解绑
例子
$("#btn").on("click",function () {
alert("我被点击了。。。")
}) ;
- 事件切换:toggle
jq对象.toggle(fn1,fn2…)
当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2.....
注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
例子
$("#btn").toggle(function () {
//改变div背景色backgroundColor 颜色为 green
$("#myDiv").css("backgroundColor","green");
},function () {
//改变div背景色backgroundColor 颜色为 pink
$("#myDiv").css("backgroundColor","pink");
});
});
插件:增强JQuery的功能
实现方式:
- $.fn.extend(object)
自定义一个JQuery对象都可以用的方法
添加2个方法 check() 选中所有复选框,uncheck() 取消选中所有复选框
//1.定义jqeury的对象插件
$.fn.extend({
//定义了一个check()方法。所有的jq对象都可以调用该方法
check:function () {
//this:调用该方法的jq对象
this.prop("checked",true);
},
uncheck:function () {
this.prop("checked",false);
}
});
- $.extend(object)
自定义一个全局方法:可以直接$.方法也可以$(#id).方法
$.extend({
max:function (a,b) {
//返回两数中的较大值
return a >= b ? a:b;
},
min:function (a,b) {
//返回两数中的较小值
return a <= b ? a:b;
}
});
//调用全局方法
var max = $.max(4,3);
//alert(max);
var min = $.min(1,2);
alert(min);