- 页面加载事件
页面加载事件ready(),这个我们经常用到,它相当于js中的onload() 事件,它俩的区别在于ready()只要页面的DOM结构加载后便触发,而onload()必须在页面全部元素(包括图片等)加载成功才触发。
用法:$(document).ready(function(){
//codeArea
});
简单用法:$(function(){
//codeArea
});
2.绑定事件
所谓的绑定事件就是在元素发生特定事件时让他去执行某个方法,绑定事件的方法为 bind("事件","方法");
用法:$("#btnClick").bind("click",function(){
$(this).attr("disabled","true");
});
$(this).attr("disabled","true");
});
//上面的代码就是将按钮在点击后置灰
常用的事件有——blur() 元素失去焦点 change()用户改变域的内容 click()单击事件 focus()获得焦点 load(fn)某个页面或图像加载完毕。mousedown(fn)等。
3. 切换事件
切换事件换言之就是一个元素上面绑定了多个事件,通过此事件来调度事件的执行。他有两个方法分别是hover()方法与 toggle()方法
区别:hover() 方法 只能绑定两个方法,他是这样执行的 当鼠标移入选定的元素执行第一个方法,当鼠标移出选定元素执行第二个方法。
toggle() 方法 可以绑定两个或两个以上的方法,他会挨个去执行。
hover ()用法:
$("#bindTest").hover(function(){
$(this).css("background","green");
},function (){
$(this).css("background","red");
});//鼠标划入划出颜色交替
toggle()用法:
$("#btn").toggle(
function(){
$("div").css("background-color","green");
},
function(){
$("div").css("background-color","red");
},
function(){
$("div").css("background-color","yellow");
}
);
});//给按钮绑定,点击一下换一个背景颜色
4.移除事件
绑定事件时bind(),因此移除事件就是unbind()
语法形式:
用法:$("div").click(function(){
alert("你点击了");
}); //div上有一个点击事件,点击就弹框。
$("#btn").click(function(){
$("div").unbind();//把div的事件移除
});
$(selector).unbind(event,function)
用法:$("div").click(function(){
alert("你点击了");
}); //div上有一个点击事件,点击就弹框。
$("#btn").click(function(){
$("div").unbind();//把div的事件移除
});
5.一次性事件
一次性事件换言之就是只执行一次呗。语法形式:$(selector).one(event,[data],function)
用法:
$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});//点击一下P元素字体变大,只执行一次
6.手动触发事件
所谓的手动触发事件个人理解就是自己定义事件,然后手动触发(PS:擦,这Tm不是废话么)
其语法形式:
$(selector).trigger(event,[param1,param2,...])
用法:
<pre name="code" class="plain" style="line-height: 22px;"><pre name="code" class="plain" style="color: rgb(51, 51, 51);font-size:18px; line-height: 22px;"><pre name="code" class="plain"> $("div").bind("dd",function(){
$(this).append("<b>新加的内容</b>");
}); <span style="color: rgb(255, 102, 102);">//以上代码是指给div绑定了一个追加文字的事件,事件名称我们自己定义为"dd";</span>
//任务
$("div").trigger("dd");
<span style="color: rgb(255, 0, 0);">//此处让他执行这个事件</span>
7.焦点事件
焦点事件比较简单,两个方法一个focus()一个blur();
focus()获得焦点执行,blur()失去焦点执行。
用法:
$("input").focus(function(){//获得焦点 $("input").css("background-color","#FFFFCC"); }); $("input").blur(function(){//失去焦点 $("input").css("background-color","#D6D6FF"); });
8 change改变事件
从字面就可知道方法是change()方法,它主要是在如下拉框等发生变化的时候执行此方法。
用法:
<span style="font-size:14px;"> $("#dd").change(function(){
alert("改变了");
});
</span>
九层之台,始于累土
用心 点滴 积累