JQuery 事件及运用

//ready()  onLoad() 加载完成时执行

$(document).ready(function(){程序员的代码});//DOM结构加载后就触发

$(document).onLoad(function(){程序员的代码});//页面全部元素加载成功后才触发

一般简写为$(function(){程序员的代码});

 

//bind()方法绑定事件

$("#btn").bind("click mouseout",function()

{

  $(this).attr("disabled":"true");

}); //为id为btn的按钮绑定了click 和mouseout事件 当鼠标点击或移出是按钮将不可用   绑定多个事件用空格隔开

 

//hover切换事件

$("div").hover(function(){

$(this).css("color","red");

},

function(){

$(this).css("color","green");

}); //鼠标移入div的时候div的前景色是red  鼠标离开div的时候div的前景色变成green

 

//toggle()方法为click事件绑定多个函数 ~~~JQuery版本1.8.2支持,1.9.0之后就不支持了

$("btn").toggle(function(){

$(this).value = "哈哈哈";

},function(){

$(this).value="嘿嘿嘿";

});//为btn的click事件注册了两个函数 第一次点击的时候显示哈哈哈，第二次点击的时候显示嘿嘿嘿，第三次点击的时候显示哈哈哈  ....反复下去....

 

//unbind()方法移除事件

$("btn").unbind(" click dbclick");//把id为btn的按钮的click dbclick事件移除掉 多个事件用空格分隔开

 

//one()方法执行一次绑定事件

$("#btn").one("click",function(){

$(this).value("我只能被点击一次");

});//one方法注册的事件只能执行一次,执行一次后就不会执行了

 

//trigger()方法手动调用指定的事件

$(function(){

$("div").bind("hahaha",function(){

$(this).css("color","red");

});

$("div").tigger("hahaha"); //手动调用上面绑定给div的hahaha事件 把div的前景色设置为red

});

 

//文本框的focus事件(获得焦点)  blur事件(失去焦点)

$("txtid").bind("focus",function(){

$(this).val("获得了焦点");

});

$("txtid").bind("blur",function(){

$(this).val("失去了焦点");

});

 

//下拉列表的change事件

$("#selectid").bind("change",function(){

     $("#divid").html("你选择的是："+$(this).val());

}); //将当前选中的下拉列表的元素显示在id为divid的div中